上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第1章Flash CS5概述和简单影片的制作

1.1 项目1 制作动画片头——“桃园三结义”

1.1.1 项目说明

本案例是使用Flash制作一个动画片头，通过该案例的制作，旨在向读者介绍Flash CS5应用程序的基本知识和Flash动画制作的基础操作。其效果如图1.1所示。

图1.1 动画片头——桃园三结义

1.1.2 项目步骤

1.打开Flash CS5 应用程序，进入其初始窗口，如图1.2 所示。单击其中的“ActionScript 3.0”菜单项，新建一个Flash文档。

2.单击窗口右边“属性”面板中的“编辑”按钮，如图1.3所示。

3.弹出“文档设置”对话框。在其中设置场景尺寸宽度“500 像素”，高度“200像素”，背景色为灰色，帧频“12fps”，如图1.4 所示。单击“确定”按钮，关闭该对话框。

4.选中“图层1”，右键单击，选择“重命名”，将其改名为“背景”，选择菜单项“文件”→“保存”，将该文件命名为“桃园三结义.fla”。

图1.2 初始窗口

图1.3“属性”面板

图1.4“文档设置”对话框

5.选中“背景”图层的第1帧，选择菜单项“文件”→“导入”→“导入到舞台”，在打开的“导入到舞台”对话框中选择“黄河.jpg”，单击“打开”按钮，该图片就导入到舞台了。

6.选中舞台中的该图片，单击窗口右边的“属性”面板，设置图片宽“500像素”，高“200像素”，且设置X和Y分别为0，该面板如图1.5所示。图片调整后，刚好铺满舞台，用做背景，效果如图1.6所示。

图1.5 图片的“属性”面板

图1.6 导入图片调整后用做背景

7.选中该图层的第120帧，按F5功能键“插入帧”，时间轴面板如图1.7所示。

图1.7 第120帧插入帧的时间轴面板

8.选择菜单项“文件”→“导入”→“导入到库”，弹出“导入到库”对话框，如图1.8所示。按Ctrl键在该对话框中单击要导入的“刘备.jpg”、“关羽.jpg”和“张飞.jpg”三个图片文件，再单击“打开”按钮，就可以一次性将这三个图片文件导入到库中。

图1.8“导入到库”对话框

9.选择菜单项“插入”→“新建元件”，弹出“创建新元件”对话框，在该对话框的名称文本框中输入“人物”，在类型单选项中选择“图形”，单击“确定”按钮，如图1.9所示。

图1.9 创建“人物”图形元件

10.进入“图形”元件的编辑窗口，在窗口右边的“库”面板中，用鼠标依次选中前面导入的“刘备.jpg”、“关羽.jpg”和“张飞.jpg”三个图片文件，并将其拖入舞台中。

11.使用工具面板中的“选择工具”分别移动这三张图片使它们拼接在一起，如图1.10所示。

图1.10 使用“选择工具”将三个图片拼接起来

12.使用“选择工具”，先单击选中“刘备.jpg”这个图片，按Ctrl+B组合键，将该图片分离。采用同样的方法，将“关羽.jpg”和“张飞.jpg”这两个图片分离。

13.使用“工具”面板中的“文字工具”，在窗口右边的文字“属性”面板中设置文本属性，如图1.11 所示。设置字体“华文行楷”，字号“20”，颜色“白色（#FFFFFF）”，文字方向“垂直，从左到右”。然后分别在这三个人物图片右上方输入“刘备”、“关羽”和“张飞”的字样。添加上文字后的效果如图1.12所示。

图1.11 文字“属性”面板

图1.12 添加文字后的效果

14.单击“场景1”按钮，返回到主场景。

15.单击图层面板下方的“插入图层”按钮，在“背景”层的上方添加一个图层，将其命名为“人物”。

16.选中该图层的第20 帧，按F6 功能键插入关键帧；选中该帧，将“库”面板中的“人物”图形元件拖放到舞台中，调整该实例的位置，使其靠舞台右边，如图1.13所示。

图1.13 在“人物”图层的第20帧将“人物”图形元件拖入

17.在图层“人物”的上方再添加一个图层，将其命名为“遮罩”。在该图层的第1帧，使用“工具”面板中的“椭圆工具”在舞台中央绘制一个无轮廓线、填充色任意的椭圆，如图1.14所示。

