注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

AS 3.0的 TransitionManager类制作图片切换  

2014-01-13 11:42:49|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

TransitionManager 类让你应用不同的动画效果到影片剪辑。整体来说,有十个不同的动画可以用。这些是:遮帘过渡、淡化过渡、飞行过渡、光圈过渡、相片过渡, 像素溶解过渡,挤压过渡、旋转过渡、划入/划出和缩放过渡。
1、新Flash文件,设置宽、高为:700 × 400 ,背景颜色任意。
2、导入一张 100 × 100的图片到舞台。
3、右键单击图片,转换成影片剪辑。命名为 " box " 设定注册点到中心。

4、选中box,按住Ctrl键拖动进行复制操作,复制出10个影片剪辑。
 5、在属性面板中分别为实例命名 “box1″, “box2″, box3″, … , “box10″。图3:
sshot-3.png
6、新建as层,选中第1帧,打开动作面板,输入代码:

//We need for the animations
import fl.transitions.*;
import fl.transitions.easing.*;
//This array will store all the transitions
var transitions:Array = new Array();
//Add MOUSE_OVER handlers to each box
box1.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box2.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box3.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box4.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box5.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box6.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box7.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box8.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box9.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
box10.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
//Assign a different transition to each box
box1.transition = Blinds;
box2.transition = Fade;
box3.transition = Fly;
box4.transition = Iris;
box5.transition = Photo;
box6.transition = Rotate;
box7.transition = Squeeze;
box8.transition = Wipe;
box9.transition = PixelDissolve;
box10.transition = Zoom;
//This function is called everytime the mouse moves over a box
function mouseOverBox (e:Event):void {
        //Store the selected box in a local variable
        var selectedBox:MovieClip = MovieClip(e.target);
        //Remove the event listener (the user can’t stop the animation once started)
        selectedBox.removeEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
        /* 
        Start a new transition with the following parametes
        type: We use a transition type that is defined for each box
        direction: The direction of the animation (Transition.OUT is the second option)
        duration: Duration of the animation in seconds
        easing: The type of easing applied to the animation
        shape: A mask shape. Applies only when using the "Iris" transition
        */
        var myTransitionManager:TransitionManager = new TransitionManager(selectedBox);
        myTransitionManager.startTransition ({type:selectedBox.transition, 
         direction:Transition.IN, duration:1, easing:Regular.easeOut, shape:Iris.CIRCLE});
        //Add the transition to an array, so it won’t get garbage collected
        transitions.push(myTransitionManager);
        //Add a listener that calls the function animationComplete, when the animation is finished
        myTransitionManager.addEventListener ("allTransitionsInDone", animationComplete);
}
//This function is called when a box animation is complete
function animationComplete (e:Event):void {
        //Start listening for the MOUSE_OVER again
        e.target.content.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBox);
}

7、好了,测试你的影片吧!

效果演示

  


  评论这张
 
阅读(25)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017