13357397561335739756@@qqqq.com.com

11

博客 http://blog.sina.com.cn/wfsylu

FLASHFLASH 动画设计与制作

主讲：吴芳

第一章 初识 FLASH第一章 初识 FLASH

13357397561335739756@@qqqq.com.com

22

博客 http://blog.sina.com.cn/wfsylu

初识 Flash

总学时 4 讲课 2 上机 : 2 主要内容：了解 Flash 工作界面组成元素的名称及

作用，了解舞台、场景、图层、时间轴、帧，关键帧，元件，影片等基本概念和术语；初步掌握动画制作的流程

教学重点：认识 Flash 工作界面，建立动画制作基本概念 , 动画制作的基本步骤

教学难点：动画制作的基本步骤上机内容：熟悉熟悉 FlashFlash 软件（软件（ 22 学时）学时）

13357397561335739756@@qqqq.com.com

33

博客 http://blog.sina.com.cn/wfsylu

什么是Flash

Flash 是矢量图编辑和动画创作的专业软件，设计

和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容 , 并可直接生成主页代码。在 Flash

中，可以通过绘制图形、运用图片、添加声音、导入视频等手段，构建包含丰富媒体的各种动画。

13357397561335739756@@qqqq.com.com

44

博客 http://blog.sina.com.cn/wfsylu

Flash 的主要特点图像质量 : Flash 是矢量图形 , Flash 内绘制的图形达到了

真正的无级放大几倍、几百倍都一样清晰 .

文件体积 : Flash 文件格式小适合网络的传输和存储．元件使用 : 使用的图形和动画片断 , 可以多次使用 , 也不

会导致动画文件的体积增大。交互功能 : 使用 Action Script 可以控制 Flash 中的对象 ,

创建导航和交互元素，制作出交互性强的动画 .

采用流式播放技术支持导入音频、视频

13357397561335739756@@qqqq.com.com

55

博客 http://blog.sina.com.cn/wfsylu

Flash 动画的应用领域

13357397561335739756@@qqqq.com.com

66

博客 http://blog.sina.com.cn/wfsylu

动画作品制作欣赏 制作一个较为完整的动画，如果希望达到良好的效果，能吸引观众，最重要的是创意创意。即在掌握好 Flash 软件制作动画的一些最基本操作后，个人构思和艺术修养等的综合体现。良好的创意加上在制作过程中不断娴熟的技巧，便可构成自己美妙的作品。

13357397561335739756@@qqqq.com.com

77

博客 http://blog.sina.com.cn/wfsylu

Flash 的操作环境

13357397561335739756@@qqqq.com.com

88

博客 http://blog.sina.com.cn/wfsylu

Flash 工作界面

菜单栏菜单栏

工具箱工具箱

元件库元件库

面板面板

图层区图层区

时间轴时间轴

场景区场景区

13357397561335739756@@qqqq.com.com

99

博客 http://blog.sina.com.cn/wfsylu

Flash 的操作环境

工具箱1. 工具区2. 查看区3. 颜色区4. 选项区

13357397561335739756@@qqqq.com.com

1010

博客 http://blog.sina.com.cn/wfsylu

Flash 的操作环境

主工具栏

13357397561335739756@@qqqq.com.com

1111

博客 http://blog.sina.com.cn/wfsylu

Flash 的操作环境

面板1. 面板的基本操作2. “ 属性”面板3. “ 库”面板

13357397561335739756@@qqqq.com.com

1212

博客 http://blog.sina.com.cn/wfsylu

FlashFlash 基本术语基本术语

时间轴 时间轴 帧 帧 图层图层 场景 场景 元件、实例元件、实例 对象对象

13357397561335739756@@qqqq.com.com

1313

博客 http://blog.sina.com.cn/wfsylu

是进行动画创作和编辑的主要工具。是用来表示动画中各帧的排列顺序和各层的覆盖关系的主线，它决定了动画的播放顺序。时间轴分为两大部分：层控制区和时间轴控制区

图 --- 时间轴

帧频关键帧

图层名

显示 |隐藏图层 静止帧结束锁定 |解除图层 过渡帧

静止帧空白关键帧新建图层 绘图纸工具播放时间

帧浏览选项

时间轴

13357397561335739756@@qqqq.com.com

1414

博客 http://blog.sina.com.cn/wfsylu

