第14章 简单动画制作 返回总目录

教学目的 了解动画 掌握制作逐帧动画的方法 掌握制作补间动画的方法 掌握制作交互动画的方法

本章内容  动画简述  逐帧动画  补间动画  交互动画

动画简述 14.1 动画简述 动画的类型 关于帧

动画的类型 逐帧动画：制作好每一帧画面，然后生成动画效果，传统的动画都是这样做出来的。 补间动画：制作好若干关键帧的画面，由Flash通过计算生成中间各帧，使得画面从一个关键帧过渡到另一个关键帧。过渡动画又分为运动过渡动画和变形过渡动画

关于帧 （1）选择“修改”→“文档”命令，打开“文档属性”对话框。 （2）在“文档属性”对话框中，设置动画大小为450px×350px。单击“确定”按钮，关闭“文档属性”对话框，这时在时间轴面板中会自动创建一个空白关键帧。

关于帧 （3）选择“插入”→“时间轴”→“图层”命令，新建一个“图层2”，这个“图层2”位于当前状态。 （4）单击工具栏中的矩形工具，在场景中绘制一个矩形，这时就创建了一个关键帧，时间轴上的白色小圆点也将变为黑色。

关于帧 （5）选中绘制的矩形，然后选择“修改”→“组合”命令，组合图形。 （6）在第20帧上右击，从弹出的快捷菜单中选择“插入关键帧”命令，这时将在该帧插入一个关键帧。

关于帧 （7）单击第20帧，然后将选中的矩形随意移动一个位置。 （8）在第1帧上右击，从弹出的快捷菜单中选择“复制帧”命令，复制选中的帧。 （9）在第40帧上右击，从弹出的快捷菜单中选择“插入空白关键帧”命令，创建一个空白帧。 （10）再次在第40帧上右击，从弹出的快捷菜单中选择“粘贴帧”命令，将复制在Windows剪贴板中的帧粘贴到该帧，这时将又形成一个关键帧。

关于帧 （11）在“图层2”时间轴的第1帧上右击，从弹出的快捷菜单中选择“创建补间动画”命令，再在第20帧上右击，从弹出的快捷菜单中选择“创建补间动画”命令，这样即可创建从第1帧到第20帧的动画。 （12）用同样的方法制作第20帧到第40帧之间的动画。

关于帧 （13）在“图层1”上单击第l帧，然后选择“文件”→“导入”→“导入到舞台”命令，弹出“导入”对话框。选择一幅图像，将其导入舞台作为动画的背景，这时的时间轴面板如图所示。

关于帧 （14）在“图层1”的第40帧上右击，从弹出的快捷菜单中选择“插入帧”命令，这时将把第1个关键帧扩展到2～40帧，此时的时间轴面板如图所示

逐帧动画 14.2 逐帧动画 创建逐帧动画 创建逐帧动画实例

创建逐帧动画 （1）在时间轴面板中选择合适的层或创建一个新层。 （2）选择第1个关键帧，如果选择的帧不是关键帧，可以选择“插入”→“时间轴”→“关键帧”命令，使它成为关键帧。 （3）使用工具栏中的各种工具或导入文件，在舞台中制作动画第1帧的动画内容。 （4）在时间轴面板单击相同层的当前帧右边一帧的单元格，然后选择“插入”→“时间轴”→“空白关键帧”命令，插入一个空白关键帧。 （5）在场景中绘制图形，作为第2个关键帧。 （6）重复上面两个步骤，一帧一帧地增加新的关键帧，直到完成全部动画所需的帧。 （7）选择“控制”→“播放”命令或“控制”→“测试影片”命令，播放动画。

创建逐帧动画实例 （1）新建一个Flash文件，设置文档属性为400px×300px。 （2）单击工具栏中的文本工具，并在属性面板中设置文字的大小为96，单击“切换粗体”按钮和“居中”按钮。 （3）在舞台中输入数字5，如图所示。

创建逐帧动画实例 （4）单击第2帧，然后选择“插入”→“时间轴”→“关键帧”命令，插入一个关键帧，在舞台中输入4。 （5）重复上一步，创建数字3、2、1和文字GO。 （6）选择“控制”→“测试影片”命令，测试制作的电影，如图所示为电影中的一帧 。 （7）选择“文件”→“保存”命令，保存文件；或选择“文件”→“导出影片”命令，导出影片。

补间动画 14.3 补间动画 运动补间动画 形状补间动画

