FLASH入门动画教案设计

FLASH入门动画C-)

教学目标：①知道FLASH软件界面及简单操作；

②会使用元件、时间轴等；

③会完成flash的第一个动画---运动的小球。

工作任务:

任务一：运动的小球制作(一)

实践操作：展示效果图：

(这就是蓑们要做的第二个Flash作品。可别看它简单，以后我们要制作千

变万化的Flash电影，很多都会用到它所包含的技术呢。好吧，不多说了，

我们开始吧。)

运行Flash4,这时系统E经打开

了一个新文件。选菜单中的

lodify->Movie...(或按

:tr1)修改当前舞台的属性。我

>舞台尺寸(Dimensions),

i示网格(Showgrid),网格

目(Grid),网格色和背景色

Ruler)等。我们将参数设置为左

1所示，在以蓝色背景，长300

3宽50点的舞台上制作动画。

一般来说，在互联网上播出的动

画，每秒8—12帧的播放速度比较合适一些。

国a工作环境设置好以后，我们首先需要创建一个图符(Symbol),以便调

।-----1用。按Ctrl-F8键进入建立图符的选项窗口，给图符起名叫ball,

|10串确定是图形类(Graphics)后按确定按钮。现在我们就进入了创建图符

卬三］的编辑状态。在绘图工具栏中选椭圆工具。并将其下的参数设置为左

nisi图所示。我们已经在上一章中详细介绍过有关参数的设置问题，这里

就不再多说了。图中的参数显示我们将要绘制一个没有轮廓线，且填

充色为桔黄渐近色的球形。桔黄渐近色不是系统自带的颜色，不过我们可以

按照上一章中第七节所述方法新建这一颜色。在工作区里用鼠标绘制一个小

球。如果对所画的小球不满意，可以点选小球，按Delete键删掉重画，也可

以在小球上按鼠标右键，在弹出的菜单中选择相应修改工具进行修改。

小球图符做好后，点击时间轴(Timeline)左上角的憧红3I或右上角的£1

回到主场景。按Ctr-L打开图库，发现里面已经有一个做好了的名为ball

的图符。在预览窗口中把该图符拖动到工作区中如下左图所示的位置。你也

可以通过菜单中View->Rulers(或按Ctrl+Alt+Shift-R)打开系统标尺精确

定位。我们同时还注意到时间轴的第1帧上的小圆圈已经由空心变成了实心，

表明该帧不再为空。

生时间轴第25帧点一下鼠标左键，该帧

处蓝表示被选。按Ctrl-F6键插入一个关

建帧，点选小球，把它拖到舞台的另一端,

1口上右图所示。双击时间轴上的第1帧，

单出该帧的帧属性对话框，如下图所示。

点击渐变(Tweening)标签，在其下的

weening下拉菜单中选运动(Motion),按

主意：对于实例来说，只能进行运动渐变

为画(MotionTweening),不能作形体渐

出动画(ShapeTweening)。而对于形体

:Shape)来说，只能作形体渐变。

这时时间轴窗口的状态如下图所示，第1帧和第25帧之间出现了一个实线箭

头，且背景变成淡紫色，表示这两帧之间有一段运动渐变动画。如果两帧之

间出现了虚线，表示过渡不成功，需要重新查看每一个关键帧及其属性。下

面我们来看一看效果：选菜单项Window-〉Controller,打开控制面板，按

播放钮播放动画，或者按下Ctrl-Enter另开窗口，以全屏预览动画，可以看

到小球从舞台的左端匀速移动到右端，和本页中的效果一样，只不过本站网

页的背景色与Flash电影工作环境的背景色相同，所以看不出来罢了。

Layer1/•••I

问题探究：

做好了动画不要忘记存盘，按Ctrl+S,在弹出的对话框中输入存档文件名，

确定，这时系统会把源文件用.fla格式存档。如果这时在Flash中再次按下

Ctrl-Enter键，则系统会自动生成.swf的电影文件，可以用Flash电影播放

器直接观看。

好了，这一节我们已经学会做一个最简单也最重要的动画了，好的开端是成

功的一半，我们慢慢会对Flash的强大功能体会更多的。下一节我们将对小

球动画作继续深入的探讨。

知识拓展:

我们将在运动的小球的基础上进一步加深对运动变形动画的认识。(本节中

的几个动画基本上和上一节是相同的，只不过我们对实例的属性，运动路径

等适当做些变化，以便获取不同的效果。

看出上面的动画和上一节有什么不同吗？是的，在小球运动的过程中渐渐消

失在了背景中。其实这个效果实现起来是非常容易的。运动的制作和上一节

一样。点击第25帧使处在舞台最右端的小球被选中，用鼠标左键双击小球，

弹出实例属性对话框，选择颜色效果(ColorEffect)标签，如下图所示。在

颜色(color)下拉菜单选项中选中透明度(Alpha),在透明度输入框中输入百

分值0,或将其右边的滑杆指针拖到最左端，使小球完全透明。点击0K确定。

现在看一下效果，按Ctrl-Enter看到如上面所示结果。

InstanceProperties

作业练习：

上机作业一：按照教师所展示的效果图模仿完成该作品。

上机作业二：在作业一基础上进行修改、更新。（要求：用不同方向，不同球体等）

上机作业三：（选做提高题）根据所学自由创作一作品。

教学反思：

FLASH入门动画《二)

