第1章 Flash CS3入门

Flash CS3以便捷、完美的动画编辑环境，深受广大动画制作者的喜爱。Flash CS3界面是用户和Flash CS3进行交互制作应用程序的途径，熟悉Flash CS3界面及其应用到的工具，有助于读者更好地制作并完成Flash动画。Flash CS3的界面在Flash 8版本的基础上又有所改进，比如取消了原来在界面上直接出现的帮助面板，扩大了工作区；改变了部分命令的位置，使Flash操作起来更加容易。

学习目的：

* 熟悉Flash动画的基本概念

* 了解Flash动画的特点

* 了解Flash CS3的新增功能

* 熟悉Flash CS3的工作界面

1.1 Flash动画基础

Flash与Dreamweaver和Fireworks一起被称为网页设计三剑客。至今为止，已有数以百万计的企业用户、开发人员和设计人员使用Flash软件制作发布动画作品，并且这个数字还在以飞快的速度增加。

大型的Flash动画融合了很多技术和技巧，结合了多种语言。因此Flash的制作正向3个方向发展，即单纯的动画短片制作、交互式商业广告的应用，以及既有动画短片又有交互内容的综合应用。

Flash CS3是目前Flash动画制作工具的最新版本，在改进了上一版本软件的基础上，增强了脚本代码的交互功能。

Flash是一种交互的矢量动画，能够在低文件数据传输率的情况下实现高质量的动画效果。除此之外，相对于其他动画制作工具而言，它还具有以下显著特点。

（1）操作简单。Flash动画的制作相对比较简单，一个Flash爱好者通过一段时间的学习很容易就能成为一个制作者，全新的Flash CS3使动画制作变得非常简单。

（2）所受资源制约小。使用Flash制作动画可以降低制作成本，减少人力、物力的消耗，同时制作时间也会大大减少。

（3）文件容量小。Flash的图像方式是基于矢量图形的，因为矢量图形的特点是文件容量非常小，并且可以随意放大或缩小尺寸而丝毫不损失图像质量，所以用Flash制作出来的动画不但质量高，而且读取的速度也相当快。

（4）流媒体传输方式。在读取的时候是以流媒体的下载方式进行的，因此在读取的过程中就可以观赏影片，避免了漫长的等待。

（5）交互性能优越。借助动态脚本编程（ActionScript）可以与浏览者产生交互作用。可以通过浏览者的某个动作触发某个动画的播放。

（6）可扩展性。通过第三方开发的Flash插件程序，可以方便地实现以往需要非常烦琐的操作才能实现的动态效果，大大提高了Flash动画制作的工作效率。

1.2 Flash CS3的新增功能

Flash CS3在Flash 8的基础上增加了一些新功能，进一步提高了Flash动画制作的效率，下面将介绍Flash CS3的新增功能。

1.统一的Adobe界面

Flash CS3是Macromedia被Adobe收购后推出的全新版本。Flash CS3的界面更加简洁，并且该界面与其他一同推出的Adobe Creative Suite 3应用程序保持了一致性。在Flash CS3中还可以自定义工作区以改进工作流程和最大化工作区空间，如图1-1所示。

2.Photoshop和Illustrator的导入

在Flash CS3中可以直接导入Photoshop（PSD）和Illustrator（AI）文件，如图1-2所示。并且可以保留原Photoshop和Illustrator文件的图层及结构，如图1-3所示。并且还可以在导入过程中优化和自定义文件，使导入到Flash CS3中的文件获得最佳效果。

图1-1 统一的Adobe界面

图1-2 导入Photoshop（PSD）和Illustrator（AI）文件

图1-3 保留图层和结构

3.丰富的绘图功能

在Flash CS3中可以使用“智能形状绘制工具”以可视的方式调整工作区中的形状属性，Flash CS3中还改进了“钢笔工具”，使用该工具可以创建精确的矢量图形，如图1-4所示，还可以直接从Illustrator CS3中将图像粘贴到Flash CS3中，舞台效果如图1-5所示。

图1-4 改进的“钢笔工具”

图1-5 舞台效果

4.视频编码工具