运动补间动画 创建运动补间动画 （1）选择一个空白帧，在场景中绘制一个图形对象，或创建一个元件实例。 （2）选择“插入”→“创建补间动画”命令，将绘制的图形对象转换成图形元件，Flash自动将其命名为“补间1”。 （3）在时间轴的另一帧（动画停止帧）右击，从弹出的快捷菜单中选择“插入帧”命令，增加多个帧，这时时间轴面板中帧区域为虚线，如图所示。

运动补间动画 创建运动补间动画 （4）单击动画的最后一帧，并把场景中的对象移动到动画的目标位置，这时动画的最后一帧将自动成为关键帧，在时间轴的帧区域将显示为箭头，如图所示。

运动补间动画 创建运动补间动画 （5）要设置动画运动过程的渐变属性，可以在运动补间动画的箭头跨越的任意帧上单击，然后选择“窗口”→“属性”命令，打开关键帧的属性面板，如图所示。

运动补间动画 创建按指定路径运动的动画 （1）创建一个运动过渡动画。 （2）选择“插入”→“时间轴”→“运动引导层”命令，创建一个运动引导层。 （3）使用铅笔、椭圆、矩形或笔刷工具画出一条路径。 （4）在起始帧，把对象移到路径起始点；在结束帧，把对象移到路径结束点。 （5）如果要在运动时保持对象与路径的相对方向不变，可以单击时间轴面板中运动过渡动画箭头跨越的蓝色背景的任意帧。然后在属性面板中选中“调整到路径”复选框。

形状补间动画 创建形状补间动画 （6）在“混合”下拉列表框中可以进行如下设置： “分布式”：在此种方式下，可以使动画过程中新创建的中间过渡帧的图形比较平滑。 “角形”：在此种方式下，创建的过渡帧中的图形更多地保留了原来图形的尖角或直线的特征。如果关键帧中图形没有尖角，则这两种方式无区别。 （7）调节“缓动”滑动杆，设置变形的加速度。如果把“缓动”中的滑块向下移（为负），在变形的过程中，开始变化比较缓慢，而后变化速度会加快；如果将其上移（为正），开始变化比较快，而后变化速度会减慢。滑块越接近两端，这种效果越明显。如果滑块处于中间位置，变形过程将以匀速进行。

形状补间动画 创建形状补间动画 （1）在时间轴面板单击层名称，使其成为当前层，然后选择一个空白的关键帧作为动画的开始帧。 （2）单击工具栏中的绘图或文本工具，任意创建一个图形，作为形状补间的第1帧图形。 （3）在开始帧后面的若干帧处插入一个空白关键帧，把它作为变形的第2个关键帧，这一帧一定要与起始帧在同一层上。 （4）在第2个关键帧中创建变形后的图形。 （5）在时间轴面板单击第1个关键帧，然后在属性面板的“补间”下拉列表框中选择“形状”选项，如图所示。

形状补间动画 创建形状补间动画 （8）设置完毕，在时间轴面板中可以看到从起始帧将出现一个箭头，背景变为浅绿色，如图所示。

形状补间动画 使用变形线索 如果将变形线索按照逆时针方向从图形的左上角位置开始，则变形效果更好。 要使用变形线索，其操作步骤如下： （1）打开一个变形动画，选择变形动画的第1个关键帧。 （2）选择“修改”→“形状”→“添加形状提示”命令，这时在舞台中将出现一个红颜色的圆圈，圆圈里面有一个字母a。 （3）将圆圈移到希望标记的位置。 （4）选择变形动画的最后一个关键帧，可以看到在最后一帧的图形上也有一个红色的圆圈，圆圈中的字母也是a。 （5）把这个圆圈移到相应的位置，圆圈将变为绿色。这时如果单击第4帧，可以看到标记的小圆圈变为黄色。 （6）播放动画，可以看到在起始关键帧中标记的点，变形后该点是在结束帧中标记的位置。 （7）重复以上步骤，根据需要添加其他变形线索关键点。

交互动画 14.4 交互动画 交互按钮 组件的使用 ActionScript简介

交互按钮 创建文字按钮 （1）单击“文件”→“新建”命令，新建影片文件。 （2）单击“插入”→“新建元件”命令，出现“创建新元件”对话框。在“名称”文本框中输入元件名，在“类型”区内选中“按钮”单选按钮。

交互按钮 创建文字按钮 （3）单击“确定”按钮，进入按钮元件动作编辑窗口。单击时间轴上的“弹起”帧，然后单击工具箱中的“文本”工具，并在“属性”面板中设置字体为Arial Black，字号为80，颜色为蓝色，然后在舞台上输入文本button 。