教学目标：①进一步巩固使用元件、时间轴等；

②会使用运动渐变动画、图层、引导线等操作

③会完成flash的第二个任务——运动的小球(二)。

工作任务:

任务二：运动的小球制作(二)

实践操作：展示效果图：

上一耳的小球在运动的过程中大小发生了变化。要实现这一点，我们还

是在上一节做好的动画的基础上进行修改。在第13帧按F6插入一个关键帧,

如下图所示。双击此关键帧发现渐变(Tweening)标签下的渐变选项已经自动

设定为运动(Motion),点取消(Cancel)。用鼠标右键点击此帧下的小球，在

弹出的菜单中选择放缩(Scale),将小球缩小到一定程度就可以了。用

Ctrl-Enter查看结果同上。

■巴口151015202£

Layer1

因为运动导向层是一个单独的层，我们将在这个层上绘制小球将要走过

的路径，所以这一节起我们开始接触多个图层的操作。建立导向层有多种方

法，一种是点击时间轴窗口左下角耳在当前层上新建一个层。在该层上点

鼠标右键，在弹出的菜单中选择导向(Guide),使其前面出现对号，这时从该

层左边的符号看出它已经成为导向层。这时，按住Alt键，用鼠标左键点击

小球所在图层，使小球层与其上的导向层发生关联，我们看到小球层向右缩

进，表示二者已产生关联。还有一种建立导向层的方法是用鼠标右键点击小

球所在层的名称，在弹出的菜单中选择增加运动导向(AddMotionGuide),

在小球图层上出现新的导向层，小球图层缩进显示二者关联。这时的时间轴

显示应如下图所示。

下面我们就在导向层中绘制一条路径。为了避免对小球所在层进行误操作，

点击小球所在层上臼折对应的黑点，使该层被锁定，不能被编辑。点击导向

层第1帧，在绘图工具栏选择铅笔工具，将其下方参数修改器中的铅笔模式

按钮变为理I,颜色选黄色，也可以选其它颜色，因为导向层在动画播放中不

被显示。然后在工作区画一条如下图所示的线。

■上而这条就是小球将要沿着运动的路径。现在解除小球所

加以的锁定，恢复该M的灯编辑状态。在绘图1文栏中选

［箭头□I，带其下方参数修改器的捕捉(Snup)按钮选定为

［回状态。点击小球所在层的第1帧，点住小球中心附近符

■其拖动到路倒”二端，小球中心出现小刈卷I,'彳小球接近

路径端点时，中心点自动捕捉到该端点，如下图所示，这

样我们就把小球放在了路径的起始位置。同样，我们再点击小球所在层的第

25帧，将小球中心放置在路径的另一端。现在，我们就完成了所有的工作。

用Ctrl-Enter看一下效果，是不是很不错？

问题探究：

我们如何将本节所学的各种效果综合起来使用，例如让物体沿指定路径运

动的同时发生缩放，旋转及透明度上的变化等。下面，我们还将通过小球的

运动进一步了解如何设置一些重要参数，以获得一些特殊效果

知识拓展：

前面我们通过小球的运动介绍了Flash中最基本的动画一一运动渐变动画，

这一节我们仍将继续深入学习这种方式的动画。首先我们一起来看一看上面

的例子是怎么做出来的。

这是一个跳动的球。我们先试着用前两节中讲过的方法做一下。首先选好舞

台的大小，颜色等，在舞台上用桔黄梯度色画一个大小适中的圆球形。（注

意现在的这个圆球形是形体而不是实例，你可以对它进行重新填色，甚至可

以用箭头工具选择其中一部分区域进行操作，而实例则作为一个整体出现，

你只能对它做整体操作。这一点我们在上一章已经讲过。）我们需要把它做

成一个图符，以方便我们调用。选中这个圆球形，按F8键把它转换成图符，

在弹出的窗口中给这个图符起名为ball,并确认是图形类图符，按回车确定。

这时圆球形外面出现一个方框，如右图所示&表示小球已经成为一个实

例。现在小球位于时间轴的第1帧上，我们把小球拖动到舞台的最上端，然

后在时间轴第18帧上按F6键插入一个关键帧，把实例小球从最上端拖动到

最下端，然后再在第36帧处按F6插入一关键帧，为了使小球在这一帧能回

到原位，我们可以把第1帧的内容复制到这一帧。在第1帧上点鼠标右键，

在弹出的菜单中选CopyFrames,或按快捷键Ctrl+AlLC,复制第1帧，然

后同样在第36帧处点鼠标右键，选PasteFrames,或按快捷键Ctrl+Alt-P,

将第1帧的内容粘帖到这一帧上。可以看到在这一帧，小球又回到了起始位

置。时间轴的状态应如下图所示。

!?Layer1/•♦•I

Label]Sound]ActionsTweening

F7Tweenscaling

Rotate：|Automatic

r~Orienttopathdirection

现在我们来看一下效果，如左图

Synchronizesymbols

麻示。怎么好象和上面的结果不