帧是构成 Flash 动画的基本组成元素， Flash 的时间轴上的一个小格代表一帧，表示动画内容中的一个片段。它在时间轴中出现的顺序决定它在动画中显示的顺序。帧的主要几种类型

帧 (Frame)

13357397561335739756@@qqqq.com.com

1515

博客 http://blog.sina.com.cn/wfsylu

帧的操作

• 插入帧• 移动帧• 翻转帧

13357397561335739756@@qqqq.com.com

1616

博客 http://blog.sina.com.cn/wfsylu

图层就像透明的胶片，每个图层上所绘制的对象按图层就像透明的胶片，每个图层上所绘制的对象按一定的顺序重叠在一一定的顺序重叠在一起，形起，形成成复杂的动画。复杂的动画。 每个每个图层都有各自的时间轴每个每个图层都有各自的时间轴。。

另外还可以添加图层、重命名图层、调整图层的次序、删除图层、设置图层的状态及创建图层文件夹等。

各种图层的表示

图层图层 (Layer)(Layer)

13357397561335739756@@qqqq.com.com

1717

博客 http://blog.sina.com.cn/wfsylu

场景面板场景面板

场景如同场景如同拍电影的不同场所，一个影片可以有一个拍电影的不同场所，一个影片可以有一个也可以有多个场景，每个场景也可以有多个场景，每个场景是是 FlashFlash 作品中相对独作品中相对独立的一段动画内容立的一段动画内容 ..

选择“修改” |“ 文档”命令，在弹出的对话框中，可设置文档属性（如尺寸、背景、分辨率及帧的播放速度等）。

场景（场景（ ScenScenee ））

13357397561335739756@@qqqq.com.com

1818

博客 http://blog.sina.com.cn/wfsylu

FalshFalsh 中的动画都是由对象组成的，对象一般可以分为中的动画都是由对象组成的，对象一般可以分为 ::

①①形状形状 通过绘图工具绘制产生的如园、矩形等形状；对象被 通过绘图工具绘制产生的如园、矩形等形状；对象被选中，以网点所覆盖，对象不是整体，各部分的形状、大小选中，以网点所覆盖，对象不是整体，各部分的形状、大小都可以改变。都可以改变。

② ② 组组 将形状通过“修改 将形状通过“修改 || 组合”命令转换成为组对象，对象组合”命令转换成为组对象，对象是个整体，只能改变组对象的大小、角度等操作。组对象通是个整体，只能改变组对象的大小、角度等操作。组对象通过“修改过“修改 || 分离”命令打散转变为形状对象。分离”命令打散转变为形状对象。

③③元件元件 通过“插入”菜单的“ 通过“插入”菜单的“ || 新建元件”或“转换为元新建元件”或“转换为元件”命令创建的元件，在场景中引用，其实质也是组。件”命令创建的元件，在场景中引用，其实质也是组。

④④文本文本 通过工具箱的“文本工具”产生。 通过工具箱的“文本工具”产生。

对象（对象（ ObjecObjectt ））

13357397561335739756@@qqqq.com.com

1919

博客 http://blog.sina.com.cn/wfsylu

元件是 Flash中最重要、最基本的元素，它是存放在库中可反复取出使用动画元素。在 Flash 中，元件分为图形元件、影片剪辑元件和按钮元件

实例是将元件从库中拖到舞台上就形成了这个元件的一个实例。

“库”面板中的元件

元件、实例元件、实例

13357397561335739756@@qqqq.com.com

2020

博客 http://blog.sina.com.cn/wfsylu

元件的基本操作：⑴ 创建元件

⑵ 将场景中的对象转换为元件

⑶ 引用元件

⑷ 修改元件

【注意】在 Flash 中有两个编辑状态：场景编辑和元件编辑，通过单击相应的按钮切换。在制作时应关心当前处于哪个状态。

13357397561335739756@@qqqq.com.com

2121

博客 http://blog.sina.com.cn/wfsylu

常用绘图工具基本操作

绘制线条绘制线条 绘制线条主要采用铅笔工具。也可以使用“线条工具”绘制直线，“钢笔工具”绘制矢量线；可使用“刷子工具”和“ Deco 工具”等工具绘制特殊效果图形。

直线工具：铅笔工具：任意形状；光滑：在铅笔模式中进行“平滑”选择 钢笔工具：精确的路径和各种复杂的图形

