《网页设计与网站建设》--第12章-Flash动画制作基础

1、第12章 Flash动画制作基础7/25/2022本章知识技能要点：场景、时间轴、层、关键帧、普通帧的概念工具箱面板、属性面板的使用方法形状补间和动作补间的概念和应用运动引导层的制作和应用遮罩层的制作和应用12.1 认识Flash12.1.1 Flash 8 简介 Flash是Macromedia公司出品的二维动画创作专业软件，在计算机界的用途十分广泛，包括网页动画制作，教学课件制作，小游戏制作和MTV制作等等。 Flash的前身是一款叫作“Future Splash”的矢量动画插件，它的成长经历了Flash 4、Flash 5、Flash MX、Flash MX 2004和最新推出的Flas

2、h 8几个版本。Adobe flash cs4是Flash的最新版本12.1 认识Flash12.1.3 Flash文件的类型FLA文件：包含Flash文档的媒体、时间轴和脚本等基本信息的文件。是设计者在Flash中使用的主要文件。SWF文件：在Web页中显示的文件。是FLA文件的压缩版本。12.1 认识Flash12.1.4.2 Flash 8 的工作界面进入Flash 8 以后，显示Flash 8的默认工作界面，如图示。12.1 认识Flash状态栏-左侧显示着正在编辑的文件及内容，如图中显示的正在编辑的是文件“未命名-1”的“场景1”。右侧的两个按钮分别是“场景切换”按钮和“元件切换”按

3、钮。最右端是工作区百分比显示窗口。时间轴-预设位置在状态栏的下方，其左侧是图层编辑区，在此进行图层的编辑；右侧是帧编辑区，完成动画的帧编辑。12.1 认识Flash场景舞台-工作界面中央的白色区域就是场景舞台（也称工作区），是显示和编辑动画对象的主要区域。面板组-是特定的功能单位的集合，包含某一特定的功能，如动作面板、属性面板、混色器面板、对齐面板和库面板等。设位置在状态栏的下方，其左侧是图层编辑区，在此进行图层的编辑；右侧是帧编辑区，完成动画的帧编辑。12.1.5 Flash中的一些基本概念 12.1.5.1 帧 帧是动画的基本单元，Flash动画就是许多连续帧的内容连续播放构成的，一帧就相

4、当于电影胶片中的一格。 时间轴上的帧编辑区中横向排列的小方格就是帧，处于自然状态下没有进行任何操作的帧称为“空白帧”，每一帧对应的上方的数字是该帧的编号。帧编辑区中的红色竖线是播放磁头，播放磁头所在的帧就是当前所编辑的帧。12.1.5.1 帧Flash中有两类重要的帧，即为“静态帧”和“关键帧”。静态帧：不参与任何动画效果的帧称为静态帧，（静态帧也称作普通帧）。关键帧：定义一个动作的起始状态和终止状态的帧称为关键帧。其中没有添加任何对象，只作为一个关键点存在，称为空白关键帧。关键帧在时间轴上的显示是在其间有一个黑色小圆点（空白关键帧是一个小圆圈）。12.1.5.2 元件在Flash中，元件是整

5、个动画的基础元件有三种类型：图形元件：最常用，用于创建静态元件，并且可以引用外部的图片来作为元件。按钮元件：用于创建动态交互按钮的形式，即在鼠标处于不同的状态产生不同的响应。电影剪辑元件：是动态视频剪辑元件 ，不同于上面两种形式的是它有自己独立的时间轴，是动态的元件形式。12.1 认识Flash12.1.5.3 库库是用于管理元件的地方，元件制作完毕后都会自动保存到库中。打开库面板可以查看、选择和使用元件。可以通过选择“窗口”“库”命令来实现对元件的调用，也可以通过选择“文件”“导入库”命令来将外部的元件导入指定的图片库中。12.1.5.4 层将不同的对象放置在不同的图层中，这样在修改其中一个