「Snaptoguide

一样，似乎看不出那种重力作用

的感觉，看来我们还有点工作没有做完。双击时间轴第1帧，弹出帧属性对

话框，选择渐变（Tweening）标签，在其下的选项中将Easing所对应的指针拖

动到最左端，或在右边的输入框中输入TOO,如右图所示，确定。然后，在

第18帧双击，把Easing所对应的指针拖动到最右端，或在右边的输入框中

输入100。然后，我们再来看一下效果，按Ctrl-Enter全屏观看，是不是和

我们需要的效果一样了？

现在大家应该知道Easing选项的作用了吧。它的作用是在运动的过程中产生

速度上的变化，默认值为0,即为匀速运动。当Easing所对应的指针向左边

移动时，也就是Easing值为负时，运动的物体做加速运动，相反，当Easing

所对应的指针向右边移动时，也就是Easing值为正时，运动的物体做减速运

动。当Easing值的绝对值越大时，物体运动的加速度越大，物体运动时速度

变化也就越快。在小球下落的过程中，速度越来越快，所以我们把Easing的

值改为负值，注意在Easing值为TOO时，比较接近重力加速度。当小球弹

起时,速度越来越慢，因此Easing值为正。

作业练习：

上机作业一：按照教师所展示的效果图模仿完成该作品。

上机作业二：在作业一基础上进行修改、更新。（要求：用不同引导线，不同运动

方向速度、不同球体等）

上机作业三：（选做提高题）根据所学自由创作一作品。

教学反思:

FLASH入门动画《三）

教学目标：①进一步巩固使用元件、时间轴、图层、引导线等；

②会使用复杂运动渐变动画等操作

③会完成flash的第三个任务——物理实验小球撞击。

工作任务：

任务三：物理实验小球撞击

实践操作：展示效果图：

下面我们做一个简单的物理实验的模拟。如上面所示，桔黄色的小球从空中

落下，落地瞬间与地上静止的绿色小球发生碰撞，两球均沿不同轨迹飞出界

面。以我们刚才做好的动画为基础，在时间轴窗口新增加一个层,命名为Green

Ball,注意该层上有铅笔标志，表示正在编辑该层。我们用椭圆工具选绿色

梯度色绘制一个大小和桔黄色小球差不多的小球，并把它移动到桔黄色小球

下方偏右一点，以便桔黄色小球落地时正好与它接触。在第18帧上按F6新

建关键帧，因为这时是与落地的桔黄色小球碰撞产生运动的起始位置。在第

36帧再按F6增加一个关键帧，并把绿色小球横向右移出画面。为了让绿色

小球动起来，我们在第18帧双击，在弹出的帧属性对话框中渐变标签下，选

Tweening为Motion。确定后第18帧到第36帧之间会有一个实箭头。这样,

绿色小球的动画部分就做好了。

下面我们设法让桔黄色的小球在与绿色小

球碰撞后沿指定的路线飞出画面。用鼠标右

键在时间轴窗口，桔黄色小球所在层点一

下，在弹出的菜单中选Addmotionguide,

新增一个导向层。这时导向层成为当前正在

编辑的层。我们在导向层上画一条路径。画

好的结果应如左图所示。绘制这条路径的方

法有很多，一种方法是，可以用铅笔工具或

直线工具画路径的直线部分，然后用椭圆工

具画不填充的椭圆，用箭头工具取其中一段

作为路径的曲线部分。路径画好后，用鼠标

左键双击桔黄色小球所在层的第1帧，在弹出的帧属性对话框中渐变

(Tweening)标签下在捕捉到路径(Snaptoguide)前的复选框中点一下使其被

选中，确定。同样对第18帧进行相同的操作。回到第1帧，选择箭头工具(注

意箭头工具的参数修改器中捕捉按钮囱应处于按下状态)，用鼠标左键点击

桔黄色小球中心附近并把它拖动到路径直线的最上端，见左图。在接近端点

时，小球中心会自动吸附在端点上。在第18帧，把桔黄色小球拖动到路径直

线的下端，在第36帧，拖动到曲线的末端。做好后，时间轴窗口的设置应如

下图所示，绿色小球所在层位于桔黄色小球所在层上面还是下面无关紧要。

■我们用Ctrl-Enter来查看一下效果，如果发现桔黄色小球并没有沿指定路线

移动，表明关键帧中小球的位置不对，未能真正处于路径的端点，试着调整

有问题部分的关键帧中桔黄色小球的位置。一次不行，多调整几个就行了。

现在我们就可以欣赏这一段稍微复杂点的动画了。是不是很有点成就感？下

一节中我们将从另一个方面讲解运动渐变动画的用法。

作业练习：

上机作业一：按照教师所展示的效果图模仿完成该作品。

上机作业二：在作业一基础上进行修改、更新。（要求：用不同引导线，不同运动

方向速度、不同球体等）

上机作业三：（选做提高题）根据所学自由创作一作品。

教学反思：

FLASH入门动画《四）

教学目标：①进一步巩固使用元件、时间轴、图层、引导线等；

②会使用复杂运动渐变动画中旋转运动等操作

③会完成flash的第四个任务——旋转的风车

工作任务：

