flash动画设计第11章.ppt

《flash动画设计第11章.ppt》由会员分享，可在线阅读，更多相关《flash动画设计第11章.ppt（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、pp熟悉网页广告的制作方法pp熟悉网页导航菜单的制作方法pp了解星空动画的制作方法第第11章 综合实例【学习目标】【操作实例【操作实例1 1】网页广告动画的制作】网页广告动画的制作目标目标1 1：准备素材：准备素材1 1、新建文档，大小为、新建文档，大小为550*150550*150像素，其他选项保持像素，其他选项保持默认即可。默认即可。2 2、绘制矩形，大小同样为、绘制矩形，大小同样为550*150550*150像素，移动位置像素，移动位置覆盖住整个文档，为其填充红色到橙黄色的渐变覆盖住整个文档，为其填充红色到橙黄色的渐变颜色，修改图层名称为颜色，修改图层名称为“bg”“bg”。3 3、新建

2、图层，名称为、新建图层，名称为“sun”“sun”，绘制圆形，填充为，绘制圆形，填充为浅黄色，移至文档中心部位，转换为图形元件，浅黄色，移至文档中心部位，转换为图形元件，如图如图11.111.1所示。所示。11.111.1网页广告动画实例网页广告动画实例4、新建名称为“l”的图层，绘制圆环，内圈直径等于“sun”元件的直径，颜色为橙色，转换为图形元件，名称为“guang”，移动元件，知道“guang”元件恰好与“sun”图形元件叠加，如图11.2所示。5、新建名称为“man”的图层，绘制男人的外形，转换为图形元件，如图11.3所示。11.111.1网页广告动画实例网页广告动画实例6、新建名称为

3、“woman”的图层，绘制女人的外形，转换为图形元件，如图11.4所示。7、新建名称为“tree”的图层，绘制一棵大树，转换为图形元件，名称为“bigtree”，如图11.5所示。8、新建名称为“tree2”的图形，绘制另外一棵大树，转换为元件，名称为“tree”，如图11.6所示。11.111.1网页广告动画实例网页广告动画实例目标2：创建动画9、首先锁定“bg”层，使其不可编辑。选择“sun”层，创建一个“sun”元件从屏幕外向上升起到画面中心的动画，共三帧。10、选择“l”层，在第3帧到第10帧区间内，为“guang”元件创建扩张并逐渐消失的动画，拷贝帧，向后重复粘贴六次，然后拷贝整个帧

4、区间，在新图层“l2”、“l3”上错后一帧分别粘贴，如图11.7所示。11.111.1网页广告动画实例网页广告动画实例11、选择“tree”图层，在第5帧到第8帧区间内，在画面右下角为“bigtree”创建由小变大的动画。12、同样，选择“tree2”层，在第9帧到第12帧区间内，在画面右下角为“tree”元件创建由小变大的动画。如图11.8所示。11.111.1网页广告动画实例网页广告动画实例13、创建“man”和“woman”元件由画面外移动到画面中心的动画。14、在“sun”图层，创建“sun”元件扩张并覆盖整个屏幕的动画，如图11.9所示。15、新建名称为“black”的图层，绘制一个

5、大小刚刚能覆盖住舞台为准，填充深红色，转换为图形元件，名称为“black”。16、在第28帧和第39帧区间创建“black”元件的渐现动画。11.111.1网页广告动画实例网页广告动画实例1717、新建名称为、新建名称为“text”“text”的图层，创建文字的图层，创建文字“LIFE”“LIFE”，颜色为淡黄色，放置在画面中心位，颜色为淡黄色，放置在画面中心位置。置。1818、新建名称为、新建名称为“url”“url”的图层，创建文字的图层，创建文字“”“”，颜色为浅紫色，转换为图，颜色为浅紫色，转换为图形元件，并为这个图形元件添加链接网址形元件，并为这个图形元件添加链接网址“”“”。如图。

6、如图11.1011.10所示。所示。1919、在所有图层的第、在所有图层的第120120帧插入普通帧，目的是让最帧插入普通帧，目的是让最后的字幕效果停留一段时间。后的字幕效果停留一段时间。2020、整个动画效果完成，时间轴的结构如图、整个动画效果完成，时间轴的结构如图11.1111.11所所示。示。11.111.1网页广告动画实例网页广告动画实例【操作实例2】网页导航菜单的制作目标1：创建菜单中的按钮1、新建文档，大小为199*322像素，背景色为浅蓝色，其它采用默认值。2、选择“矩形工具”绘制三个按钮元件，分别命名为“button1”、“button2”、“button3”，在按钮上输入文字

