flash动画制作步骤.docx

flash动画制作步骤.docx

《flash动画制作步骤.docx》由会员分享，可在线阅读，更多相关《flash动画制作步骤.docx（22页珍藏版）》请在冰豆网上搜索。

flash动画制作步骤

模块四企业动画的制作

4.1模块功能分析

根据建设方案，在与企业沟通、协调下分析设计宣传动画。

【能力目标】

●能够根据布局要求选择合适的动画尺寸，分析设计宣传动画

●能够根据不同的动画选择不同的元件

●能够创建补间动画、引导层动画和遮罩效果

【知识目标】

●认识帧（Frame）、时间轴、图层

●熟悉图形元件、按钮元件和影片剪辑元件的不同用法

●理解补间动画、引导层动画和遮罩效果的制作方法

【素质目标】

●挖掘学生的创造力、激发学生的艺术设计能力

●培养学生的沟通、合作能力

●培养学生自我学习、解决问题的能力

4.2模块任务实施

任务1企业宣传动画的制作

一任务分析

根据需求方提出的设计要求和沟通，确定了的Banner条采用Flash设计制作，以达到增加页面动态效果和美化页面的效果。

二任务实施

步骤1新建一个Flash文档，命名为“banner.fla”，设置【属性】面板中的文档大小属性为宽900像素、高260像素，如图所示

图文档属性

步骤2选择【文件】|【导入】|【导入到库】菜单选项，在打开的对话框中选择需要导入的素材文件“banner-1.jpg”和“xiaotu.gif”两个图片，单击【确定】按钮，此时素材导入到库中，如图所示。

图库面板

步骤3将“banner-1.jpg”拖动到舞台中，调整其大小使其覆盖整个舞台。

步骤4单击【时间轴】面板下方的添加新图层按钮，添加【图层2】。

步骤5鼠标单击【图层2】的第一帧，然后选择工具箱中的【文本】按钮，在打开的【属性】面板中，设置【字体】为“华文楷体”，【字体大小】为“53”，【字体颜色】为“#003300”。

步骤6在舞台中输入“选择森兴选择品质”这8个文字。

步骤7选中文字，选择【修改】|【分离】命令，文字被打散。

效果如图所示。

图分离文字

步骤8选择【图层1】的第40帧，插入一个普通帧。

按住【CTL】键，选中【图层2】的第1帧、第5帧、第10帧、第15帧、第20帧、第25帧、第30帧、第35帧、第40帧，插入一个关键帧。

步骤9选择【图层2】的第1帧，按下【Delete】键删除所有的文字。

步骤10选择【图层2】的第5帧，删除“择森兴选择品质”这7个字。

步骤11选择【图层2】的第10帧，删除“森兴选择品质”这6个字。

步骤12同理设置【图层2】的第15帧、第20帧、第25帧、第30帧、第35帧、第40帧上的文字。

步骤13单击【时间轴】面板下方的添加新图层按钮，添加【图层3】。

单击【图层3】的第一帧，从【库】面板中拖入“xiaotu.gif”,选中图片，按下【F8】将其转换成图形元件。

步骤14单击【图层3】的第40帧添加关键帧；在【变形】面板中设置第1帧图形为“10%”，在属性面板中设置【颜色】为“alpha”值为“20%”，如图所示；在【变形】面板中设置第40帧图形为“100%”，在属性面板中设置【颜色】为“alpha”值为“70%”；在第1帧和第40帧之间添加【补间动画】；至此动画设置如图所示。

图变形面板图动画界面

步骤14按下【CTRL】+【ENTER】，测试效果，如图所示。

图banner条动画效果

三知识梳理

知识结构如图所示。

图知识结构图

1Flash工作界面

打开一个Flash文档进入其工作界面，它包括标题栏、菜单栏、工具箱、时间轴、舞台、属性面板和面板区，如图所示。

图Flash工作界面

（1）标题栏

每一个应用程序窗口文档的最上方都会有一个标题栏，显示当前文档的名称。

（2）菜单栏

Flash菜单栏共包含11菜单项，每个菜单项有包含若干操作项，具体如图所示。

图文件菜单图编辑菜单

图视图菜单图修改菜单

图插入菜单图文本菜单图命令菜单

图测试菜单图窗口菜单

2Flash工具箱

工具箱位于窗口的左侧，用户可以随意拖动到合适的位置。

它提供了Flash常用的各种工具。

●选择工具

选择工具是最常用的工具之一。

使用它不仅可以选择对象，还可以移动对象

选中选择工具后，在舞台中单击鼠标左键并拖动鼠标即可选择图形，如图所示。

图选择工具

●部分选择工具

部分选择工具是修改和调整路径时经常使用的工具，它可以通过选择对象的锚点实现编辑、移动和变形。