6、对象时不会影响到其他的对象。图层可以形象地理解为透明的玻璃纸，不同的对象绘制在不同的透明纸上，它们相互重叠以显示整体的内容，但在修改某一对象时其他对象不受影响。对于图层的操作在时间轴的“图层编辑区”中实现。12.1 认识Flash12.1.5.5 场景Flash中的场景就如同电影里的分镜头，一个影视作品不可能仅仅在同一个场景内完成，在不同的场景中相互切换，能使得作品具有更加丰富的感染力。Flash也是如此。一个Flash文档允许创建许多个场景，作者可以在不同的场景中编排不同的内容，播放时可以任意控制各个场景先后顺序。12.1.5.6 帧频率帧频率（fps）就是动画的播放速度，指每秒播放的帧的多

7、少。Flash默认的帧频率是12.0 fps。12.1.6 Flash的基本操作 “逐帧动画”，是指每一帧的内容都与其前一帧有所不同，以此实现动画的效果。下面详细介绍一个眼球会转动的小猫动画制作步骤：（1）打开Flash 8 ，由“文件”菜单“导入”“导入到库”，选择一幅图片导入到库中。此时的库面板中就可以看到一个位图元件，其名称为“cat.jpg”,元件的类型是“位图”。如图所示。（2）选中库面板中的“cat.jpg”元件，直接从库面板中拖拽到舞台。然后点击工具箱面板中的“任意变形”工具，在舞台上改变图像的大小与场景的大小相同。（3）此时的图片位于文档的“图层1”当中，它只有一个帧，如果计划

8、本动画共需要60帧，就在时间轴的“图层1”中第60帧处右键单击，在展开的快捷菜单中选择“插入帧”命令，就将第一帧的内容复制了60帧。时间轴上从第1帧到第60帧呈现一条灰色的阴影。如图示。（4）单击时间轴右侧的图层编辑区右下端的“插入图层”按钮，为本场景添加一新的“图层2”。（5）现在开始绘制小猫的眼睛。即编辑图层2的第1帧（在图层2的第1帧上单击，便选中了它）。单击工具箱面板中的“椭圆工具”，在属性面板上修改“椭圆工具”的属性为：轮廓线为无色，填充色为黑色，如图。（6）使用上述设置的椭圆工具，在图层2的第1帧上绘制小猫的眼睛，让小猫眼框的黑眼球最开始出项在眼眶里的最左端。（7）右键单击图层2的

9、第2帧，在弹出的快捷菜单里选择“插入关键帧”命令，然后在这一关键帧上修改小猫眼框的黑眼球的位置向右偏移少许。（8）反复重复步骤（7），不断改变小猫眼框的黑眼球的位置，让其移动到最右端后再向左偏移，形成眼球左右移动的效果。如图。（9）全部完成了56个关键帧的制作之后，该动画的制作就结束了。此时的时间轴如下图。点击“控制”菜单“测试影片”命令，便可以预览动画的播放效果，可见小猫的眼睛在左顾右盼。（10）关闭预览窗口。点击“文件”菜单“保存”命令，将文档保存为“.fla”文件，这种文件可以用Flash打开，允许重新编辑，但是不能在网页中使用。（11）点击“文件”菜单“导出”“导出影片”命令，就会生成

10、一个“.swf”文件，这种文件不可以用Flash打开，也不允许重新编辑，但是能够插入到网页中，或者直接用浏览器预览。 12.2 形状、文字和颜色的应用12.2.1 常用绘图工具的使用工具箱面板中常用的绘图工具如图示。其中包括：（1）叶子（2）月亮（3）气球（4）花朵（5）透视文字（6）波浪文字12.2.2 文字和颜色的使用12.2.2.1 文本工具的使用选择绘图工具箱中的文本工具之后，在舞台下方的属性面板中设置文本的属性，然后在场景中插入文字的位置单击，即可输入文本。1）编辑文本单击箭头选择工具，将文本框选中，修改其属性，可以改变字体、字体尺寸、颜色、对齐方式、字符间距等。选择任意变形工具，可

11、以对文本进行自由变换，其效果如图示。 12.2 形状、文字和颜色的应用（2）将文字改变为形状如果想要对文字的细节进行更为自由的改变，就要把文字转换为形状，然后就可以象编辑形状一样来编辑文字了。具体的步骤是：1）使用箭头工具选中文本，然后选择“修改”菜单“分离”命令，将文本打散，其效果如图（1）和（2）所示。文字块分离成单个文字之后，可以对其逐个进行编辑，如图（3）。 12.2 形状、文字和颜色的应用（1） （2） （3）2）选中对上述文字再一次选择“修改”菜单“分离”命令，这时文字对象转换成为形状对象。此后所有编辑形状的方法都可以使用在这些文字上了。如图。 12.2 形状、文字和颜色的应用（3