任务四：旋转的风车

实践操作：展示效果图：

这一节我们来制作一个旋转的风车，从制作中我们不仅要学习运动渐变动画

的另一种形式：旋转动画，而且还要练习用箭头工具对对象进行修改的方法。

首先要打开一个新文件。现在我们先来画风车的一个叶片。选择绘图工具栏

中的矩形工具，把边线屏蔽掉，填充色选黄色，在工作区中间画出一个矩形

如下图一所示。选箭头工具，将矩形左上角的顶点向右拖动直到与右上角的

顶点重合，如图二所示。下面我们将对三角形作进一步的加工。用鼠标分别

点住三角形的两条直角边拖出一个弧形，调整使弧形连续，如图三所示。然

后再对三角形的斜边加工，使它也呈现一定的弧形，如图四所示。选中叶片,

按F8将其转换为图符，在弹出的图符属性框中将叶片命名为yepian,确定

是图形类图符后回车。这时叶片就变成了实例。按Ctrl-L打开图库窗口，为

了使叶片旋转时不致发生偏离的情况，我们需要把叶片调整到合适的位置，

双击图库窗口中预览窗口的叶片，进入图符编辑状态，如图五所示，把叶片

移动到图示位置，使其尖端指向十字定位中心。现在我们就做好了一个叶片

了。

图五

然后，我们要利用这个叶片做出风车其余

的叶片。选Flash菜单项Window->

Inspectors->Transform,打开变形监

控面板，如左图所示。监控面板可以帮助

我们精确地定义对象以及精确地旋转放

缩对象。选中已经做好的叶片，按Ctr”C

复制，再按Ctrl+Shift-V将叶片复制在

原来的位置上。在变形监控面板上的旋转

(Rotate)项下输入45,表示将复制的叶

片顺时针旋转45度。点应用(Apply),发

现新的叶片出现在原有叶片顺时针45度

位置，如下左图所示。用同样的方法再复

制出6个叶片，组成八个叶片的风车。注

意，复制其他叶片时，每按一个

Ctrl+Shift-V后将变形监控面板中的旋

转角度值多加45度。现在我们用鼠标拉出一个大框把这八个叶片全部套住，

再按F8键把这八个叶片转换成一个图符，起名叫fengche。可以看到，现在

八个叶片成了一个整体，其中心为十字定位符，见下图右。

FraaeProperties风车已经做好了，我们现在该

Label|Sound|ActionsTweening让它动起来了。在第30帧按

F6插入-一个关键帧。双击第1

Tweening：［Motion

3帧弹出帧属性对话框，在渐变

厂Tweenscaling标签下Tweening选择项目中

Rotate：IClockwise三|i-ttiime;选Motion作运动渐变动画。在

旋转(Rotate)项目中选择顺时

针(Clockwise),并将随后的旋转圈数设为1。这样，风车将在第1帧到第30

帧之间顺时针旋转1圈。现在按Ctrl-Enter来看一看效果吧，怎么样，还不

错吧。

知识拓展:

现在我们对已经做好的风车动画做一个加工，以便生成如上图所示的效果。

在第60帧处按F6插入一关键帧，在第30帧双击鼠标左键，在弹出的帧属性

对话框中渐变标签下，将Tweening设置为Motion,并将Rotate设为

Clockwise,其后的次数栏中填1次。该帧属性同第1帧，如上图帧属性对话

框面板所示。现在风车将在第1到60帧的时间里顺时针旋转2圈。下面我们

对第30帧做一些修改。选择时■间轴上第30帧，用鼠标右键点击风车实例，

在弹出的菜单中选择Scale,将风车缩小一些。随后，双击该风车实例，进

入实例属性面板，在ColorEffect标签下Color选项中选Tint,设置如下

图所示。

这样我们就把大小的颜色变化设置完成了，最后的结果就如上图所示。大家

也可以想些别的花样来做一做，这样可以尽快地熟练掌握运动渐变动画的实

现过程。

作业练习：

上机作业一：按照教师所展示的效果图模仿完成该作品。

上机作业二：在作业一基础上进行修改、更新。（要求：用不同引导线，不同旋转

运动方向速度，不同形状叶片等）

上机作业三：（选做提高题）根据所学自由创作一作品，如地球的旋转等。

教学反思:

FLASH入门动画《五）

教学目标：①进一步巩固使用元件、时间轴、图层、引导线等；

②会懂得运动渐变动画和形体渐变动画的区别，会使用形体渐变动画

的操作技巧

③会完成flash的第五个任务——延伸的直线。

工作任务：

第五节延伸的直线

实践操作：展示效果图：

这一节我们将来学习渐变动画的另一种形式，即形体渐变（Shapetweening）

动画。我们先来学习做上面这个直线伸长的简单动画，之后我们稍加变化，

做一个更有趣的直线伸长动画。

用Flash新建一个文件，按Ctrl-M对电影的属性作一个调整，将其设置为狭

长的矩形（如宽Width设为400,高Height设为50）,将背景色设为蓝色。

用铅笔工具或直线工具画一条横向的短线，长度如右图所示：口。注意要画

一条笔直的横线，可以按住Shift键，再用铅笔工具或直线工具横向拖动鼠