交互按钮 创建文字按钮 （4）分别单击“指针经过”帧和“按下”帧，按F6键，复制“弹起”帧中的内容。 （5）单击“指针经过”帧，利用工具箱中的“箭头”工具选定文本，然后将文本颜色改为黑色，如图所示。

交互按钮 创建文字按钮 （6）选定改为黑色的文本，按Ctrl+C组合键复制该文本，然后单击“按下”帧，再按Ctrl+V组合键进行粘贴，如图所示。

交互按钮 创建文字按钮 （7）选定黑色的文本，然后单击“修改”→“排列”→“移到底层”命令，并将该文本移到蓝色文本的下面，调整两者的位置，形成如图所示的阴影效果。

交互按钮 创建文字按钮 （8）右击“点击”帧，从弹出的快捷菜单中选择“插入空白关键帧”命令，然后利用工具箱中的“矩形”工具，绘制一个按钮感应鼠标指针的范围，如图所示。 （9）单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。单击“窗口”→“库”命令打开“库”面板，将button按钮元件拖到舞台上，创建一个实例。

交互按钮 创建图形按钮 （1）单击“文件”→“新建”命令，新建影片文件。 （2）单击“插入”→“新建元件”命令，弹出“创建新元件”对话框。在“名称”文本框中输入“确定”，在“类型”区内选中“按钮”单选按钮，单击“确定”按钮，进入“确定”按钮元件编辑窗口。 （3）单击工具箱中的“矩形”工具，设置填充颜色为白黑渐变色，然后绘制一个矩形，如图所示。

交互按钮 创建图形按钮 （4）单击工具箱中的“箭头”工具，选定整个矩形，单击“修改”→“组合”命令，将其组合为一个整体。 （5）分别右击“指针经过”帧和“按下”帧，从弹出的快捷菜单中选择“插入关键帧”命令，将“弹起”帧的矩形复制到这两个帧中。 （6）右击时间轴上的“图层1”图层，从弹出的快捷菜单中选择“插入图层”命令，在“图层1”上新建“图层2”。 （7）单击“图层1”上的“指针经过”帧，按Ctrl+C键复制矩形，然后单击“图层2”上的“指针经过”帧，按Ctrl+Shift+V组合键将圆形粘贴到当前位置。 图14-23 “缩放和旋转”对话框 （8）选定粘贴后的图形，单击“修改”→“变形”→“缩放和旋转”命令，出现如图所示的“缩放和旋转”对话框。

交互按钮 创建图形按钮 （9）在“缩放”文本框中输入75，在“旋转”文本框中输入180，单击“确定”按钮，如图所示。

交互按钮 创建图形按钮 （10）分别右击“图层2”的“指针经过”帧和“按下”帧，从弹出的快捷菜单中选择“插入关键帧”命令。 （11）右击时间轴上的“图层2”图层，从弹出的快捷菜单中选择“插入图层”命令，在“图层2”上新建“图层3”。 （12）在“图层3”的“按下”帧中添加文本“确定”，如图所示。

交互按钮 创建图形按钮 （13）单击舞台左上方的“场景1”按钮，返回到场景编辑窗口。从“库”面板中将“立体按钮”拖到舞台上。 （14）单击“控制”→“测试影片”命令，即可查看按钮效果。

交互按钮 制作动态按钮 （1）单击“文件”→“新建”命令，新建一个影片文件。 （2）单击“插入”→“新建元件”命令，创建一个图形元件，命名为“钟摆”，然后在舞台上绘制如图所示的钟摆。

交互按钮 制作动态按钮 （3）单击“插入”→“新建元件”命令，创建一个影片剪辑元件，命名为“钟摆运动”，然后从“库”面板中将“钟摆”拖到舞台上。 （4）分别右击“图层1”的第4帧、第12帧和第16帧，从弹出的快捷菜单中选择“插入关键帧”命令。 （5）单击第4帧，选定舞台上的钟摆，然后单击“修改”→“变形”→“缩放和旋转”命令，出现如图所示的“缩放和旋转”对话框，在“旋转”文本框中输入45，然后单击“确定”按钮。

交互按钮 制作动态按钮 （6）单击第12帧，选定舞台上的钟摆，然后单击“修改”→“变形”→“缩放和旋转”命令，在出现的“缩放和旋转”对话框中，将“旋转”文本框中的数值改为-45，然后单击“确定”按钮。 （7）右击“图层1”的任意帧，从弹出的快捷菜单中选择“选择所有帧”命令，再次右击，从弹出的快捷菜单中选择“创建补间动画”命令。此时，按Enter键，会发现钟摆在左右摆动。 （8）单击“插入”→“新建元件”命令，创建一个按钮元件，命名为button，然后从“库”面板中将“钟摆”拖到舞台上，如图所示。

