Flash动画制作综合实例

第14章Flash动画制作综合实例教学提示：Flash最主要的功能是制作矢量动画，制作出效果独特且容量很小的Flash动画作品是其主要特色。同时，通过动作(Actions)指令集控制动画的播放、开关音效、制作交互式接口效果、Java网页特效等效果是其另一大特色。这使得Flash不再只是单纯的动画制作软件，而成为交互式多媒体工具、交互式网页制作工具、光盘自动播放画面制作工具。此外，它还可以做出多种格式的动画，不需死记程序语言就能做交互式游戏。本章介绍了4个Flash动画制作实例，综合运用了Flash的编程语言技术、Flash的设置文档属性、制作元件、时间轴、文字工具、测试动画速度等技术。教学目标：在掌握前面几章介绍的基本操作和基本知识的基础上，本章主要通过几个Flash动画制作的实例，让读者领略Flash的特效动画制作和强大的编程功能，进一步熟悉Flash利用动作语句来制作动画特效的操作方法和独自完成实例创作的能力，加深对Flash动画制作方法的认识和提高。14.1星光闪烁的特效实例大家可以想像这样一种场景：漆黑的夜空中，出现一点微弱的亮光，然后光线慢慢地增强，最后变成许许多多光芒四射的星星，若隐若现，而且，星星可以变换多种形状和颜色，很美的画面吧！如果将这些添加在你的动画中，将是一道非常亮丽的风景线。14.1.1设置文档属性(1)选择【文件】|【新建】命令，或单击标准工具栏中的新建按钮，新建一个FlashMX2004文档。(2)为了作图方便，选择【修改】|【文档】命令，打开如图14.1所示的【文档属性】对话框。图14.1【文档属性】对话框(3)场景大小自定，背景颜色设为黑色，主要是为了增加一种神秘的感觉，而且更能突出光线的效果，与动画设置的环境相搭配。网页设计与制作教程32214.1.2制作元件(1)制作一个球体。新建一个元件，取名为“光球”，行为为“图形”，然后在工具栏里选取圆形工具，在工作区绘制一个正圆形。(2)设置颜色效果。选择【窗口】|【混色器】命令，打开【混色器】面板，选择渐变色中的圆形渐变，制作两个滑块的渐变色，其中第一个滑块颜色选取成白色，但Alpha值设置为100，表示不透明，最好不要放在最左边，否则，中间的白点就太小；第二个滑块为浅黄色，Alpha值设置成0，即为全透明。这样设置以后，将会达到很好的视觉效果，如图14.2所示。(3)用渐变色填充图形，得到如图14.3所示的图形，小球有了放射性的效果。图14.2混色器图14.3填充图形(4)制作光线1。首先设置第一种光线色彩效果，选择矩形工具，并在【混色器】面板中，选择渐变色中的线性渐变，制作4个滑块的渐变色，其中两头的滑块颜色选取成黄色，但Alpha值设置为0，即全透明的黄色。中间滑块的颜色也选取成黄色的，但Alpha值仍设置为80，部分透明，如图14.4所示。(5)新建一个元件，取名为“光线一”，选择矩形工具，在黑色背景的电影上任意画一个区域，矩形框高度大概为“1pixel”左右，此时会有光线的效果。(6)制作光线2。首先设置第二种光线色彩效果。按照第(4)步的设置，制作4个滑块的渐变色，其中在两边的滑块颜色设为粉红色，Alpha值为0；中间滑块的颜色设为白色，Alpha值为100，如图14.5所示。(7)按照第(5)步的制作方法，制作一个元件，并命名为“光线二”。准备工作到现在都已经完成了，接下来，我们来应用做好的元件，制作另外一个星星的元件。(8)新建一个元件，设为“影片剪辑”，并命名为“星星”，直接按Ctrl+L组合键调出元件库，将“光线一”拖入，按组合键Ctrl+Alt+S，弹出对话框，调整它的大小和旋转角度，设旋转角度为20°，如图14.6所示。(9)再拖入一条“光线一”，与前一条光线的中心重合，按照同样的方法，旋转角度40°，大小设为不同于前光线，同理再拖入第3条“光线一”，分别旋转40°、50°和80°不等，角度大小均有所变化，如图14.7所示。第14章Flash动画制作综合实例323图14.4设置颜色图14.5设置颜色图14.6调整角度图14.7光线一(10)新建一图层，在新层中拖入“光线二”，一条旋转90°，一条不旋转角度，并把它们的大小设为比“光线一”大，这样才能重点突出它们，注意中心与前面的光线一致，如图14.8所示。(11)再新建一层，将“光球”拖入，调整大小和位置。这样星星的整体形状我们就做出来了，如图14.9所示。图14.8光线二图14.9星星14.1.3制作场景上小节中的操作只是一个星星的元件，还没有设定动画，下面我们就要制作流星的动画了。(1)选择【插入】|【创建新元件】命令新建一个影片剪辑，命名为“运动的星星”，按Ctrl+L组合键调出元件库，把刚才做好的星星拖放到工作区中心，注意和十字重合，如网页设计与制作教程324图14.10所示。(2)选取这个星星，运用工具栏中的工具把这个星星放大，然后在第20帧按F5键，插入一个普通帧，并且锁住这个层。(3)再新建一个图层，从元件库中拖入一个星星，放在刚做好的那个大星星的中心，再在第20帧按F6键插入一个关键帧。(4)把第20帧的那个星星拖到大星星的一个角上，再把这个星星的透明度设为40%，返回第一帧设为“运动渐变”动作，如图14.11所示。图14.10拖动元件图14.11建立星星的动画(5)再新建一个层，把第二层第1帧的星星复制到第三层的第1帧，这样做是为了使星星能重合，按照第二层的做法把它设为运动渐变，这次要把第20帧的星星放到大星星的另一个角上，依次做好五个层的运动星星，如图14.12所示。(6)把那个大星星层连同星星一起删除，因为我们只是用它来起辅助作用的。(7)选择【插入】|【创建新元件】命令再新建一个影片剪辑，命名为“运动”，现在是设流星的运动路径。本实例中用的是一个椭圆，你也可根据目的的不同画出不同的动运路径。在第100帧按F5键插入一个帧，然后锁定这个层，如图14.13所示。图14.12建立五个星星层图14.13绘制椭圆形第14章Flash动画制作综合实例325(8)新建一个层，把刚才做好的那个“运动的星星”元件拖到第1帧，中点对好运动路径的开头，再在第20帧按F7键，这样“运动的星星”做完了20帧的运动后就会停下来，如图14.14所示。(9)新建一个层，在第2帧按F7键，然后把“运动的星星”拖到第2帧，这颗星一定要放到第一颗星的后面，中心对好运动路径，再在第21帧按F7键，如图14.15所示。(10)新建一个层，在第3帧按F7键，然后把“运动的星星”拖到第3帧，这个星星放在第二个星星的后面，中心也要对好运动路径，然后在第22帧按F7键。依照这样的方法把星星依次排成你设定的运动路径。图14.14建立第一颗运动星星图14.15建立新层(11)最后把第一层的运动路径删除掉，如图14.16所示。图14.16建立星星图层(12)最后你把“运动”的影片剪辑拖放到绘制的背景图上，按Ctrl+Enter组合键观赏动画，如图14.17所示，有了闪烁的星星做装饰，画面显得很丰富多了！网页设计与制作教程326图14.17将元件拖拽到背景图14.2控制动画鱼影片的实例在这个练习当中，可以用四个不同的按钮分别来控制动画鱼的身体各个身体部件的运动。14.2.1设置文档属性(1)选择【文件】|【新建】命令，或单击标准工具栏中的新建按钮，新建一个FlashMX2004文档。(2)选择【修改】|【文档】命令，打开【文档属性】对话框。(3)场景大小设置成400像素×500像素，背景颜色设为白色，主要是为了看清楚动画的运动，如图14.18所示。图14.18【文档属性】对话框14.2.2制作元件(1)新建一个影片剪辑，命名为“身体”，在元件编辑区绘制一个鱼的图形，如图14.19所示。(2)在第4帧插入一个关键帧，然后将鱼的头部图形改变，将它的嘴巴张开，然后将帧延长到第6帧，如图14.20所示。第14章Flash动画制作综合实例327图14.19绘制图形图14.20插入关键帧(3)新建一个影片剪辑，命名为“背鳍”，在元件编辑区绘制一个背鳍，注意要让中心点对准背鳍图形的角部，如图14.21所示。(4)在第4帧插入关键帧，然后旋转并变形背鳍，将帧延长到第6帧，如图14.22所示。图14.21绘制背鳍图14.22旋转并变形背鳍(5)新建一个影片剪辑，命名为“胸鳍”，然后在元件编辑区绘制一个胸鳍的图形，如图14.23所示。(6)在第4帧插入关键帧，将胸鳍旋转并变形，将帧延长到第6帧，如图14.24所示。同样，新建一个影片剪辑，命名为“腹鳍”，然后在元件编辑区绘制一个腹鳍的图形，在在第4帧插入关键帧，将腹鳍旋转并变形，将帧延长到第6帧。网页设计与制作教程328图14.23绘制胸鳍图14.24旋转并变形胸鳍(7)新建一个影片剪辑，命名为“动画鱼”，在时间轴建立四个图层，分别命名为“身体”、“胸鳍、“背鳍”、“腹鳍”，然后从元件库中将鱼的元件拖拽到元件编辑区，分别对应放在四个图层上，最后组合成完整的鱼图形，如图14.25所示。(8)新建一个按钮元件，命名为“普通按钮”，在编辑区制作一个按钮，在这里为了使读者能够看得更清楚，我们使用一个不加修饰的长方形按钮，根据自己的喜好，在“指针经过”、“按下”、“点击”状态时插入关键帧，并设置颜色，如图14.26所示。到这里，所有的元件都制作完了。图14.25鱼元件图14.26普通按钮14.2.3制作场景(1)回到主场景中，现在的主场景是一片空白，将图层命名为“动画鱼”，从元件库中将“动画鱼”的元件拖拽到场景中央，如图14.27所示。(2)新建一个图层，命名为“身体按钮”，从元件库中将“普通按钮”元件拖拽到场景中，放在如图14.28所示的位置上，并在按钮下面输入“身体控制”。第14章Flash动画制作综合实例329图14.27拖拽元件图14.28拖拽按钮(3)用同样的方法，建立新层“背鳍按钮”、“胸鳍按钮”及“腹鳍按钮”，然后在图层上放置普通按钮元件，并输入对应文字“背鳍控制”、“胸鳍控制”及“腹鳍控制”，如图14.29所示。(4)用鼠标单击动画鱼元件，将它选取，然后选择【窗口】|【属性】命令，打开【属性】面板，在实例名称标签栏里输入“fish”，这样，就将实例的名称设置为fish了，如图14.30所示。图14.29建立新层图14.30输入名称(5)双击动画鱼元件，进入到元件编辑区内，可以看到动画鱼被分为四层，每一层分别放置着动画鱼的身体各个部位的元件。(6)单击身体的元件，将其选取，然后打开【属性】面板，在实例名称标签栏里输入“body”，这样就指明了实例名称，如图14.31所示。(7)按照上述方法，分别将“胸鳍”、“背鳍”和“腹鳍”分别命名为“sidefin”、“topfin”和“minfin”。(8)单击“场景1”回到主场景，新建一个图层，命名为“动作”。(9)选取动作层的第1帧，选择【窗口】|【开发面板】|【动作】命令(快捷键为F9)，选取动作命令打开面板，在面板里加入下列语句，如图14.32所示：网页设计与制作教程330topfinFlag=0;sidefinFlag=0;bodyFlag=0;minfinFlag=0;图14.31输入名称图14.32加入语句此变量的作用是记忆按钮的状态。例如，单击胸鳍按钮时，如果胸鳍在动的话，就停止；如果胸鳍处于静止状态，就让它动起来，它是一个记忆各部分是否处于动态的变量。将各个按钮的Flag状态值的初始值设置为0，则相应的实例处于动态；变量为1，则处于静止状态。(10)选取胸鳍控制的按钮，给这个按钮加入下列动作语句，如图14.33所示。图14.33给控制胸鳍的按钮加命令//每次单击时停止或播放指定的Instanceon(release){第14章Flash动画制作综合实例331if(sidefinFlag==0){//在当前位置停止sidefin实例的帧播放this.fish.sidefin.stop();sidefinFlag=1;}else{//在当前位置播放sidefin实例的帧this.fish.sidefin.