标即可，因为按住Shift键以后，线条只能沿水平，竖直及45度角方向变化。

然后我们在第40帧上按F6插入一关键帧，或按F7插入一空帧(当在这一帧

上绘制图形后，该帧会成为关键帧)。确定这一帧为当前帧，我们将在这一帧

上绘制一条更长的直线，有两种方法可以实现这一点。

一种是按下F7插入空帧后，点击时间轴窗口下方洋葱皮按钮的左边第一个，

即母这时我们发现第1帧的短横线以灰色显示出来。我们就以它为基准，

用铅笔工具绘制一条长直线，直线左端与短横线左端对齐。

另一种方法要简单一些，在第40帧按下F6插入一关键帧后，第40帧会具有

和第1帧相同的内容，即一条短横线，我们只需要对它加一下工就可以了。

选中绘图工具栏中的箭头工具，移动鼠标到短横线的右端，鼠标形状如右图：

1点住鼠标左键并向右拖动I,直到直线足够长为止。

选用这两种方法之一做好第40帧的直线。下面我们就要设置帧属性让直线动

起来。用鼠标左键双击时间轴上的第1帧，在弹出的帧属性对话框中选渐变

(Tweening)标签。对其下的Tweening选项进行设置，选择Shape如下图所示,

回车确定。这时在第1帧和第40帧之间出现一个实箭头，背景变为淡绿色，

表明是形体渐变动画。

按Ctrl-Enter看一下效果，应该和上面所示一样的。

知识拓展:

现在我们来变个花样，做一个环绕矩形四条边伸长的直线。大家能猜一猜这

个动画是怎么做的吗？其实有了本节开头直线伸长动画的基础，这个动画一

点也不难做。

我们对刚刚做好的直线伸长的动画加一加工。首先按Ctrl-M对电影属性作一

个调整，将其高度(Height)设置为150。为了缩短动画时间，我们按下Ctrl

键把鼠标移到第40帧上,发现鼠标这时变成黑色，如右图所示：

_3_0____3_5____40

*卜o把第40帧向左拖动到第20帧位置松开鼠标，这时动画时间

缩短了一半，发现直线延伸变快了。

点时间轴窗口下的日斯建一个层，在新层的第21帧按F6插入一个关键帧。

按下洋葱皮按钮同这时原先层上的直线用灰色显示出来:

我们从这条线的最

右端开始向下画一条短竖线：在新层的第30帧按F6插入一个关

键帧，该帧具有和第21帧相同的内容。用上面讲过的方法把这一帧的竖线拉

长到合适的长度，同上面动画中的竖线长度差不多。然后，双击第21帧弹出

帧属性对话框，按刚才讲过的方法把Tweening设置为形体渐变动画。按

Ctrl-Enter看一下效果，应如下图所示：

我们发现这并不是我们想得到的结果，我们希望直线不断延伸，而不是分段

延伸。得到这个显示结果是因为横向直线延伸的动画在第20帧以后就终止

了，在第21帧到第30帧之间，也就是竖线延伸时横向直线层上没有内容。

为了弥补这一点，我们在横向直线延伸动画所在层的第30帧上按下F5键，

使该层在第21帧到第30帧之间仍保留第20帧，也就是最近的一个关键帧上

的内容，这样在第21帧到第30帧之间，横向的直线将一直被显示出来。再

按CtrbEnter看一下效果，发现直线先是横向延伸，到了右端顶点后转为竖

向延伸，这才是我们需要的结果。

现在再做其它两条边的直线延伸就变得很简单了，再新建两个层，一条边一

个，方法和上面讲过的一样，我在这里就不再多说了。做好后的时间轴应如

下图所示。

好了，欣赏一下我们做的动画吧。体会一下运动渐变动画和形体渐变动画的

区别。下一节课中我们还将继续介绍形体渐变动画其它的应用。

作业练习：

上机作业一：按照教师所展示的效果图模仿完成该作品。

上机作业二：在作业一基础上进行完成矩形

上机作业三：（选做提高题）根据所学自由创作一作品,不同形状直线的延伸，如三

角形，圆形等。

教学反思：

FLASH入门动画《六）

教学目标：①进一步通过字符的变形动画来认识形体渐变动画的作用；

②会使用不同字符形体渐变动画的操作技巧

③会完成flash的第六个任务——变幻的字符。

工作任务：

任务六：变幻的字符

实践操作：展示效果图：

这一节我们将通过字符的变形动画来认识形体渐变动画的作用。对于这类变形

动画，只能用形体渐变来实现，用运动渐变是做不到的。

首先，我们新建一个电影文件，按Ctrl-M修改电影属性，使其宽度和高度均

为100,背景为蓝色。选择绘图工具栏中的文字工具同，把鼠标移到电影文件

中点一下，会出现一个文字输入框11,选择好字体，字号，设定颜色为黄色,

输入字母F,选择箭头工具，这时字母F的周围出现一个阴影方相,表示

该字母已经成为一个集合体。我们在这个字母上点鼠标右键，在弹出的菜单上

选放缩(Scale),这是F周围出现放缩手柄我们把这个字母放大到和上

面动画中字母大小差不多。