7、，此按钮作为一级菜单按钮，如图11.12所示。11.211.2网页导航菜单实例网页导航菜单实例3 3、新建按钮元件，命名为、新建按钮元件，命名为subsub，比，比“button“button按钮按钮”略小，并在上面输入文字，此按钮作为二级菜略小，并在上面输入文字，此按钮作为二级菜单按钮，如图单按钮，如图11.1311.13所示。所示。目标目标2 2：创建弹出式菜单影片剪辑：创建弹出式菜单影片剪辑4 4、新建名称为、新建名称为“main”“main”的影片剪辑元件，作为主影的影片剪辑元件，作为主影片剪辑。片剪辑。5 5、新建三个图层，名称为、新建三个图层，名称为“b1”“b1”、“b2”“b2

8、”、“b3”“b3”，分别把按钮元件，分别把按钮元件“button1”“button1”、“button2”“button2”、“button3”“button3”拖放到对应的图层，三个按钮元拖放到对应的图层，三个按钮元件在工作区按顺序排列，如图件在工作区按顺序排列，如图11.1411.14所示。所示。11.211.2网页导航菜单实例网页导航菜单实例6、新建名称为“s1”的图层，把按钮元件“sub”拖放到当前图层，复制5个，均匀对齐，放置在工作区上方中间位置，如图11.15所示。11.211.2网页导航菜单实例网页导航菜单实例7、把“button1”、“button2”、“button3”放置

9、到工作区上方的中间位置，以刚好覆盖住5个“sub”按钮元件为准。在“b1”、“b2”、“b3”层的第5帧和第20帧插入关键帧，移动“button1”、“button2”、“button3”三个按钮到工作区的下方，在第5帧和第20帧之间创建补间动画，如图11.16所示。11.211.2网页导航菜单实例网页导航菜单实例8、选择“b1”、“b2”、“b3”层的第15帧，插入关键帧。然后向左拖动刚刚插入的关键帧到第8帧的位置。在“b1”、“b2”、“b3”层的第15帧再次插入关键帧，同样向左拖动到第12帧位置。这样，当按钮向下移动时会有一个缓冲的效果，使菜单的动画效果更精彩，如图11.17所示。11.

10、211.2网页导航菜单实例网页导航菜单实例9、复制“b1”、“b2”、“b3”层的第5帧到第20帧，在第21帧进行粘贴。保持刚刚粘贴的帧处于被选择状态，右击鼠标，在弹出的快捷菜单中单击【翻转帧】命令，将帧的播放顺序翻转，如图11.18所示。10、为了保持三个按钮下落和上浮的对称性，选择“b1”、“b2”、“b3”层的第21帧，将关键帧清除掉，然后将帧删除。11.211.2网页导航菜单实例网页导航菜单实例11、复制“b2”、“b3”层的第5帧到第35帧，在“b2”、“b3”层的第40帧处粘贴，复制“b3”层的第5帧到第35帧，在“b3”层第75帧处粘贴。12、新建名称为“zhe”的图层，选择“矩

11、形工具”画一个矩形，删除其轮廓，填充为背景的浅蓝色。11.211.2网页导航菜单实例网页导航菜单实例13、在“zhe”层的第40、43、47、55、63、67、70、75、78、82、90、98、102、105帧处插入关键帧，并且调整关键帧的位置，让矩形的上边缘在每一个关键帧与“button3”按钮的下边缘保持对齐。14、在“s1”层插入关键帧，调整五个按钮的位置，使其与“b1”、“b2”、“b3”三个按钮滑动时所露出的空隙相匹配，如图11.19所示。11.211.2网页导航菜单实例网页导航菜单实例目标3：设置菜单的动画效果15、回到主场景工作区，把当前图层命名为“mv”，拖放影片剪辑元件“m

12、ain”到工作区中，调整好位置，并在【属性】对话框指定影片剪辑元件的实例名为main。16、新建影片名称为“action”的剪辑元件，并且在第1、2、10、11、20、21、30、31帧处插入关键帧，然后为这些关键帧添加动作代码，分别为：11.211.2网页导航菜单实例网页导航菜单实例第1帧stop();第2帧tellTarget(/main)gotoAndStop(1);stop();11.211.2网页导航菜单实例网页导航菜单实例第10帧stop();第11帧tellTarget(/main)gotoAndPlay(5);stop();11.211.2网页导航菜单实例网页导航菜单实例第第2

13、020帧帧stop();stop();第第2121帧帧tellTarget(/main)tellTarget(/main)gotoAndPlay(40);gotoAndPlay(40);stop();stop();第第3030帧帧stop();stop();11.211.2网页导航菜单实例网页导航菜单实例第31帧tellTarget(/main)gotoAndPlay(75);stop();11.211.2网页导航菜单实例网页导航菜单实例1717、在、在“main”“main”影片剪辑元件的时间轴上新建名影片剪辑元件的时间轴上新建名称为称为“action”“action”的图层。的图层。181