Flash CS3提供了全面的视频支持，创建、编辑及部署流和渐进式下载。并且新的Flash视频工具使用独立的视频编码器、Alpha通道支持、高质量视频编解码器、嵌入的提示点、视频导入支持、QuickTime导入和字幕显示等，确保获得最佳的视频质量和功能，如图1-6所示。

图1-6 Flash视频编码设置

5.高级QuickTime导出

在Flash CS3中提供了高级的QuickTime导出器，使用它可以将在SWF文件中发布的内容渲染为QuickTime视频。导出包含嵌套的影片剪辑的内容、ActionScript生成的内容和运行时的效果（如投影和模糊等），如图1-7所示。

图1-7 高级QuickTime导出

6.用户界面组件

在Flash CS3中提供了全新的、可以轻松设置外观的界面组件，如图1-8所示。使用该组件可以轻松地为ActionScript 3.0创建交互式内容。并且可以使用Flash CS3中的绘图工具修改组件的外观，而不需要编辑脚本代码。

图1-8 用户界面组件

7.将动画转换为ActionScript

在Flash CS3中可以任意地复制动画，并且可以将时间轴动画转换为ActionScript 3.0代码，这样设计者可以轻松地编辑和再次使用该代码。

8.ActionScript 3.0脚本语言

在Flash CS3中提供了对最新的ActionScript 3.0脚本语言的支持，该语言具有改进的性能、增强的灵活性及更加直观和结构化的开发等特点，如图1-9所示。

图1-9 ActionScript 3.0脚本语言

9.省时的编码工具

在Flash CS3中改进了代码编辑器，增强了Flash脚本代码编辑功能并且能够节省编码的时间。还可以使用代码折叠和注释功能对相关的代码逐行操作，使用错误导航功能跳到错误的代码处，如图1-10所示。

图1-10 省时的编码工具

10.高级调试器

在Flash CS3中提供了新的功能强大的ActionScript调试器，来测试脚本语言的正确性。该调试器具有极好的灵活性和用户反馈，并且能够与Adobe Flex Builder 2调试保持一致性，如图1-11所示。

图1-11 ActionScript调试器

11.Adobe Device Central

在Adobe推出的新套装Adobe Creative Suite 3中加入了Adobe Device Central，在Adobe Device Central中可以设计、预览和测试移动设备内容，包括可以测试交互式Adobe Flash Lite应用程序和界面，如图1-12所示。

图1-12 Adobe Device Central

1.3 安装和卸载Flash CS3

Flash CS3是Adobe推出的新的Flash动画制作软件，Flash CS3对计算机配置的要求较高，下面先介绍一下Flash CS3对计算机配置的要求。

表1-1 Flash CS3在Windows操作系统中运行的系统要求

表1-2 Flash CS3在苹果机中运行的系统要求

下面以Windows XP操作系统为例，向读者讲解中文版Flash CS3的安装与卸载。

1.安装Flash CS3

01 将中文版Flash CS3安装光盘放入光盘驱动器中，系统会自动运行Flash CS3中文版安装程序。弹出一个自动解压窗口，完成安装程序的解压后，Flash CS3的安装程序会自动弹出一个安装向导对话框，如果系统中有程序正在运行，则会提示关闭所打开的运行程序，如图1-13所示。关闭系统中打开的运行程序，然后单击【下一步】按钮，打开Flash CS3授权协议对话框，如图1-14所示。

图1-13 检测系统运行程序

图1-14 Flash CS3授权协议

02 单击【接受】按钮，进入安装选项设置，选择需要一起安装的Flash插件，如图1-15所示。单击【下一步】按钮，进入安装位置的选择，用户可以在磁盘列表中选择安装路径，然后单击【浏览】按钮，浏览到安装的文件夹位置，如图1-16所示。

图1-15 设置安装选项

图1-16 选择安装位置

03 单击【下一步】按钮，进入安装摘要界面，显示Flash CS3安装的相关信息，如图1-17 所示，单击【下一步】按钮，开始Flash CS3软件的安装过程，显示安装进度条，如图1-18所示。