在时间轴的第12帧点鼠标左键，按F6插入一关键帧，这一帧的内容和第1帧

--样。双击这一帧中的字母F,进行字符编辑模式，我们把字母F替换成字母

L。用同样的方法，分别在第24帧，第36帧，第48帧，第60帧插入关键帧,

并把相应的字母变成A,S,H,Fo

因为要制作的是形体渐变动画，我们首先要把已经集合了的字符打散成形体。

选择第1帧，按Ctrl-B把字母F打散：Bo然后依次选择第12,24,36,48

和60帧按Ctrl-B把字母L,A,S,H,F分别打散。现在就可以做动画了,在

第1帧上双击鼠标左键，在弹出的帧属性对话框中选渐变标签，其下的

Tweening选项选Shape,回车确定。然后分别对第12帧，24帧，36帧及48

帧如此操作。最后的时间轴窗口应如下图所示：

现在我们按Ctrl-Enter预览一下效果，应如上面的动画所示。这样的字符变

形很简单，但是我们总觉得上面的这个动画中，字符变形有点没有规则，变幻

得有些莫名其妙。那是因为在形体渐变动画中，如果用户没有指定变形规则的

话，Flash将自动为待变形的形体设置一些关键点。形体渐变动画实际上就是

关键点位置的变化，形体其余部分的变化可以通过插值的方法计算出来。在

Flash中提供了一种人为干预变形效果的方法，就是设置提示点(Hints),通

过指定相应提示点间的变化方法可以指定整个形变的过程。下面我们用具体的

实例来说明。

以字母A变S的过程为例，因为没有设置提示点时，这个变形过程显得比较凌

乱。先按Ctrl+Alt-H打开提示点的显示。选择第24帧,按Ctrl-H加入一提

示点，以图一中红色的小圆圈表示，a用来标识提示点。看一看第36帧，发

现字母S上也有一个对应的提示点，见图二。回到第24帧，把提示点a拖动

到字母A的右下角，如图三所示，再到第36帧，把提示点a放在如图叫所示

位置。这时我们发现提示点变绿了，回到第24帧，这时提示点由红色变成了

黄色，见图五，表明提示点的设置正确。

图一图二

如果提示点仍是红色，说明提示点位置设置不正确，多调整儿次就会好了。用

同样的方法，我们可以再设置一到多个提示点，如上图六和七，我们又设置了

一个提示点b,这样就可以获得比较好的变形效果。左图所示为加入与未加入

提示点的字符变形对比。我们可以看出，加入了提示点后字母的变形似乎更有

规则一些。

知识拓展：（效果图展示）

上面的这个动画实际上就是这两节中我们所学的形体渐变动画的一个综合运

用，在变形的过程中还有位置和颜色的变化。也许大家一看就知道是怎么做的

了，我就不再多说了，只简单提两句。在每一个关键帧上把相应的字母向右拖

动一段距离，并使用油漆桶工具用不同的颜色填充就行了。大家有兴趣，可以

自己动手做一做看。

当然形体渐变动画不仅仅是作用于文字，所有的形体都适用。所以我们也可以

把文字变形的动画扩展到儿何图形的变化，例如可以把圆形变成三角形，再变

成正方形等，大家可以发挥自己的想象力，多动手练一练，一定会慢慢熟练起

来，并创作出很好的作品的。

作业练习：

上机作业一：按照教师所展示的效果图模仿完成该作品。

上机作业二：在作业-基础上进行修改，变成汉字等

上机作业三：（选做提高题）根据所学自由创作一作品，我们也可以把文字变形的

动画扩展到几何图形的变化，例如可以把圆形变成三角形，再变成正方形等，大

家可以发挥自己的想象力。

教学反思：

FLASH入门动画《七）

教学目标：①进一步通过文字的输入和输出实例，掌握静态、动态及输入文本的

使用；

②会制作简单按钮及简单脚本的编写；

③会完成flash的第七个任务——文字的输入与输出。

工作任务：

任务七：文字的输入与输出

实践操作：展示效果图:

这节我们要来介绍文字的输入和输出方法，这是Flash中的一-项重要功能，也

是我们认识Flash交互性的基础。大家试着在上面的Flash电影下面的文本框中

输入一段文字，然后回车或点“确定”按钮，看一看有什么效果。再点一点“清

除”键呢？要实现文本的输入，就要用到绘图工具栏中的文字工具，我们先把

输入框做好。点击工具栏中国，选中文字工具，在下面的参数修改器中设置好

用于输入的文字字体，字号，颜色以及对齐方式等项，不要忘记一定要点选最下

面的囱，这个按钮用于设置文本域。在场景中下方用鼠标拉出一个文字框用作

输入，宽度大约比所选字宽稍大一点。然后我们要对所画的输入文本框的属性做

一点调整。在文本框上点鼠标右键，在弹出的菜单中选最下面的“属性”

(Properties...),进入文本域属性设置面板。如下图所示，在变量名(Variable)

后填“input”,并选中第一项Drawborderandbackground,这样就会显示文

本域的背景和边界。设置变量名是为了方便我们今后的调用。现在按回车确定。

输出文本框的做法与输入框相同，我们还和刚才一样，在文字工具下用其参数修