14、8、在、在“action”“action”层第层第1 1帧和第帧和第2020帧插入关键帧，帧插入关键帧，为两个关键帧添加同样的动作：为两个关键帧添加同样的动作：stop();stop();1919、在、在“action”“action”层第层第3535帧插入关键帧，为其添帧插入关键帧，为其添加动作：加动作：tellTarget(/action)tellTarget(/action)play();play();stop();stop();11.211.2网页导航菜单实例网页导航菜单实例2020、在、在“action”“action”层第层第5555帧插入关键帧，为其添加帧插入关键帧，为其添加动作

15、：动作：stop();stop();2121、在、在“action”“action”层第层第7070帧插入关键帧，为其添加帧插入关键帧，为其添加动作：动作：tellTarget(/action)tellTarget(/action)play();play();stop();stop();11.211.2网页导航菜单实例网页导航菜单实例22、在“action”层第90帧插入关键帧，为其添加动作：stop();23、在“action”层第105帧插入关键帧，为其添加动作：tellTarget(/action)play();stop();11.211.2网页导航菜单实例网页导航菜单实例2424、把播

16、放头调到第、把播放头调到第1 1帧，单击选择帧，单击选择“button1”“button1”按按钮，为其添加动作：钮，为其添加动作：on(release)on(release)gotoAndPlay(5);gotoAndPlay(5);2525、单击选择、单击选择“button2”“button2”按钮，为其添加动作：按钮，为其添加动作：on(release)on(release)gotoAndPlay(40);gotoAndPlay(40);11.211.2网页导航菜单实例网页导航菜单实例2626、单击选择、单击选择“button3”“button3”按钮，为其添加动作：按钮，为其添加动作：

17、on(release)on(release)gotoAndPlay(75);gotoAndPlay(75);2727、把播放头调整到第、把播放头调整到第2020帧，单击选择帧，单击选择“button1”“button1”按钮，按钮，为其添加动作：为其添加动作：on(release)on(release)play();play();tellTarget(/action)tellTarget(/action)gotoAndStop(1);gotoAndStop(1);11.211.2网页导航菜单实例网页导航菜单实例28、单击选择“button2”按钮，为其添加动作：on(release)play(

18、);tellTarget(/action)gotoAndStop(20);11.211.2网页导航菜单实例网页导航菜单实例29、单击选择“button2”按钮，为其添加动作：on(release)play();tellTarget(/action)gotoAndStop(30);11.211.2网页导航菜单实例网页导航菜单实例3030、把播放头调整到第、把播放头调整到第4040帧，单击选择帧，单击选择“button3”“button3”按钮，按钮，为其添加动作：为其添加动作：on(release)on(release)gotoAndPlay(75);gotoAndPlay(75);3131、把

19、播放头调整到第、把播放头调整到第5555帧，单击选择帧，单击选择“button1”“button1”按钮，按钮，为其添加动作：为其添加动作：on(release)on(release)play();play();tellTarget(/action)tellTarget(/action)gotoAndStop(10);gotoAndStop(10);11.211.2网页导航菜单实例网页导航菜单实例32、单击选择“button2”按钮，为其添加动作：on(release)play();tellTarget(/action)gotoAndStop(1);11.211.2网页导航菜单实例网页导航菜单

20、实例33、单击选择“button3”按钮，为其添加动作：on(release)play();tellTarget(/action)gotoAndStop(30);11.211.2网页导航菜单实例网页导航菜单实例34、把播放头调整到第90帧，单击选择“button1”按钮，为其添加动作：on(release)play();tellTarget(/action)gotoAndStop(10);11.211.2网页导航菜单实例网页导航菜单实例35、单击选择“button2”按钮，为其添加动作：on(release)play();tellTarget(/action)gotoAndStop(20);1

21、1.211.2网页导航菜单实例网页导航菜单实例3636、单击选择、单击选择“button3”“button3”按钮，为其添加动作：按钮，为其添加动作：on(release)on(release)play();play();tellTarget(/action)tellTarget(/action)gotoAndStop(1);gotoAndStop(1);3737、在主场景时间轴新建名称为、在主场景时间轴新建名称为“ac”“ac”的图层，把的图层，把电影剪辑元件电影剪辑元件“action”拖放本层的任意位置拖放本层的任意位置并指定实例名为“action”。按下【。按下【Ctrl+EnterCt

22、rl+Enter】键测试动画。】键测试动画。11.211.2网页导航菜单实例网页导航菜单实例【操作实例3】创建星空动画1、新建Flash文档，设置文档大小为400*400像素,背景色为深蓝色。如图11.20所示。2、绘制如图11.21所示的图形。3、在图形上右击鼠标，在弹出的快捷菜单中选择【转换为元件】命令，把图形转换为影片剪辑元件，名称为“star”。11.311.3星空动画实例星空动画实例6 64、双击“star”元件，转换到影片剪辑的工作区。在工作区的图形中右击图形，把图形转换为图形元件，名称为“star1”。5、创建“star1”的图形动画，效果为从第1帧到第15帧“star1”图形元

