flash中使用Transition和Tween类

在flash中使用Transition和Tween类-I

作者:Jen deHaan 翻译:egoldy | 来源:http://www.macromedia.com | 浏览次数: <script src="http://www.flash5566.com/Click.asp?NewsID=075811441966851" type="text/javascript"></script> 300 | 2007-5-8 11:43:06

如需转载本站中文教程,请联系本站.谢谢合作. 在FLASHMX2004中使用Tween类和Transition类      (有许多朋友经常下载一些外部的tween类来使用,如果你的FLA始终在本地编辑还可以,但如果换到其它地方,或者说换到另一台电脑上可能麻烦就来了,需要将类拷到本地上来使用,其实我们不用想尽办法去找其它的Tween类,MM自带的类一样很灵的.这只是个人的看法)      当你安装了FLASHMX2004,你就已经获得了两个功能强大的类：Tween类和Transition类，本文将向你展示如果这两个类是多么的容易，即使你不对AS不是很熟练。你将使用这些类配合Movieclip和V2组件很轻松的将动画加入到你的SWF中。 也许你已经开始在还不是很了解它的情况下使用它了。例如你要在FLASHMXPROKH创建一个演示或是表单程序，你可能选择使用行为做为两部分内容之间的切换，非常类似于在POWERPOINT中所做的演示。但你可以使用Tween和Transition类将些功能加入到你的屏幕演示当中。     你还可以使用Tween和Transition类创建除了屏幕演示之外的令人激动的程序。例如你可以使用这些类配合v2 组件，或是简单的MOVIECLIP，如果你想要改变一个ComboBox组件的动画方式，你可以在菜单打开时使用Transition类加入easing缓动，你也可以使用Tween和Transition类来制作你的菜单，而取代在时间线上制作的运动渐变和自定义的复杂代码。 Adding Tweens and Transitions to a File(在文件中加入Tween和Transitions类)      预置的Tween和Transitions类可以通过简单的代码加入到你的影片的局部，在FLASH的创作环境中使用这些预置的类作为基于屏幕程序的过渡形式。要创建一个幻灯片演示或是表单程序，你可以选择行为在两个幻灯片之间加入不同的过渡，看一下面这些过渡，根据以下步骤: 1.    打开flashmx2004 2.    选择新建-FLASH幻灯片演示文稿 3.    选择窗口---开发面板----行为(shift+f3)在面板上按下“+”号按钮。 4.    在弹出的菜单中选择屏幕，然后选择子菜单中的转变。出现一个窗口。     FLASH提供了10种之多不同的转变形式，你可以通过easing method缓动方式和几个相关的参数的去定义它。缓动方式是指在运动中的加速和减速。例如一个小球在刚始运动阶断是以加速的形式，在接近停止到停止是以减速形式运动的。关于加速和减速这里会有许多公式。从而也就有多种不同的缓动方式，缓动方式可使你的动画看起来更现实。我们将在这篇文章中去讨论它。（这里字面上的easing method是指在面板中的”放松”不知汉化版的为什么译成了放松）     FLASHMX2004包括下面的这些转变方式。          光圈：运动的遮罩放大          划入/划出:水平方向运动的遮罩效果          像素溶解:使用出现和消失交替的矩形遮罩效果。          遮帘: 运动的一序列遮罩变形效果          淡入淡出: 淡入或淡出屏幕。          飞翔: 在屏幕的不同方向上滑动效果          缩放:在屏幕上放大或缩小          挤压:在当前屏幕上水平或垂直变形          旋转:施转当前屏幕。          照片:模拟照相机照相的效果。 每一种过渡都有或多或少不同的定制，应用到你的动画中。在面板中可以让你在加入动画之前进行预览，如果想查看一下应用的代码。按下面的步骤： 1．    选择“缩放”过渡 2．    将持续的秒数减为1秒 3．    将easing method设为弹性 点击确定后就会有大约15行的代码被加入到幻灯片自身。你会看相关的代码如下: 代码:   mx.transitions.TransitionManager.start(eventObj.target, {type:mx.transitions.Zoom, direction:0, duration:1, easing:mx.transitions.easing.Bounce.easeOut, param1:empty, param2:empty});   在查看代码时点击右上角的圆中有一个箭头的按钮。如下图： 这行前面的代码调用TransitionManger class类，指定带有easing:mx.transitions.easing.Bounce.easeOut这种easing method的缩放过渡，在本例中过渡被指定给选中的幻灯片，如果你想把这种效果指定给你的MOVIECLIP。可以编辑这里的ACTIONSCRIPT，很运气的是编辑这个代码是很容易的。你只要将eventObj.target换成你的MOVIECLIP名称就OK了。（我的作法是将mx.transitions.TransitionManager.start(eventObj.target, {type:mx.transitions.Zoom, direction:0, duration:1, easing:mx.transitions.easing.Bounce.easeOut, param1:empty, param2:empty}); 这一整行粘到一个新的影片中，然后建一个新的MOVIECLIP起一个名子。再将eventObj.target换成你的MC名字就OK了。是不是很酷！其它的代码你也可拿过使用这种方来使用.   Using the Transition and Tween Classes（使用transition类和Tween类）     你可以在FLASHMX2004和FLASHMX2004PRO中使用Tween和Ttransiton类将动画加入到你影片的MOVIECLIP.COMPONENTS或是在帧上.如果你不想使用Tween 和Transiton,那你需要自写去编写代码来动画你的影片剪辑.或是编辑它的ALPHA或坐标位置.如果你想加入easing method.那你的代码就会立刻变得复杂起来,然而如果你试图改变动画中的easing并且你使用了内置的tween和transition类,那么你可以选择不同的类去实现而不用去想办法解决如何来定义各种各样的公式来实现你平滑的动画.     使用Transiton类制做场景中的MOVIECLIP放大动画,需要如下步骤: 1.新建一个FLA文档. 2.选择文件----导入,导入一张图片到场景中,我们需要将它转换为MovieClip. 3.选中图片.按下F8将其转换为MovieClip.在面板将其命名为img1,确保它的类型为MovieClip.同时注意FLASH的默认注册点在左上角.如下图所示: 注意它的类型为MovieClip同时注意它的注册点(Registration)在左上角. 4.点击ok将其转换为MovieClip. 5.打开属性面板.确保这个MovieClip还处于选中状态.在属性面板中将其命名为img_mc. 6.选中主帧上的第一帧,将下面的代码加入在帧上. 代码:   mx.transitions.TransitionManager.start(img1_mc, {type:mx.transitions.Zoom, direction:0, duration:1, easing:mx.transitions.easing.Bounce.easeOut, param1:empty, param2:empty});   7,按下CTRL+ENTER测试你的影片,你会发面图片放大并代有弹性效果,如果你认为图片运动的过快可以将duration(延持)的时间增加到2或3.就像前面在幻灯片中面板的设置一样.      你可能已经注意到图片最初定位在左上角,然后向右下角放大.与之前我们在幻灯片中见到的效果不一样.如果你想让它从中心放大.你可以编辑它的注册点.如下步骤. 1.    从库中拖动位图至场景中.不与img1_mc位置重复. 2.    按下F8转换成MovieClip.将其命名为img2. 3.    点击面板上的3*3区域将注册点设置成中间.如下图如示:      转换为Movielcip并将注册点设为中点. 4,选择刚建立的Movieclip,在属性面板中将实例命名为img2_mc. 5,选择第一帧,在原有代码的上方加入如下这一行. 代码:   mx.transitions.TransitionManager.start(img2_mc, {type:mx.transitions.Zoom, direction:0, duration:1, easing:mx.transitions.easing.Bounce.easeOut, param1:empty, param2:empty});   6,测试你的影片,你会发现第二图是从中心放大的. 注意:一些过渡对注册点的位置比较敏感,改变注册点的位置,可能会在动画中带来意想不到的效果. About Easing Classes and Methods(关于easing类和方法)         在前面的例子中你使用了弹性easing类.并给movieClip加入了轻微的弹性效果.要加入弹性FLASH提供了五种之多的easing 类.   *Back:在一个或两个结束点过渡范围之外的扩展动画,类似溢出效果.   *Bounce:在一个或两个结束点过渡范围内加入回弹效果,回弹的多少决定于duration延持时间的多少.长的延持回弹的次数就相对多.   *Elistic:发生在一个或两个结束点过渡范围之外的弹性效果,弹性的力度不受duration的影响.   *Regular:在一个或两个结束点加入减速动作.这个特性可以帮你做出超速可减速的效果.   *Strong: 在一个或两个结束点加入减速动作,这个效果有些类似Regular.不同的地方在于比较明显.   *None:从开始点到结束点加入恒定的运动,没有效果. 以上六种easing class类每个又包含有三种easing method方式.    easeIn:在过渡的开始阶断产生easing效果.    easeOut:在过渡的结束阶断产生easing效果.    easeInOut:在开始和结束阶断均产生easing效果. 如果你想打开这些类进行查看,你可以在这里找到这些类: C:/ProgramFiles/Macromedia/FlashMX2004/<language>/First Run/Classes/mx/transitions/easing/ folder on Windows (assuming a default installation),或者 HD:Applications:MacromediaFlashMX2004:First Run:Classes:mx:transitions:easing folder on the Macintosh.       在前面的例子中你看到的easing class和easing method的用法是mx.transitions.easing.Bounce.easeOut.当你查看本地硬盘的目录时,注意这里面的easeOut是指包含在bounce.as中.应在easing的目录中.