04 完成Flash CS3的安装，进入安装完成界面，显示Flash CS3安装的相关信息，如图1-19所示。单击【完成】按钮，完成Flash CS3的安装。安装结束后，Flash CS3会自动在Windows程序组中添加一个Flash CS3的快捷方式，如图1-20所示。

图1-17 显示安装摘要

图1-18 显示安装进度

图1-19 显示安装完成

图1-20 Flash CS3快捷方式

2.卸载Flash CS3

01 在Window XP操作系统中，执行【开始】→【设置】→【控制面板】命令，打开“控制面板”窗口，如图1-21 所示。双击“控制面板”窗口中的“添加或删除程序”图标，弹出“添加或删除程序”窗口，在“当前所安装的程序”列表中找到安装的Flash CS3 Professional，如图1-22所示。

图1-21 “控制面板”窗口

图1-22 “添加或删除程序”窗口

02 单击【更改/删除】按钮，弹出Flash CS3安装程序对话框，选中“删除Adobe Flash CS3组件”选项，如图1-23所示。单击【下一步】按钮，进入删除已安装的组件界面，选择需要一起卸载的Flash插件，如图1-24所示。

图1-23 选中“删除Adobe Flash CS3组件”选项

图1-24 选择需要删除的组件

03 单击【下一步】按钮，进入维护摘要界面，显示将要被删除的相关组件，如图1-25所示。单击【卸载】按钮，进入Flash CS3软件卸载过程，显示Flash CS3软件卸载进度条，如图1-26所示。

图1-25 显示维护摘要

图1-26 卸载Flash CS3软件

04 完成Flash CS3软件的卸载，显示删除组件完成界面，单击【完成】按钮完成Flash CS3的卸载，如图1-27所示。

图1-27 完成Flash CS3的卸载

1.4 认识Flash CS3的工作界面

Flash CS3的工作界面主要包括菜单栏、时间轴、工具箱、舞台、动作、“属性”面板和浮动面板等部分，如图1-28所示。

图1-28 Flash CS3的工作界面

1.菜单栏

菜单栏提供了“文件”、“编辑”、“视图”、“插入”、“修改”、“文本”、“命令”、“控制”、“窗口”和“帮助”等一系列菜单，如图1-29所示。

图1-29 菜单栏

Tips

在工作区中单击鼠标右键，会弹出快捷菜单，在快捷菜单中可以完成剪切、复制、粘贴和全选等一系列操作。

2.工具箱

Flash工具箱中的工具可以用来绘图、填色、选择和修改图形，以及改变舞台视图。Flash工具箱可以分为6个部分，执行【窗口】→【工具】命令，可以显示或隐藏工具箱，如图1-30所示。

图1-30 工具箱

需要选择某一工具，可以单击要使用的工具。根据所选工具的不同，在工具箱的底部将出现相应的修改设置。也可以按不同工具所对应的快捷键，如“箭头工具”的快捷键为【V】。

3.“时间轴”面板

“时间轴”面板是制作Flash动画的重要控件。可以在“时间轴”面板中添加图层和帧，根据时间的变化安排其在舞台上的显示内容。

Flash CS3的“时间轴”面板如图1-31所示，左侧带有“图层1”的区域为图层选项，右侧为时间轴。时间轴上方的编号为帧编号，下方的4个按钮为“洋葱皮”按钮，向右为“状态栏”，显示当前的帧数及文档的帧频率。Flash将动画分成一帧帧来播放，“时间轴”面板则记录了动画中各层各帧的播放顺序。

图1-31 “时间轴”面板

在“时间轴”面板中，可以方便地操作帧和关键帧。如可以通过改变帧的位置，控制对象的显示顺序；通过拖动关键帧，改变补间动画的长度；还可以插入、选择、删除、复制、移动帧和关键帧等。

4.“属性”面板

使用“属性”面板，可以查看或更改资源及其属性。可以根据视图的需要来显示/隐藏“属性”面板，从而更容易管理工作区。

执行【窗口】→【属性】→【属性】命令，可以打开或关闭“属性”面板，如图1-32所示。

图1-32 “属性”面板

“属性”面板可以显示当前使用的工具及被选择的对象的各种属性和参数。在“属性”面板中可以对当前使用的工具和对象进行参数及属性的设置。

