1、福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110791FLASH 入门动画（一）教学目标：知道 FLASH软件界面及简单操作；会使用元件、时间轴等；会完成 flash的第一个动画运动的小球。工作任务：任务一： 运动的小球制作（一）实践操作：展示效果图：（这就是我们要做的第一个 Flash作品。可别看它简单，以后我们要制作千变万化的 Flash电影，很多都会用到它所包含的技术呢。好吧，不多说了，我们开始吧。）运行 Flash4，这时系统已经打开了一个新文件。选菜单中的 Modify - Movie.(或按 Ctrl-M)修改当前舞台的属性。我们可以修改播放速度(Frame R
2、ate)，舞台尺寸(Dimensions)，是否显示网格(Show grid)，网格点间距(Grid)，网格色和背景色(Colors)以及选用何种度量单位(Ruler)等。我们将参数设置为左图所示，在以蓝色背景，长 300点，宽 50点的舞台上制作动画。一般来说，在互联网上播出的动画，每秒 812 帧的播放速度比较合适一些。工作环境设置好以后，我们首先需要创建一个图符(Symbol)，以便调用。按 Ctrl-F8键进入建立图符的选项窗口，给图符起名叫 ball，确定是图形类(Graphics)后按确定按钮。现在我们就进入了创建图符的编辑状态。在绘图工具栏中选椭圆工具。并将其下的参数设置为左图所
3、示。我们已经在上一章中详细介绍过有关参数的设置问题，这里就不再多说了。图中的参数显示我们将要绘制一个没有轮廓线，且填充色为桔黄渐近色的球形。桔黄渐近色不是系统自带的颜色，不过我们可以按照上一章中第七节所述方法新建这一颜色。在工作区里用鼠标绘制一个小球。如果对所画的小球不满意，可以点选小球，按 Delete键删掉重画，也可以在小球上按鼠标右键，在弹出的菜单中选择相应修改工具进行修改。小球图符做好后，点击时间轴(Timeline)左上角的 或右上角的 回到福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110792主场景。按 Ctrl-L打开图库，发现里面已经有一个做好了的名为 ba
4、ll的图符。在预览窗口中把该图符拖动到工作区中如下左图所示的位置。你也可以通过菜单中 View - Rulers(或按 Ctrl+Alt+Shift-R)打开系统标尺精确定位。我们同时还注意到时间轴的第 1帧上的小圆圈已经由空心变成了实心，表明该帧不再为空。在时间轴第 25帧点一下鼠标左键，该帧变蓝表示被选。按 Ctrl-F6键插入一个关键帧，点选小球，把它拖到舞台的另一端，如上右图所示。双击时间轴上的第 1帧，弹出该帧的帧属性对话框，如下图所示。点击渐变(Tweening)标签，在其下的 Tweening下拉菜单中选运动(Motion)，按确定按钮。 注意：对于实例来说，只能进行运动渐变动画
5、(Motion Tweening)，不能作形体渐变动画(Shape Tweening)。而对于形体(Shape)来说，只能作形体渐变。 这时时间轴窗口的状态如下图所示，第 1帧和第 25帧之间出现了一个实线箭头，且背景变成淡紫色，表示这两帧之间有一段运动渐变动画。如果两帧之间出现了虚线，表示过渡不成功，需要重新查看每一个关键帧及其属性。下面我们来看一看效果：选菜单项 Window - Controller，打开控制面板，按播放钮播放动画，或者按下 Ctrl-Enter另开窗口，以全屏预览动画，可以看到小球从舞台的左端匀速移动到右端，和本页中的效果一样，只不过本站网页的背景色与 Flash电影工
6、作环境的背景色相同，所以看不出来罢了。问题探究：做好了动画不要忘记存盘，按 Ctrl+S，在弹出的对话框中输入存档文件名，确定，这时系统会把源文件用.fla 格式存档。如果这时在 Flash中再次按下 Ctrl-Enter键，则系统会自动生成.swf 的电影文件，可以用 Flash电影播放器直接观看。 好了，这一节我们已经学会做一个最简单也最重要的动画了，好的开端是成功的一半，我们慢慢会对 Flash的强大功能体会更多的。下一节我们将对小球动画作继续深入的探讨。福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110793知识拓展:我们将在运动的小球的基础上进一步加深对运动变形动画
7、的认识。（本节中的几个动画基本上和上一节是相同的，只不过我们对实例的属性，运动路径等适当做些变化，以便获取不同的效果。看出上面的动画和上一节有什么不同吗？ 是的，在小球运动的过程中渐渐消失在了背景中。其实这个效果实现起来是非常容易的。运动的制作和上一节一样。点击第 25帧使处在舞台最右端的小球被选中，用鼠标左键双击小球，弹出实例属性对话框，选择颜色效果(Color Effect)标签，如下图所示。在颜色(color)下拉菜单选项中选中透明度(Alpha)，在透明度输入框中输入百分值 0，或将其右边的滑杆指针拖到最左端，使小球完全透明。点击 OK确定。现在看一下效果，按 Ctrl-Enter看到
8、如上面所示结果。作业练习：上机作业一：按照教师所展示的效果图模仿完成该作品。上机作业二：在作业一基础上进行修改、更新。 （要求：用不同方向，不同球体等）上机作业三：（选做提高题）根据所学自由创作一作品。教学反思：福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110794FLASH 入门动画（二）教学目标：进一步巩固使用元件、时间轴等；会使用运动渐变动画、图层、引导线等操作会完成 flash的第二个任务运动的小球（二） 。工作任务：任务二： 运动的小球制作（二）实践操作：展示效果图：上一节的小球在运动的过程中大小发生了变化。要实现这一点，我们还是在上一节做好的动画的基础上进行修改
9、。在第 13帧按 F6插入一个关键帧，如下图所示。双击此关键帧发现渐变(Tweening)标签下的渐变选项已经自动设定为运动(Motion)，点取消(Cancel)。用鼠标右键点击此帧下的小球，在弹出的菜单中选择放缩(Scale)，将小球缩小到一定程度就可以了。用 Ctrl-Enter查看结果同上。福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110795因为运动导向层是一个单独的层，我们将在这个层上绘制小球将要走过的路径，所以这一节起我们开始接触多个图层的操作。建立导向层有多种方法，一种是点击时间轴窗口左下角 ，在当前层上新建一个层。在该层上点鼠标右键，在弹出的菜单中选择导向
10、(Guide)，使其前面出现对号，这时从该层左边的符号看出它已经成为导向层。这时，按住 Alt键，用鼠标左键点击小球所在图层，使小球层与其上的导向层发生关联，我们看到小球层向右缩进，表示二者已产生关联。还有一种建立导向层的方法是用鼠标右键点击小球所在层的名称，在弹出的菜单中选择增加运动导向(Add Motion Guide)，在小球图层上出现新的导向层，小球图层缩进显示二者关联。这时的时间轴显示应如下图所示。下面我们就在导向层中绘制一条路径。为了避免对小球所在层进行误操作，点击小球所在层上 所对应的黑点，使该层被锁定，不能被编辑。点击导向层第 1帧，在绘图工具栏选择铅笔工具，将其下方参数修改器
11、中的铅笔模式按钮变为 ，颜色选黄色，也可以选其它颜色，因为导向层在动画播放中不被显示。然后在工作区画一条如下图所示的线。上面这条就是小球将要沿着运动的路径。现在解除小球所在层的锁定，恢复该层的可编辑状态。在绘图工具栏中选箭头工具，将其下方参数修改器的捕捉(Snap)按钮选定为 状态。点击小球所在层的第 1帧，点住小球中心附近将其拖动到路径最左端，小球中心出现小圆圈，当小球接近路径端点时，中心点自动捕捉到该端点，如下图所示，这样我们就把小球放在了路径的起始位置。同样，我们再点击小球所在层的第 25帧，将小球中心放置在路径的另一端。现在，我们就完成了所有的工作。用 Ctrl-Enter看一下效果，
12、是不是很不错？问题探究：我们如何将本节所学的各种效果综合起来使用，例如让物体沿指定路径运动的同时发生缩放，旋转及透明度上的变化等。下面，我们还将通过小球的运动进一步了解如何设置一些重要参数，以获得一些特殊效果福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110796知识拓展:前面我们通过小球的运动介绍了 Flash中最基本的动画运动渐变动画，这一节我们仍将继续深入学习这种方式的动画。首先我们一起来看一看上面的例子是怎么做出来的。这是一个跳动的球。我们先试着用前两节中讲过的方法做一下。首先选好舞台的大小，颜色等，在舞台上用桔黄梯度色画一个大小适中的圆球形。（注意现在的这个圆球形是
13、形体而不是实例，你可以对它进行重新填色，甚至可以用箭头工具选择其中一部分区域进行操作，而实例则作为一个整体出现，你只能对它做整体操作。这一点我们在上一章已经讲过。）我们需要把它做成一个图符，以方便我们调用。选中这个圆球形，按 F8键把它转换成图符，在弹出的窗口中给这个图符起名为 ball，并确认是图形类图符，按回车确定。这时圆球形外面出现一个方框，如右图所示 ，表示小球已经成为一个实例。现在小球位于时间轴的第 1帧上，我们把小球拖动到舞台的最上端，然后在时间轴第 18帧上按 F6键插入一个关键帧，把实例小球从最上端拖动到最下端，然后再在第 36帧处按 F6插入一关键帧，为了使小球在这一帧能回到
14、原位，我们可以把第 1帧的内容复制到这一帧。在第1帧上点鼠标右键，在弹出的菜单中选 Copy Frames，或按快捷键 Ctrl+Alt-C，复制第 1帧，然后同样在第 36帧处点鼠标右键，选 Paste Frames，或按快捷键Ctrl+Alt-P，将第 1帧的内容粘帖到这一帧上。可以看到在这一帧，小球又回到了起始位置。时间轴的状态应如下图所示。现在我们来看一下效果，如左图所示。怎么好象和上面的结果不一样，似乎看不出那种重力作用的感觉，看来我们还有点 工作没有做完。双击时间轴第 1帧， 弹出帧属性对话框，选择渐变(Tweening)标签，在其下的选项中将 Easing所对应的指针拖福州环保职
15、专 flash教案 作者：袁林海邮箱： 电话：227110797动到最左端，或在右边的输入框中输入-100，如右图所示，确定。然后，在第 18帧双击，把 Easing所对应的指针拖动到最右端，或在右边的输入框中输入 100。然后，我们再来看一下效果，按 Ctrl-Enter全屏观看，是不是和我们需要的效果一样了？ 现在大家应该知道 Easing选项的作用了吧。它的作用是在运动的过程中产生速度上的变化，默认值为 0，即为匀速运动。当 Easing所对应的指针向左边移动时，也就是 Easing值为负时，运动的物体做加速运动，相反，当 Easing所对应的指针向右边移动时，也就是 Easing值为正
16、时，运动的物体做减速运动。当 Easing值的绝对值越大时，物体运动的加速度越大，物体运动时速度变化也就越快。在小球下落的过程中，速度越来越快，所以我们把 Easing的值改为负值，注意在Easing值为-100 时，比较接近重力加速度。当小球弹起时，速度越来越慢，因此Easing值为正。作业练习：上机作业一：按照教师所展示的效果图模仿完成该作品。上机作业二：在作业一基础上进行修改、更新。 （要求：用不同引导线，不同运动方向速度、不同球体等）上机作业三：（选做提高题）根据所学自由创作一作品。教学反思：FLASH 入门动画（三）福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110
17、798教学目标：进一步巩固使用元件、时间轴、图层、引导线等；会使用复杂运动渐变动画等操作会完成 flash的第三个任务物理实验小球撞击。工作任务：任务三： 物理实验小球撞击实践操作：展示效果图：下面我们做一个简单的物理实验的模拟。如上面所示，桔黄色的小球从空中落下，落地瞬间与地上静止的绿色小球发生碰撞，两球均沿不同轨迹飞出界面。以我们刚才做好的动画为基础，在时间轴窗口新增加一个层，命名为 Green Ball，注意该层上有铅笔标志，表示正在编辑该层。我们用椭圆工具选绿色梯度色绘制一个大小和桔黄色小球差不多的小球，并把它移动到桔黄色小球下方偏右一点，以便桔黄色小球落地时正好与它接触。在第 18帧
18、上按 F6新建关键帧，因为这时是与落地的桔黄色小球碰撞产生运动的起始位置。在第 36帧再按 F6增加一个关键帧，并把绿色小球横向右移出画面。为了让绿色小球动起来，我们在第 18帧双击，在弹出的帧属性对话框中渐变标签下，选 Tweening为 Motion。确定后第 18帧到第36帧之间会有一个实箭头。这样，绿色小球的动画部分就做好了。 下面我们设法让桔黄色的小球在与绿色小球碰撞后沿指定的路线飞出画面。用鼠标右键在时间轴窗口，桔黄色小球所在层点一下，在弹出的菜单中选 Add motion guide，新增一个导向层。这时导向层成为当前正在编辑的层。我们在导向层上画一条路径。画好的结果应如左图所示
19、。绘制这条路径的方法有很多，一种方法是，可以用铅笔工具或直线工具画路径的直线部分，然后用椭圆工具画不填充的椭圆，用箭头工具取其中一段作为路径的曲线部分。路径画好后，用鼠标左键双击桔黄色小球所在层的第 1帧，在弹出的帧属性对话框中渐变(Tweening)标签下在捕捉到路径(Snap to guide)前的复选框中点一下使其被选中，确定。同样对第 18帧进行相同的操作。回到第 1帧，选择箭头工具(注意箭头工具的参数修改器中捕捉按钮 应处于按下状态 )，用鼠标左键点击桔黄色小球中心附近并把它拖动到路径直线的最上端，见左图。在接近端点时，小球中心会自动吸附在端点上。在第 18帧，把桔黄色小球拖动到路径
20、直线的下端，在第 36帧，拖动到曲线的末端。做好后，时间轴窗口的设置应如下图所示，绿色小球所在层位于桔黄色小球所在层上面还是下面无关紧要。福州环保职专 flash教案 作者：袁林海邮箱： 电话：227110799我们用 Ctrl-Enter来查看一下效果，如果发现桔黄色小球并没有沿指定路线移动，表明关键帧中小球的位置不对，未能真正处于路径的端点，试着调整有问题部分的关键帧中桔黄色小球的位置。一次不行，多调整几个就行了。现在我们就可以欣赏这一段稍微复杂点的动画了。是不是很有点成就感？下一节中我们将从另一个方面讲解运动渐变动画的用法。作业练习：上机作业一：按照教师所展示的效果图模仿完成该作品。上机
21、作业二：在作业一基础上进行修改、更新。 （要求：用不同引导线，不同运动方向速度、不同球体等）上机作业三：（选做提高题）根据所学自由创作一作品。教学反思：FLASH 入门动画（四）教学目标：进一步巩固使用元件、时间轴、图层、引导线等；会使用复杂运动渐变动画中旋转运动等操作会完成 flash的第四个任务旋转的风车工作任务：任务四： 旋转的风车实践操作：展示效果图：福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107910这一节我们来制作一个旋转的风车，从制作中我们不仅要学习运动渐变动画的另一种形式：旋转动画，而且还要练习用箭头工具对对象进行修改的方法。首先要打开一个新文件。现在我
22、们先来画风车的一个叶片。选择绘图工具栏中的矩形工具，把边线屏蔽掉，填充色选黄色，在工作区中间画出一个矩形如下图一所示。选箭头工具，将矩形左上角的顶点向右拖动直到与右上角的顶点重合，如图二所示。下面我们将对三角形作进一步的加工。用鼠标分别点住三角形的两条直角边拖出一个弧形，调整使弧形连续，如图三所示。然后再对三角形的斜边加工，使它也呈现一定的弧形，如图四所示。选中叶片，按 F8将其转换为图符，在弹出的图符属性框中将叶片命名为 yepian，确定是图形类图符后回车。这时叶片就变成了实例。按 Ctrl-L打开图库窗口，为了使叶片旋转时不致发生偏离的情况，我们需要把叶片调整到合适的位置，双击图库窗口中
23、预览窗口的叶片，进入图符编辑状态，如图五所示，把叶片移动到图示位置，使其尖端指向十字定位中心。现在我们就做好了一个叶片了。图一 图二 图三 图四 图五然后，我们要利用这个叶片做出风车其余的叶片。选 Flash菜单项 Window - Inspectors - Transform，打开变形监控面板，如左图所示。监控面板可以帮助我们精确地定义对象以及精确地旋转放缩对象。选中已经做好的叶片，按 Ctrl-C复制，再按 Ctrl+Shift-V将叶片复制在原来的位置上。在变形监控面板上的旋转(Rotate)项下输入 45，表示将复制的叶片顺时针旋转 45度。点应用(Apply)，发现新的叶片出现在原有
24、叶片顺时针 45度位置，如下左图所示。用同样的方法再复制出 6个叶片，组成八个叶片的风车。注意，复制其他叶片时，每按一个 Ctrl+Shift-V后将变形监控面板中的旋转角度值多加 45度。现在我们用鼠标拉出一个大框把这八个叶片全部套住，再按 F8键把这八个叶片转换成一个图符，起名叫 fengche。可以看到，现在八个叶片成了一个整体，其中心为十字定位符，见下图右。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107911风车已经做好了，我们现在该让它动起来了。在第 30帧按 F6插入一个关键帧。双击第 1帧弹出帧属性对话框，在渐变标签下 Tweening选择项目中选 Mot
25、ion作运动渐变动画。在旋转(Rotate)项目中选择顺时针(Clockwise)，并将随后的旋转圈数设为 1。这样，风车将在第 1帧到第 30帧之间顺时针旋转 1圈。现在按 Ctrl-Enter来看一看效果吧，怎么样，还不错吧。知识拓展:现在我们对已经做好的风车动画做一个加工，以便生成如上图所示的效果。在第 60帧处按 F6插入一关键帧，在第 30帧双击鼠标左键，在弹出的帧属性对话框中渐变标签下，将 Tweening设置为 Motion，并将 Rotate设为 Clockwise，其后的次数栏中填 1次。该帧属性同第 1帧，如上图帧属性对话框面板所示。现在风车将在第 1到 60帧的时间里顺时
26、针旋转 2圈。下面我们对第 30帧做一些修改。选择时间轴上第 30帧，用鼠标右键点击风车实例，在弹出的菜单中选择 Scale，将风车缩小一些。随后，双击该风车实例，进入实例属性面板，在 Color Effect标签下 Color选项中选 Tint，设置如下图所示。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107912这样我们就把大小的颜色变化设置完成了，最后的结果就如上图所示。大家也可以想些别的花样来做一做，这样可以尽快地熟练掌握运动渐变动画的实现过程。作业练习：上机作业一：按照教师所展示的效果图模仿完成该作品。上机作业二：在作业一基础上进行修改、更新。 （要求：用不同引
27、导线，不同旋转运动方向速度，不同形状叶片等）上机作业三：（选做提高题）根据所学自由创作一作品,如地球的旋转等。教学反思：福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107913FLASH 入门动画（五）教学目标：进一步巩固使用元件、时间轴、图层、引导线等；会懂得运动渐变动画和形体渐变动画的区别,会使用形体渐变动画的操作技巧会完成 flash的第五个任务延伸的直线。工作任务：第五节 延伸的直线实践操作：展示效果图：这一节我们将来学习渐变动画的另一种形式，即形体渐变(Shape tweening)动画。我们先来学习做上面这个直线伸长的简单动画，之后我们稍加变化，做一个更有趣的直
28、线伸长动画。 用 Flash新建一个文件，按 Ctrl-M对电影的属性作一个调整，将其设置为狭长的矩形(如宽 Width设为 400，高 Height设为 50)，将背景色设为蓝色。 用铅笔工具或直线工具画一条横向的短线，长度如右图所示： 。 注意要画一条笔直的横线，可以按住 Shift键，再用铅笔工具或直线工具横向拖动鼠标即可，因为按住 Shift键以后，线条只能沿水平，竖直及 45度角方向变化。然后我们在第 40帧上按 F6插入一关键帧，或按 F7插入一空帧(当在这一帧上绘制图形后，该帧会成为关键帧)。确定这一帧为当前帧，我们将在这一帧上绘制一条更长的直线，有两种方法可以实现这一点。一种是
29、按下 F7插入空帧后，点击时间轴窗口下方洋葱皮按钮的左边第一个，即 。这时我们发现第 1帧的短横线以灰色显示出来。我们就以它为基准，用铅笔工具绘制一条长直线，直线左端与短横线左端对齐。另一种方法要简单一些，在第 40帧按下 F6插入一关键帧后，第 40帧会具有和第1帧相同的内容，即一条短横线，我们只需要对它加一下工就可以了。选中绘图工具栏中的箭头工具，移动鼠标到短横线的右端，鼠标形状如右图： 。点住福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107914鼠标左键并向右拖动 ，直到直线足够长为止。选用这两种方法之一做好第 40帧的直线。下面我们就要设置帧属性让直线动起来。用鼠
30、标左键双击时间轴上的第 1帧，在弹出的帧属性对话框中选渐变(Tweening)标签。对其下的 Tweening选项进行设置，选择 Shape如下图所示，回车确定。这时在第 1帧和第 40帧之间出现一个实箭头，背景变为淡绿色，表明是形体渐变动画。按 Ctrl-Enter看一下效果，应该和上面所示一样的。知识拓展: 现在我们来变个花样，做一个环绕矩形四条边伸长的直线。大家能猜一猜这个动画是怎么做的吗？其实有了本节开头直线伸长动画的基础，这个动画一点也不难做。我们对刚刚做好的直线伸长的动画加一加工。首先按 Ctrl-M对电影属性作一个调整，将其高度(Height)设置为 150。为了缩短动画时间，我
31、们按下 Ctrl键把鼠标移到第 40帧上，发现鼠标这时变成黑色，如右图所示： 。把第 40帧向左拖动到第 20帧位置松开鼠标，这时动画时间缩短了一半，发现直线延伸变快了。点时间轴窗口下的 新建一个层，在新层的第 21帧按 F6插入一个关键帧。按下洋葱皮按钮 ，这时原先层上的直线用灰色显示出来：。我们从这条线的最右端开始向下画一条短竖线： 。在新层的第 30帧按 F6插入一个关键帧，该帧具有和第 21帧相同的内容。用上面讲过的方法把这一帧的竖线拉长到合适的长度，同上面动画中的竖线长度差不多。然后，双击第 21帧弹出帧属性对话框，按刚才讲过的方法把 Tweening设置为形体渐变动画。按 Ctrl
32、-Enter看一下效果，应如下图所示：我们发现这并不是我们想得到的结果，我们希望直线不断延伸，而不是分段延伸。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107915得到这个显示结果是因为横向直线延伸的动画在第 20帧以后就终止了，在第 21帧到第 30帧之间，也就是竖线延伸时横向直线层上没有内容。为了弥补这一点，我们在横向直线延伸动画所在层的第 30帧上按下 F5键，使该层在第 21帧到第30帧之间仍保留第 20帧，也就是最近的一个关键帧上的内容，这样在第 21帧到第 30帧之间，横向的直线将一直被显示出来。再按 Ctrl-Enter看一下效果，发现直线先是横向延伸，到了
33、右端顶点后转为竖向延伸，这才是我们需要的结果。现在再做其它两条边的直线延伸就变得很简单了，再新建两个层，一条边一个，方法和上面讲过的一样，我在这里就不再多说了。做好后的时间轴应如下图所示。好了，欣赏一下我们做的动画吧。体会一下运动渐变动画和形体渐变动画的区别。下一节课中我们还将继续介绍形体渐变动画其它的应用。 作业练习：上机作业一：按照教师所展示的效果图模仿完成该作品。上机作业二：在作业一基础上进行完成矩形上机作业三：（选做提高题）根据所学自由创作一作品,不同形状直线的延伸,如三角形,圆形等。教学反思：FLASH 入门动画（六）教学目标：进一步通过字符的变形动画来认识形体渐变动画的作用；会使用
34、不同字符形体渐变动画的操作技巧会完成 flash的第六个任务变幻的字符。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107916工作任务：任务六： 变幻的字符实践操作：展示效果图：这一节我们将通过字符的变形动画来认识形体渐变动画的作用。对于这类变形动画，只能用形体渐变来实现，用运动渐变是做不到的。首先，我们新建一个电影文件，按 Ctrl-M修改电影属性，使其宽度和高度均为100，背景为蓝色。选择绘图工具栏中的文字工具 ，把鼠标移到电影文件中点一下，会出现一个文字输入框 ，选择好字体，字号，设定颜色为黄色，输入字母F，选择箭头工具，这时字母 F的周围出现一个阴影方框 ，表示该
35、字母已经成为一个集合体。我们在这个字母上点鼠标右键，在弹出的菜单上选放缩(Scale)，这是 F周围出现放缩手柄 ，我们把这个字母放大到和上面动画中字母大小差不多。在时间轴的第 12帧点鼠标左键，按 F6插入一关键帧，这一帧的内容和第 1帧一样。双击这一帧中的字母 F，进行字符编辑模式，我们把字母 F替换成字母 L。用同样的方法，分别在第 24帧，第 36帧，第 48帧，第 60帧插入关键帧，并把相应的字母变成 A，S，H，F。因为要制作的是形体渐变动画，我们首先要把已经集合了的字符打散成形体。选择第 1帧，按 Ctrl-B把字母 F打散： 。然后依次选择第 12，24，36，48 和 60帧
36、按 Ctrl-B把字母 L，A，S，H，F 分别打散。现在就可以做动画了，在第 1帧上双击鼠标左键，在弹出的帧属性对话框中选渐变标签，其下的 Tweening选项选Shape，回车确定。然后分别对第 12帧，24 帧，36 帧及 48帧如此操作。最后的时间轴窗口应如下图所示：现在我们按 Ctrl-Enter预览一下效果，应如上面的动画所示。这样的字符变形很简单，但是我们总觉得上面的这个动画中，字符变形有点没有规则，变幻得有些莫名其妙。那是因为在形体渐变动画中，如果用户没有指定变形规则的话，Flash 将自动为待变形的形体设置一些关键点。形体渐变动画实际上就是关键点位置的变化，形体其余部分的变化
37、可以通过插值的方法计算出来。在 Flash中提供了一种人为干预变形效果的方法，就是设置提示点(Hints)，通过指定相应提示点间的变化方法可以指定整个形变的过程。下面我们用具体的实例来说明。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107917以字母 A变 S的过程为例，因为没有设置提示点时，这个变形过程显得比较凌乱。先按 Ctrl+Alt-H打开提示点的显示。选择第 24帧，按 Ctrl-H加入一提示点，以图一中红色的小圆圈表示，a 用来标识提示点。看一看第 36帧，发现字母 S上也有一个对应的提示点，见图二。回到第 24帧，把提示点 a拖动到字母 A的右下角，如图三所
38、示，再到第 36帧，把提示点 a放在如图四所示位置。这时我们发现提示点变绿了，回到第 24帧，这时提示点由红色变成了黄色，见图五，表明提示点的设置正确。图一 图二 图三 图四 图五 图六 图七 如果提示点仍是红色，说明提示点位置设置不正确，多调整几次就会好了。用同样的方法，我们可以再设置一到多个提示点，如上图六和七，我们又设置了一个提示点 b，这样就可以获得比较好的变形效果。左图所示为加入与未加入提示点的字符变形对比。我们可以看出，加入了提示点后字母的变形似乎更有规则一些。知识拓展:(效果图展示)上面的这个动画实际上就是这两节中我们所学的形体渐变动画的一个综合运用，在变形的过程中还有位置和颜色
39、的变化。也许大家一看就知道是怎么做的了，我就不再多说了，只简单提两句。在每一个关键帧上把相应的字母向右拖动一段距离，并使用油漆桶工具用不同的颜色填充就行了。大家有兴趣，可以自己动手做一做看。当然形体渐变动画不仅仅是作用于文字，所有的形体都适用。所以我们也可以把文字变形的动画扩展到几何图形的变化，例如可以把圆形变成三角形，再变成正方形等，大家可以发挥自己的想象力，多动手练一练，一定会慢慢熟练起来，并创作出很好的作品的。作业练习：上机作业一：按照教师所展示的效果图模仿完成该作品。上机作业二：在作业一基础上进行修改，变成汉字等上机作业三：（选做提高题）根据所学自由创作一作品, 我们也可以把文字变形的
40、动画扩展到几何图形的变化，例如可以把圆形变成三角形，再变成正方形等，大家可以发挥自己的想象力。教学反思：福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107918FLASH 入门动画（七）教学目标：进一步通过文字的输入和输出实例，掌握静态、动态及输入文本的使用；会制作简单按钮及简单脚本的编写;会完成 flash的第七个任务文字的输入与输出。工作任务：任务七： 文字的输入与输出实践操作：展示效果图：这一节我们要来介绍文字的输入和输出方法，这是 Flash中的一项重要功能，也是我们认识 Flash交互性的基础。大家试着在上面的 Flash电影下面的文本框中输入一段文字，然后回车或
41、点“确定”按钮，看一看有什么效果。再点一点“清除”键呢？ 要实现文本的输入，就要用到绘图工具栏中的文字工具，我们先把输入框做好。点击工具栏中 ，选中文字工具，在下面的参数修改器中设置好用于输入的文字字体，字号，颜色以及对齐方式等项，不要忘记一定要点选最下面的 ，这个按钮用于设置文本域。在场景中下方用鼠标拉出一个文字框用作输入，宽度大约比所选字宽稍大一点。然后我们要对所画的输入文本框的属性做一点调整。在文本框上点鼠标右键，在弹出的菜单中选最下面的“属性”(Properties.)，进入文本域属性设置面板。如下图所示，在变量名(Variable)后填“input”，并选中第一项 Draw bord
42、er and background，这样就会显示文本域的背景和边界。设置变量名是为了方便我们今后的福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107919调用。现在按回车确定。输出文本框的做法与输入框相同，我们还和刚才一样，在文字工具下用其参数修改器为要输出的文字设置字体，字号，颜色等，注意要保证 按下，在刚才的输入框上面拉出一个宽一些的文本域用作输出。用鼠标右键点这个区域选“属性” 进入文本域属性设置对话框。将 Variable设置为“Output” ，再将 Options中的选项设置为下图所示。（关于每个项目的含义和设置我们将在本节的后面部分详细介绍。）这样我们就将输出
43、文本域设置成了有边界和背景，允许多行输出并自动换行以及禁止编辑等属性。下面我们还需要做两个按钮，分别用来输入和清除文字。因为是演示，所以我们把按钮做得简单些，你也可以直接调用 Flash中已经做好了的按钮。按Ctrl-F8新建一个图符，给图符起名为 Button，并将图符的类型设置为Button。进入图符编辑模式后，用矩形工具拉出一个矩形，我们还可以加入圆角并修改颜色使它更象一个按钮。注意到我们所绘制的图形都是在按钮的 UP帧下，为了简单起见，我们只做这一帧。返回场景中，按 Ctrl-L打开图库窗口，分两次从预览窗口把按钮拖动到输入文本框的下面并排放置，用文字工具在两个按钮上分别写上“确定”和
44、“清除”，如上面的电影所示。下面的步骤要稍微难理解一些，因为我们要用到 actions为按钮加入一些动作，这样当点击按钮后才能执行相应的操作。actions 属于 Flash的高级技术，今后我们会重点介绍的。在这里，我们只需要有个大概的印象和认识就行了。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107921用鼠标左键双击“确定”按钮，弹出实例属性对话框，注意到按钮类实例比图形类实例多了一项设置，就是 Actions。点选 Actions标签，点 为按钮增加动作，在下拉菜单中选 On MouseEvent，即设置鼠标对事件的响应。然后在出现的选项框中选 Release和 K
45、ey Press，并在 Key Press后的输入框中按一下回车键。这样我们就把按钮将要响应的鼠标事件设置好了，即当按钮被释放或按下回车键后发生动作。然后，我们将进一步指定在这些事件产生后如何进行操作。再点一下 ，在菜单中选 Set Variable，我们在右边的变量名(Variable)一栏中填入output，在下面的值(Value)一栏填入 input。注意必须把值右边的等价方式按钮设为 ，表示当按钮按下时，output 中应该具有和 input域中相同的内容，即二者的值相同。如果选 ，表示字串内容相同，这时无论你在文本输入框中输入任何文字，在按下确定按钮后，输出框中只会出现 input这几个字符。同时我们注意到在这两种等价方式下，表达式的写法也不相同。同样，双击清除按钮，我们也为它设置动作。它的 Actions设置如下所示。表示鼠标在该按钮上释放时，将 output和 input里的内容全部清空。福州环保职专 flash教案 作者：袁林海邮箱： 电话：2271107922这样我们就把这个文字输入和输出的演示做好了。知识拓展:(效果图展示)怎么样，做的这个文字输入输出演示比上面那个漂亮多了吧。大家想一下，如何利用我们前面学过的知识生成这样的效果。这个效果很容易实现的，与上面那个动画最大也最主要的差别是输入和输出文本域设置了边
