flash cs动画制作教学资料：参考案例

1、项目1项目2项目3项目4项目5项目9项目8项目6项目7项目10参考案例实例练习2：制作娱乐类网站知识要点：MovieClip类与Timer类的综合应用 难易程度：重点难点：元件位置与大小的关系算法（一）网站功能介绍本实例中将制作以娱乐新闻为主的娱乐风格类网站，网站中的所有按钮图标均有可自由飘动的气泡充当，当气泡按钮与窗口边框或与其它气泡按钮相撞时会自动改变飘动轨迹，当鼠标光标移动到气泡按钮上方时气泡按钮要停止移动并增加滤镜效果。网站中还要提供用于停止气泡按钮飘动的复位按钮和用于开始移动的飘动按钮。（二）新建Flash CS3文档从菜单栏中选择“文件”“新建”，在弹出的“新建文档”窗口中选择“F

2、lash文件（ActionScript3.0）”,新建一个文档并在文档属性面板中将舞台的宽设置为800像素高设置为450像素。（三）制作网站前台控件（1）首先制作网站的背景图案，创建名为网站背景的影片剪辑元件，展开颜色面板将当前填充区样式设置为线性填充并在颜色渐进条上添加五个色标，将色标从左到右的RGB颜色编号设置为#000000、#000000、#595959、#777777、#3C3C3C、#000000、#000000。选择矩形工具在元件编辑区中绘制一个宽800像素，高450像素的矩形，并利用渐变变形工具将矩形的填充方向调整为水平方向，色表位置与填充效果如图16-20所示。 图16-20

3、 色标位置与填充效果（2）选择线条工具，在背景图案的上下两端分别绘制两条笔触高度为3像素的白色直线，并利用文本工具在背景图案的左上角输入“娱乐新闻网”字样作为网站的标题，如图16-21所示。图16-21 背景效果（3）创建名为气泡元件1的影片剪辑元件，选择椭圆工具在元件编辑区中绘制一个半径为50像素的正圆形，在绘制时要注意将正圆形的圆心作为该元件的注册点。选中绘制的正圆形，展开颜色面板并在颜色渐进条上添加一个色标，将色标从左到右的RGB颜色编号和透明度分别设置为#FF0000+0%、#3CD7DB+0%、#3CD7DB+50%，色标位置和填充效果如图16-22所示。 图16-22 色标位置与填

4、充效果（4）使用制作气泡元件1的方法分别制作气泡元件2到气泡元件8，各气泡元件色标的渐进颜色为：气泡元件2：#FF0000、#CC3399、#CC3399气泡元件3：#FF0000、#66FF33、#66FF33气泡元件4：#FF0000、#FFFF00、#FFFF00气泡元件5：#FF0000、#0000FF、#0000FF气泡元件6：#FF0000、#FF0000、#FF0000气泡元件7：#FF0000、#FFFFFF、#FFFFFF气泡元件8：#FF0000、#FF9933、#FF9933（5）创建名为发光点的影片剪辑元件，在元件编辑区中绘制一个半径为5像素的白色正圆形作为气泡元件的反

5、光点。（6）创建名为balloon1的影片剪辑元件，在元件编辑区中放入气泡元件1和发光点两个元件，分别为气泡元件1添加斜角和投影滤镜，为发光点元件添加发光滤镜，各滤镜的参数如下：“斜角”滤镜效果：模糊X和模糊Y：20、距离：8、品质：高、强度：300%、阴影颜色：#CC3399、阴影颜色透明度：80%、加亮颜色：#CC3399、加亮颜色透明度70%、类型：外侧。“投影”滤镜效果：模糊X和模糊Y：8、颜色：#3CD7DB、品质：高。“发光”滤镜效果：模糊X和模糊Y：10、颜色：#FFFFFF、品质：高、强度：600。（7）使用相同方法分别创建影片剪辑元件balloon2到balloon8，各元件

6、中发光点元件的滤镜参数不变，斜角与投影滤镜的颜色变为：balloon2：“投影”滤镜效果：阴影颜色：#CC3399、阴影颜色透明度：80%、加亮颜色：#CC3399、加亮颜色透明度70%（其它参数不变）“投影”滤镜效果：颜色：#CC3399（其它参数不变）balloon3：“投影”滤镜效果：阴影颜色：#66FF33、阴影颜色透明度：80%、加亮颜色：#66FF33、加亮颜色透明度70%“投影”滤镜效果：颜色：#66FF33balloon4“投影”滤镜效果：阴影颜色：#FFFF00、阴影颜色透明度：80%、加亮颜色：#FFFF00、加亮颜色透明度70%“投影”滤镜效果：颜色：#FFFF00bal