12、）将文字其修改为空心文字。使用墨水瓶工具点击文字的轮廓，就给文字加上轮廓线。如图（1）。在选中文字中间的填充颜色，按“Del”键将其删除。便得到图（2）的空心文字效果。 （1） （2） 12.2 形状、文字和颜色的应用12.3.1 补间动画的概念作者在制作动画时只负责制作第一个关键帧和最后一个关键帧，由Flash自动生成这两个关键帧之间的过渡部分的帧，这些帧的内容是参照着上一帧的内容向下一帧的内容逐渐的过渡变化的。这样产生动画称为补间动画。补间动画包括：运动补间动画和形状补间动画两种。在此先介绍形状补间动画。 12.3 形状补间动画12.3.2形状补间动画的制作步骤（1）新建一Flash文档，

13、在图层1的第1帧的舞台中央画一个矩形，如图。 12.3 形状补间动画（2）右键单击时间轴图层1的第20帧，在弹出的快捷菜单里选择“插入关键帧”命令。此时第1帧的内容自动被复制了20帧，将第20帧的矩形删除，再用椭圆工具添加一个圆形。如图。 12.3 形状补间动画（3）单击时间轴上第120帧之间的任意一帧，在属性面板的“补间”下拉列表中选择“形状”。此时时间轴的第120帧之间就会显示为一条由第1帧指向第20帧的实线箭头。如图。 12.3 形状补间动画（4）完成形状补间动画制作。点击“Ctrl+Enter”键预览动画的效果。 12.3 形状补间动画12.4.1 元件和实例的概念1） 元件：元件是可

14、以在整部影片中反复使用的特殊对象。它可以是形状、按钮或影片剪辑，在Flash中只创建一次，然后自动成为当前文档的库的一部分。每个元件都有自己的时间轴、场景及图层。2）实例：实例是对原元件的引用，其属性可以单独设置，外观和动作无需和原元件相同。对元件进行编辑后，该元件的每个实例都会做相应的更新。 12.4 元件、实例与运动补间动画12.4.2 新添库元件新添一个库元件的方法有以下四种：方法一：把场景舞台中的现有元素转换成元件可以把场景舞台中已经编辑好的元素转换成库元件，以便后来多次使用，步骤是：（1）选中工作区中的某个元素。（2）选择“修改”“转换成元件”命令，这时弹出“转换为元件”对话框，输入

15、元件的名称并选择元件类型。如图。 12.4 元件、实例与运动补间动画（3）选择“窗口”“库”命令，打开库面板，即看到刚才建立的新元件。方法二：创建新元件可以直接在库中创建一个新的库元件，具体步骤是：（1）选择“插入”“新建元件”命令，将弹出“创建新元件”对话框。或者单击库面板右下方的“新建元件”按钮，也可以打开“创建新建元件”对话框。输入元件的名称，选择元件的类型，单击“确定”按钮后，即可新建一元件。 12.4 元件、实例与运动补间动画（2）此时状态栏上显示的“元件1”，即表示当前的舞台工作区是编辑“元件1”的状态。如图。 12.4 元件、实例与运动补间动画（3）如同编辑一般的动画过程一样，使

16、用绘图工具绘图或导入媒体等方法建立元件的内容。（4）当建完元件后单击图中状态栏中的“场景1”，就可以返回到场景编辑状态。方法三：将动画转换为影片剪辑，具体步骤是：（1）右键单击时间轴任意一个单元格，在弹出的快捷菜单中选择“选择所有帧”。如图。 12.4 元件、实例与运动补间动画（2）右键单击这些选中的帧，在弹出的快捷菜单中选择“复制帧”命令，或者直接选择“编辑”菜单“复制帧”命令，即可将所有选中的帧都复制到剪贴板上。（3）选择“插入”“新建元件”命令，在弹出的对话框中输入元件名称，选择影片剪辑作为元件的类型，然后单击“确定”按钮，则舞台切换到元件编辑模式，用户可以编辑元件。 12.4 元件、实

