使用Transition和Tween类-II

声明:本文来自macromedia.版权归macromedia所有,原文链接:
3． 选中这个矩形，按下F8将其转换为影片剪辑，并将其命名为box,同时它的注册点在左上角。
4． 仍然选择这个矩形剪辑，打开属性面板，在面板中将其命名为box_mc.同时将其x,y轴的位置均为0,以让它靠在左边上。
5． 在此层上新建一层，命名为stroke.
6． 选择矩形工具，在场景的边上绘制一个矩形，无添充色，边框色为黑色，将它的宽高分别设为影片的宽和高，在属性面板中将它的x,y位置设为0.如下所示：

7． 在最上边在新建一层，命名为action, 在第一帧上加入如下代码：

代码:

import mx.transitions.Tween; import mx.transitions.easing.*; var box_tween:Object = new Tween(box_mc, "_x", Regular.easeInOut, 0, Stage.width, 3, true); box_tween.onMotionFinished = function() { box_tween.yoyo(); };

8. 测试你的影片，你会发现矩形块从左移到右边再从右边移回到左边。往复不断。如果发现它不是很光滑，你可以修改一下影片的帧的速度，如果是12你可以将它修改为24.
9. 你可能已经发现了问题所在，当box_mc移到右边时，已经移出了边框，如果是在FLASH播放器上看问题还不是很大，但如果我们将其发布到HTML中，当box_mc移到场景边上时就会消失，修正它时，只需要将结束位置减去box_mc的宽度。如下所示代码：

代码:

import mx.transitions.Tween; import mx.transitions.easing.*; var box_tween:Object = new Tween(box_mc, "_x", Regular.easeInOut, 0, Stage.width-box_mc._width, 3, true); box_tween.onMotionFinished = function() { box_tween.yoyo(); };

现在测试你的影片，一切正常了。


About Applying Easing Methods to Version 2 Components（针对V2组件使用easing方法）

其它使用各种easing方法的方式就是应用在v2 组件上，需要注意的是你只能将easing方法用在以下几种组件上：Accordion, ComboBox, DataGrid, List, Menu 和 Tree组件，每一种组件可以接受你对easing方法的不同的定义。如Accordion, ComboBox and Tree 组件允许你选择一种easing 方法用于响应打开和关闭操作。与些相关menu组件只允许定义动画所需的毫秒数。
Applying Easing Methods to an Accordion Component(应用easing到Accordion Component组件)

这个例子将展示如何在FLASH文档中加入accordion组件，加入一些子栏目，以及如何改变默认的easing方法和duration持续时间。
根据下面的步骤指定不同的easing方法给accordion组件
1.创建一个新的文档，并保存为accordion.fla
2.从组件库面板中拖动一个accordion组件至场景中在属性面板中将其命名为my_acc
3.在上面新增一层，并命名为action.
4.在第一帧上加入如下代码：

代码:

import mx.transitions.easing.*; my_acc.createChild(mx.core.View, "studio_view", {label:"Studio"}); my_acc.createChild(mx.core.View, "dreamweaver_view", {label:"Dreamweaver"}); my_acc.createChild(mx.core.View, "flash_view", {label:"Flash"}); my_acc.createChild(mx.core.View, "coldfusion_view", {label:"ColdFusion"}); my_acc.createChild(mx.core.View, "contribute_view", {label:"Contribute"}); my_acc.setStyle("openEasing", Bounce.easeOut); my_acc.setStyle("openDuration", 3500);

上面的代码，我们导入了easing类（import mx.transitions.easing.*）所以可以让你在代码中直接使用Bounce.easeOut而不用使用全名mx.transitions.easing.Bounce.easeOut。接下来加入了五个子面板（Studio, Dreamweaver, Flash, ColdFusion, 和 Contribute）,最后两行是将默认的easing方法 设为Bounce.easeOut.并且设置动画的持续时间为3500毫秒。
5，保存后，并测试影片。
6，当击每个标题，查看切换的效果，如果你认为效果的速度较慢，你可以更改openDuration后面的我值，将其减小，默认值为250毫秒，你也可以改为1/4秒。


Applying Easing Methods to the ComboBox（应用easing到comboBox组件）

处理默认的comboBox组件的easing方式有些类似于上面的accordion组件。根据下面的代码你可以动态的增加组件到场景中。如下例：
1． 新建文件，另存为combobox.fla
2． 从组件库中拖动combobox组件至场景中，然后再删除它。目的是让它的实例存在库中。
3． 新建一层，并命名为action.并确保这一层在layer1的上方。
4． 将下面的代码加入到第一帧上。如下：

代码:

import mx.transitions.easing.*; this.createClassObject(mx.controls.ComboBox, "my_cb", this.getNextHighestDepth()); var product_array:Array = new Array("Studio", "Dreamweaver", "Flash", "ColdFusion", "Contribute", "Breeze", "Director", "Flex"); my_cb.dataProvider = product_array; my_cb.setSize(140, 22); my_cb.setStyle("openDuration", 2000); my_cb.setStyle("openEasing", Elastic.easeOut);