改器为要输出的文字设置字体，字号，颜色等，注意要保证团按下，在刚才的

输入框上面拉出一个宽一些的文本域用作输出。用鼠标右键点这个区域选“属性”

进入文本域属性设置对话框。将Variable设置为“Output"，再将Options中的

选项设置为下图所示。(关于每个项目的含义和设置我们将在本节的后面部分详

细介绍。)这样我们就将输出文本域设置成了有边界和背景，允许多行输出并自

动换行以及禁止编辑等属性。

下面我们还需要做两个按钮，分别用来输入和清除文字。因为是演示，所

以我们把按钮做得简单些，你也可以直接调用Flash中已经做好了的按钮。

按Ctr『F8新建-一个图符，给图符起名为Button,并将图符的类型设置为

Buttono进入图符编辑模式后，用矩形工具拉出一个矩形，我们还可以加

入圆角并修改颜色使它更象一个按钮。注意到我们所绘制的图形都是在按

钮的UP帧下，为了简单起见，我们只做这一帧。

返回场景中，按Ctrl-L打开图库窗口，分两次从预览窗口把按钮拖动到

输入文本框的下面并排放置，用文字工具在两个按钮上分别写上“确定”

和'‘清除"，如上面的电影所示。

下面的步骤要稍微难理解一些，因为我们要用到actions为按钮加入一些

动作，这样当点击按钮后才能执行相应的操作。actions属于Flash的高

级技术，今后我们会重点介绍的。在这里，我们只需要有个大概的印象和

认识就行了。

用鼠标左键双击“确定”按钮，弹出实例属性对话框，注意到按钮类实例

比图形类实例多了--项设置，就是Actions。点选Actions标签，点11为

按钮增加动作，在下拉菜单中选OnMouseEvent,即设置鼠标对事件的响

应。然后在出现的选项框中选Release和KeyPress,并在KeyPress后

的输入框中按•下回车键。这样我们就把按钮将要响应的鼠标事件设置好

了，即当按钮被释放或按下回车键后发生动作。

Definition|ColorEffectActions

ActionsOn(Release,Key：<Enter>)

ease.Key：<CEnter>)Event：FPress

SetVariable："output"=inpu<“Release

EndOnReleaseOutside

ro

-V

roetr

-u

roV

etr

r-

ou

然后，我们将进一步指定在这些事件产生后如何进行操作。再点一下国,

在菜单中选SetVariable,我们在右边的变量名（Variable）一栏中填入

output,在下面的值(Value)一栏填入inputo注意必须把值右边的等价方

式按钮设为三J，表示当按钮按下时，output中应该具有和input域中相

同的内容，即二者的值相同。如果选庵！1,表示字串内容相同，这时无论

你在文本输入框中输入任何文字，在按下确定按钮后，输出框中只会出现

input这几个字符。同时我们注意到在这两种等价方式下，表达式的写法

也不相同。

同样，双击清除按钮，我们也为它设置动作。它的Actions设置如下所示。

表示鼠标在该按钮上释放时，将output和input里的内容全部清空。

Definition|ColorEffectActions

Actions

On(Release)

SetVariable：*output

SetVariable：”Input”

EndOn

这样我们就把这个文字输入和输出的演示做好了。

知识拓展：(效果图展示)

怎么样，做的这个文字输入输出演示比上面那个漂亮多了吧。大家想一

下，如何利用我们前面学过的知识生成这样的效果。这个效果很容易实

现的，与上面那个动画最大也最主要的差别是输入和输出文本域设置了

边框和背景色，这使得画面靓丽了许多。

其实，只是利用了层的技术造成了一个假象罢了。我们还用上面做好的

动画为例，在两个文本域上分别点鼠标右键，在弹出的文本域属性设置

框中把Drawborderandbackground前的对勾去掉，如右图所示

Options：FDrawborderandbackground。这样在场景中效果应如下图所示,

文本域的边框和背景不再显示。

新建一个层，把它拖动到原来层的下面，并命名为Background。在该层

上用矩形工具选好边框和背景色绘制出两个大小和位置分别与输出输入

框均相同的矩形来，如下图所示。

这样，文本域就有了边框和背景色了。然后，我们再给按钮上上渐进色,

再加些文字点缀就得到上面的效果了。怎么样，不难吧。

附：文本域属性对话框中各项含义解释

Drawborderand

显示文本域的边框和背景

background

用户键入的任何字符均以*号表示，且文字不能复

Password

制，剪切，从而得到保密

Multiline允许文本以多行方式出现

Wordwrap使文本在到达右边界时自动换行

Restricttextlengthto限制用户文本输入的最大字符数

Disableediting防止用户改变文本域的内容，使文本域不能被编辑

Disableselection使文本域中的内容不能被选择

可以选择只保存字体的轮廓，或指定的文字，符号等，

Outlines

适当选用可大大减小Flash文件的大小

作业练习：

上机作业一：按照教师所展示的效果图模仿完成第一个作品。

提高作业：在作业一基础上进行修改，完成第个二个作品。

教学反思：

FLASH入门动画《八）

教学目标：①进一步通过按钮制作实例一，掌握按钮元件使用；

