(转)TransitionManager

Flash 包含十种过渡效果,您可以将这些效果应用于影片剪辑对象。所有过渡均可以通过包括可选的缓动方法进行自定义,并且大多数过渡接受使用多个可选参数以控制其效果的特定方面。"缓动"是指动画过程中的渐进加速或减速,它会使您的动画看起来更逼真。例如,一个球在刚开始运动阶段是以加速形式运动的,在接近停止到完全停止阶段是以减速形式运动的。关于此加速和减速有许多公式,它们可以对缓动动画进行更改。您可以使用 TransitionManager 来指定过渡并将其应用于影片剪辑对象,而不是直接调用过渡。

Flash 中包括以下过渡:
1.遮帘过渡 Blinds
--------使用逐渐消失或逐渐出现的矩形来显示影片剪辑对象。
(参数:numStrips,“遮帘”效果中的遮罩条纹数。建议的范围是1 到50。dimension,一个整数,指示遮帘条纹是垂直的(0) 还是水平的(1)。)

2.淡化过渡 Fade
--------淡入或淡出影片剪辑对象。
3.飞行过渡 Fly
--------从某一指定方向滑入影片剪辑对象。
(参数:startPoint,一个指示起始位置的整数;范围是1 到9;
左上1;上中2;右上3;左中4;中心5;右中6; 左下7;下中8;右下9。)
4.光圈过渡 Iris
--------使用可以缩放的方形或圆形动画遮罩来显示或隐藏影片剪辑对象。
(参数:startPoint,一个指示起始位置的整数,范围是1 到9:
左上1;上中2;右上3;左中4;中心5;右中6;左下7;下中8;右下9。
shape,值为Iris.SQUARE(方形)或Iris.CIRCLE(圆形)的遮罩形状。)
5.照片过渡 Photo
--------使影片剪辑对象像放映照片一样出现或消失。
6.像素溶解过渡 PixelDissolve
---------使用随机出现或消失的棋盘图案矩形来显示或隐藏影片剪辑对象。
(参数:xSections,一个整数,指示沿水平轴的遮罩矩形部分的数目。
建议的范围是1 到50。ySections,一个整数,指示沿垂直轴的遮罩矩形部分的数目。建议的范围是1 到50。)
7.旋转过渡 Rotate
-------
旋转影片剪辑对象。
(参数:ccw,一个布尔值:对于顺时针旋转为false ;对于逆时针旋转为true。degrees,一个整数,指示对象要旋转的度数。建议是范围是1 到9999)
8.挤压过渡 Squeeze
----------水平或垂直缩放影片剪辑对象。
(参数:dimension,一个整数,指示“挤压”效果应是水平的(0) 还是垂直的(1)   )
9.划入/划出过渡 Wipe
----------使用水平移动的动画遮罩形状来显示或隐藏影片剪辑对象。
(参数:startPoint,一个整数,指示开始位置。范围是1 到4 和6 到9:左上1 ;上中2 ;右上3 ;左中, 4 ;右中6 ;左下7 ;下中8 ;右下9)
10.缩放过渡 Zoom
-----------通过按比例缩放来放大或缩小影片剪辑对象。

   若要使用 TransitionManager 类的方法和属性,您可以在两种方法中选择一种来创建新实例。最简单的方法是调用 TransitionManager.start() 方法,只须调用一次,就可以创建新的 TransitionManager 实例、指定目标对象、用一种缓动方法应用过渡并启动过渡效果。以下代码使用 TransitionManager.start() 方法:

TransitionManager.start(myMovieClip_mc, {type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut});

还可以通过使用 new 运算符来创建 TransitionManager 类的新实例。然后可以指定过渡属性,并通过调用 TransitionManager.startTransition() 方法在另一步中启动过渡效果。以下代码使用 TransitionManager.startTransition() 方法:

var myTransitionManager:TransitionManager = new TransitionManager(myMovieClip_mc);
myTransitionManager.startTransition({type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut});

将缓动方法应用于组件

