怎样使用/classes/transitions/的过渡效果

2006-03-15 18:16:54

import mx.transitions.TransitionManager; //…… // 设置过渡的效果 objTransitions = new Object(); objTransitions.type = mx.transitions.Wipe; objTransitions.direction = 0; objTransitions.duration = 1; objTransitions.easing = mx.transitions.easing.Strong.easeOut; objTransitions.startPoint = 2; objTransitions.param2 = null; // 触发过渡效果,objectmc为使用过渡效果的mc TransitionManager.start( objectmc, objTransitions ); transitions下的有两种可以用来产生过渡效果的类:Tween和Transition,Blinds、Fade、Fly、Iris、Photo、PixelDissolve、Rotate、Squeeze、Wipe、Zoom都从继承Transition而来。在 transitions包中,Tween,Transition和TransitionManager是最重要的。而Easing包,这两种Tween和Transition类型好像都用得到。 首先来看TransitionManager类。 下面列出了TransitionManager的属性。 1、content :被施加过渡效果的电影剪辑。 实现: function set content (c:MovieClip):Void { // 不再接收之前定义的事件侦听 this.removeEventListener ("allTransitionsInDone", this._content); this.removeEventListener ("allTransitionsOutDone", this._content); this._content = c; this.saveContentAppearance(); this.addEventListener ("allTransitionsInDone", this._content); this.addEventListener ("allTransitionsOutDone", this._content); } function get content ():MovieClip { return this._content; } 2、只读属性 transitions:当前管理的transitions 3、只读属性 numTransitions:当前管理的transition数 4、只读属性 numInTransitions:方向为进入舞台(direction属性为0)的transition数 5、numOutTransitions:只读,direction属性为1的transition数 6、contentAppearance:只读。和saveContentAppearance、restoreContentAppearance以及Transition的相关函数结合使用,保存了过渡管理器施加过渡效果的电影剪辑的下列可视属性:_x,_y, _xscale,_yscale,_alpha,_rotation。 下面列出了TransitionManager的可用的方法 1、start:静态方法,前面用得就是这个方法了。 static function start (content:MovieClip, transParams:Object):Transition 返回:Transition(过渡) 参数:content,电影剪辑;transParams,上面演示过了。 2、构造函数: TransitionManager function TransitionManager (content:MovieClip) 参数:content,电影剪辑 3、函数:startTransition,激活某个过渡效果 function startTransition (transParams:Object):Transition 4、函数:addTransition,增加过渡效果到过渡管理器中 function addTransition (trans:Transition):Transition 5、函数:removeTransition,从过渡效果管理器中移除过渡效果, function removeTransition (trans:Transition):Boolean 6、函数findTransition,在过渡效果管理器中查找过渡效果 function findTransition (transParams:Object):Transition 7、函数removeAllTransitions,移除所有的过渡效果 function removeAllTransitions () 8、 function saveContentAppearance ():Void 9、function restoreContentAppearance ():Void 下面列出了TransitionManager的可用的事件: transitionInDone:IN过渡完成后时产生 transitionOutDone :out过渡完成后时产生 下面是个示例: import mx.transitions.TransitionManager; // 设置过渡的效果 objTransitions = new Object (); objTransitions.type = mx.transitions.Fly; objTransitions.direction = 0; objTransitions.duration = 1; objTransitions.easing = mx.transitions.easing.Strong.easeOut; //objTransitions.easing =1; objTransitions.startPoint =4; trace(this.aa._x); // 触发过渡效果,objectmc为使用过渡效果的mc tm=new TransitionManager(this.aa); tm.startTransition(objTransitions); //tm.saveContentAppearance(); with (tm){ trace(content); trace(transitions[1].className); trace(numTransitions); trace(numInTransitions); trace(numOutTransitions); trace(contentAppearance._x); } tm.transitionOutDone=function(){ trace("out"); } tm.transitionInDone=function(){ trace("in"); } transition是其他Transition包中的过度效果类的基类。下面我们来看一看transition类的常用属性、方法和 事件。 manager属性:Transition的过度效果管理器(TransitionManager)。在设置Transition的过渡效果管理器的 同时更新了该对象侦听的三个事件:transitionInDone、transitionOutDone和transitionProgress。 content属性:Transition的对象。 direction属性:Transition的方向,0为进入舞台(IN),1为退出舞台(out)。 duration属性:Transition的时间。单位:秒。 easing属性:字符串,引用来自Easing包中的函数。 progress属性:Transition的状态,值为1或者0。 //对于这个属性的设置,特别的不理解,让我们一起来看一看类中怎么实现的。progress应该作为只读属性存在的。 function set progress (p:Number):Void { //如果准备设置该属性的值与当前的progress值相同,则不进行任何处理。 if (this._progress == p) return; this._progress = p; // 改变direction属性的值,取反 if (this._direction) { this._render (1-p); } else { this._render (p); } //产生transitionProgress事件 this.dispatchEvent ({type:"transitionProgress", target:this, progress:p}); }; 构造函数Transition function Transition (content:MovieClip, transParams:Object, manager:TransitionManager) 唯一需要注意的就是中间的那个transParams,这个对象包括了Transition的下列属性: direction (0或者1),duration , easing和其他的由Transition派生的类的附加的参数(看看后面的例子就懂了)。 函数toString ,返回Transition的类名; function toString ():String 函数start,不说了,地球人都知道。 function start ():Void 函数stop; function stop():void 函数cleanUp,清除所有侦听的事件,并停止Transition function cleanUp ():Void 函数getNextHighestDepthMC,和progress属性,怎么用不是很清楚。 function getNextHighestDepthMC (mc:MovieClip):Number 函数drawBox和drawCircle,画矩形和圆形,需要注意的是,使用之前,要首先定义mc作图的线条/色块的颜色,alpha值等等。 function drawBox (mc:MovieClip, x:Number, y:Number, w:Number, h:Number):Void function drawCircle (mc:MovieClip, x:Number, y:Number, r:Number):Void 对于事件,可以参考前面关于TransitionManager类和Tween类的用法,但是有一点始终都没弄明白,Transition类中的transitionProgress事件到底是怎么回事,因为找遍了整个Transitions包,都找不到该事件的实现,那位弄明白了的,可要执教一下呦。 下面是一个例子: import mx.transitions.*; ttt = new Object(); ttt.direction = 0; ttt.duration = 2; ttt.easing = Strong.easeInOut; ttt.startPoint = 5; tm = new TransitionManager(this.aa); tmp = new Fly(this.aa, ttt, tm); bt_play.onPress = function() { this._parent.tmp.start(); }; bt_stop.onPress = function() { this._parent.tmp.stop(); }; bt_draw.onPress=function(){ dre=this.createEmptyMovieClip("pp", 100); dre.lineStyle( 5, 0xff00ff, 100 ); } 忘了说了,1、transition类类似于C#中的基类,好像不能直接使用,可以引用他的继承类,比如Fly,Zoom等。2、transition类其实可以看作实作了的tween类,下面这个私有函数是所有transition类效果实现的基础: private function _resetTween ():Void { // do clean-up of possibly existing tween this._twn.stop(); this._twn.removeListener (this); this._twn = new Tween (this, null, this.easing, 0, 1, this.duration, true); // need to first stop the tween and THEN set the prop to avoid rendering glitches this._twn.stop(); this._twn.prop = "progress"; this._twn.addListener (this); }; private function _noEase (t:Number, b:Number, c:Number, d:Number):Number { return c*t/d + b; } Blinds类 实现类似拉窗帘的效果,除了Transition中的direction、duration和easing这三参数之外,Blinds还有两个参数:dimension和numStrips。dimension用来指示过渡的方向,“窗帘”是横向拉还是纵向拉。而direction在Blinds中变成了控制MC在过渡效果后使显示(0)还是隐藏(1),可以结合使用,numStrips指示过渡中的“窗帘”中栅格的个数。 Sample: //使用Blinds类 import mx.transitions.* import mx.transitions.easing.* //tobj是stage上放置的MC实例名 tm=new TransitionManager(this.tobj); trobj=new Object(); trobj.direction=1; trobj.duration=1; trobj.easing=easing.strong.EaseIn; trobj.dimension=1; //可以为1,或者0; trobj.numStrinps=30; tr=new Blinds(this.tobj,trobj,tm); //bt_play、bt_stop均为按钮 bt_play.onPress=function(){ tr.start(); } bt_stop.onPress=function(){ tr.stop(); } tr.onMotionFinished = function() { trace("当前使用的过渡效果是:"+this.toString()); }; 说明:上面的代码没有通过验证,如果有错误,请修正后使用。 2、Fade类 实现MC的淡入/淡出效果。没有附加的参数。 3、Fly类 实现MC从Stage外飞入/飞出舞台。有一个附加的参数:startPoint,指示了飞入的起始位置,或者使用飞出效果时结束时的位置。其值可以是1-9这9个数字。 1 2 3 4 5 6 7 8 9 如上所示,如果startPoint的值为1,MC将从舞台的左上角飞入,2从舞台中/上方飞入,依此类推。 4、Iris类 实现MC的按指定的形状(矩形或者圆形出现)。有两个附加的参数,startPoint和shape,shape只能取两个字符串值:SQUARE或者CIRCLE。 5、Photo类 实现MC的一个效果,怎么说了?设置了亮度和alpha值的变化,没有附加的参数。可以看看。 6、PixelDissolve类 实现马赛克效果。有两个附加参数:xSections和ySections,默认值均为10。将MC从X轴和y轴划分成xSections和ySections块显示。 7、Rotate类 旋转MC。两个附加参数:degrees,旋转的度数;ccw,旋转的方向,与direction值取反后的值为MC旋转的方向。 8、Squeeze类 很常规的一个效果。有一个附加参数dimension,该效果实施的方向。 9、Wipe类 一个附加参数startPoint。 10、Zoom类 没有附加参数。 基本上,这些效果都很简单,不是很炫,就图一个使用方便。