模块四 Flash网页动画设计

模块四 Flash动画设计

授课教师：王月娥

1操作环境

1.1基础知识

FLASH是Adobe公司的一款多媒体矢量动画编辑软件，生成动画文件尺寸小，简单易学，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站。

Flash动画创作流程：前期策划、准备素材、制作动画、后期调试、发布作品

1.2 Flash工作界面

1. Flash的安装 2. Flash的启动

开始/程序/Macromedia / Macromedia Flash 8 3.Flash的工作界面

FLASH8.0的工作界面，主要有舞台，主工具栏，工具箱，时间轴，属性面板和多个控制面板等几个部分。

菜单栏

标题栏

文档选项卡

时间轴

舞台

控制面板

工具箱

4. 面板的基本操作 （1）打开面板

可以通过选择“窗口”菜单中的相应命令打开指定面板。 （2）关闭面板

在已经打开的面板标题栏上右击，然后在快捷菜单中选择“关闭面板组”命令即可。 （3）折叠或展开面板

单击标题栏或者标题栏上的折叠按钮可以将面板折叠为其标题栏。再次单击即可展开。 （4）移动面板

可以通过拖动标题栏左侧的控点 移动面板位置或者将固定面板移动为浮动面板。 （5）恢复默认布局 窗口→工作区布局→默认

1.3文件操作

Flash 文档的文件扩展名为 .fla (FLA)。完成 Flash 文档的创作后，可以使用\文件\发布\命令发布它。这会创建文件的一个压缩版本，其扩展名为 .swf (SWF)。

“文件”→“新建”、“保存”和“打开”

文档属性的设置：文档空白区点击右键，选择“文档属性”

1.4窗口操作

窗口的缩放

方法一：用缩放工具可以直接对图片进行缩放（按住Alt键缩小）

方法二：选择“视图”→ “缩放比率”→ “符合窗口大小”菜单 方法三：单击时间轴右上方的缩放菜单

使用标尺、网格和辅助线

Flash 可以显示标尺和辅助线，帮助精确地绘制和安排对象 视图→标尺、网格、辅助线 贴紧→贴紧至网格、贴紧至辅助线 使用辅助线 步骤:

1. 选择“视图”→“标尺”，在舞台上显示标尺。

2. 将鼠标指向舞台上方或左侧的标尺，按住鼠标左键并拖动，可拖出水平或

垂直的辅助线

3. 拖出辅助线后，对象会自动贴紧至辅助线 4. 清除单条辅助线，可使用选择工具

将其拖出舞台，清除全部，可选择

“视图”→“辅助线”→“清除辅助线”

2绘图工具

矢量图形：使用称作矢量的直线和曲线描述图像，矢量包括颜色和位置等属性 位图图形：使用网格内整齐排列的称作像素的点来描述图像.

图形是组成Flash动画的基本元素，通过Flash提供的绘图工具，可以绘制出动画需要的任何图形。

工具箱有“工具”、“查看”、“颜色”和“选项”4个区域。“工具”区提供了用于绘制图形的各种工具；“查看”区用来移动和缩放舞台；“颜色”区设置该工具的线条颜色和填充

色；“选项”区用于设置所选工具的一些属性，随所选工具的不同而改变。

2.1选择工具

选择工具：选择和移动舞台中的对象，也用来调整

部分选取工具：用于选择舞台上图形的轮廓，并可调整轮廓形状 套索工具：用于选择不规则的图形区域 使用“选择工具”调整图形的形状

2.2绘制图形

在Flash绘制图形，通常是先绘制线条色画出图形的轮廓线，然后为轮廓线构成的封闭区域填充上颜色，从而制作出需要的图形。 2.2.1绘制和调整线条

线条工具步骤:

：绘制直线

1. 选择“线条工具” 后，可在“属性”面板中设置线条的“笔触颜色”、“笔触

高度”、“笔触样式”等属性

2. 在舞台中按住鼠标左键并拖动，即可绘制直线

铅笔工具步骤：

1. 选中“铅笔工具” 后，可在工具箱的“选项”区选择铅笔模式

：绘制任意形状的线条