上面代码中第二行的this指的是影片的主时间轴，当你导入了easing类（mx.transitions.easing.*）之后，createClassObject（）方法将创建comboBox组件实例，这行代码将在运行时动态创建comboBox实例，并且给它命名为my_cb.
下一步创建一个数组，命名为product_array,它包含了一系例的mm产品，你将用这个数组在下面的代码中设置dataprovidor属性，然后你可以使用setSize()方法来设置组件实例的大小，设置openDuration为2000豪秒，并改变easing方式为Elastic.easeOut.
*注意，我们仍要代码开始时导入easing类，以尽量使用简短的代码，也不用使用很长的代码如：mx.trasitions.easing.Elastic.easeOut.
5． 存你的影片，然后测试你的影片。
6． 在影片中单击你的combobox来查看我们指定的动画下拉动画方式。
注意：在上面的例子中我们已经看到可以在According和combobox组件中使用特定的easing方式，这并不意味着我们可以随便使用。有些人认为这会降低程序的可用性，所以在你准备使用前先在单独的程序中测试，来观看是否对你现有的程序起来加强作用。从而决定是否要使用它。


Animating DateGrid(动画DataGrid组件)
Flashmx 2004 pro可以允许你在一些组件的选择中使用动画效果（例如在DataGrid,List,Tree,ComboBox中）.尽管这些动作很微少，但在一些案例中可以很漂亮的控制一些小的详细资料或是为了加速动画。
例如：根据下面的步骤来做：
1． 创建一个新的文档，并将其命名为datagrid.fla.
2． 从库中拖动dataGrid组件至场景中，并将其实例名命名为my_dg.
3． 新增一层并命名为action，确保这一层在最上方。
4． 在action层上的第一帧上加入如下代码：

代码:

import mx.transitions.easing.*; my_dg.setSize(320, 240); my_dg.addColumn("product"); my_dg.getColumnAt(0).width = 304; my_dg.rowHeight = 60; my_dg.addItem({number:'Studio'}); my_dg.addItem({number:'Dreamweaver'}); my_dg.addItem({number:'Flash'}); my_dg.setStyle("selectionEasing", Elastic.easeInOut); my_dg.setStyle("selectionDuration", 1000);

首先是导入easing类，然后使用setSize()方法设置组件实例的大小为320像素宽，240像素高，接下来你创建了一个新的列，命名为”product”,并将列的宽度设为304.因为datagrid的滚动条的宽度为16所以剩下的product的列宽为304.下一步设置行高为60.以更方便观看easing效果。
下面的三行代码为dataGrid加入条目，可用来点击，接下来的selectionEasing,selectionDuration,Elastic.easeInOut,使用setStyle来设置，将selectionDuration设为1000豪秒是原来200的五倍。
5． 保存并测试你的影片，你会发现在选择时的动画效果，因为我们设定了selectionDuration为1000豪秒所以可以很清楚的看到效果。
注意： selectionEasing和selectionDuration可以同样用在List,ComboBox,Tree组件中。


Combining the Transition and Tween Classes（组合Transition和Tween类）

当我们组合使用transition和Tween类时可以生成一些有趣的效果。你可以使用Transition类来沿x轴移动一个movieClip.而同时你可以使Tween类来设置些movieclip的_alpha属性。每个类都可以使用不同的easing方式，这意味着你可以创建多种不同的组合效果。你还可以使用Tween类中的continueTo()或是yoyo()方法，或是使用onMotionFinished事件来创建更逼真的效果。

在下面的例子你将组合使用Transition类和Tween类来动画一个动态载入的movieClip，当载入完成后淡出在场景中。如下：

1． 创建一个新的文档，并命名为combinaction.fla.
2． 选择插入---新建一个movieClip元件，并将其命名为imgHolder.然后单击ok.
3． 返回到主时间轴。
4． 找开库，在库中右击imgHolder.选择链接。
5． 在面板中复选为动作脚本导出，在上面的名称中设定id名为：imgHolder_id.确定。
6． 在主场景中新增一层，并将其命为action.
7． 在第一帧上加入如下代码：

代码:

import mx.transitions.*; import mx.transitions.easing.*; var mcl_obj:Object = new Object(); mcl_obj.onLoadInit = function(target_mc:MovieClip) { new Tween(target_mc, "_alpha", Strong.easeIn, 0, 100, 2, true); TransitionManager.start(target_mc, {type:Fly, direction:0, duration:3, easing:Elastic.easeInOut, startPoint:6, param2:empty}); }; var my_mcl:MovieClipLoader = new MovieClipLoader(); my_mcl.addListener(mcl_obj); my_mcl.loadClip("/uploads/allimg/c090929/125420N394P-A009.jpg", this.attachMovie("imgHolder_id", "img_mc", this.getNextHighestDepth()));

上面的代码可以分为三个部分。
第一部导入transition类包和easing类，上面提到过简化我们的代码。
第二部分脚本为movieClipLoader类创建一个侦听器对象，当目标载入到movieClipLoader实例中后，onLoadInit事件就会被触发，执行第二段代码。调用transition类和Tween类。
第三部分脚本创建一个movieClipLoader实例，并指定给在第二段中创建的侦听器对象my_obj,然后是载入jpg图片到动态贴加到场景中的movieClip里。
8． 保存你的影片，测试观看效果。


总结：这篇教程展示的是使用Transition类和Tween类是多么的简单，而不用去研究的复杂的数学或物理公式，现在你可以以最少的工作量完成你想要动画效果，留下更多的时间让我们边看电视边吃着土豆条，回忆美好的往事再或是去shopping……:).