交互按钮 制作动态按钮 （9）右击“指针经过”帧，从弹出的快捷菜单中选择“插入空白关键帧”命令，然后从“库”面板中将“钟摆运动”影片剪辑拖到舞台上。 （10）单击时间轴下的“绘图纸外观”按钮，然后调整“弹起”与“指针经过”帧中图形的位置，使它们重合在一起，如图所示。

交互按钮 制作动态按钮 （11）单击舞台左上方的“场景1”按钮，返回到场景编辑窗口，从“库”面板中将button按钮元件拖到舞台上。 （12）单击“控制”→“测试影片”命令，打开影片测试窗口，观看按钮动画效果。 （13）此时可以返回到舞台上，为钟摆绘制一个背景，使其更加逼真。

组件的使用 用户界面组件 Accordion组件：一组垂直的互相重叠的视图，视图顶部有一些按钮，利用这些按钮可以在视图之间进行切换。 Alert组件：一个窗口，用于给用户提出向题并提供按钮来捕获用户的响应。 Button组件：一个大小可调整的按钮，可使用自定义图标。 CheckBox组件：允许用户进行布尔型选择（真或假）。 ComboBox组件：允许用户从选择列表中选择一个选项。该组件可以在列表顶部有一个可编辑的文本字段，以允许用户搜索此列表。 DateChooser组件：允许用户从日历中选择一个或多个日期。 DateField组件：一个不可编辑的文本字段，并带有日历图标。当用户在组件边框内的任何位置单击时，就会显示一个DateChooser组件。 DataGrid组件：允许用户显示和操作多列数据。 Label组件：一个不可编辑的单行文本字段。 List组件：允许用户从滚动列表中选择一个或多个选项。 Loader组件：一个包含已载入的SWF或JPEG文件的区块。

组件的使用 用户界面组件 Menu组件：允许用户从列表中选择一个命令。它是一个标准的桌面应用程序菜单。 MenuBar组件：水平的菜单栏。允许将菜单组合使用，以便处理键盘和鼠标输入。 NumericStepper组件：可单击的箭头，单击它们可以增加或减小数字的值。 ProgressBar组件：显示一个过程（通常是加载过程）的进度。 RadioButton组件：允许用户在相互排斥的选项之间进行选择。 ScroolPane组件：使用自动滚动条在有限的区域内显示影片、位图和SWF文件。 TextArea组件：一个可随意编辑的多行文本字段。 TextInput组件：一个可以随意编辑的单行文本输入字段。 Tree组件：允许用户处理分级信息。 Window组件：一个可拖动的窗口，带有标题栏、题注、边框和关闭按钮，用于向用户显示内容。 UIScrollBar组件：允许将滚动条添加至文本字段。

组件的使用 媒体组件 FLVPlayback组件：可以容易地将视频播放器包括在 Flash 应用程序中，以便通过 HTTP 从 Flash Video Streaming Service（FVSS）或从Flash Communication Server（FCS）播放渐进式视频流。 MediaController组件：在应用程序中控制媒体流的播放。 MediaDisplay组件：在应用程序中显示媒体流。 MediaPlayback组件：MediaDisplay和MediaController组件的结合体。

组件的使用 数据组件 数据绑定类：可实现Flash 的运行时数据绑定功能的类。 DataHolder组件：保存数据，并可用作组件之间的连接器。 DataProviderAPI组件：此组件是数据线性访问列表的模型，它提供简单的用于广播数据更改的数组操作功能。 Dataset组件：一个构造块，用于创建数据驱动的应用程序。 RDBMSResolver组件：用于将数据保存回任何支持的数据源。此组件可对Web服务、JavaBean、Servlet 或 ASP 页接收并分析的 XML 进行翻译。 WebServiceConnector组件：提供对 Web 服务方法调用的无脚本访问。 XMLConnector组件：使用 HTTP GET和 POST方法来读写 XML文档。 XUpdateResolver组件：用于将数据保存回任何支持的数据源。此组件将增量数据包翻译为 XUpdate。

组件的使用 管理器 DepthManager类：管理对象的堆叠深度。 FocusManager类：处理组件间的 Tab 键导航。还处理当用户在应用程序中单击时的焦点变化。 PopUpManager 类：允许用户创建和删除弹出式窗口。 SystemManager类：允许用户管理激活哪个顶层窗口。 StyleManager类：允许用户注册样式和管理继承的样式。 TransitionManager类：使用户可以管理幻灯片和影片剪辑的动画效果 。

ActionScript简介

ActionScript简介