17、例与运动补间动画（4）单击时间轴的第一帧，并选择“编辑”“粘贴帧”命令，将刚才复制到剪贴板上的动画粘贴进来；或者在第一帧上右击，在弹出的快捷菜单中选择“粘贴帧”，也可将动画粘贴到元件编辑模式舞台上。如图。 12.4 元件、实例与运动补间动画（5）库面板中新添影片剪辑元件2，点击库面板中的播放按钮，可以在库里预览影片剪辑元件的动画效果。如图。 12.4 元件、实例与运动补间动画（6）选择“编辑”菜单“编辑文档”命令，回到电影编辑模式；或者单击舞台左上方的场景编辑按钮，返回场景编辑状态。方法四：复制元件，具体步骤是：（1）在库面板中选择一个元件。（2）右键单击该元件，从弹出的菜单中选择“直接复制”

18、命令，这时会弹出“直接复制元件”对话框，如图。输入新元件的名称并选择所复制的元件的类型。确定后库窗口会增加一个与被复制元件一样的新元件，只需要在元件编辑模式下对它进行一定的修改就可以成为一个新元件了。 12.4 元件、实例与运动补间动画 运动补间动画用于制作对象运动的效果。给对象指定开始状态和终止状态，由计算机自动生成中间的运动过程，实现对象从开始的姿态运动到终止姿态的效果。另外，使用运动补间动画的基本过程，通过对各种参数的设置，可以制作变形效果，旋转效果和淡入、淡出效果等等。 12.4 元件、实例与运动补间动画在此，用一个行驶的车辆的动画实例，介绍元件和运动补间动画的制作过程。制作步骤如下：

19、（1）新建一Flash文档，首先制作一个转动的车轮的影片剪辑元件。由“插入”菜单“新建元件”，打开“创建新元件”对话框，将名称改为“车轮”，类型选择“影片剪辑”，点击“确定”，进入影片剪辑元件“车轮”的编辑状态。（2）点击工具箱里的椭圆工具，在属性面板设置其属性为：笔触颜色为黑色；粗细为10像素；填充颜色为灰色；线条形状为实线。 12.4 元件、实例与运动补间动画（3）按下Shift键，在舞台中间画一个正圆形，用工具箱里的“选择工具”，将此正圆形全部选中，由“窗口”菜单“对齐”，打开“对齐”面板，如左下图。点击其中的“相对与舞台”，在点击其中的“水平中齐”按钮和“垂直中齐”按钮，将正圆形置于舞

20、台的正中心。结果如右下图。舞台上的十字标记表示舞台的正中心位置。 12.4 元件、实例与运动补间动画（4）使用工具箱里的直线工具（笔触粗细修改为8像素），穿过圆心画两条直线。如图。 12.4 元件、实例与运动补间动画（5）选中全部图形，由“修改”菜单“组合”命令，将所绘制的图形进行组合。 （6）右键单击时间轴的第30帧，选择“插入关键帧”命令，将组合的图形复制到30帧。单击时间轴第1帧第30帧之间的任意帧，在属性面板上将“补间”设置为“动画”；“旋转”设置为“顺时针”；“旋转数”设置为2次。如图。 12.4 元件、实例与运动补间动画 （7）此时时间轴的第130帧之间就会显示为一条由第1帧指向第

21、30帧的实线箭头，与形状补间不同的是，实线箭头的背景颜色是灰色的，而形状补间的背景颜色是浅绿色的。点击库面板中的播放按钮，可以预览车轮的旋转效果。（8）现在开始制作第2个元件“车”。由“插入”菜单“新建元件”，打开“创建新元件”对话框，将名称改为“车”，类型选择“影片剪辑”，点击“确定”，进入影片剪辑元件“车”的编辑状态。（9）使用绘图工具在舞台中绘制车辆。使用选择工具放在绘制的形状边缘拖动，可以任意改变所绘制的形状，最后得到如图所示的车辆外形。 12.4 元件、实例与运动补间动画（10）从库中将影片剪辑元件“车轮”拖拽到舞台中，用任意变形工具改变车轮的大小使其适合于车身的大小，然后再复制同样