7、loon5“投影”滤镜效果：阴影颜色：#0000FF、阴影颜色透明度：80%、加亮颜色：#0000FF、加亮颜色透明度70%“投影”滤镜效果：颜色：#0000FFballoon6“投影”滤镜效果：阴影颜色：#FF0000、阴影颜色透明度：80%、加亮颜色：#FF0000、加亮颜色透明度70%“投影”滤镜效果：颜色：#FF0000balloon7“投影”滤镜效果：阴影颜色：#FFFFFF、阴影颜色透明度：80%、加亮颜色：#FFFFFF、加亮颜色透明度70%“投影”滤镜效果：颜色：#FFFFFFballoon8“投影”滤镜效果：阴影颜色：#FF9933、阴影颜色透明度：80%、加亮颜色：#FF9

8、933、加亮颜色透明度70%“投影”滤镜效果：颜色：#FF9933图16-23 各气泡按钮效果（8）返回主场景，在舞台的上方并排放入元件balloon1到balloon8并将它们的半径缩小到65像素作为网站的静态按钮。再分别从库面板中拖动出元件balloon1到balloon8并将它们分两行摆放在舞台中央作为可飘动的气泡按钮，摆放后依次为它们设置与元件名相同的实例名称。最后在舞台的底部放入两个用于控制气泡按钮的按钮组件，并将它们的实例名称分别设置为startMove和reset，舞台中的所有元件及元件的实例名称如图16-24所示。图16-24 舞台中的元件（四）编写后台程序（1）实例中的所有控

9、件均由该FLA文件的文档类main类控制。main类需要为舞台中所有可飘动气泡按钮创建初始移动速度和移动方向，并为气泡按钮注册监听器，当气泡按钮移动到窗口边框或与其它气泡按钮相撞时程序要改变气泡按钮的移动方向从而实现反弹效果。main类中还要定义控制按钮startMove和reset的控制功能。（2）首先在main类的构造函数中要初始化气泡按钮以及控制按钮，函数代码如下：var myballoon:Array=new Array(8); /创建用于存放气泡按钮的数组function main()startMove.label=飘动;reset.label=复位;/将舞台中的气泡按钮存放在数组中

10、myballoon0=balloon1; myballoon1=balloon2;myballoon2=balloon3;myballoon3=balloon4;myballoon4=balloon5;myballoon5=balloon6;myballoon6=balloon7;myballoon7=balloon8;/注册开始移动按钮的监听器startMove.addEventListener(MouseEvent.CLICK,startMoveCLICK);/注册复位按钮的监听器reset.addEventListener(MouseEvent.CLICK,resetCLICK);由于本

11、实例中需要使用后台程序控制的元件数量较多，所以需要将各元件存放在数组中以便后续程序的统一条用。（3）当用户单击startMove按钮后程序调用startMoveCLICK函数激活气泡按钮使之可以移动，函数代码如下：var balloomM:Boolean=false;function startMoveCLICK(e:MouseEvent)if(!balloomM)initialization();balloomM=true;main类中定义了一个用于记录当前气泡按钮是否处于运动状态的布尔型变量balloomM，在startMoveCLICK函数中首先判断当前气泡按钮是否处于运动状态，如果未处

12、于运动状态则调用initialization函数初始化气泡按钮的运动信息并将balloomM属性设置为true。（4）在initialization函数中要负责为每一个气泡按钮创建初始移动速度和移动角度并为气泡按钮添加鼠标光标移动到该元件上的监听器，函数代码如下：var balloonX:Array=new Array(8); /记录各个气泡元件水平方向的移动速度var balloonY:Array=new Array(8); /记录各个气泡元件垂直方向的移动速度function initialization()for(var i:int=0;i8;i+) /使用循环结构遍历myballoon

13、数组中的气泡元件myballooni.buttonMode=true; /将所有气泡元件设置为按钮模式/为所有气泡元件添加鼠标光标移入事件监听器myballooni.addEventListener(MouseEvent.ROLL_OVER,balloonstop); balloonXi=Math.random()*2-2; /随机产生所有气泡元件的水平速度balloonYi=Math.random()*2-2; /随机产生所有气泡元件的垂直速度stage.addEventListener(Event.ENTER_FRAME,balloonHit); /添加每帧事件的监听器由于舞台是一个二维空