②会制作简单按钮；

③会完成flash的第八个任务——按钮制作（一）。

工作任务：

任务八：按钮制作(一)

实践操作：展示效果图:

这一节，我们来学习按钮的制作方法。在上一节中，我们曾经做过一个简

单的按钮，但是很不全面，现在我们就来学习一个完整按钮的制作过程。

新建一个文件，按Ctrl-F8创建图符，命名新图符为Button,并在下面的

行为(Behavior)选项中选按钮(Button),确定。这样我们就进入了按钮的

编辑窗口。注意这时时间轴上只有四帧,如右图所示：

UyOver,Down|Hit|

,二tlo这四帧的含义我们在前面的第一章中已经详细介

绍过。

首先我们来画Up帧上的内容，也就是正常状态下按钮的外观。选绘图工

具栏中的矩形工具，在编辑窗口中间拉出一个不带边线的矩形来，为了美

观起见，也可以选参数修改器中的圆设置圆角。用颜料桶工具回选中深

蓝色，在矩形上点一下，矩形这时以深蓝色填充。选文字工具，设置适当

的字体，颜色，字号等，在矩形中间写上“按我”。选箭头工具，在刚刚

输入的文字上点鼠标右键，在弹出的菜单中选放缩(Scale)。我们对文字

进行放缩处理，使它排放在深蓝色矩形的合适位置。

Up帧下的内容已经做好了，我们现在再来做Over帧的内容，也就是鼠标

滑过按钮表面时按钮的外观。在Over帧上用鼠标左键点一下，并按F6把

这一帧设为关键帧，这时该帧具有和Up帧相同的内容。选择颜料桶工具,

选中灰绿色，用颜料桶在矩形上边线附近点一下，注意点中间的文字不会

有效果，这时矩形框填充灰绿色。选择箭头工具，双击矩形中间的文字，

进入文字编辑模式，改变文字工具参数修改器中的字号和颜色，并在文字

输入框中输入“我会变色”。这样，我们乂做好了按钮的第2帧。

Down这一帧的做法和前两帧相同，先用F6在这一帧插入一关键帧，然后

一方面用颜料桶工具选黄色填充矩形，另一方面用箭头工具双击矩形中间

的文字部分，在文本编辑状态下改为“再变一次”。

最后一帧是Hit帧。它的作用是定义按钮对鼠标做出反应的区域。一般情

况下这一帧可以省略掉，但对于某些特殊情况，你可能会需要为按钮指定

对鼠标做出响应的特殊区域，这时这一帧就很关键了。按下F6插入关键

帧，把文字部分选中删除掉就行了，这样就设定对鼠标响应的区域就是这

个矩形区域。

这四帧全部设置好以后。我们点时间轴窗口左上角的鱼与U回到主场

景中，按Ctrl-L打开图库窗口，从它的预览窗口中把刚才做好的按钮拖

到工作区中。按Ctrl-Enter观看一下效果，应该和我上面的按钮差不多。

知识拓展：（效果图展示）

下面我们玩大一点，做一个比较逼真一些的按钮。按钮的样子就如上面所

示，怎么样，还不算太差吧。其实做这个按钮也不难，幸运鸟之前也从来

没有做过按钮，这次破例做了一次竟然只用了半个小时就做好了，相信大

家不会比我差，我也会把制作的步骤说得尽量详细一些的。

事实上，要做一个逼真的按钮，最关键的不是制作方法，而是对光影效果

的掌握。如上图所示，现在按钮处在正常状态下，也就是对应着按钮里的

Up帧。大家一看就知道，这个按钮的外观实际上是由几个图片组合在一起

的。没错，我们现在把组成按钮外形的儿个图形类图符分离开来，大家就

更清楚了。下图所示就是在按钮正常状态下，组成按钮外观的三个图符，

从左到右按它们在按钮中的位置排列。当它们三个叠在一起时，由于各部

分光强和阴影效果的反差，就形成了上图所示的样子。

我们先来看一看位于最上面的这个桔黄色圆盘是怎么做的。其实这也是由

两个形体组成的，见下图。按下Ctrl-F8,新建一个图符，命名为top,

并确认是图形类图符后回车。在该图符的编辑模式中，我们先用椭圆工具

出除边线，选棕黄渐进色，拉出一个圆球来，注意在绘制圆球前按下Shift

键，这样保证拉出的是正圆而不是椭圆。绘制好以后，我们用颜料桶工具，

还选用刚才的棕黄渐进色在球的右上方点一下，这样就把高亮点移到了球

的右上方，如下面的右图所示。背景球做好以后，我们点时间轴下方的目

新建一个层。选中新层的第一帧，用椭圆工具去除边线，选桔黄色按住

Shift键拉出一个比刚才的球小一圈的圆来。我们可以在这个桔黄色的圆

上点鼠标右键，用菜单中的Scale命令调整它的大小。然后，我们用鼠标

或方向键把圆移到球的中间，让它们的圆心位于同一位置，因为圆所在的

层位于球所在层的上面，所以圆也位于球的上面。当然，为了更真实一些，

这个桔黄色的圆实际也是用渐进色填充的，只不过色彩上变化不明显罢