单击部分选择工具按钮，然后单击舞台中图形的轮廓线，就会出现很多控制点，如图所示。

鼠标移动到控制点上变成形状时，单击可以移动控制点；鼠标移动到2个控制点之间时变成形状，单击可以拖动图像。

图部分选择工具

●任意变形工具

任意变形工具主要是对选中的对象进行旋转、扭曲和缩放。

●套索工具

套索工具主要是对对象局部进行选区。

它分成魔术棒和多边形模式。

●铅笔工具

它用来绘制任意形状的线条和图形。

单击铅笔按钮会在选项区域出现铅笔模式选择：

伸直、平滑和墨水3个选项，如图所示。

图铅笔模式

【伸直】模式可以在绘制过程中将线条自动伸直，使其尽量直线化，简单的说伸直模式可以画出平直的线条，并可将近似于三角形、椭圆、矩形和正方形的图形转换为标准的几何图形。

【平滑】模式可以在绘制过程中将线条自动平滑，使其尽可能成为有弧度的曲线，简单的说平滑模式可画出平滑的曲线。

【墨水】模式则是在绘制过程中保持线条的原始状态，即墨水模式可随意画线。

除此之外，通过属性面板可以对铅笔工具进行笔触颜色、笔触高度（线宽）和笔触样式（线形）或者自定义笔触样式设置，如图所示。

图铅笔属性面板

●钢笔工具

使用钢笔工具可以绘制出直线或者平滑流动的曲线，在绘制过程中可以通过调整路径节点或节点控制手柄来绘制出复杂的线段或图形。

单击钢笔工具，在舞台上单击一点，然后在另一边单击一点，则可以画出一条直线，如图所示。

如果单击另一点的同时拖动鼠标则可以绘制一条曲线，如图所示。

图直线图曲线

【添加锚点】工具：

选择该工具单击现有路径，可添加一个锚点。

【删除锚点】工具：

选择该工具单击现有路径上的一个锚点，则删除该锚点。

【转换锚点】工具：

选择该工具单击现有路径上的一个锚点，将其转换为带有独立方向线的转角点。

●橡皮擦工具

橡皮擦工具有两种模式：

一种是水龙头，一种是橡皮擦。

选择【水龙头工具】，单击你需要擦除的填充区域或笔触段，可以快速将其擦除。

如果你只擦除一部分笔触或填充区域，就得通过拖动进行擦除。

橡皮擦提供了5种擦除模式：

　【标准擦除】：

擦除同一层上的笔触和填充。

　【擦除填色】：

只擦除填充，不影响笔触。

　【擦除线条】：

只擦除笔触，不影响填充。

　【擦除所选填充】：

只擦除当前选定的填充，并不影响笔触（不管笔触是否被选中）。

以这种模式使用橡皮擦工具之前，请选择你要擦除的填充。

　【部擦除】：

只擦除橡皮擦笔触开始处的填充。

如果从空白点开始擦除，则不会擦除任何容。

以这种模式使用橡皮擦并不影响笔触。

3Flash元件

Flash中的元件有图形元件、按钮元件和影片剪辑元件3种。

●图形元件是可以重复使用的静态图像，它是作为一个基本图形来使用的，一般是静止的一副图画，每个图形元件占1帧。

例如创建一个星星图形元件。

步骤1新建一个Flash文档，单击【插入】菜单|【新建元件】命令，在弹出的对话框中输入“星星”，类型选择“图形”。

图创建元件对话框

步骤2单击确定按钮后进入星星图形元件的编辑界面。

选择工具栏中的多变形工具，在属性面板中设置笔触为“无”，填充为“线性白黑渐变”；单击【选项】按钮，设置样式为“星形”、边数“8”、星形顶点大小“0.01”，如图所示。

图工具设置

步骤3在界面中单击鼠标左键拖动，即可画出一个星星图形，如图所示。

图星星图形

●按钮元件实际上是一个只有4帧的影片剪辑，但它的时间轴不能播放，只是根据鼠标指针的动作做出简单的响应，并转到相应的帧，通过给舞台上的按钮添加动作语句而实现flash影片强大的交互性。

例如创建一个椭圆形按钮元件。

步骤1新建一个Flash文档，单击【插入】菜单|【新建元件】命令，在弹出的对话框中输入“椭圆形”，类型选择“按钮”。

图创建元件对话框

步骤2单击确定按钮，进入“椭圆形”按钮元件编辑界面，它有4个状态，如图所示。

图按钮编辑界面

步骤3在【弹起】状态，选择工具栏中的椭圆工具按钮，设置属性面板笔触为“无”，填充为“#009900”，单击鼠标左键在界面中拖动，即可画出一个椭圆形按钮的形状，如图所示。

图【弹起】状态

步骤4在【鼠标经过】状态，添加一个关键帧。