图1.14 在“遮罩”图层的第1帧绘制一个椭圆

18.选择“人物”图层的第20 帧，使用工具面板中“任意变形工具”，缩放调整舞台的“人物”实例和选择“遮罩”图层的第1帧，调整椭圆大小，使第一个人物头像刚好被遮罩层的椭圆遮盖，如图1.15所示。

图1.15 调整“人物”实例或者椭圆大小

19.选择“人物”图层的第50帧，按F6功能键插入关键帧。

20.返回选择该图层的第20帧，单击舞台中的人物实例，在其“属性”面板中，单击“色彩效果”按钮，在其中的“样式”下拉列表中选择“Alpha”，且设置其参数为“0%”，使该实例透明，如图1.16所示。

图1.16 在第20帧设置实例为透明

21.选择该图层第20帧，鼠标右击，在打开的快捷菜单中选择“传统补间动画”，其时间轴面板如图1.17所示。

图1.17 设置传统补间动画的时间轴面板

22.选择该图层的第120帧，按F6功能键插入关键帧。单击该帧舞台上的实例，将其向左移动，使第三个人物头像刚好被椭圆遮盖，如图1.18所示。

23.返回选择该图层的第50帧，鼠标右击，在打开的快捷菜单中选择“传统补间动画”。

图1.18 在“人物”图层的第120帧向左移动该实例

24.选择“遮罩”图层，右键单击，在弹出的快捷菜单中选择“遮罩层”，图层面板如图1.19所示。

图1.19 将“遮罩”图层设置为遮罩层

25.在“遮罩”图层的上方再添加一个图层，将其命名为“文字”。

26.选择该“文字”图层的第1帧，单击工具面板中“文本工具”，接着在其“属性”面板中选择“字符”列表，在其中设置文本格式：字体“隶书”，字号“60”，颜色为“白色（#FFFFFF）”，文字方向“水平”，字间距“20”，如图1.20所示。

图1.20 设置文本“字符”属性

27.将鼠标移到舞台，输入文字“桃园三结义”，如图1.21所示。

图1.21 在“文字”图层的第1帧输入文字

28.选中舞台中“桃园三结义”文字，右击鼠标，弹出快捷菜单，如图1.22所示，在其中选择“转换为元件”。在弹出“转换为元件”对话框的名称文本框中输入“文字”，类型选择为“图形”，如图1.23所示。

29.选择“文字”图层的第30 帧，按F6 功能键插入关键帧。选中该帧舞台中的文字实例，在“属性”面板中设置其“Alpha”参数为0%。

30.返回到该文字图层的第1帧，鼠标右击，在打开的快捷菜单中选择“传统补间动画”。该案例即全部制作完毕。

图1.23“转换为元件”对话框

图1.22 快捷菜单

31.选择菜单项“控制”→“测试影片”→“测试”，如图1.24 所示，即可打开Flash Player播放制作的影片效果。

图1.24 选择“测试”菜单项测试影片

1.2 项目2 熟悉Flash CS5

1.2.1 任务1 熟悉Flash CS5

1.2.1.1 Flash CS5的产生和发展

Flash的前身是Future Wave公司的FutureSplash，1997年Macromedia公司收购FutureSplash后，就先后推出Flash 2、Flash 3、Flash 4、Flash 5、Flash MX、Flash MX 2004和Flash 8等版本。2005年4月Adobe公司收购Macromedia公司之后，又陆续推出Flash CS3、Flash CS4和Flash CS5等不同版本，其功能不断完善和加强。目前Flash CS5是较新的版本。

当今，Flash动画软件可以说是最流行的矢量动画制作软件之一，它具有以下几个特点。

首先，它采用矢量动画的概念。矢量图形文件比较小，而且当其缩放时，文件质量又不受影响，因此利用它可以制作很多适合在网络上播放的动画，从而极好地满足了广大互联网浏览者和制作者的需要，因而广为流传。

其次，它集成了绝大多数的多媒体格式，可以不用借助插件或其他软件，而直接将矢量图形（Illustrator、FreeHand等文件）、位图（GIF、PNG、JPG、TIFF等文件）、声音（WAV、MP3、AIF等文件）、视频（AVI、MOV、MEPG等文件）导入其中，并可以进行适当编辑。

