FLASH编程蝴 蝶 飞 舞.docx

1、FLASH编程蝴 蝶 飞 舞第1章蝴 蝶 飞 舞本章要点本章通过介绍一个非常有趣的实例，来帮助读者熟悉Flash的操作界面，并讲解Flash关键帧动画的制作。本章主要涉及的知识点有：时间轴、帧、关键帧、层的概念；对于帧的相关操作，如增加、删除、复制帧；对于层的相关操作，如增加、删除层，层的几种模式等。本章内容主要包括 Flash的操作界面 时间轴的相关概念 帧的概念和操作 层的概念和操作 实例说明本例将制作一个蝴蝶飞舞的动画。播放这个动画时，花盆中的小花在长大，伴随着花的开放，一只蝴蝶在翩翩起舞，忽然，小花伸长“脖颈”，将蝴蝶“吞”到“肚”中。播放的画面如图1.1所示。图1.1 蝴蝶飞舞的运行

2、画面 学习目标通过本例学习，应能熟悉Flash的时间轴、工具箱、舞台等操作界面，了解Flash的基本操作和概念，掌握帧和层的应用，学会制作关键帧动画，为后面的复杂动画制作奠定良好的基础。 操作步骤(1) 运行Flash，选择【文件】|【新建】命令，创建新的Flash文件，如图1.2所示。图1.2 Flash的操作界面 提 示Flash操作界面的上方是菜单栏和工具栏，左面是工具面板，中间是舞台，所有动画中所有的“演员”都是在这个舞台上表演的，舞台的上面是时间轴面板，下面是动作、帮助、属性面板。(2) 舞台的大小是可以设置的，在图1.2下面的【属性】面板中，单击【大小】旁的按钮则会弹出【文档属性】

3、对话框，如图1.3所示。图1.3 Flash文档的属性设置对话框在其中的【尺寸】文本框中输入宽和高的尺寸，该范例为360像素(px)360像素，这样设置也就是说将来的舞台的大小就是360像素360像素，在图1.3中还可以设置舞台的背景颜色、帧频等选项，本范例中背景颜色为系统默认的白色，帧频设置为8fps。单击【确定】按钮完成属性设置。 提 示所谓“帧频”是计算机每秒显示的动画帧的数量。对于大多数计算机显示的动画，特别是 Web 站点中播放的动画，8 fps(每秒帧数)到 12 fps 就足够了(默认的帧频为 12 fps)。(3) 双击【时间轴】面板中的文字“图层1”就可以修改图层的名称，将这

4、个图层命名为“Frame”，如图1.4所示。(4) 在工具箱中选择【刷子】工具，在工具箱下面的【颜色】区域选择蓝色，在工具箱下面的【选项】区域中选择合适的刷子大小，在图1.2所示的舞台中画一个框，如图1.5所示。 图1.4 图层的命名 图1.5 用【刷子】工具绘图 提 示工具箱是在制作Flash动画过程中经常要使用的，工具箱中的各工具介绍如图1.6所示。图1.6 工具箱(5) 单击【时间轴】面板中的，就会新建一个图层，如图1.7所示。图1.7 新建一个图层 提 示在【时间轴】面板的左边有一块区域是对层进行操作的，那么什么是Flash的层呢？为什么一个Flash一般要分若干个层？为了便于理解，可

5、以将Flash的层跟我们比较熟悉的电影胶片进行比照，对于电影胶片来说，所有的人物、道具和背景等都是在一张底片上的，可以说电影胶片只有一层，而在Flash中，一般将人物放在一张“透明底片”上，将道具放在一张“透明底片”上，将背景放在一张“透明底片”上，这些不同物体的载体就构成了Flash的层。如果将这几张透明的底片重叠起来，看到的效果是与这些人物、道具和背景在一层上的效果是一样的。例如，图1.8、图1. 9、图1. 10、图1.11和图1.12这5张透明的“底片”，共同构成了图1.13。图1.8框架图1.9花盆图1.10植物图1.11蝴蝶图1.12背景图1.13合成图其实完全可以将上面5张图中的