选中椭圆形，在属性面板中设置填充颜色为“#33cc33”，同理在【按下】和【单击】状态也可以改变椭圆形的颜色。

步骤5将库中的按钮拖动到场景的舞台中，设置舞台大小和按钮一致，使用【对齐】面板设置按钮的位置为水平居中、垂直居中，预览效果如下。

图对齐面板图按钮预览

步骤6选择舞台中的按钮，在属性面板中选择【滤镜】，单击按钮可以添加一种滤镜效果，单击按钮可以删除一种已经添加的滤镜效果，如图所示。

图滤镜效果设置

●影片剪辑元件可以理解为电影中的小电影，可以完全独立于场景时间轴，并且可以重复播放。

影片剪辑是一小段动画，用在需要有动作的物体上，它在主场景的时间轴上只占1帧，就可以包含所需要的动画，影片剪辑就是动画中的动画。

“影片剪辑”必须要进入影片测试里才能观看得到。

例如创建一个3s的星空星星闪烁的效果。

步骤1新建一个Flash文档，首先创建一个星星图形，如图所示。

步骤2新建一个影片剪辑动画“闪烁的星星”。

选中图层1的第一帧，将星星图形从库中拖到影片的编辑界面，然后单击图层1的第36中添加一个关键帧，修改星星图形的颜色为“ALPHA”,值为“20%”；然后在图层1的第1到第36帧之间添加补间动画；效果如图所示，这样一个星星的颜色由深到浅的影片剪辑动画就创建好了。

图星星闪烁影片剪辑

步骤3将影片剪辑拖动到场景1的舞台中，运行就可以看到效果了。

为了更好的模拟星空的效果，可以多做几个不同效果的星星闪烁的影片剪辑。

4Flash动画

Flash动画归纳起来包括逐帧动画、补间动画、遮罩动画和引导层动画4类。

（1）逐帧动画

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

常用的几种创建逐帧动画的方法：

方法1：

用导入的静态图片建立逐帧动画，用jpg、png等格式的静态图片连续导入Flash中，就会建立一段逐帧动画。

方法2：

绘制矢量逐帧动画，用鼠标或压感笔在场景中一帧帧的画出帧容。

方法3：

文字逐帧动画，用文字作帧中的元件，实现文字跳跃、旋转等特效。

方法4：

导入序列图像，可以导入gif序列图像、swf动画文件产生的动画序列。

例如创建一个文字逐帧动画。

●步骤1新建一个Flash文档，命名为“文字逐帧动画.fla”，设置【属性】面板中的文档大小属性为宽800像素、高150像素，如图所示。

图文档属性

步骤2选择【文件】|【导入】|【导入到库】菜单选项，在打开的对话框中选择需要导入的素材文件，单击【确定】按钮，此时素材导入到库中，如图所示。

图库

步骤3将“Beijing.jpg”拖动到舞台中，调整其大小使其覆盖整个舞台。

步骤4单击【时间轴】面板下方的添加新图层按钮，添加【图层2】。

步骤5鼠标单击【图层2】的第一帧，然后选择工具箱中的【文本】按钮，在打开的【属性】面板中，设置【字体】为“华文楷体”，【字体大小】为“70”，【字体颜色】为“#009900”。

步骤6在舞台中输入“森兴送您大自然”这7个文字。

步骤7选中文字，选择【修改】|【分离】命令，文字被打散。

效果如图所示。

图分离文字

步骤8选择图层1的第35帧，插入一个普通帧。

按住【CTL】键，选中【图层2】的第1帧、第5帧、第10帧、第15帧、第20帧、第25帧、第30帧、第35帧，插入一个关键帧，如图所示。

图添加关键帧

步骤9选择【图层2】的第1帧，按下【Delete】键删除所有的文字。

步骤10选择【图层2】的第5帧，删除“兴送您大自然”这6个字。

步骤11选择【图层2】的第10帧，删除“送您大自然”这5个字。

步骤12同理设置【图层2】的第15帧、第20帧、第25帧、第30帧、第35帧上的文字。

步骤13选择【控制】菜单|【测试影片】命令，效果如图所示。

图文字逐帧动画

（2）补间动画

Flash中在两个关键帧中间要做“补间动画”，才能实现图画的运动，插入补间动画后两个关键帧之间的插补帧由计算机自动运算生成；补间动画分成两类：

一类是形状补间，用于形状的动画；另一类是动作补间用于图形及元件的动画

●形状补间动画

形状补间动画是在Flash的时间帧面板上，在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状或绘制另一个形状等，Flash将自动根据二者之间的帧的值或形状来创建的动画，它可以实现两个图形之间颜色、形状、大小、位置的相互变化。

形状补间动画建立后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间也有一个长长的箭头；构成形状补间动画的元素多为用工具栏工具绘制出的形状，而不能是图形元件、按钮、文字等，如果要使用图形元件、按钮、文字，则必先打散（Ctrl+B）后才可以做形状补间动画。

