FLASH编程蝴 蝶 飞 舞.docx

FLASH编程蝴 蝶 飞 舞.docx

《FLASH编程蝴 蝶 飞 舞.docx》由会员分享，可在线阅读，更多相关《FLASH编程蝴 蝶 飞 舞.docx（13页珍藏版）》请在冰豆网上搜索。

FLASH编程蝴蝶飞舞

第1章

蝴蝶飞舞

本章要点

本章通过介绍一个非常有趣的实例，来帮助读者熟悉Flash的操作界面，并讲解Flash关键帧动画的制作。

本章主要涉及的知识点有：

时间轴、帧、关键帧、层的概念；对于帧的相关操作，如增加、删除、复制帧；对于层的相关操作，如增加、删除层，层的几种模式等。

本章内容主要包括

ØFlash的操作界面

Ø时间轴的相关概念

Ø帧的概念和操作

Ø层的概念和操作

实例说明

本例将制作一个蝴蝶飞舞的动画。

播放这个动画时，花盆中的小花在长大，伴随着花的开放，一只蝴蝶在翩翩起舞，忽然，小花伸长“脖颈”，将蝴蝶“吞”到“肚”中。

播放的画面如图1.1所示。

图1.1蝴蝶飞舞的运行画面

学习目标

通过本例学习，应能熟悉Flash的时间轴、工具箱、舞台等操作界面，了解Flash的基本操作和概念，掌握帧和层的应用，学会制作关键帧动画，为后面的复杂动画制作奠定良好的基础。

操作步骤

（1）运行Flash，选择【文件】|【新建】命令，创建新的Flash文件，如图1.2所示。

图1.2Flash的操作界面

提示

Flash操作界面的上方是菜单栏和工具栏，左面是工具面板，中间是舞台，所有动画中所有的“演员”都是在这个舞台上表演的，舞台的上面是时间轴面板，下面是动作、帮助、属性面板。

（2）舞台的大小是可以设置的，在图1.2下面的【属性】面板中，单击【大小】旁的按钮

则会弹出【文档属性】对话框，如图1.3所示。

图1.3Flash文档的属性设置对话框

在其中的【尺寸】文本框中输入宽和高的尺寸，该范例为360像素（px）×360像素，这样设置也就是说将来的舞台的大小就是360像素×360像素，在图1.3中还可以设置舞台的背景颜色、帧频等选项，本范例中背景颜色为系统默认的白色，帧频设置为8fps。

单击【确定】按钮完成属性设置。

提示

所谓“帧频”是计算机每秒显示的动画帧的数量。

对于大多数计算机显示的动画，特别是Web站点中播放的动画，8fps（每秒帧数）到12fps就足够了（默认的帧频为12fps）。

（3）双击【时间轴】面板中的文字“图层1”就可以修改图层的名称，将这个图层命名为“Frame”，如图1.4所示。

（4）在工具箱中选择【刷子】工具

，在工具箱下面的【颜色】区域

选择蓝色，在工具箱下面的【选项】区域中选择合适的刷子大小

，在图1.2所示的舞台中画一个框，如图1.5所示。

图1.4图层的命名图1.5用【刷子】工具绘图

提示

工具箱是在制作Flash动画过程中经常要使用的，工具箱中的各工具介绍如图1.6所示。

图1.6工具箱

（5）单击【时间轴】面板中的

，就会新建一个图层，如图1.7所示。

图1.7新建一个图层

提示

在【时间轴】面板的左边有一块区域是对层进行操作的，那么什么是Flash的层呢？

为什么一个Flash一般要分若干个层？

为了便于理解，可以将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张图中的物体画到一张图中，为什么在一层上可以完成的工作在Flash中要分成几层呢？

以这个例子来说，有些物体在整个动画的过程中是不变的，如框架、花盆、背景等，而有些物体在一些帧中是要发生变化的，如小花要不断的长大，蝴蝶要翩翩起舞。

Flash中的物体很多都是手画的，如果将这些变化的物体分别放在不同的层中，在画这个物体的时候，就不会担心由于自己不小心将其他物体“碰坏”了（在以后的例子中，也经常将一些对象分别放在不同的层，这样更便于维护）。

（6）双击【时间轴】面板中的文字“图层1”，将这个图层命名为“Pot”。

单击这个图层，图层就会变成蓝色。

蓝色的图层是处于编辑状态的。

在Pot图层单击并向下面拖动，Pot图层就会移到Frame图层的下面来，如图1.14所示。

图1.14　调整图层的位置

提示

层是有前后关系的，就像画在两层“透明底片”上的物体，前面的可以挡住后面的一样。

可以利用鼠标直接拖拽来改变它们的顺序。

越靠近上方，层的级别数越高。

层的级别数越高，层中的元素就越显示在前面。

（7）在Pot图层处于编辑状态下时，在舞台上画一个花盆，这时候所画的花盆实际上是画在了Pot图层中，在舞台上显示的效果如图1.15所示。

图1.15　两个图层中的物体显示效果

（8）新建一个Background图层，将其拖到图层的最下面，如图1.16所示。

图1.16　层的模式

提示

层有4种模式，充分利用这4种模式会给调试工作带来便利，节省许多宝贵的时间。

●当前编辑模式：

是由铅笔图标来表示的，说明使用者正在当前层进行绘画、调整、

编辑等。

●隐藏模式：

单击某层眼睛图标下面的小黑点就会出现一个红叉图标。

该模式使当

前层的内容都从舞台上隐蔽起来，这样有利于排除干扰，以便尝试多种方案。

●锁定模式：