22、的一个车轮前后各放置一个。如左图。至此，完成两个库元件的制作。库面板如右图。 12.4 元件、实例与运动补间动画（11）点击状态栏中的“场景1”，返回到场景的编辑状态。在第1帧上将元件“车”拖拽到场景的右下方。（12）右键单击时间轴的第25帧，在弹出的快捷菜单中选择“插入关键帧”，将“车”元件复制到25帧，然后将“车”元件移动到舞台的左下方。单击时间轴第1帧第25帧之间的任意帧，在属性面板上将“补间”设置为“动画”；“旋转”设置为“自动”。（13）按Ctrl+Enter键预览动画的效果。保存“car.fla”文件，导出“car.swf”影片。 12.4 元件、实例与运动补间动画 12.5 Fl

23、ash中层的应用12.5.1 图层的概念图层是时间轴的一部分，按照堆叠顺序一层层地相互叠加在一起，用于组织文档中的插图。在一个图层上编辑和绘制图层时，不会影响其他图层上的对象。Flash中的图层有以下三种：普通图层。引导层：普通引导层和运动引导层。遮罩层：用于制作蒙版效果。12.5.2 图层的应用12.5.2.1 创建新图层单击时间轴底部的“插入图层”按钮，如图。或者由选择“插入”菜单“时间轴”“图层”命令。或者右击时间轴中的一个图层名称，然后从快捷菜单中选择“插入图层”命令。 12.5 Flash中层的应用12.5.2.2 图层的操作显示或隐藏图层及文件夹:单击时间轴中图层或文件夹名称右侧的

24、“眼睛”图标。查看图层上内容的轮廓：单击图层名称右侧的“轮廓”图标。选择图层：在时间轴中单击图层或文件夹的名称；在时间轴中单击要选择的图层的任意一个帧；在舞台中选择要选择的图层上的一个对象；按住Shift键在时间轴中单击连续的几个图层或文件夹；按住Ctrl键单击时间轴中几个不连续的图层或文件夹。 12.5 Flash中层的应用重命名图层：双击时间轴中图层或文件夹的名称，使其进入编辑状态，然后输入新名称；或者在“图层属性”对话框（“修改”菜单“时间轴”“图层属性”命令）中输入新名称。复制图层：选择要复制的图层或图层文件夹，选择“编辑”菜单“时间轴”“复制帧”命令，然后插入一个新层或新文件夹，选择

25、“编辑”菜单“时间轴”“粘贴帧”命令。锁定图层：单击“锁定”列或“锁定”图标。 12.5 Flash中层的应用删除图层：选定要删除的图层，单击时间轴中的“删除图层”按钮；或者将图层或文件夹拖到“删除图层”按钮上；右击图层或文件夹的名称，然后从快捷菜单中选择“删除图层”命令。改变图层顺序：选择一个或多个要改变其顺序的图层，然后上下拖动它到时间轴中其他图层上方或下方的所需位置。设置图层属性：使用“图层属性”对话框，可指定图层或图层文件夹的名称、状态、类型、轮廓颜色、图层高度等。 12.5 Flash中层的应用12.5.2.3 运动引导层运动引导层用于绘制使对象沿其运动的路径。链接到运动引导层的常规

26、图层称为被引导层。1.创建运动引导层：选择“插入”“时间轴”“运动引导层”命令或单击时间轴窗口左下角的“添加运动引导层”按钮。如图，图层2是引导层，图层4是被引导层，图层1是普通图层。 12.5 Flash中层的应用2.建立多个普通图层与运动引导层的关联：将要与运动引导层相关联的常规图层拖到运动引导层正下方。在运动引导层下方选择一个图层，选择“修改”“时间轴”“图层属性”命令，在弹出的“图层属性”对话框中选择“类型”选项组中的“被引导”选项。如图。 12.5 Flash中层的应用3.取消与运动引导层的关联：将选定层拖到运动引导层或其他常规图层上面。在“图层属性”对话框中选择“类型”选项组中的“一般”选项。12.5.2.4 运动引导层应用举例制作一皮球延特定轨迹运动的动画，步骤如下：（1）新建一个Flash文档，制作一个影片剪辑元件转动的皮球，具体方法可参照车轮的制作方法。 1