5.浮动面板组

在Flash CS3中，大量的面板为操作提供了很大的便利。浮动面板组包括许多面板，分别是“库”面板、“对齐”面板、“混色器”面板和其他面板。

（1）“库”面板：执行【窗口】→【库】命令或按【Ctrl+L】组合键就可以打开“库”面板，如图1-33 所示。在“库”面板中可以方便地查找、组织及调用资源。“库”面板中提供了动画数据库中的许多信息。“库”面板中存储的元素被称为元件，可以重复调用。

（2）“对齐”面板：用来对齐对象和排列在同一个场景的多个被选定的对象的位置。执行【窗口】→【对齐】命令或按【Ctrl+K】组合键，可以打开“对齐”面板，如图1-34所示。

图1-33 “库”面板

图1-34 “对齐”面板

（3）“颜色”面板：该面板在Flash CS3中默认是打开的，如图1-35 所示。执行【窗口】→【颜色】命令，打开“颜色”面板，可以在“颜色”面板中设置笔触、填充色及透明度等。

在“颜色”面板中选择了一种基本色后，即可调节黑色小三角滑块的位置进行颜色设置。在Flash中渐变分为两种，分别是线性渐变和放射状渐变。线性渐变的颜色变化是从左到右沿直线进行的，而放射状渐变则是以圆的方式进行从中心到周围的扩散变化。

如果需要改变渐变颜色，首先应选定已填充过的渐变对象，然后通过滑杆上的滑块改变颜色。单击滑杆可以增加滑块，如图1-36 所示。当滑杆上的鼠标指针下方出现加号时，单击鼠标左键即可添加滑块。

Tips

在“颜色”面板上设置渐变颜色时，滑杆上的滑块最多可以增加到14 个，即只能在14种颜色之间进行渐变填充。

图1-35 “颜色”面板

图1-36 添加滑块

6.场景和舞台

舞台是Flash的工作区，是用于组织动画中对象的窗口，如图1-37 所示。图像的窗口就是舞台，在这里可以直接制作图形文件和导入外部图形文件进行编辑，建立动画各帧以生成电影和其他作品。对于没有特殊效果的动画，也可作为播放动画的窗口。

图1-37 舞台

当制作一个比较复杂的动画时，可能需要采用多个场景来安排，这样做的好处是便于制作和修改动画。当发布一个包含多个场景的Flash影片时，系统将按照“场景”面板中的列表顺序依次播放各场景。各场景中的帧按照其播放顺序连续编号。例如，如果第一个场景的帧编号为1～20，则第二个场景中的开始编号将为21，如果要在每个场景后停止、暂停影片，或者以非线性方式播放影片，可以使用动作进行控制。

执行【窗口】→【其他面板】→【场景】命令，可以打开“场景”面板，如图1-38 所示。单击该面板下方的各按钮，可以复制、创建和删除场景。此外，要改变场景的名称，在“场景”面板中上下拖动场景名即可。

图1-38 “场景”面板

1.5 综合实训：创建一个简单的Flash动画

创建Flash作品，首先要在Flash CS3中新建一个Flash文档，然后再开始制作相应的动画效果。

1.5.1 创建新文档

在Flash中可以创建新的文档和设置文档的相关属性。可以使用“属性”面板和“文档属性”对话框来设置新文档或现有文档的大小、帧频、背景颜色和其他属性。

01 打开Flash CS3软件，在Flash CS3开始页上的“新建”列表中单击任意一个选项，即可创建一个相应类型的Flash文档，如图1-39所示。

图1-39 Flash CS3开始页

02 还可以执行【文件】→【新建】命令，弹出“新建文档”对话框，在“常规”选项卡中选择需要创建的Flash文档类型，这里选择“Flash文件（ActionScript 2.0）”选项，如图1-40所示，单击【确定】按钮，即可创建Flash文档。

图1-40 “新建文档”对话框

Tips

在“新建文档”对话框中还有一个“模板”选项卡，在该选项卡中可以创建基于模板的文档，可以在“类别”列表框中选择一个类别，并在“模板”列表框中选择一个模板，如图1-41所示。