单击某层小锁图标下面的小黑点就会出现小锁图标。

该模式使当前层

的元素处于锁定状态，使之不可以被选择工具选中，而且绘画工具也无法在锁定

层上创建对象。

●线框模式：

是由方形线框图标来表示的。

该模式使该层的元素均以轮廓线的方式

显示。

（9）在Background图层中绘制一个背景，效果如图1.17所示。

图1.17　绘制了背景的效果图

（10）新建一个Plant图层，在时间轴的右面有一些刻度和一些数字（1、5、10、15…），与这些刻度相对应的每一层中，都有一些“格子”，这些“格子”是放“帧”的位置，每新建一个层在第一帧的位置就会自动添加一个“关键帧”。

如果在这个关键帧中绘制了内容，这个关键帧就显示一个实心的黑点；如果关键帧中没有内容，就显示一个空心的点，如图1.18所示。

图1.18时间轴上的关键帧

提示

你看过电影的胶片吗？

很长的电影胶片其实是由一张张“照片”组成的，连续播放这些“照片”，电影中的“人物”就动起来了。

同样，“帧”就是Flash中的“照片”，很多帧中的内容连续播放，Flash就活起来了。

时间轴由图层和帧等组成，图层位于时间轴的左侧，而帧位于各个图层的右侧，在时间轴的上端有帧号，时间轴是制作动画的场所。

（11）用鼠标选中图层Plant的第二帧，右击就会弹出一个菜单，选择【插入关键帧】就可以在此图层的第二帧插入一个关键帧，如图1.19所示。

图1.19　插入一个关键帧

提示

用鼠标选中某一帧后按F6键，是插入关键帧的快捷方式。

（12）在Plant图层的第1帧至第10帧和第37帧至70帧分别插入关键帧，在第81帧上右击，在弹出的菜单上选择【插入帧】就可以在第81帧插入一个普通帧，如图1.20所示。

图1.20　插入连续的关键帧和普通帧

提示

单击某一帧，连续按下F6键，就可以从这一帧开始插入连续的关键帧。

用鼠标选中某一帧后按F5键，是插入普通帧的快捷方式，如果已经在第10帧插入了一个关键帧，再在第37帧插入一个关键帧，那么在这两个关键帧中间，系统会自动地插入普通帧。

如果在第70帧插入了一个关键帧，再在第81帧插入一个普通帧，那么在从第70帧到第81帧中间也会自动地插入普通帧。

跟帧相关的操作还有删除帧和复制帧。

删除帧：

用鼠标选中需要删除的帧（在选择的时候，可以同时按住Shift键或Ctrl键，那样可以选中多个连续或不连续的帧），右击，然后从弹出的菜单里选择【删除帧】选项即可。

复制帧：

用鼠标选中需要复制的帧（注意Shift键的使用），右击，从弹出的菜单里选择【复制帧】选项，把选中的帧复制到剪贴板里。

然后，用鼠标选中要把这些帧拷贝到的位置所属的那个帧，右击，从弹出的菜单里选择【粘贴帧】选项，这样就完成了帧的复制。

另外，不妨试试帧的拖拽（同时也可按住Ctrl），那样会很方便地完成帧的复制和移动。

（13）在Plant图层的第1帧至第10帧，分别画上如图1.21所示的内容。

图1.21连续关键帧中的对象

（一）

提示

当单击【时间轴】面板上的某一帧时，就会有一条红色的线在这个位置上显示出来，这个红色的标志叫做播放头，播放头对应的帧和关键帧中的图形就会在舞台中显示出来，可以用这种办法在进行Flash设计的时候对舞台中的对象监视和调整。

如果回车，播放头就会自动连续的向后移动，舞台上就会显示出所做的动画了。

（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）到现在为止，在各层中分别画了窗口、花盆、小花、蝴蝶、背景，单击【时间轴】面板上的第40帧，在舞台上查看一下效果，发现画的窗口、花盆、背景并没有出现，如图1.26所示。

为什么呢？

因为在Frame、Pot、Background三层中只有第一个关键帧中有内容，怎样才能让这些内容在第81帧前都显示出来呢？

在这三层的第81帧添加一个普通帧，再单击时间轴上的第40帧，在舞台上查看一下效果，发现窗口、花盆、小花、蝴蝶、背景都显示了出来，如图1.27所示。

图1.26　舞台上的显示效果

（一）

图1.27　舞台上的显示效果

（二）

提示

普通帧中的内容与它前面的第一个关键帧（包括空关键帧）的内容是相同的，而且，如果对普通帧中的内容进行操作，它前面的关键帧也会发生变化。

（19）选择【控制】|【测试影片】命令，可以测试动画播放时的效果。

提示

Ctrl+Enter键是测试影片的快捷方式。

（20）选择【文件】|【保存】命令，将动画保存到合适的位置，如图1.28所示。

提示

想必每个使用计算机的人都遇到过死机的情况，如果用很长时间做了一个非常好的动画，没存盘就死机了，到时候哭也来不及了，所以每做几步就存一次盘是个好的习惯。

Flash实际上也有人性化的提示，如果做的动画有改动并且还没有存盘，窗口标题栏中文件名的后面会显示一个星号，如图1.29所示。

图1.28　保存文件

图1.29　需要存盘的文件

提示

做动画看来也不是件很难的事——只要把握好关键帧，在层中做好在舞台上演出的“演员”，安排好“演员”的出场时间、顺序、位置就可以了。

其实让一个东西动起来的确不难，但做一个好动画却不是件太容易的事，除了精心地绘制图形外，可能最关键的就是动画的创意了。