2.在“属性”面板中设置“铅笔工具”的参数

直线化 平滑 墨水

使用3种模式绘制的图形

2.2.3绘制几何图形 椭圆工具矩形工具多角星形工具

步骤：

1. 长按矩形工具

，切换到多角星形工具

绘制椭圆, 在拖动鼠标的同时按住【Shift】键，可绘制正圆 绘制矩形, 在拖动鼠标的同时按住【Shift】键，可绘制正方形。 ：绘制多边形和星形。

2. 在属性面板中设置多角星形工具的属性

2.2.4绘制曲线 钢笔工具

：用于绘制连续的直线、平滑的线，或者是封闭的图形

步骤:

1． 选择钢笔工具，在舞台上单击，确定起始描点(绿色圆圈)

2． 在舞台另处单击创建第二个描点，描点之间会出现绿色的线段，称

之为路径

3． 在另一点按住鼠标左键向任意方向拖动，可拖出一个调节杆，向任

意方向拖动调节杆，可调整曲线弧度

4． .将光标移动到起始描点处，当光标呈 形状时单击，可创建封闭

路径

5． 路径绘制完成后，单击其它任意工具，既可将路径转换为线条。

2.2.5刷子工具

:绘制任意形状的色块

2.2.6橡片擦

:擦除图形中不需要的部分。双击橡片擦工具可清楚舞台上所有对象。

：输入和修改文本

2.3文本工具

创建文本

方法一: 选中“文本工具”， 在舞台上单击并输入文字，以这种形式创建的文本，换行需要按【Enter】键。

方法二: 选中“文本工具”， 在舞台中按住鼠标左键并拖动，可拖出一个文本

框，用来规定文本的宽度，当文字达到文本框边缘时会自动换行

设置文本样式

依次可设置字体，字号，颜色，居中方式,字间距等。

文本的类型

静态文本：静态文本是在创作文档时确定文本内容和外观，最终出现在动画中的文本与在制作动画时设置的样式没有任何变化。常用的都是静态文本。

动态文本：动态文本是在动画播放时可以动态更新的文本，它可以根据情况动态改变文本的显示内容以及样式等。动态文本常用在游戏或课件作品中。

输入文本：输入文本是在动画播放时可以接受用户输入的文本，是响应键盘事件的一种人机交互的工具。

2.4调整颜色

颜色面板

1.打开“颜色”面板，单击“笔触颜色”按钮或“填充颜色”按钮，选择设置的颜色类型

2.在光谱图中单击选择颜色的色调，然后拖动右边竖条中的三角形可改变颜色明度，也可以在“红”、“绿”、“蓝”三个编辑框或光谱图下方的编辑框中输入数值来定义颜色。定义好颜色后还可以通过更改“Alpha”的数值来更改颜色的透明度，设置好的颜色会在“当前色”框中显示 混色器面板

类型：无、纯色、线性渐变色、放射状、位图

填充变形工具

：调整渐变色效果

实例：绘制立体感小球

1. 选择“窗口”→“混色器”，打开混色器面板 2. 按下“笔触颜色”按钮,选择类型选择为“无”

3. 按下“填充颜色”按钮,选择类型选择为“放射状”

4. 选择放射状后，在面板中会现一个渐变条，双击渐变条左边的色标，选择起始

颜色为白色，双击渐变条右边的色标，选择结束颜色为橘黄色(在渐变条上单击可添加一个色标，要删除色标，可将其拖到面板外即可)

双击

5. 选择椭圆工具，按住【Shift】键绘制一正圆 6. 选择填充变形工具

，在圆形上单击鼠标左键，然后将鼠标指向渐变中心调

整点，按住鼠标左键向左上方拖到，改变渐变中心点的位置，绘制出立体感小球

墨水瓶工具

:更改图形线条的属性

颜料桶工具滴管工具

：更改图形色块的属性 ：用于吸取图形的颜色属性

2.5 对象的变形操作 任意变形工具变形面板

2.6对象的基本编辑 对象的选择 移动和复制对象 对象的的群组和分离 排列对象 对齐图形

实例 描边文字的制作

步骤:

1． 选择文本工具，输入文字“动画制作”，字体设为隶书，字号为96,文本颜色为黑色 2． 执行“修改”→“分离”命令两次

3． 选择“墨水瓶工具”，笔触颜色设为彩色，笔触高度设为2 4． 单击文字轮廓，为文字增加描边效果

实例 一个简单的动画：闪烁的星空

步骤：

1. 将文档的背景颜色设为黑色

2. 选择”多角星型工具”,在属性面板中，将笔触颜色选择无，填充色选为淡黄色，单击

“选项”，将样式选为星型，边数设为4,星形项点大小设为0.3，在舞台上绘制多个大小不同的星形

3. 在时间轴上，用鼠标单击选中第5帧，按”F7”键，插入空白关键帧，同样在在舞台

上绘制多个大小不同的星形

4. 用鼠标选中时间轴上的第10帧，按“F5键”，插入延时帧 5. 选择“控制”菜单中的“测试影片”测试动画

实例 花朵的绘制

制作步骤

1、新建一个影片文档，使用默认文档属性，保存影片文档，命名为“花朵.fla”。 2、新建“花瓣”图形元件，执行【插入】｜【新建元件】命令，弹出【创建新元件】对话框，输入元件名称为【花瓣】，选择【类型】为【图形】，单击【确定】按钮，如图4-1所示。

图4-1 创建图形元件设置

图4-2 颜色设置

3、画花瓣

在【花瓣】图形元件的编辑场景中，选择【椭圆工具】，设置【笔触颜色】为红色，【填充色】为无，如图4-2所示。

在场景中绘制出一个圆形，用【选择工具】将图形调整成花瓣形状，如图4-3所示。

技巧 注意要让图形下端靠近场景十字的十字符号。因为我们下一步要做的旋转将以十字符号为中心。

4、给花瓣填充颜色

执行【窗口】|【混色器】命令，在【混色器】面板中选择填充类型为【放射状】，设定颜色为由大红到浅红渐变，如图4-4所示。设定填充颜色时凭感觉，不用太拘束于具体的数值。

图4-3 花瓣造型 图4-4 填充设置

在工具箱中选择【颜色桶】工具，给场景中的花瓣图像填充颜色，然后删除外框线条，如图4-5所示。

图4-5 填充颜色 图4-6 “花瓣”图形元件实例

5、创建“花朵”图形元件

新建图形元件，元件名称为“花朵”。在这个元件的编辑场景中，将刚刚绘制好的“花瓣”元件从【库】面板中拖放到场景中，然后用【任意变形工具】将这个图形实例的中心点移动到花瓣图形的下端，如图4-6所示。

图4-7 ‘变形’面板 图4-8完整的花朵

保持场景中的“花瓣”实例处于被选中状态，执行【窗口】|【变形】命令，弹出【变形】面板，如图4-7所示。

在【变形】面板中，设置【旋转】为72度，单击【复制并应用变形】按钮，如图7所示。这时会发现原来的花瓣旁边出现了一个同样的花瓣图形，接着再单击【复制并应用变形】按钮3次后，一朵花就画好了，如图4-8所示。

如果觉得花瓣形状不太满意，可以随时打开“花瓣”元件进行调整，花朵形状会随之而发生变化。

3动画制作基础

3.1认识时间轴

帧的分类

帧是构成Flash动画最基本的单位，在不同的帧上放置不同的动象，便生成了Flash动画。

关键帧：用来定义动画的变化的帧。用实心圆表示。 空白关键帧：没有内容的关键帧。用空心圆表示。 普通帧：延伸关键帧的内容 帧的基本操作 插入帧(F5) 创建关键帧 (F6)

插入关键帧后，上一个关键帧的内容会自动延伸到该关键帧以及两个关键帧之间的所有普通帧上。

创建空白关键帧 (F7) 选择帧

选择一个帧，单击该帧；选择多个连续帧，按住Shift键并单击 删除帧 复制和移动帧 翻转帧

3.2逐帧动画

在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。 逐帧动画在时间帧上表现为连续出现的关键帧，

创建逐帧动画的几种方法

（1）用导入的静态图片建立逐帧动画

