使用Transition和Tween类-II[高级]

作者: egoldy

性质: 翻译

阅读次数: 10128

发表时间: 2005-02-17 14:32:54


声明:本文来自macromedia.版权归macromedia所有,原文链接:http://www.macromedia.com/devnet/mx/flash/articles/tweening.html
原作者:Jen deHaan



如需转载本站中文教程,请联系本站.谢谢合作

接上篇
About Continuing Animations(关于继续动画)

     当你的ball_mc初始动画完成后如何让它继续动画呢,你可以至少使用两种方式来解决,第一种就是在上一篇中我们说过的使用事件处理 “onMotionFinished”来重新动画。除了这一种之外,Tween类提供了一种简单的解决方案,就是使用continueTo()方 法,continueTo()方法将通知已经tween的动画从当前位置或状态到达新的位置或状态。你可以参看下面的代码:

 

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Object = new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 3, true);
ball_tween.onMotionFinished = function() {
    ball_tween.continueTo(0, 3);
}; 


          从上面的代码看出,当ball_mc的初始的tween结束后,它又返回到了最初的原点0的位置。你可以查看一下continueTo()方法的函数定义。如下面的代码:
在Tween类中。

 

function continueTo (finish:Number, duration:Number):Void {
    /* 忽略不写 */
} 



          我们发现实际上只有Tween类的两个参数被传过来。而不是Tween类的7个参数。如下是tween类的构造函数。

 

function Tween (obj, prop, func, begin, finish, duration, useSeconds) {
    /* 忽略不写 */
} 



          综合上面的代码,在continueTo()函数中丢失的5个参数实际上使用的是之前Tween类的参数,当你在使用 continueTo()方法时,它会使用Tween类的5个参数,然后传递finish参数来调用tween类。当你的continueTo()方法中 的duration未设置任何值时,它会默认使用tween类的原有duration值。

所有的这些合在一起是什么意思呢?我们再看一下下面的代码:

 

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Object = new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 3, true);
ball_tween.onMotionFinished = function() {
     ball_tween.continueTo(0, 3);
}; 


观看演示1

         解释为开始ball_mc沿着_x方向从0以Regular.easeIn方式在3秒之内移动到300的位置,当动画结束 后,onMotionFinished事件将被触发,调用continueTo()方法。它将告诉目标(ball_mc)继续运动从当前300的位置沿着 _x方向移动到结束位置0在3秒内,并且使用相同的easing 方式,

Creating Animations That Continue Endlessly(创建往复动画)

   你可以创建一个沿x轴方向的永不停止的往复运动,Tween类提供了这种方法并且起了一个有意思的名字yoyo();yoyo()方法在当onMotionFinished方法结束后执后,它将互换begin开始和finish结束两个参数,动画不断的重复。
如下例子:
      1.    选择新建文档,创建一个新的FLA文件,保存为yoyo.fla.
         2.    选择矩形工具在场景中创建一个矩形,无描边,添充为红色。高为整个影片的高度。宽为20像素。如下图所示:

        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();
}; 


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

观看演示2

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秒。

观看演示3

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方式,这并不意味着我们可以随便使 用。有些人认为这会降低程序的可用性,所以在你准备使用前先在单独的程序中测试,来观看是否对你现有的程序起来加强作用。从而决定是否要使用它。

观看演示4

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组件中。

观看演示5

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("http://www.flash-mx.com/images/image1.jpg", this.attachMovie("imgHolder_id", "img_mc", this.getNextHighestDepth())); 



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

观看演示6

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

服务项目_SERVICE

关于我们

万博思图(北京)信息技术有限公司,专业的flash,flex开发团队,5年经验。公司致力于互联网上的业务的开展,对于互动网站行销,互联网应用程序开发有成熟的解决方案。我们关注互联网市场动态,关注新技术,更注重在新的领域不断探索发现。
万博思图业务内容主要包括企业品牌Flash网站开发,企业形象宣传Flash设计,动画,多媒体演示,Flex企业级应用程序开发,拥有众多成功案例,欢迎来电咨询。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝阳区朝外SOHO D 座727室 邮编: 100026 EMAIL: WEBSTUDIO@WEBSTUDIO.COM.CN
电话: 010-59070059 / 010-86390986-802  手机: 13693660520 传真: 010-59070059-801
京公网安备:110108006741      京ICP备08002333号-4
王先生