14、间所以在舞台中运动的所有元件的移动速度和移动角度都可以由该元件的水平移动分量和垂直移动分量得出。根据这一原理要随机产生气泡按钮的移动速度和移动角度，只需随机产生气泡按钮水平和垂直的速度分量即可。main类中定义了balloonX和balloonY数组分别用于记录initialization函数随机产生的气泡按钮水平和垂直速度分量，速度分量范围在-2到2之间，其中的符号代表气泡按钮元件移动的方向。函数还为所有气泡按钮元件添加了鼠标指针移入事件的监听器，当用户鼠标指针移动到某气泡按钮上方时，程序会调用balloonstop函数停止该元件的运动。最后函数为舞台注册了每进入下一帧的监听器以处理各个气泡

15、按钮移动时互相碰撞情况。（5）当程序每进入下一帧时，程序都会调用balloonHit函数判断某两个气泡按钮是否发生碰撞，函数代码如下：var hitNum:int=-1;function balloonHit(e:Event)for(var i:int=0;i8;i+)for(var j:int=0;j8;j+)/双重循环遍历任意两个气泡按钮/判断当前两个气泡按钮元件是否碰撞var distantX:Number=myballooni.x-myballoonj.x;var distantY:Number=myballooni.y-myballoonj.y;var R:Number=Math.s

16、qrt(distantX*distantX+distantY*distantY);if(j!=i&R100&i!=hitNum)/如果碰撞则改变气泡按钮的移动角度balloonXi=-balloonXi;balloonYi=-balloonYi;balloonMove(); /调用函数判断气泡按钮本次移动后是否移动出窗口函数使用双循环结构遍历任意两个气泡按钮，并利用两点间距离公式计算两个气泡按钮圆心的距离并将该值赋值给临时变量R。在判断两个移动过中的气泡按钮是否相交时需要同时满足三个条件：1.j!=i：判断当前双循环结构中是否循环得到的时相同的气泡按钮，例如当j等于i时j和i代表的是同一个气泡

17、按钮，这时判断是否相交是没有意义的。2. R100：由于所用气泡按钮的半径均为50像素，所以如果两个气泡按钮元件相交，那么它们的圆心距离一定小于100像素。3. i!=hitNum：main类中定义了hitNum属性用于记录当前用户鼠标光标指向的气泡按钮数组索引值，如果当前用户鼠标光标没有指向任何气泡按钮则该变量值为-1。如果某两个气泡按钮同时具备了上述三个条件就证明这两个气泡按钮相交了，这个函数要更改气泡按钮水平和垂直移动的方向以避免这两个气泡按钮继续重合。最后函数调用balloonMove函数进行判断本次气泡按钮移动是否移出了窗口边框。（6）在balloonMove函数中要判断所有气泡按钮

18、是否移动出了如图16-25所示的舞台区域：图16-25 气泡按钮移动区域如果气泡按钮移动出了该区域那么balloonMove函数要改变气泡按钮的移动方向，函数代码如下：function balloonMove()for(var i:int=0;i8;i+) /遍历所有气泡按钮/移动气泡按钮位置myballooni.x=myballooni.x+balloonXi;myballooni.y=myballooni.y+balloonYi;/判断气泡按钮是否移动出指定区域的水平位置if(myballooni.x750)/如果移动出水平位置则改变气泡按钮水平运动方向balloonXi=-balloon

19、Xi;myballooni.x=myballooni.x+(4 * balloonXi);/判断气泡按钮是否移动出指定区域的垂直位置if(myballooni.y350)/如果移动出垂直位置则改变气泡按钮垂直运动方向balloonYi=-balloonYi;myballooni.y=myballooni.y+(4 * balloonYi);函数中首先利用先前随机产生的水平和垂直移动随度改变气泡按钮的位置，然后利用气泡按钮的x和y属性判断该气泡按钮是否移动出舞台指定区域，如果移动出了指定区域则改变气泡按钮水平或垂直的移动方向，并将气泡按钮移动回指定区域。（7）如果在气泡按钮移动过程中，用户将鼠标

20、光标移动到某个气泡按钮上方，程序会触发balloonstop函数停止该气泡按钮当前的移动状态并为该气泡按钮添加滤镜效果，函数代码如下：var hitX:Number;var hitY:Number;function balloonstop(e:MouseEvent)for(var i:int=0;i8;i+) /遍历气泡按钮元件if(e.target=myballooni) /判断触发事件的气泡按钮元件hitNum=i; /将该气泡按钮的数组索引值赋值给变量hitNum/记录该气泡按钮的水平和垂直移动速度hitX=balloonXi;hitY=balloonYi;/停止该气泡按钮的移动ball