6、物体画到一张图中，为什么在一层上可以完成的工作在Flash中要分成几层呢？以这个例子来说，有些物体在整个动画的过程中是不变的，如框架、花盆、背景等，而有些物体在一些帧中是要发生变化的，如小花要不断的长大，蝴蝶要翩翩起舞。Flash中的物体很多都是手画的，如果将这些变化的物体分别放在不同的层中，在画这个物体的时候，就不会担心由于自己不小心将其他物体“碰坏”了(在以后的例子中，也经常将一些对象分别放在不同的层，这样更便于维护)。(6) 双击【时间轴】面板中的文字“图层1”，将这个图层命名为“Pot”。单击这个图层，图层就会变成蓝色。蓝色的图层是处于编辑状态的。在Pot图层单击并向下面拖动，Pot图

7、层就会移到Frame图层的下面来，如图1.14所示。图1.14调整图层的位置 提 示层是有前后关系的，就像画在两层“透明底片”上的物体，前面的可以挡住后面的一样。可以利用鼠标直接拖拽来改变它们的顺序。越靠近上方，层的级别数越高。层的级别数越高，层中的元素就越显示在前面。(7) 在Pot图层处于编辑状态下时，在舞台上画一个花盆，这时候所画的花盆实际上是画在了Pot图层中，在舞台上显示的效果如图1.15所示。图1.15两个图层中的物体显示效果(8) 新建一个Background图层，将其拖到图层的最下面，如图1.16所示。图1.16层的模式 提 示层有4种模式，充分利用这4种模式会给调试工作带来便

8、利，节省许多宝贵的时间。 当前编辑模式：是由铅笔图标来表示的，说明使用者正在当前层进行绘画、调整、 编辑等。 隐藏模式：单击某层眼睛图标下面的小黑点就会出现一个红叉图标。该模式使当 前层的内容都从舞台上隐蔽起来，这样有利于排除干扰，以便尝试多种方案。 锁定模式：单击某层小锁图标下面的小黑点就会出现小锁图标。该模式使当前层 的元素处于锁定状态，使之不可以被选择工具选中，而且绘画工具也无法在锁定 层上创建对象。 线框模式：是由方形线框图标来表示的。该模式使该层的元素均以轮廓线的方式 显示。(9) 在Background图层中绘制一个背景，效果如图1.17所示。图1.17绘制了背景的效果图(10)

9、新建一个Plant图层，在时间轴的右面有一些刻度和一些数字(1、5、10、15)，与这些刻度相对应的每一层中，都有一些“格子”，这些“格子”是放“帧”的位置，每新建一个层在第一帧的位置就会自动添加一个“关键帧”。如果在这个关键帧中绘制了内容，这个关键帧就显示一个实心的黑点；如果关键帧中没有内容，就显示一个空心的点，如图1.18所示。图1.18 时间轴上的关键帧 提 示你看过电影的胶片吗？很长的电影胶片其实是由一张张“照片”组成的，连续播放这些“照片”，电影中的“人物”就动起来了。同样，“帧”就是Flash中的“照片”，很多帧中的内容连续播放，Flash就活起来了。时间轴由图层和帧等组成，图层位

10、于时间轴的左侧，而帧位于各个图层的右侧，在时间轴的上端有帧号，时间轴是制作动画的场所。(11) 用鼠标选中图层Plant的第二帧，右击就会弹出一个菜单，选择【插入关键帧】就可以在此图层的第二帧插入一个关键帧，如图1.19所示。图1.19插入一个关键帧 提 示用鼠标选中某一帧后按F6键，是插入关键帧的快捷方式。(12) 在Plant图层的第1帧至第10帧和第37帧至70帧分别插入关键帧，在第81帧上右击，在弹出的菜单上选择【插入帧】就可以在第81帧插入一个普通帧，如图1.20所示。图1.20插入连续的关键帧和普通帧 提 示单击某一帧，连续按下F6键，就可以从这一帧开始插入连续的关键帧。用鼠标选中

