第 1 章
Flash 项目化总览
1.1 Flash 的用途简介
Flash CS5 是 Adobe 公司最新推出的 Flash 动画制作软件，它相比之前的版本在功能上有 很多有效的改进及拓展，深受用户青睐。Flash 动画是一种以 Web 应用为主的二维动画形式， 采用矢量技术和流式播放技术等手段， 生成的文件小、 质量高， 便于在网上发布和浏览。 因此， 它得到了网络界的广泛认可， 并使它在网页设计中占有一席之地， 成为网上最为流行的多媒体 软件。 1．Flash CS5 的功能 （1）绘图功能。Flash CS5 可以完成图形绘制、特殊字形处理等方面的工作。 （2）动画功能。Flash CS5 提供的动画工具可以制作出漂亮的动画。 （3）编程功能。制作 Flash 交互式动画。Flash CS5 提供了几百个关键词，可完成复杂的 行为制作。 这 3 部分功能是相对独立的，在工作中通常分开进行。例如，由美工人员完成绘图及部分 多媒体的制作，由编程人员完成互动行为的编写，由制作人员进行最后的加工制作。 2．Flash CS5 的特点 （1）使用矢量图形。计算机的图形显示方式有矢量图和位图两种。在 Flash 软件上绘制 的图形是矢量图。 与位图相比， 矢量图的最大优点在于， 经任意放大或缩小不会影响图形质量。 同时，文件所占用的存储空间非常小。 （2）支持导入音频、视频。在 Flash 中可以使用 MP3 等多种格式的音频素材，还提供了 功能强大的视频导入功能，并支持从外部调用视频文件。1
1 Ch a pter （3）采用流式播放技术，拥有强大的网络传播能力。Flash 的影片文件采用流式下载，即 它的影片文件可以一边下载一边播放，既节省空间又可以达到流畅的播放效果。 （4）交互性强，能更好地满足用户的需要。运用 Flash 内置的动作脚本，不仅可以制作 眩目的效果，还可以让动画浏览者参与互动。 通过其强大的交互功能，不仅为网页设计和动画制作提供了无限的创作空间，从商业 的角度来说，还可以制作一流的商业演出动画或广告，使企业的产品发布得到比传统广告 模式更好的效果。
1.2 Flash 动画制作工作过程简介
要用 Flash 动手制作动画，必须知道 Flash 动画的制作原理和动画的制作过程。 简单地说动画的制作原理就是为物体的每一个部分制作变化的连续图形， 这些变化的连续 图形在一段时间内的延续（通过时间轴）播放，从而组成动态效果；再将众多的、动态的部件， 层叠（通过图层）的组合在一起形成完整的、动态的场景。在 Flash 进行动画制作时一般只需 要起始的动作和终止的动作，持续时间的中间动作由系统完成。 所以在制作动画时就必须具备三项基本条件： （1）物体的部件（在 Flash 里面通常存储为元件）； （2）部件的起始状态，部件的终止状态； （3）持续时间以及持续时间的状态（补间）。 Flash 动画的制作过程可以概括为： 动画元件的准备→基本动画（影片剪辑）制作→舞台文档的整体制作→根据舞台的需要 制作引导和遮罩效果、并添加文字动画→为动画文件添加控制和交互语言，丰富和增强动画 效果。1.3 动画“我的季节”项目简介
“我的季节” 是以展示四季风光为主题制作一个完整的动画影片。 动画影片包含 6 个场景， 分别为：首、春、夏、秋、冬、游戏等场景。 （1） “首”场景展示了“我的季节”主题，附带作者信息。在“首”场景应用按钮选择进 入不同的季节场景和游戏场景，如图 11 所示。 （2）春、夏、秋、冬的四个场景分别为： 1） “春”场景展示动感的春暖花开，如图 12 所示。 2） “夏”场景展示飞舞的昆虫世界，如图 13 所示。 3） “秋”场景展示金黄的收获画卷，如图 14 所示。1 Ch a pter 图 11 “首”场景 图 12 “春”场景 图 13 “夏”场景
1 Ch a pter 图 14 “秋”场景 4） “冬”场景展示雪花纷飞的纯净世界，如图 15 所示。 图 15 “冬”场景 （3） “游戏”场景为：可以用键盘方向键控制昆虫 8 个方向移动，如图 16 所示。
1 Ch a pter 图 16 “游戏”场景 根据项目的需求，本教材将项目分为九个工作过程完成，其中工作过程一是进行项目所需 素材元件的绘制，完成瓢虫、蜻蜓和向日葵花等元件绘制并保存到库；工作过程二和工作过程 三是完成瓢虫飞、蜻蜓飞、向日葵花开等的基本动作动画和影片剪辑制作；工作过程四是开始 进入到多场景的制作，应用影片剪辑和引导动画等实现春季的春暖花开、夏季的昆虫飞舞；工 作过程五是应用文字和预设动画突出场景的主题，其中：首场景加入作者信息文字动画，夏场 景加入“虫虫飞”文字动画，春场景加入“花韵”文字动画；工作过程六是应用遮罩技术实现 首场景的探照灯效果，秋场景的卷轴画效果；工作过程七是应用按钮和交互语言，控制场景的 播放；工作过程八是为动画添加音乐效果；工作过程九是应用交互语言，制作昆虫移动游戏， 制作纷飞飘雪、漂浮泡泡、碰落叶子等丰富场景。
1.4 Flash CS5 的操作界面
1．欢迎界面 第一次打开 Flash CS5 时，会显示欢迎界面，如图 17 所示。从图中可以看出，欢迎界面 包含 5 个区域： ① 从模板创建。可直接创建模板文档，在这里列出了创建 Flash 文档最常用的模板。 ② 打开最近的项目。在这里，可以打开最近操作过的 Flash 文档。 ③ 新建。新建文档，在这里列出了许多 Flash 文件的类型。 ④ 扩展。链接到 Flash Exchange 网站，可以在其中下载助手应用程序、扩展功能及相关 信息。 ⑤ 学习。关于 Flash CS5 的一些学习资料，可以单击进行查看学习。 ⑥ 若要隐藏欢迎界面，可以选中“不再显示”复选框。1 Ch a pter 图 17 Flash CS5 欢迎界面 2．Flash CS5 的操作界面 在欢迎界面上单击“新建”区域中的“Flash 文件（ActionScript 2.0） ” ，即可创建最常用 的 Flash CS5 文档，并迅速打开 Flash CS5 的操作界面。 Flash CS5 的工作区界面形式可以根据自己的设计或制作需要进行设置，一般在菜单的上 侧有设置工作区的面板，如图 18 所示。其中的“基本功能”工作界面，如图 19 所示，包括 菜单栏、工具箱、时间轴面板、舞台、属性面板、面板组、库面板等部分。 图 18 风格设置 ① 菜单栏：提供各种命令集，如“文件”菜单中提供了对文件操作的命令， “修改”菜单 中提供了对对象操作的命令等。 ② “时间轴”面板：是控制和描述 Flash 影片播放速度和播放时长的工具，如设置帧和 3 1 2 6 4 5
1 Ch a pter 图层的顺序。 ③ 工具箱：提供基本绘图和文字工具等。 ④ 舞台：编辑和展示动画的场所。舞台分前台和后台，后台的内容只有编辑时才能看见， 播放时不可见。 ⑤ “属性”面板：可以显示当前工具、元件、帧等对象的属性和参数，在“属性”面板 中可对当前对象的一些属性和参数进行修改。 ⑥ 常用面板组：Flash CS5 包括多种面板，这里提供了很多常用的模板，如“颜色”面板、 “变形”面板、 “对齐”面板、 “预设”面板等。 ⑦ “库”面板： “库”面板是最常使用的面板，这里存储编辑好的部件和剪辑，称为元件。 任何元件都可以重复使用。 图 19 “基本功能”工作界面
1.5 Flash CS5 的常用面板
Flash CS5 除了提供命令的集合菜单栏外，很多操作方式需要用浮动面板完成。这些浮动 面板可以在“窗口”菜单查看状态，可以按照自己的需要打开和关闭浮动面板。其中最常用的 浮动面板有“工具箱”面板、 “时间轴”面板、 “属性”面板、 “颜色”面板等。 4 2 5 6 1 7 31 Ch a pter 1． “工具箱”面板 Flash 工具箱中的工具可以用来选择对象、绘图、填色、修改图形等。 “工具箱”面板如图 110 所示。在“工具箱”面板上的工具，如果右下角有一个黑色的小三角形，代表其包含多 个项目，多个项目用下拉的形式列出。工具箱可划分为 6 个部分，其中： （1）用于对象选择的工具，包括选择工具、部分选取工具、套索工具等。 （2）用于绘图和输入文字的工具，包括文本工具、形状、线条、铅笔、刷子、钢笔工具等。 （3）用于辅助绘图的工具，包括变形工具、颜料桶、填充颜色、笔触颜色、滴管、橡皮 擦、前背景颜色转换工具、紧贴至对象工具等。 （4）查看的工具，包括手形工具、缩放工具等。 （5）特殊工具，包括 Deco 工具、3D 旋转工具、骨骼工具等。 （6）其中的“选项”区域，当某个工具需要有多项操作时会显示多项以便进行选择。 图 110 工具箱 2． “时间轴”面板 “时间轴”面板是 Flash 制作动画不可缺少的重要面板，Flash CS5 的“时间轴”面板，如 图 111 所示，左侧含有“图层 1”的区域为图层选项区域，右侧为时间轴顺序。时间轴上方 的编号为帧编号，下方有状态显示，显示当前的帧数、帧频率和播放时间。时间轴面板可以包 含多个图层和多个帧。图层可以看做是透明的纸，图层上有对象和动画时则显示动画，没有的 地方是透明的， 一个图层可以制作一个对象的动画， 多个图层叠加在一起形成复杂的立体场景。 套索工具 选择工具 变形工具 钢笔工具 线条工具 铅笔工具 骨骼工具 手形工具 前背景颜色转换 紧贴至对象 Deco 工具 滴管工具 选项 部分选取工具 文本工具 形状工具 刷子工具 颜料桶工具 橡皮擦工具 缩放工具 填充颜色 3D 旋转工具 下拉三角 笔触颜色
1 Ch a pter 时间轴是制作动画的主要依据，Flash 将动画分成一帧帧来播放， “时间轴”面板则记录了动画 中各层各帧的播放顺序，在“时间轴”面板中，可以方便地操作帧和关键帧。从二维角度看， 时间轴面板包含时间和深度。 图 111 “时间轴”面板 3． “属性”面板 “属性” 面板是操作对象内部参数的重要面板。 面板的内容是不固定的， 选择的对象不同， 所具有的属性也不同。在“属性”面板可以查看或更改对象的所有属性值。例如一个矩形形状 的“属性”面板如图 112 所示，包含形状、位置、大小、颜色、状态等。 4． “库”面板 “库”面板是制作动画必须用到的面板，按快捷键 Ctrl+L 可以打开和关闭库面板，如图 113 所示。 “库”面板中存放着制作动画用到的图形、影片剪辑、按钮等元件，这些元件可以 重复使用，也可以不使用。元件在库中的存储可以是单独的元件，也可以存放到文件夹中。 图 112 “属性”面板 图 113 “库”面板 图层区域 播放时间 当前帧 帧频率 帧序号 帧状态
1 Ch a pter
1.6 初步认识动画制作过程
Flash 的基本动画形式分为两种。一种是形状改变动画，即由一个形状改变到另一个形状 的动画。另一种是动作动画，即某个对象由一个位置到另一个位置的动画。本节用 2 个小案例 “礼花绽放”和“飞舞的叶子”初步体会两种动画的制作过程。 1.6.1 制作礼花绽放动画——形变动画 操作步骤： （1）新建 Flash 文件。启动 Flash CS5 系统，选择 ActionScrtipt 2.0 选项，如图 114 所示。 图 114 新建文件 （2）设置工作区布局形式为“传统” ，如图 115 所示。 ① 选择菜单栏右侧的工作区布局菜 单，打开布局菜单的下拉列表。 ② 选择“传统”项，即将工作区界 面设置为传统模式。 图 115 设置“传统”工作界面 1 21 Ch a pter 说明：完成传统模式布局后，界面如图 116 所示。这个布局与“基本功能”的布局格式 有一定的区别，但是布局格式不影响功能操作。作为普通动画的制作人员可以选择“传统” 、 “设计人员” 、 “基本功能”等模式。选择什么模式可以根据个人的操作习惯而定。首次设置后 下次进入不需要再设置，系统会自动保留上次的设置。 图 116 “传统”工作界面 （3）创建礼花动画的第 1 帧效果，如图 117 所示。 ① 选择工具箱中“刷子工具”项。 ② 设置刷子工具的形状为“点状” 。 ③ 设置点状的大小。 ④ 选择工具箱中“设置填充颜色”项。 ⑤ 选择填充颜色为红色。 ⑥ 用刷子在舞台的底部点一个点。 图 117 礼花动画第 1 帧 （4）创建礼花动画最后一帧效果，如图 118 所示。 1 6 2 4 5 3
1 Ch a pter ① 在时间轴上，选择第 40 帧，单击鼠标右键。 ② 在弹出的快捷菜单中选择“插入空白关键帧” （快 捷键是 F5） 。 ③ 选择工具箱中“刷子工具”项，设置点状的大小更 小些。 ④ 选择工具箱中 “设置填充颜色” 项， 选择不同颜色。 ⑤ 在场景上部任意位置单击多个点状。 重复③、 ④步 骤，再画更多不同颜色的点， 形成像礼花散开一样 的图形。 图 118 礼花动画最后一帧 （5）创建礼花绽放动画效果，如图 119 所示。 ① 选择工具箱中“选择工具”项。 ② 在图层的时间轴上 1～40 帧之间任意位置，单 击鼠标右键，选择“创建补间形状” 。 ③ 礼花绽放的动画制作完成的时间轴。 图 119 礼花绽放动画效果 （6）预览礼花绽放的动画效果，如图 120 所示。 保存文件：保存制作的礼花绽放文件，如图 121 所示。 1.6.2 制作飞舞的叶子动画——动作动画 1．制作叶子元件 操作步骤： （1）新建 Flash 文件，图略。 1 2 4 3 5 1 2 3
1 Ch a pter ① 选择菜单栏中的“控制”→“测试场景”选 项（可按快捷键 Ctrl+Enter） 。 ② 在弹出的窗口中可以看到动画的播放效果。 图 120 预览礼花绽放效果 ① 选择菜单栏中的“文件”→“保存” 。 ② 在弹出的“另存为”对话框中，填写文件名 为“礼花绽放” （文件的默认扩展名为：fla） 。 ③ 单击“保存”按钮，保存完成。 图 121 保存礼花绽放文件 （2）将舞台比例尺放大到 200%，以便在比例尺下绘制图形更加清晰，如图 122 所示。 ① 选择绘图区（舞台）右上角的比例尺下拉按钮。 ② 选择 200%项即可将舞台的比例放大到 200%。 图 122 设置舞台比例尺 （3）设置椭圆工具，如图 123 所示。 1 2 1 2 2 1 3
1 Ch a pter ① 选择工具箱中“形状工具”项。 ② 选择形状工具项下的“椭圆工具” 。 ③ 选择工具箱中“设置边线颜色”项。 ④ 单击色板。 ⑤ 选择边线颜色为深绿色。 ⑥ 选择工具箱中“设置填充颜色”项。 ⑦ 单击色板。 ⑧ 选择填充颜色为浅绿色。 图 123 设置椭圆工具 （4）绘制叶子图形，如图 124 所示。 ① 用刚刚设置的椭圆工具在舞台绘制一个椭圆。 ② 选择工具箱中“部分选取工具”项。 ③ 单击椭圆形状的边线，椭圆的边线会出现一些 正方形空心的点，称为锚点。 ④ 鼠标移动到边线，当鼠标标志的下方为空心 时，可拉动锚点，拖拽出叶片的基本形状。 图 124 绘制叶子图形 2 1 8 5 7 4 2 6 3 1 3 4
1 Ch a pter ⑤ 选择工具箱中“铅笔工具”项。 ⑥ 铅笔工具的选项设置为“平滑” 。 ⑦ 在图形上绘制叶片上的叶脉，完成叶子的绘制。 图 124 绘制叶子图形（续图） （5）旋转叶子图形，如图 125 所示。 ① 用“选择工具”圈选叶子的全部图形。 ② 选择工具箱中“任意变形工具”项。 ③ 叶子的四周出现可变形的方框。 ④ 用鼠标移动和旋转外框使叶子达到理想的形状 （旋转时鼠标需要移动到四角的边缘并且有旋 转的标志） 。 图 125 旋转叶子图形 （6）选择所绘制的叶子图形保存到库，如图 126 所示。 ① 选择绘制的叶子图形（全选），单击“修改”菜单。 ② 选择“转换为元件” 。 ③ 弹出“转换为元件”对话框。 ④ 输入元件名称为：leaf。 ⑤ 选择元件的类型为“图形” 。 ⑥ 单击“确定”按钮； ⑦ 保存到库的图形。 图 126 叶子转化为图形元件 2 4 6 7 5 1 7 5 1 3 4 2 3 6
1 Ch a pter 2．制作飞舞的叶子动画 操作步骤： （1）将舞台比例尺还原到 100%，图略。 （2）创建动画第 1 帧效果，如图 127 所示。 ① 在第 1 帧将叶子移到场景外侧（后台的位置） 。 ② 选择工具箱中“任意变形工具”项。 ③ 旋转和缩放叶子到理想大小及角度。 图 127 叶子动画第 1 帧 （3）创建动画第 2 个关键帧效果，如图 128 所示。 ① 在当前层的时间轴上，选择第 25 帧。 ② 单击鼠标右键，在弹出的快捷菜单中选择“插 入关键帧” （快捷键是 F6）。 ③ 用“选择工具” 将叶子移到舞台另一个位置 （底 部） 。 ④ 再用“变形工具”旋转和缩放叶子到理想大小 及角度。 图 128 叶子动画第 2 个关键帧 （4）创建动画最后一个关键帧效果，如图 129 所示。 （5）创建动画补间，如图 130 所示。 1 2 3 1 2 4 3
1 Ch a pter ① 用“选择工具”在当前层的时间轴上，选择第 50 帧；使用键盘快捷键 F6，插入关键帧。 ② 将叶子移到舞台的第 3 个位置（右上方） 。 ③ 用“任意变形工具”旋转和缩放叶子到理想大 小及角度。 图 129 叶子动画最后一个关键帧 ① 在时间轴的 1～25 帧之间任一帧，单击鼠标右 键，选择“创建传统补间” 。 ② 选择“属性”面板→“补间”→“旋转” ，单击 下拉列表，选择“逆时针” 。 ③ 将下拉列表右侧的数字改成 3（这里表示旋转 的圈数） 。 ④ 在时间轴的 25～50 帧之间“创建传统补间” 。 ⑤ 选择“属性”面板→“补间”→“旋转” ，单击 下拉列表，选择“顺时针” ；将下拉列表右侧的 数字改成 2（换一个方向旋转） 。 图 130 创建动画补间 1 2 3 1 2 3 5 4
1 Ch a pter 测试和保存文件： （1）和上节“礼花绽放”的测试方法一样，可以测试影片的播放效果。 （2）将文件保存为“叶子.fla” 。