例如创建一个形状补间动画，一个圆逐渐变成一个字。

步骤1新建一个Flash文档，命名为“形状补间.fla”。

步骤2单击【图层1】的第1帧；选择工具箱中的【圆形】工具按钮，在【属性】面板中设置【笔触】为“无”、【填充】为“红色”；在舞台中画一个宽90.5的一个圆，修改其相对舞台的对齐方式为“水平居中、垂直居中”。

步骤3单击【图层1】的第25帧，添加一个关键帧，按下【delete】删除原来的圆；选择工具箱中的【文字】按钮，在打开的【属性】面板中，设置【字体】为“华文楷体”，【字体大小】为“70”，【字体颜色】为“红色”；在舞台中输入一个字“变”，修改其相对舞台的对齐方式为“水平居中、垂直居中”。

步骤4选中文字，然后选择【修改】菜单|【分离】命令。

步骤5鼠标单击他【图层1】的第1帧到第25帧中的任意帧，在属性面板中设置【补间】为“形状”。

步骤6按下【CTRL】+【ENTER】，测试效果，如图所示。

图形状补间

●动作补间动画

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

动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头；构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图等，但不能是形状，只有把形状组合或者转换成元件后才可以做动作补间动画。

下面的遮罩动画和引导层动画中用的都是动作补间动画，这里就不再举例了。

（3）遮罩动画

遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。

“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。

例如设置遮罩动画，在一个全黑的界面中，一个圆在运动，下面显示一个一幅风景图的部分容。

步骤1新建一个Flash文档，命名为“遮罩.fla”，在【属性】面板中设置文档【背景】为“黑色”。

步骤2添加一个【图层2】，选择【文件】菜单|【导入】|【导入到库】命令，选择一幅图片。

步骤3从【库】中将该图片拖入舞台，在【对齐】面板中设置【匹配大小】为“宽度匹配、高度匹配”。

步骤4添加一个【图层3】，选择工具箱中的【圆形】工具按钮，在【属性】面板中设置【笔触】为“无”、【填充】为“红色”；在舞台中画一个宽100的圆。

选中该圆，按【F8】将该圆转换成一个图形元件。

步骤5在【图层3】的第25帧、第50帧分别添加关键帧；分别改变第25帧、第50帧是圆的位置；在第1帧到第25帧和第25帧到第50帧之间添加【补间动画】。

步骤6选中【图层3】，单击右键在弹出的菜单中选择【遮罩】，如图所示。

图设置遮罩层

步骤7按【CTRL】和【ENTER】测试影片，效果如图所示。

图遮罩效果

（4）引导层动画

在影片中将一个或多个图形到一个引导路径，使这些图形沿着既定的路径运动的形式被称为引导层动画。

例如设置引导层动画，一辆汽车沿着事先预定的路线行驶。

步骤1新建一个Flash文档，命名为“引导层.fla”，设置文档【背景】为“绿色”。

步骤2添加一个【图层2】，选择【文件】菜单|【导入】|【导入到库】命令，选择一幅汽车图片。

步骤3从【库】中将该图片拖入舞台，选则汽车图像，按下【F8】转换成图形，如图所示。

图添加汽车元件

步骤4单击时间轴上的【图层1】右击在弹出的下拉菜单中选择【添加引导层】，鼠标单击【引导层】的第1帧；然后单击工具箱中的铅笔按钮，在舞台中划出一条曲线，如图所示。

图添加引导层

步骤5选中【图层1】和【引导层】的第40帧，添加关键帧。

步骤6调整【图层1】的第1帧汽车的位置和第40帧汽车的位置，并添加【补间动画】，可以看到汽车沿着曲线运动，但是当汽车上坡和下坡时车头方向不对，需要在适当的位置添加关键帧，对汽车进行微调。

步骤7设置完成的效果如图所示。

图最终效果

4.3模块完成情况评估

Flash宣传动画设计应以商业化为目标，需要设计者与企业进行不断的沟通，一方面要满足企业行业需求，另一方面要满足浏览者得审美需求。

设计完成后，从专业技能和职业素养方面进行考核，考核容如表所示。

情境

评价方式

评价标准

分值

企业动画的制作

学生互评

10%

能够小组成员互相协作、敬业、认真完成分工任务

教师

评价

过程考核

30%

遵守学校的各项规章制度

拥有分析问题、解决问题的能力

拥有独立思考意识、勇于克服困难的素质

宣传动画

40%

作品：

●色彩搭配要和整个界面和谐统一

●宣传动画设计要有创意

设计报告：

规合理

答辩

20%

●语言表达：

口齿清楚流利

●仪表气质：

举止大方

●PPT设计：

容充实、设计美观