13357397561335739756@@qqqq.com.com

2222

博客 http://blog.sina.com.cn/wfsylu

选择对象选择对象 使用“选择工具”、“部分选取工具”可以

选择、移动和改变对象。 ：用于选取矢量线 ：选线或填空；也可以改变线形状：选线或填空；也可以改变线形状

对象的变形和混色器 对象的变形和混色器 “ “修改修改 || 变形”变形” ： ““窗口窗口 || 混色器”，混色器面板设置颜色混色器”，混色器面板设置颜色

13357397561335739756@@qqqq.com.com

2323

博客 http://blog.sina.com.cn/wfsylu

形状工具形状工具

形状工具是一套创建各种图形的绘制工具。

【说明】在 Flash舞台中绘制好线条或图形后，可对其进行编辑，如对图像的变形、扭曲、缩放、套索等操作。

各种形状工具

13357397561335739756@@qqqq.com.com

2424

博客 http://blog.sina.com.cn/wfsylu

【例如】利用“基本椭圆工具”，绘制圆环的操作步骤。

绘制圆环的操作步骤

13357397561335739756@@qqqq.com.com

2525

博客 http://blog.sina.com.cn/wfsylu

文本工具文本工具文字信息在动画制作的过程中是必不可少的重要组成部分。在 Flash 中，文本分为静态文本、动态文本和输入文本。

制作动画通常使用的都是静态文本，可以设置文字的大小、颜色、旋转角度、透明度等属性。

文字输入与处理 ：“属性”面板先设置字体、字号、颜色等，再输入字“属性”面板先设置字体、字号、颜色等，再输入字 “ “Ctrl+B”Ctrl+B” 矢量图分离成图形； “矢量图分离成图形； “ Ctrl+G”Ctrl+G” 相反作用相反作用

13357397561335739756@@qqqq.com.com

2626

博客 http://blog.sina.com.cn/wfsylu

创建动画的分类创建动画的分类

13357397561335739756@@qqqq.com.com

2727

博客 http://blog.sina.com.cn/wfsylu

Flash 有两种基本的创建动画序列的方法：* ⒈ ⒈ 时间轴操作时间轴操作

逐帧动画 补间动画

基本动画制作基本动画制作

13357397561335739756@@qqqq.com.com

2828

博客 http://blog.sina.com.cn/wfsylu

逐帧动画的基本概念 : 逐帧动画就是由就是一帧一帧的运动形成的。 逐帧动画就是需要一帧一帧的绘制，因此工作量比较大。逐帧动画

的体积一般比较大。在创建逐帧动画时，每一帧都是关键帧。 但逐帧动画通常被用在制作传统的 2D 动画中，而且会经常性的使用。

(1)逐帧动画

13357397561335739756@@qqqq.com.com

2929

博客 http://blog.sina.com.cn/wfsylu

逐帧动画逐帧动画创建逐帧动画的主要方法：

① 利用静态图片建立逐帧动画② 绘制矢量逐帧动画③ 制作文字逐帧动画④ 导入序列图像

13357397561335739756@@qqqq.com.com

3030

博客 http://blog.sina.com.cn/wfsylu

【例如】制作逐帧动画：实现倒计时效果。逐一显示“ 5 、 4 、 3 、 2 、 1 、 0 、新、年、好”，在显示“ 0”这帧时停留时间长些。

13357397561335739756@@qqqq.com.com

3131

博客 http://blog.sina.com.cn/wfsylu

① 补间形状动画：

② 补间动画：

③ 传统补间动画：

⑵ ⑵ 补间动画补间动画

13357397561335739756@@qqqq.com.com

3232

博客 http://blog.sina.com.cn/wfsylu

补间形状动画：补间形状动画：补间形状动画补间形状动画的变形对象是矢量图形。要给组合

体、实例或位图图像应用形变动画，则必须首先将这些元素分离（打散）。如果是文本，则需要打散两次，第一次打散只是分散成为单个的字符，第二次打散才成为矢量图形。

补间形状动画：补间形状动画：中可以使用 Flash提供的形状提示点来限制形状的变化过程。形状提示点的主要目的就是限制矢量图形的变化过程，使Flash 自动生成的变化过程可以得到人为的控制。

13357397561335739756@@qqqq.com.com

3333