在flash中使用Transition和Tween类-I

作者:Jen deHaan 翻译:egoldy | 来源:http://www.macromedia.com | 浏览次数: <script src="http://www.flash5566.com/Click.asp?NewsID=075811441966851" type="text/javascript"></script> 304 | 2007-5-8 11:43:06

About the Tween Class(关于Tween类)     Tween 类可以让你很轻松的对你的MovieClip进行移动，缩放，淡入淡出。下面的代码是从tween.as类中截取出来的。 代码:   /*  constructor for Tween class obj: reference - the object which the Tween targets      是指tween的对象，也就是目标 prop: string - name of the property (in obj) that will be affected       字符串，是指应用效果的对象属性如_x,_y,_alpha等。 begin: number - the starting value of prop       数值，对象属性的起始值 duration: number - the length of time of the motion; set to infinity if negative or omitted       数值，运动过程的时间。 useSeconds: boolean - a flag specifying whether to use seconds instead of frames            布尔值，决定使用秒数还是使用帧数值。 */ function Tween (obj, prop, func, begin, finish, duration, useSeconds) {     /* omitted to save space. */ }       假设你想让一个影片剪辑穿过场景，你可以使用帧动画在两个不同的位置上加入运动渐变。你也可能以使用onEnterFrame在其中写一些代码。或是使用setInterval在每隔一段时间内调用函数来实现。如果你使用Tween类，则你不需要上面的操作，而你同样可以编辑剪辑的x,y坐标。而且你可以很轻易的加上easing类。要实现上面的效果，你可以加入如下代码。 代码:      new mx.transitions.Tween(ball_mc, "_x", mx.transitions.easing.Elastic.easeOut, 0, 300, 3, true);         带码的前面部分也就是new mx.transitions.tween是在建立一个tween的实例，对象是ball_mc.沿着_x从0位置移动到300，在3秒钟的时间段内，而在移动过程中使用的easing 方式是mx.transitions.easing.Elastic.easeOut也就是弹性方式。     如果你在你的影片的不止一处地方要使用Tween类。那么你可以使用import关键词将其导入至影片中，而不用每次创建实例要写那么长的类名称。如下面的例子： 代码:   import mx.transitions.Tween; import mx.transitions.easing.*; new Tween(ball_mc, "_x", Elastic.easeOut, 0, 300, 3, true);        上面的代码分两步来导入。第一行用来导入mx.transitions.Tween类。第二行使用的*通配导入mx.transitions.easing类的六种方式。第二行实际上也是导入了整个类包（package）,flash 文档定义类路径的方式为“指定的类路径目录下的一个或多个类文件”在本例中类的路径如下: <Flash Install directory>/<language>/First Run/Classes/mx/transitions/easing 目录.你可能会同意我们导入整个类包比单独导入六个类要方便的多的想法。当导入后我们在使用easing时无需再输入很长的类名如mx.transitions.easing.Elastic.easeOut而只要输入Elastic.easeOut就可以了。     使用类似的代码。我们可以将_x的属性替换为_alpha来实现淡入淡出的效果。例如代码如下: 代码:   import mx.transitions.Tween; import mx.transitions.easing.*; new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true);         现在ball_mc不在移动了。而是从100透明到0在3秒内。如果你想使它的速度更快一些，可能更改持续的时间如将3改为2或是1.    除了使用秒淡入你的剪辑之外，你还可以使用一少部帧来淡入淡出你的剪辑，在Tween类中将你的持续时间duration设置为持续帧的时间而不设置成秒数，你需要设置最后一个参数。当设为true时是告诉FLASH duration做为秒来使用。当设成FALSE时是告诉flash将duration做为帧数来使用。Druation设置成将要持续多少帧完成动作。如下代码： 代码:   import mx.transitions.Tween; import mx.transitions.easing.*; new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 24, false);          上面的代码是将ball_mc淡入使用strong.easIn方式，需要的持续时间为24帧。因为后面设置为false.所以这个24只的并不是秒。    如用帧数而不使用秒数来计算持续时间会给你带来一些灵活性。但是记住使用帧的形会受到帧速度的限制，比如你的动画速度是12/秒，那么24帧就是2秒，如果你的帧速度是24/秒，那么24帧就是1秒，所以当你在未修改代码时修改了你的帧速度，你需要注意你的动画速度。也就是帧的长短。    使用Tween类有一些技巧。你可以写一些事件来处理当tween结束时的动作。如下代码： 代码:   import mx.transitions.Tween; import mx.transitions.easing.*; var tween_handler:Object = new Tween(ball_mc, "_alpha", Strong.easeIn, 100, 0, 3, true); tween_handler.onMotionFinished = function() {     //放置你要执行的代码     trace("tween结束了。触发动作"); };   当你测试你的影片时，淡入完成后会在输出面板上显示tween结束了。触发动作