最后，它采用了时间轴、关键帧和图层的概念，从而使得动画的制作很容易理解。不管是Flash的初学者还是设计专业的高手，只要通过短时间的学习，都可以制作出精彩的作品。

1.2.1.2 Flash CS5的应用

Flash是一个流行很广，应用也很广的工具。首先，用它可以设计和处理矢量图形。其次，由于其强大的动画功能，可以用它制作网站的广告，如打开一些门户网站，就可以看到其中有很多用Flash制作的广告；应用Flash还可以制作电子贺卡、制作电视广告、创作二维动画片，若配合乐曲进行动画创作，还可以制作Flash MV。再者，它还有强大的交互功能，所以应用它还可以制作站点的导航或者将整个网站都用Flash来设计。除此之外，在教学领域，还可以用Flash来开发教学课件或多媒体客户端软件等。

1.网页广告

在网络上，特别是在一些门户网站中，可以看到使用Flash制作的大量二维动画广告，如图1.25所示。

图1.25 网页中的FIash广告

2.电子贺卡

在网络上，可以使用Flash设计制作动态的电子贺卡，如图1.26所示。

图1.26 动态的电子贺卡

3.网页设计

可以使用Flash开发设计纯Flash网站，如图1.27所示。

图1.27 纯FIash网站

4.网站封面

网络上的一些网站，在进入主页之前，常常会使用Flash开发一个欢迎页面或者引导页面，如图1.28所示。

图1.28 网站封面

5.网站导航

很多网站还使用Flash设计制作网站的标志，即LOGO，或者设计网页的横幅广告，即Banner，如图1.29所示。

图1.29 网站横幅广告

6.Flash动画

在网络上，我们还经常可以看到很多人使用Flash设计制作的动画作品，现在这已经形成了一个文化，如图1.30所示。

图1.30 动画作品

7.Flash音乐MV

在网络上，可以看到使用Flash设计制作的大量音乐MV，如图1.31所示。

图1.31 FIash音乐MV

8.多媒体教学课件

使用Flash开发设计的教学课件，体积较小、表现力强。现已用于很多多媒体教学课件光盘的制作，如图1.32所示。

图1.32 教学课件

9.游戏

Flash支持动作脚本，因而可以制作出一些有趣的小游戏，而且由于Flash游戏体积小，一些手机厂商也已在手机中嵌入Flash游戏，如图1.33所示。

图1.33 FIash游戏

10.夜景工程项目的设计

近年来，一些广告公司在承接夜景工程设计时，为了便于与客户沟通，也常常使用Flash来设计效果，从而可以预先策划方案与设计效果，如图1.34所示。

图1.34 夜景工程项目方案

1.2.2 任务2 简介Flash CS5的工作界面

安装Flash CS5之后，选择“开始”→“程序”菜单下的Adobe Flash Professional CS5，就启动了该程序，该程序运行后首先进入其初始界面，如图1.35 所示。单击其中的“ActionScript3.0”或者“ActionScript2.0”就可以进入Flash CS5的编辑窗口，如图1.36所示。

图1.35 FIash CS5的初始界面

图1.36 FIash CS5的编辑窗口

Flash CS5窗口结构如下。

1.菜单

菜单栏部分有11个菜单，其中包含了Flash CS5的大部分操作命令，可以从中选择不同的菜单命令，完成不同的操作。

2.时间轴

时间轴上最主要的部分是帧、图层和播放头。时间轴是安排和控制帧的排列并将复杂动作组合起来的窗口。

帧：是时间轴上的一个小格，是Flash影片的基本组成部分，一般放置在图层上。一幅静态的画面就是一个单独的帧，Flash是按照从左到右的顺序播放帧的。

图层：Flash中的一个图层可以理解为一张透明的胶片。可以将不同的内容放置在不同的图层上，图层从上到下一层一层地叠加在一起，这样不同图层上的内容就会叠加在一起。但每个图层都有各自的时间轴，在各自的时间轴上设置动作是互不干扰的。

3.工具面板

工具面板包含了16个绘图工具，2个查看工具，5个颜色按钮，以及其中的“选项”栏部分。只要将鼠标指针在其中的某个工具上停留片刻，指针的下方就显示出该工具的名称。

4.舞台