21、oonXi=0;balloonYi=0;/为气泡按钮添加鼠标光标移出事件监听器e.target.addEventListener(MouseEvent.ROLL_OUT,restartMove); /为该气泡按钮添加滤镜效果var myGlowFilter:GlowFilter=new GlowFilter(0xFFFFFF,1,15,15,1.5,BitmapFilterQuality.HIGH,false,false);e.target.filters=myGlowFilter;函数首先使用循环结构遍历并判断引发事件的气泡按钮，然后用变量hitNum记录该气泡按钮的数组索引值和水平垂直移动

22、速度。最后将该气泡按钮的水平垂直移动速度清零并为其添加发光滤镜和鼠标移出事件监听器。（8）当用户鼠标光标移动出某个气泡按钮时会触发restartMove函数重新激活该气泡按钮的运动状态，函数代码如下：function restartMove(e:MouseEvent)myballoonhitNum.removeEventListener(MouseEvent.ROLL_OUT,restartMove);balloonXhitNum=hitX;balloonYhitNum=hitY;myballoonhitNum.filters=;hitNum=-1;该函数清除balloonstop函数中注册的

23、鼠标移出事件监听器，重新激活气泡按钮的运动状态并取消滤镜效果。（9）当用户单击舞台中的reset按钮时，系统条用resetCLICK函数，重新排列气泡按钮的位置并停止气泡按钮的移动，函数代码如下：function resetCLICK(e:MouseEvent)for(var i:int=0;i8;i+)myballooni.removeEventListener(MouseEvent.ROLL_OVER,balloonstop);stage.removeEventListener(Event.ENTER_FRAME,balloonHit);for(var j:int=0;j4;j+)myba

24、lloonj.x=j * 140+120;myballoonj.y=140;for(var k:int=4;k8;k+)myballoonk.x=(k-4) * 140+290;myballoonk.y=340;balloomM=false;函数首先取消所有气泡按钮的事件监听器并利用两个循环结构将气泡按钮按顺序排列为两排放置在舞台中的指定位置。循环结构中的120和290分别表示第一排气泡按钮元件与舞台最左端的距离为120像素，第二排气泡按钮元件与舞台最左端的距离为290像素，如图16-26所示：图16-26 气泡按钮位置（10）main类中的完整属性和函数packageimport flash

25、.display.MovieClip;import flash.events.*;import flash.filters.*;import fl.controls.*;public class main extends MovieClipvar myballoon:Array=new Array(8); /储存气泡按钮var balloonX:Array=new Array(8); /记录气泡按钮水平速度var balloonY:Array=new Array(8); /记录气泡按钮垂直速度var hitNum:int=-1; /记录当前鼠标指针指向气泡按钮的数组索引值var hitX:Nu

26、mber; /记录当前鼠标指针指向气泡按钮的水平速度var hitY:Number; /记录当前鼠标指针指向气泡按钮的垂直速度var balloomM:Boolean=false; /记录当前气泡按钮的运动状态function main()/初始化气泡按钮并添加监听器startMove.label=飘动;reset.label=复位;myballoon0=balloon1;myballoon1=balloon2;myballoon2=balloon3;myballoon3=balloon4;myballoon4=balloon5;myballoon5=balloon6;myballoon6=b

27、alloon7;myballoon7=balloon8;startMove.addEventListener(MouseEvent.CLICK,startMoveCLICK);reset.addEventListener(MouseEvent.CLICK,resetCLICK);function startMoveCLICK(e:MouseEvent) /激活气泡按钮的运动状态if(!balloomM)initialization();balloomM=true;function resetCLICK(e:MouseEvent) /停止气泡按钮的运动for(var i:int=0;i8;i+)

28、myballooni.removeEventListener(MouseEvent.ROLL_OVER,balloonstop);stage.removeEventListener(Event.ENTER_FRAME,balloonHit);for(var j:int=0;j4;j+)myballoonj.x=j * 140+120;myballoonj.y=140;for(var k:int=4;k8;k+)myballoonk.x=(k-4) * 140+290;myballoonk.y=340;balloomM=false;function initialization()/随机产生气泡

29、按钮水平垂直移动速度for(var i:int=0;i8;i+)myballooni.buttonMode=true;myballooni.addEventListener(MouseEvent.ROLL_OVER,balloonstop);balloonXi=Math.random()*2-2;balloonYi=Math.random()*2-2;stage.addEventListener(Event.ENTER_FRAME,balloonHit);function balloonstop(e:MouseEvent) /暂时停止该气泡按钮的移动for(var i:int=0;i8;i+)if(e.target=myballooni)hitNum=i;hitX=balloonXi;hitY=balloonYi;balloonXi=0;balloonYi=0;e.target.addEventListener(Mo