23、件逐步变宽变长，并一直持续到第40帧，然后“star1”图形元件变窄变长时间轴如图11.22所示。11.311.3星空动画实例星空动画实例6、在第51帧插入关键帧，添加如下动作代码：stop();7、回到主场景，单击工作区中的“star”影片剪辑元件，指定其实例名为“star”。8、修改图层名称为“star”，在第2帧插入普通帧。11.311.3星空动画实例星空动画实例9 9、新建名称为、新建名称为“action”“action”的图层，在第的图层，在第2 2帧插入关帧插入关键帧，添加如下代码：键帧，添加如下代码：if(n1000)if(n1000)n=0;n=0;/设置停止的条件，满足条件初

24、始化的变量。设置停止的条件，满足条件初始化的变量。n=n+1;n=n+1;/变量变量“n”“n”加加1 1。11.311.3星空动画实例星空动画实例duplicateMovieClip(star,star add n,n);duplicateMovieClip(star,star add n,n);/复制影片剪辑元件复制影片剪辑元件“star”“star”然后重新命名，放置然后重新命名，放置在层。在层。setProperty(star add n,_rotation,random(360);setProperty(star add n,_rotation,random(360);/设置复制后的

25、影片剪辑元件的旋转属性，在设置复制后的影片剪辑元件的旋转属性，在360360度内任意旋转。度内任意旋转。setProperty(star add n,_alpha,setProperty(star add n,_alpha,Number(random(50)+50);Number(random(50)+50);/设置复制后的影片剪辑元件的透明度在设置复制后的影片剪辑元件的透明度在5050到到100100之内任意变化。之内任意变化。11.311.3星空动画实例星空动画实例n=n+1;n=n+1;duplicateMovieClip(star,star add n,n);duplicateMovi

26、eClip(star,star add n,n);setProperty(star add n,_rotation,random(360);setProperty(star add n,_rotation,random(360);setProperty(star add n,_alpha,setProperty(star add n,_alpha,Number(random(50)+50);Number(random(50)+50);n=n+1;n=n+1;duplicateMovieClip(star,star add n,n);duplicateMovieClip(star,star ad

27、d n,n);setProperty(star add n,_rotation,random(360);setProperty(star add n,_rotation,random(360);setProperty(star add n,_alpha,setProperty(star add n,_alpha,Number(random(50)+50);Number(random(50)+50);n=n+1;n=n+1;11.311.3星空动画实例星空动画实例duplicateMovieClip(star,star add n,n);setProperty(star add n,_rotat

28、ion,random(360);setProperty(star add n,_alpha,Number(random(50)+50);/以上几行复制前面的代码，以得到更加随机和无序的效果。10、测试动画，可以看到我们在星群中穿梭的动画效果。11.311.3星空动画实例星空动画实例n n通过广告动画实例的学习，可以认识到，一些动画效果并不需要特别的复杂的操作和代码，只要能掌握对帧和画面的控制方法和技巧，简单的命令也能够做出效果绚丽的动画。11.411.4小结与提高小结与提高n n在在11.211.2节，我们学习了如何制作一组弹出式菜单，节，我们学习了如何制作一组弹出式菜单，只要在每个菜单的按钮

29、上添加网址，便能够运用只要在每个菜单的按钮上添加网址，便能够运用到网页中去了。到网页中去了。事实上，事实上，11.211.2节的实例还有许多能够完善的地方。节的实例还有许多能够完善的地方。比如可以在制作菜单按钮时，为按钮文字制作文比如可以在制作菜单按钮时，为按钮文字制作文字特效，或者为按钮制作变色的背景。也可以为字特效，或者为按钮制作变色的背景。也可以为按钮添加音效，从而使导航按钮在实际应用中更按钮添加音效，从而使导航按钮在实际应用中更有动感。同样的，我们还可以更改菜单的滑动弹有动感。同样的，我们还可以更改菜单的滑动弹出方式为其他的弹出方式。无论怎样更改，原理出方式为其他的弹出方式。无论怎样更改，原理是相同的，都是通过动作代码来交互控制帧的跳是相同的，都是通过动作代码来交互控制帧的跳转和播放。其实只要能够灵活的运用按钮、影片转和播放。其实只要能够灵活的运用按钮、影片剪辑，不需要复杂的动作代码也能够做出惊人的剪辑，不需要复杂的动作代码也能够做出惊人的效果。效果。11.411.4小结与提高小结与提高n n11.3节的星空动画中，我们运用了较为复杂的代码，这些代码的具体知识参见第八章。11.411.4小结与提高小结与提高1、运用本书的知识，进一步完善和提高11.1节实例网页导航菜单。2、制作一个宣传Flash的动画广告。11.511.5思考和练习思考和练习