各种缓动方法的另一种用途是将它们应用到第2版组件。您只能将缓动方法应用到以下第2 版组件:Accordion、ComboBox、DataGrid、List、Menu 和Tree。每种组件都使用缓动方法进行不同的自定义。例如, Accordion、ComboBox 和Tree 组件使您能够选择缓动类来用于它们各自的打开和关闭动画。相比之下, Menu 组件只能使您定义动画持续的毫秒数。


Back     在过渡范围外的一端或两端扩展动画一次,以产生从其范围外回拉的效果。

Bounce   在过渡范围的一端或两端内添加弹跳效果。弹跳数与持续时间相关,持续时间越长,弹跳数越多。

Elastic    添加一端或两端超出过渡范围的弹性效果。弹性量不受持续时间影响。

Regular 在一端或两端添加较慢的运动。此功能使您能够添加加速效果、减速效果或这两种效果。

Strong   在一端或两端添加较慢的运动。此效果类似于Regular 缓动类,但它更明显。

None     添加从开始到结尾无任何减速或加速效果的相同的运动。此过渡也称为线性过渡。

 

easeIn    在过渡的开始提供缓动效果。
easeOut 在过渡的结尾提供缓动效果。
easeInOut 在过渡的开始和结尾提供缓动效果。
easeNone 指明不使用缓动计算。只在None 缓动类中提供

 

 

 

参数说明

type:过渡方式
    遮帘过渡 Blinds 使用逐渐消失或逐渐出现的矩形来显示影片剪辑对象。
    淡化过渡 Fade 淡入或淡出影片剪辑对象。
    飞行过渡 Fly 从某一指定方向滑入影片剪辑对象。
    光圈过渡 Iris 使用可以缩放的方形或圆形动画遮罩来显示或隐藏影片剪辑对象。(新出现的图片将只占据屏幕中间)
    照片过渡 Photo 使影片剪辑对象像放映照片一样出现或消失。(出现的时候会突然黑一下)
    像素溶解过渡 PixelDissolve 使用随机出现或消失的棋盘图案矩形来显示或隐藏影片剪辑对象。
    旋转过渡 Rotate 旋转影片剪辑对象。(以屏幕一角为中心旋进)
    挤压过渡 Squeeze 水平或垂直缩放影片剪辑对象(会惯性的超出本身大小一段,然后缩回正常大小)。
    划入/划出过渡 Wipe 使用水平移动的动画遮罩形状来显示或隐藏影片剪辑对象。
    缩放过渡 Zoom 通过按比例缩放来放大或缩小影片剪辑对象。

direction:
    Transition.IN       出现
    Transition.OUT      消失

duration:延迟时间,单位为秒(s)

easing:  缓动模式
    None.easeIn          Regular.easeIn          Srong.easeIn           Back.easeIn          Elastic.easeIn
    None.easeInOut     Regular.easeInOut     Srong.easeInOut     Back.easeInOut     Elastic.easeInOut
    None.easeOut        Regular.easeOut       Srong.easeOut        Back.easeOut        Elastic.easeOut

从左到右 ,即从None到Elastic表示稳固系数,这里给运动的元件附加上一个虚拟的质量

 

    None    很轻,施力就动

 

    Regular    正常,同样施力就动
    Srong.easeIn  比较重,需要施加更大的力, 给人的感觉就是动起来很费劲 

 

    Back.easeIn   运动之前,有一个向后的动作

 

    Elastic.easeIn  正式运动之前,会前后往复几次

 


从上到下, 即easeNone    没有缓动   (只有None有这个属性)
    easeIn      开始时缓动
    easeInOut   开始和结束时缓动
    easeOut     结束时缓动