图中默认的白色区域部分就是舞台，舞台是编辑和测试播放Flash影片内容的地方，舞台边缘的灰色区域为工作区。

（1）只有舞台中的内容是可见的。虽然也可以在灰色的工作区域对Flash影片内容进行操作，但是在Flash影片播放时，该区域中的内容是不可见的。

例：① 选择“工具”面板中的“椭圆工具”，同时在舞台和灰色的工作区中用鼠标分别绘制一个圆，如图1.37所示。

图1.37 在舞台和灰色工作区中各绘制一个圆

② 然后选择菜单项“控制”→“测试影片”。

③ 此时在测试影片时，就发现位于舞台中的圆是可见的，而位于灰色工作区中的圆却没有显示出来。

（2）舞台可以进行缩小或者放大，这样便于更好地对舞台中的内容进行操作。单击选中“工具”面板中的“缩放工具”，将鼠标指针移动到工作区和舞台中，指针就显示为放大或者缩小模式。若当前为放大模式，按住Alt键后，就可以切换为缩小模式了，反之亦然。舞台的缩放还可以通过选择菜单项“视图”→“放大”、“缩小”或者“缩小比率”来操作，还可以通过选择“时间轴”面板右端的“缩小比率”来调整。

（3）舞台可以移动。有时候当舞台放大后，舞台中的内容往往会看不到，这时就需要移动舞台来查看舞台中的内容。单击“工具”面板中的“手形工具”，然后在舞台上拖动鼠标，便可以移动舞台了。

（4）在舞台上显示网格，可以便于对舞台上的对象进行定位。选择菜单项“视图”→“网格”→“显示网格”，就可以显示网格线，如图1.38所示。选择菜单项“视图”→“网格”→“编辑网格”可以设置网格的大小和颜色等。

图1.38 在舞台上显示网格

5.属性检查器

选择菜单项“窗口”→“属性”可以打开“属性”面板。该“属性”面板是一个浮动面板，一般位置于窗口的右边，也可以将其拖动到窗口中的任意位置。该面板由两个选项卡组成：属性和库。

（1）“属性”面板。属性面板显示的是所选对象的属性，其内容是随着所选对象的不同而变化的，如图1.39所示。

（2）“库”面板。“库”面板可以存储导入的位图、音频和视频、矢量图和创建的各种元件，如图1.40所示。

图1.39“属性”面板

图1.40“库”面板

6.其他面板

Flash中还有很多的其他面板，如“颜色”面板、“对齐”面板等。这些面板可以通过单击菜单项“窗口”，在其下拉菜单中选择要打开的面板名称的菜单项打开；如果要关闭某个面板，则只需重复上述操作。图1.41就是“颜色”面板。

单击面板左边分隔线上的“折叠按钮”可以折叠面板；拖动面板上的分隔栏可以调整面板大小；在面板名称上方的空白部分按住鼠标不放，可以移动面板到窗口的任何位置。

图1.41 “颜色”面板

1.2.3 任务3 Flash CS5的文件操作

1.新建文件

选择菜单项“文件”→“新建”，弹出“新建文档”对话框，如图1.42所示。在该对话框中的“常规”选项卡选择所需要的文档类型，便可以创建新文档。也可以在“初始页面”中选择“创建新项目”下的所需项目创建新文档。

图1.42“新建文档”对话框

2.文件的保存

创建的文档可以保存为多种类型的文件。选择菜单项“文件”→“保存”或者“文件”→“另存为”就可以将文件保存为一般的Flash文件，其格式为.fla；选择菜单项“文件”→“另保存模板”还可以保存为模板。

3.文件的打开

选择菜单项“文件”→“打开”，可以将该文件在工作窗口中打开，继续编辑。选择菜单项“文件”→“打开最近的文件”，可以在打开的列表中选择最近使用过的文件并将其打开。

4.文件的关闭

选择菜单项“文件”→“关闭”，可以将当前文件关闭。

5.文件的测试

在一个Flash文档制作完成后，往往需要预览该影片的效果，可以选择菜单项“控制”→“测试影片”，在弹出的下拉菜单中选择“测试”选项，如图1.43所示。或者按键盘上的组合键Ctrl+Enter，就可以打开播放器预览该影片的效果了。在测试影片的同时，在源文件保存的位置，自动生成一个主文件名相同、但扩展名为.swf的播放文件。