将静态图片连续导入Flash中，就会建立一段逐帧动画。 （2）绘制矢量逐帧动画

用鼠标或压感笔在场景中一帧帧的画出帧内容。 （3）文字逐帧动画

用文字作帧中的元件，实现文字跳跃、旋转等特效。 （4）导入序列图像

可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。

实例:文字的依次出现 步骤：

1. 选取文本工具，设置字体为黑体，字号为70 2. 选中第1帧，输入文字”胜”

3. 选中第2帧，按F6键插入关键帧，双击文本框加入文字“利” 4. 重复2,3步骤，依次在3至6帧加入文字“职”“业”“学”“院” （可再做文字的递减） 5. 测试动画Ctrl+Enter

3.3补间动画

1．形状补间动画

（1）形状补间动画的概念

在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。

（2）构成形状补间动画的元素

形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。

（3）形状补间动画在时间帧面板上的表现

形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如图所示。

（4）创建形状补间动画的方法

a.选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好 b.在动画结束处创建或选择一个关键帧并设置要变成的形状

c.再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】

实例:圆形变成文字的动画 步骤：

1． 选中第1帧，选中椭圆工具，设置笔触色为无色，填充色为红色，绘制一个

圆形

2． 选中第30帧，按F7键插入空白关键帧，选取文本工具，设置字体为黑体，

字号为70，在其中输入文字”火”， 3． 选中文字，执行“修改”→“分离”命令

4． 再次选中第1帧，点击属性面板上的“补间”，在下拉列表中选择“形状” 5． 测试动画Ctrl+Enter

2.动作补间动画

（1）动作补间动画的概念

在Flash的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flash 根据二者之间的帧的值创建的动画被称为动作补间动画。

（2）构成动作补间动画的元素

构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等等，除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

（3）动作补间动画在时间帧面板上的表现

动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图所示。

（4）形状补间动画和动作补间动画的区别

形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧，二者之间的区别如下表所示。

区别之处 在时间轴上的表现 组成元素 影片剪辑、图形元件、按钮 形状，如果使用图形元件、按钮、文字，则必先打散再变形。 完成的作用 实现一个元件的大小、位置、颜色、透明等的变化。 实现二个形状之间的变化，或一个形状的大小、动作补间动画 淡紫色背景加长箭头 形状补间动画 淡绿色背景加长箭头 位置、颜色等的变化。

(5）创建动作补间动画的方法

a.在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目

b.在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，

c.再单击开始帧，在【属性面板】上单击【补间】旁边的“小三角”，在弹出的菜单中选择【动作】，

3.动作补间动画的属性面板

在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图所示。

（1）“简单”选项

在“0”边有个滑动拉杆按钮 ，单击后上下拉动滑杆或填入具体的数值，补间动作动画效果会以下面的设置作出相应的变化：

1. 在1到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。 2. 在1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。

3. 默认情况下，补间帧之间的变化速率是不变的。 （2）“旋转”选项

“无”（默认设置）禁止元件旋转；

“自动”可以使元件在需要最小动作的方向上旋转对象一次；

“顺时针” 或“逆时针” ，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。

（3）“调整到路径”

将补间元素的基线调整到运动路径，此项功能主要用于引导线运动，我们在下一节中要谈到此功能。

（4）“同步”复选框

使图形元件实例的动画和主时间轴同步。 （5）“对齐”选项

将补间元素附加到运动路径，此项功能主要也用于引导线运动。 实例:弹跳的小球 步骤:

1. 选中椭圆工具，笔触颜色设为无色，填充色设为放射状渐变，选中第1帧，

在舞台上方绘制一小球。

2. 选中小球，按F8键，将小球转化为元件

3. 选中第30帧，按F6键，插入关键帧，选中第60帧，按F6键，插入另一关

键帧

4. 选中第1帧，在属性面板中将“补间”设为“动画”,缓动值设为-100 5. 选中第30帧，在属性面板中将“补间”设为“动画”,缓动值设为100，并将

小球位置移到舞台下方， 6. 测试动画ctrl+enter

本文来源：https://www.bwwdw.com/article/mn23.html