11、某一帧后按F5键，是插入普通帧的快捷方式，如果已经在第10帧插入了一个关键帧，再在第37帧插入一个关键帧，那么在这两个关键帧中间，系统会自动地插入普通帧。如果在第70帧插入了一个关键帧，再在第81帧插入一个普通帧，那么在从第70帧到第81帧中间也会自动地插入普通帧。跟帧相关的操作还有删除帧和复制帧。删除帧：用鼠标选中需要删除的帧(在选择的时候，可以同时按住Shift键或Ctrl键，那样可以选中多个连续或不连续的帧)，右击，然后从弹出的菜单里选择【删除帧】选项即可。复制帧：用鼠标选中需要复制的帧(注意Shift键的使用)，右击，从弹出的菜单里选择【复制帧】选项，把选中的帧复制到剪贴板里。然后，用

12、鼠标选中要把这些帧拷贝到的位置所属的那个帧，右击，从弹出的菜单里选择【粘贴帧】选项，这样就完成了帧的复制。另外，不妨试试帧的拖拽(同时也可按住Ctrl)，那样会很方便地完成帧的复制和移动。(13) 在Plant图层的第1帧至第10帧，分别画上如图1.21所示的内容。图1.21 连续关键帧中的对象(一) 提 示当单击【时间轴】面板上的某一帧时，就会有一条红色的线在这个位置上显示出来，这个红色的标志叫做播放头，播放头对应的帧和关键帧中的图形就会在舞台中显示出来，可以用这种办法在进行Flash设计的时候对舞台中的对象监视和调整。如果回车，播放头就会自动连续的向后移动，舞台上就会显示出所做的动画了。(

13、14) 在Plant图层的第37帧至第70帧，分别画上如图1.22所示的内容。图1.22连续关键帧中的对象(二)(15) 单击【时间轴】面板右上角的显示方式按钮会弹出如图1.23所示的菜单，根据需要可以不同的方式显示时间轴上的帧。图1.23帧的显示方式(16) 在Background图层的上面，新建一个层，命名为“Butterfly”，在这个层的第11帧至第41帧插入关键帧，如图1.24所示。图1.24新建图层并插入关键帧(17) 在Butterfly图层的第11帧至第41帧中绘制一些蝴蝶飞舞的图，用预览的方式查看，如图1.25所示。图1.25预览时间轴上的关键帧(18) 到现在为止，在各层中

14、分别画了窗口、花盆、小花、蝴蝶、背景，单击【时间轴】面板上的第40帧，在舞台上查看一下效果，发现画的窗口、花盆、背景并没有出现，如图1.26所示。为什么呢？因为在Frame、Pot、Background三层中只有第一个关键帧中有内容，怎样才能让这些内容在第81帧前都显示出来呢？在这三层的第81帧添加一个普通帧，再单击时间轴上的第40帧，在舞台上查看一下效果，发现窗口、花盆、小花、蝴蝶、背景都显示了出来，如图1.27所示。图1.26舞台上的显示效果(一)图1.27舞台上的显示效果(二) 提 示普通帧中的内容与它前面的第一个关键帧(包括空关键帧)的内容是相同的，而且，如果对普通帧中的内容进行操作，

15、它前面的关键帧也会发生变化。(19) 选择【控制】|【测试影片】命令，可以测试动画播放时的效果。 提 示Ctrl+Enter键是测试影片的快捷方式。(20) 选择【文件】|【保存】命令，将动画保存到合适的位置，如图1.28所示。 提 示想必每个使用计算机的人都遇到过死机的情况，如果用很长时间做了一个非常好的动画，没存盘就死机了，到时候哭也来不及了，所以每做几步就存一次盘是个好的习惯。Flash实际上也有人性化的提示，如果做的动画有改动并且还没有存盘，窗口标题栏中文件名的后面会显示一个星号，如图1.29所示。图1.28保存文件图1.29需要存盘的文件 提 示做动画看来也不是件很难的事只要把握好关键帧，在层中做好在舞台上演出的“演员”，安排好“演员”的出场时间、顺序、位置就可以了。其实让一个东西动起来的确不难，但做一个好动画却不是件太容易的事，除了精心地绘制图形外，可能最关键的就是动画的创意了。