图1-41 “从模板新建”对话框

03 完成文档的新建，执行【窗口】→【属性】菜单命令，打开“属性”面板。在“属性”面板上将显示Flash文档的尺寸、背景颜色和帧频等属性，如图1-42所示。

图1-42 “属性”面板

04 单击“属性”面板上的“大小”选项后的“文档属性”按钮，弹出“文档属性”对话框，如图1-43 所示。在“尺寸”文本框中输入相应的数值，即可设置舞台的大小，这里设置“尺寸”为720像素×170像素。单击“背景颜色”选项后面的“拾色器”按钮，在弹出的颜色列表中可以设置舞台的背景颜色，如图1-44所示。

图1-43 “文档属性”对话框

图1-44 设置背景颜色

05 在“帧频”文本框中可以输入每秒需要显示的动画帧数。在“标尺单位”下拉列表中可以设置标尺的测量单位。

Tips

在Flash动画中，设置的帧频数越多，动画变化越快；帧频数越少，动画变化越慢。

06 完成“文档属性”对话框的设置，单击【确定】按钮。

1.5.2 制作动画

完成文档的创建，设置文档的属性后就可以开始制作Flash动画了，具体操作步骤如下。

01 执行【文件】→【导入】→【导入到舞台】菜单命令，弹出“导入”对话框，浏览到需要导入的素材图像“CD\源文件\第1 章\素材\image1.jpg”，如图1-45 所示。将选择的素材图像导入到Flash文档的场景中，如图1-46所示。

图1-45 “导入”对话框

图1-46 导入素材图像

02 单击选中“图层1”第150帧位置，按【F5】键插入帧，“时间轴”效果如图1-47所示。执行【文件】→【导入】→【导入到库】菜单命令，弹出“导入”对话框，将素材图像“CD\源文件\第1 章\素材\image2.png”和“CD\源文件\第1章\素材\image3.png”导入到“库”面板中。执行【窗口】→【库】菜单命令，打开“库”面板，可以在“库”面板中看到刚刚导入的素材图像，如图1-48所示。

图1-47 “时间轴”效果

图1-48 “库”面板

Tips

在Flash CS3中，如果将png格式的图像直接导入Flash文件的“库”面板中，将会由Flash软件自动新建与png格式图像相对应的图形元件。所以，在这里将会自动新建“元件1”和“元件2”两个图形元件对应导入的image2.png和image3.png素材图像。

03 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，在“库”面板中将“元件1”拖入场景中，并调整到合适的位置，如图1-49所示，“时间轴”面板如图1-50所示。

图1-49 拖入元件

图1-50 “时间轴”效果

04 选中“图层2”上的第20帧位置，按【F6】键插入关键帧，选中第20 帧上的元件，单击工具箱中的“任意变形工具”按钮，调出任意变形框，按住【Shift】键拖动缩放点，将元件向中心等比例缩小，如图1-51所示。选中“图层2”上的第1帧，单击工具箱中的“选择工具”按钮，选中该关键帧上的元件，在“属性”面板上的“颜色”下拉列表中选择Alpha选项，设置Alpha值为0%，如图1-52所示。

图1-51 将元件等比例缩小

05 将元件的Alpha值设置为0%时，元件为完全透明的状态，如图1-53所示。在“图层2”上的第1帧上单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命令，在第1帧和第20帧两个关键帧之间创建补间动画，“时间轴”效果如图1-54所示。

图1-52 设置Alpha值

图1-53 元件效果

图1-54 “时间轴”效果

06 选中“图层2”第135帧位置，按【F6】键插入关键帧，选中“图层2”第150帧位置，按【F6】键插入关键帧，选中第150帧上的元件，单击工具箱中的“任意变形工具”按钮，调出任意变形框，按住【Shift】键拖动缩放点，将元件向中心等比例放大，如图1-55所示。在“属性”面板上的“颜色”下拉列表中选择Alpha选项，设置Alpha值为0%，在“图层2”上的第135帧上单击鼠标右键，在弹出菜单中选择【创建补间动画】命令，在第135帧和第150帧两个关键帧之间创建补间动画，“时间轴”效果如图1-56所示。