另外,每个过渡方式还带有自己独有的参数
    //百叶窗过渡,numStrips为栅栏个数    dimension 0为横向,非0为纵向
    str_array[0] = {type:Blinds, direction:Transition.IN, duration:3, easing:None.easeNone, numStrips:15, dimension:0};  
    str_array[1] = {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone};
    str_array[2] = {type:Iris, direction:Transition.IN, duration:3, easing:None.easeNone, startPoint:5, shape:Iris.CIRCLE};

 

    //棋盘过渡,xSections, ySections 分别为xy方向的方格个数

 

    str_array[3] = {type:PixelDissolve, direction:Transition.IN, duration:1, easing:None.easeNone, xSections:50, ySections:50};
    //旋转过渡,从屏幕左上角顺时针旋入
    str_array[4] = {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:180};
    str_array[5] = {type:Zoom, direction:Transition.IN, duration: 3, easing:Back.easeOut};//从左上角放大图片;

    str_array[6] = {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1};
    //擦除过渡--左上,startPoint:擦除起始点,下面是1-9对应的位置,注意:5和1的效果一样
                                     _______________________________
                                    |1、5              2               3|
                                    |                                       |
                                    |                                       |
                                    |                                       |
                                    |3                                    6|
                                    |                                       |
                                    |                                       |
                                    |                                       |
                                    |                                       |
                                    |7_______________8____________9|


以下页面对TransitionManager有比较详细的说明,还有每个参数的动画演示
http://www.republicofcode.com/tutorials/flash/as3transitionmanager/


下面是参考网上相关文章写的一段图片切换代码

 

///ImageView.as
///实现图片切换,每次切换的方式随机,
///使用方法,将图片放在元件,为每个元件创建一个实例,并依次命名为mc1,mc2........
///在构造函数中将所有的实例添加到mcs数组中

package
{
    import fl.transitions.*;
    import fl.transitions.easing.*;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.utils.Timer;

    public class ImageView extends Sprite
    {
       
        private const delay:Number=3000;
        private var types:Array=new Array();
        private var mcs:Array=new Array();
       
        private var index:int=0;
        private var topIndex=0;
       
        public function ImageView()
        {
            types.push({type:PixelDissolve, direction:Transition.IN, duration:1, easing:None.easeNone, xSections:50, ySections:50});
            types.push({type:Iris, direction:Transition.IN, duration:3, easing:None.easeNone, startPoint:5, shape:Iris.CIRCLE});
            types.push({type:Blinds, direction:Transition.IN, duration:3, easing:None.easeNone, numStrips:15, dimension:0});
            types.push(type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:180});
            types.push({type:Zoom, direction:Transition.IN, duration: 3, easing:Back.easeOut});
            types.push({type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:2});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:3});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:4)};
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:6});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:7});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:8});
            types.push({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:9});

            mcs= [mc1,mc2,mc3,mc4];    ///在这里添加所有的带有图片的元件实例
            topIndex=mcs.length-1;
           
            for each (var mc in mcs)
            {
                mc.width=stage.stageWidth;
                mc.height=stage.stageHeight;
                mc.x=0;
                mc.y=0;
                addChild(mc);
            }
           
            addEventListener(Event.ENTER_FRAME,onEnterFrame);
   
        }

        private function onEnterFrame(e:Event):void
        {
            removeEventListener(Event.ENTER_FRAME,onEnterFrame);
           
            var myTM:TransitionManager = MCTransition(mcs[index]);
            index=(index+1)%mcs.length; ///index "增加"1,实现循环数组的遍历
           
            myTM.addEventListener ("allTransitionsInDone", animationComplete);
        }
       
        private function animationComplete (e:Event):void
        {
           
             var minuteTimer:Timer = new Timer(delay, 1);
            minuteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);           
            minuteTimer.start();
                       
        }
        public function onTimerComplete(event:TimerEvent):void
        {
            addEventListener(Event.ENTER_FRAME,onEnterFrame);
       
        }
        private function MCTransition(mc:MovieClip):TransitionManager
        {
           
            var m_tm:TransitionManager = new TransitionManager(mc);
            setChildIndex(mc,topIndex);
       
            var r:int = Math.floor(Math.random()*(types.length));
           
            //trace(r);
            m_tm.startTransition(types[r]);
            return m_tm;
           
        }
    }
}

 

posted @ 2012-08-22 11:21  ☆A希亿  阅读(1438)  评论(0编辑  收藏  举报