博客 http://blog.sina.com.cn/wfsylu

传统补间动画：

在传统补间动画中，可以定义符号实例、组合体或文本块在时间轴某一帧中的属性，比如大小和位置等，然后在另一个关键帧中改变这些属性。可见，传统补间动画针对的是符号实例、组合体或文本块。

13357397561335739756@@qqqq.com.com

3434

博客 http://blog.sina.com.cn/wfsylu

补间形状动画和传统补间动画的区别 :

补间形状动画 传统补间动画形状是可直接在图形上进行修改的 .

不可直接修改只可打散后变为图形进行修改 .

形状在舞台的显示区域是以点状显示 .

动作在舞台的显示为图像始终都有一个蓝色的外框 .

形状补间在时间轴上是以绿色条显示的 .

动作补间在时间轴上是以紫色条显示的 .

13357397561335739756@@qqqq.com.com

3535

博客 http://blog.sina.com.cn/wfsylu

Flash 文档的基本操作

1.创建新文档方法 1 ：在开始页对话框上单击【创建新项目】 栏第一行的【 Flash 文档】按钮方法 2 ：在主工具栏上单击【新建】按钮方法 3 ：在菜单栏执行【文件 →】 【新建】命令方法 4 ：运用快捷键【 Ctrl+N 】

13357397561335739756@@qqqq.com.com

3636

博客 http://blog.sina.com.cn/wfsylu

2.设置文档属性1). 调出“文档属性”对话框 2). 在“文档属性”对话框中设置文档属

性

13357397561335739756@@qqqq.com.com

3737

博客 http://blog.sina.com.cn/wfsylu

3. 保存文档 (*.FLA)

保存的方法：执行【文件 →】 【保存】命令 ，或在主工具栏上单击【保存】按钮，或运用组合键【 Ctrl+S】）。

1). 首次保存：保存后在标题栏显示文档名称 2). 过程保存：要随时保存，以防止前功尽弃3). 最后保存：执行【文件 →】 【另存为】命令

13357397561335739756@@qqqq.com.com

3838

博客 http://blog.sina.com.cn/wfsylu

4. 测试影片 (*.SWF)1). 简单的测试 最简单的测试性播放的方法是在键盘上按下【 Enter】键

2). 完全的测试 执行【控制 →】 【测试影片】命令，或按下快捷键【 Ctrl+Enter 】

13357397561335739756@@qqqq.com.com

3939

博客 http://blog.sina.com.cn/wfsylu

5.发布影片1. 最简单的发布 执行【控制 →】 【测试影片】命令

（或按下快捷键【 Ctrl+Enter 】 2. “ 导出”式发布 执行【文件 →】 【导出】命令

13357397561335739756@@qqqq.com.com

4040

博客 http://blog.sina.com.cn/wfsylu

Flash 动画的制作流程 FlashFlash 动画的制作的基本流程是：准备素材→新建动画的制作的基本流程是：准备素材→新建 FlashFlash 影片文档→设影片文档→设置文档属性→制作动画→测试和保存动画→导出和发布影片。置文档属性→制作动画→测试和保存动画→导出和发布影片。

1 ．准备素材 2 ．新建 Flash 影片文档3 ．设置文档属性 4 ．制作动画

5 ．测试和保存影片6 ．导出和发布影片

13357397561335739756@@qqqq.com.com

4141

博客 http://blog.sina.com.cn/wfsylu

参考资料

参考书籍

Flash 网站资源

课程网站（优秀作业、作品）

课程网站（学习课件、上机练习）

书店，图书馆

电子实验书

13357397561335739756@@qqqq.com.com

4242

博客 http://blog.sina.com.cn/wfsylu

找 flash逐帧动画素材，哪里有 flash逐帧动画素材呀？

笔秀网 http://www.penshow.cn/

FLASH 在线 http://www.flashline.cn/

http://www.zcool.com.cn/gfxs/

我搜我搜 http://www.wosowoso.com/

闪吧 http://www.flash8.net/

13357397561335739756@@qqqq.com.com

4343

博客 http://blog.sina.com.cn/wfsylu

总结：

通过欣赏并制作简单的动画作品。

掌握 FLASH 的基本概念，基础知识。熟悉 FLASH 工作界面，基本操作。学会 FLASH 文件的保存，运行方法。------激发学习的兴趣和动力。