分享
 
 
 

Flash实例教学:三维烟花动画制作

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

本文将带领大家一起,通过Flash中的ActionScript脚本编程,实现节日烟花动画。开始时将出现烟花绽开的三维动画,随后烟花逐渐下落并消失,非常漂亮。

动画效果:

第一步:启动Flash MX 2004中文版(以下简称为Flash)并新建一个Flash空白文档。在下面属性面板上,单击“背景”右侧的颜色按钮,将背景色设置为黑色。

第二步:按Ctrl+F8键打开创建新元件对话框,元件命名为“grastar”,“行为”选择“图形”,确定后进入元件编辑窗口。将笔触与填充色都设置为白色,然后用椭圆形工具画两个交叉的细长椭圆形,再用铅笔工具稍加修饰,即可得到如图1所示的星星图形。

第三步:按Ctrl+F8键打开创建新元件对话框,将元件命名为“mvcstar”,“行为”选择“影片剪辑”,确定后进入该元件编辑窗口。按Ctrl+L键调出库面板,从库面板中将刚刚制作的图形元件grastar拖到mvcstar元件编辑窗中。点选第9帧,然后按F6键插入一个关键帧,以同样方法在第10、25帧处也分别插入关键帧。点选第1帧,然后在属性面板中将“补间”项设置为“动作”,将“旋转”项设置为“顺时针”,“次数”为1,这时第1帧到第9帧会变成蓝色,并显示一个带箭头的直线,说明补间动画设置成功。点选第25帧,将其中的星星图形向下移动一定的距离(可按Shift+向下方向键调整),再使用任意变形工具(快捷键为Q)适当缩小星星的大小,然后单击属性面板上的“颜色”下拉按钮,选择“Alpha”项,再在右侧将颜色的透明度设置为0,这样是为了让星星有逐渐下落并消失的动画效果。点选第10帧,在属性面板中将“补间”设置为“动作”即可。

第四步:点选第25帧,单击展开下方的“动作-帧”面板,在右侧窗口中填写以下脚本语句。最后的时间轴效果如图2所示。

stop();

_root.gotoAndPlay(1); // 跳转到主时间轴上并播放第1帧

第五步:单击上方编辑条上的“场景1”回到主场景中,将做好的影片剪辑mvcstar拖放到场景之外(这样在播放时就看不到mvcstar了)。点选这个mvcstar实例,在属性面板中将它的“实例名称”命名为itnstar,以便在后面的程序设计中使用。右键单击第2帧,选择“插入空白帧”命令。然后,点选第1帧,并展开下方的“动作-帧”面板,在其右侧编辑窗口内写入下面的脚本代码,连同注释一共才二十几行,非常简单。注意,语句前面的数字序号是为了说明方便而加上的,输入代码时不要输入这些数字。输入代码后,按下Ctrl键并回车,就可以欣赏一下自己编程制作的节日烟花了(见图3)。后面一节内容中,还将为你详细剖析代码的含义。

1. // 设置影片片段分身X、Y的坐标;

2. basex = random (450);

3. basey = random (300);

4. for (var i = 0 ; i<6 ; i++) {

5. num = i*17;

6. // 设置圆周平分的个数;

7. angle_num = Math . pow(2, i+2);

8. // 设置影片片段分身的半径;

9. r = 40 + i*15;

10. // 设置影片片段分身的层次;

11. d0 = Math . pow (2, i )-1;

12. d = 4*d0;

13. for (var j = 0 ; j < angle_num ; j++) {

14. if (i == 0) {

15. d = 0;

16. }

17. depth = d+j+1;

18. // 复制影片片段分身

19. duplicateMovieClip ("itnstar", "itnstar" add i add j, depth);

20. // 设置各个影片片段分身的角度

21. angle = j*Math.PI/180*360/angle_num;

22. // 设置影片片段分身属性;

23. setProperty("itnstar"add i add j, _x, basex+Math.cos(angle)*r);

24. setProperty("itnstar" add i add j, _y, basey+Math.sin(angle)*r);

25. setProperty ("itnstar" add i add j, _alpha, 100-num);

26. setProperty ("itnstar" add i add j, _xscale, 100-num);

27. setProperty ("itnstar" add i add j, _yscale, 100-num);

28. }

29. }

将以上代码加到第1帧后,再点选第2帧,并写入以下一行代码:

stop();

程序分析:知其然更知其所以然

上面代码的本质是通过将一个实例复制成多个,并按一定规律分布显示出来,达到烟花绽开的效果。以“//”开头的代码行是程序注释,可有可无,主要作用是对程序代码作一些简单说明,运行时Flash会自动忽略掉它。上面代码中,第2、3行是设置星星影片片段分身的X、Y基点坐标,也就是最后形成的满天星动画的中心点坐标,random (value )函数得到一介于0~value-1之间的随机值。我们知道在三维立体中,远处的物体比近处的物体要暗要小,因此第5行的num是为后面影片片段分身的透明度及缩放设的值,以使整个图像看起来有三维立体的效果。影片片段分身的属性值在25、26、27行设置。第7行中Math.pow (x ,y )函数返回值是x的y次方。

下面主要说明第19行的函数duplicateMovieClip(target , newname,depth),它是用来复制影片片段分身对象的,其中:target:被用来复制的源影片片段的分身(本例中为mvcstar对象的实例itnstar)

newname:分身对象(即复制出来的新影片片段)的名称。本例中因为要复制出多个对象,为了不使对象的名称重复,这个参数用“"itnstar" add i add j”这种形式来表示的,and表示在字符itnstar后面再加上数字变量i和j,通过for循环,变量i和j的值将自动向上递增,这样,后面的对象名称将自动变为itnstar01、itnstar02、itnstar11、itnstar12……

depth:这是一个堆叠参数。指定新完成的对象与其他对象重叠时的显示层次,depth越大时,所显示的分身对象越在上。若有两个显示层次相同的影片片段,则先复制的影片片段会被后建立的取代。

有关影片片段分身所在角度及层次值需要一定的数学运算技巧,这里的设计思想是:用变量i控制影片片段显示几圈,变量j用来控制每圈中的影片片段的个数。在第一圈(i=0)有四个影片片段分身,每一分身相隔360/4=90度,其所在层次为1~4;第二圈(i=1)有八个影片片段分身,每一分身相隔360/8=45度,其所在的层次为5~12,依此类推。

Just Do It!

本例中的烟花是呈圆形发散的,这取决于数学公式Math.cos(angle)*r和Math.sin(angle)*r所确定的X、Y值。你可以设计出其他数学公式以获得不同的烟花形状。另外,为使动画更具有逼真的效果,还可以加入烟花升空时的声音特效。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有