简单Flash动画案例.doc

用Flash制作简单的飞鸟动画Flash动画中有的效果完全可以由代码控制并生成图像完成，譬如本文所要实现的效果就是通过一段并不复杂代码把两条线段变成一群活灵活现的飞鸟。再加上一幅图片，绝对能让你想起“千山鸟飞绝”的诗句，见效果图所示。1新建一个Flash文档，单击“属性”面板中的“尺寸”按钮，打开“文档属性”面板设置场景大小为350px x 300px，帧频为20fps。2按快捷键Ctrl+F8新建一个名为“图片”的影片剪辑元件。按快捷键Ctrl+R打开“导入”面板导入一幅可以覆盖场景的山水图片，见效果图。图13按快捷键Ctrl+L打开“库”面板，把“图片”元件拖拽到“场景1”中。点选场景中的“图片”元件，按快捷键Ctrl+K打开“对齐”面板，点击“相对于舞台”按钮，再点击“左对齐”和“上对齐”按钮。这样很容易就使“图片”元件覆盖住整个场景了。图25按快捷键Ctrl+L打开“库”面板。右键点击“库”中的“飞鸟”元件，单击“链接”命令打开“链接属性”面板，如图4所示，并如图5所示设置。使用“链接属性”面板定义影片剪辑元件后，可以直接利用代码调用元件，而不必把元件拖拽到场景中。图4图56回到“场景1”，点选“图层 1”的第1帧，按F9键打开“动作”面板，输入如下代码：/ 飞鸟动画damp = .95;numbirds = 30;for (i=0; inumbirds; i+) bird = attachMovie(bird, bird+i, i);bird._x = Math.random()*350+20;bird._y = Math.random()*300+20;bird.vx = Math.random()*10-5;bird.vy = Math.random()*10-5;bird.k = Math.random()*.0001+.0003;bird.gotoAndPlay(Math.round(Math.random()*20);onEnterFrame = function () var totx = 0;var toty = 0;for (i=0; inumbirds; i+) bird = _rootbird+i;totx += bird._x;toty += bird._y;avgx = totx/numbirds;avgy = toty/numbirds;for (i=0; inumbirds; i+) bird = _rootbird+i;bird.vx += (avgx-bird._x)*bird.k;bird.vy += (avgy-bird._y)*bird.k;bird.vx += Math.random()-.5;bird.vy += Math.random()-.5;bird.vx *= damp;bird.vy *= damp;targAngle = Math.atan2(bird.vy, bird.vx)*180/Math.PI;diff = targAngle-bird._rotation;if (diff180) diff -= 360;bird._rotation += diff*.2;bird._x += bird.vx;bird._y += bird.vy;7为了使该动画更有趣些，我们在以上的代码下，再添加如下代码：/ 鼠标动作function drawToPoint()for(i=0;inumbirds;i+)bird=_rootbird+i;bird.vx+=(_xmouse-bird._x)*bird.k*100;bird.vy+=(_ymouse-bird._y)*bird.k*100;onMouseDown = drawToPoint;添加这段代码后，按快捷键Ctrl+Enter测试。当鼠标点击动画，所有的“鸟儿”就会向鼠标点击的方向飞去，很酷。整个效果到这里就全部设计好了。4创建一个“飞鸟”影片剪辑元件。该元件的图层设置如图2所示。“左翅”层和“右翅”层利用“形状渐变”运动让两条线段可以模拟鸟翅膀煽动的运动。打开“洋葱皮”命令可以很清楚的看到了，如图3所示。在各帧中，线段只是角度不一样，以产生运动的效果。设置线段角度的变化可以按快捷键Ctrl+T打开“变形”面板进行辅助设置。图3来PConline劲爆论坛抢大奖！马上点击进入火热创意设计讨论区三：绘制七巧板 操作步骤： 1 绘制一蓝色边框，红色填充色的矩形。选择矩形绘图工具，调整好边框及填充颜色，按住Shift键绘制正方形。 2 使用线条工具，按住Shift键绘制正方形的两条对角线。参照书本p84图绘制其余线条，可画辅助线。多余线条擦除方法：选用箭头工具，点击多余线条，按键盘上Delete键进行删除。 3 填充颜色。使用颜料桶工具，对七巧板的七歌板块进行颜色填充。 4 使用橡皮擦工具（注：选用“擦除线段”状态），擦除所有的线条。 5 用箭头工具将七巧板的每个板块小心的移开。（注：移动过程中避免色块的重叠） 四：构建运动造型 使用绘制完成的七巧板，构建运动造型。 借助箭头工具来移动，定位板块； 使用任意变形工具旋转板块。 使用菜单命令进行水平及垂直翻转。 五：实践 绘制七巧板，并使用已绘制的七巧板，构建运动造型。 六：教学反思 初次接触Flash软件，学生对如何正确使用工具栏的工具还存在一些问题。绘制 七巧板的过程中，绘制直线时，直线与直线没有正确相交，出现相邻板块同色问 题，经指导修改完成。 课题：Flash动画制作之二 计算机动画制作初步 教学目标：1：将原来静态的跑步姿态的图形加工为动态的跑步造型； 2：熟悉FLASH制作中的几个关键性的概念：图层、时间轴、帧等； 3：熟悉FLASH制作中的两种重要动画形式：形状渐变动画和运动渐变动画。 教学重点：将原来静态的跑步姿态的图形加工为动态的跑步造型 教学难点：1：理解帧的概念； 2：了解两种重要动画形式：形状渐变动画和运动渐变动画分别用于何种情况 教学方法：讲授法，演示法，实践法 教学过程： 一、操作步骤1： 1：打开Flash 软件 “开始”菜单“程序”Flash MX 2004 2：文件打开上次绘制的七巧板，并在第20帧处插入关键帧 方法：右键单击第20帧选关键帧 3：学生上台演示，在第20帧处将七巧板构建成跑步造型 （ 复习上节课内容） 4：构建动画，选中图层1第一帧，设置动画中间为“形状” 二、讲解场景属性设置，时间轴作用，帧，关键帧以及动画形式形状渐变动画的含义 三、操作步骤2： 1：插入一图层，默认名为“图层2”，并讲解图层含义 2：在图层2第一帧处输入文本“跑步”，讲解FLASH工具箱中文本工具的使用 3：在图层2第20帧处插入关键帧，并将文字“跑步”拖动一个位置，与第一帧位置不同 4：构建动画，选中图层2第一帧，设置动画中间为“动作” 四、讲解形状渐变动画和运动渐变动画的区别 五、通过菜单栏中“控制”“播放”，观看效果。 实践：使用已绘制的七巧板，加工为动态的跑步造型，并添加文字的运动变化。 六、教学反思： 由于是第一次接触动画的制作，对于FLASH中的一些关键性的概念学生理解起来比较困难， 如关键帧、图层等。对于动画的两种基本形式，形状和运动渐变动画，能在老师的指导下完 成，但是形状渐变动画和运动渐变动画分别用于何种情况，还不是很清楚。 课题：Flash动画制作之三 奥运五环的制作 教学目标：1：熟悉FLASH制作中的关键性概念：元件； 2：完成奥运五环的制作以及文字的制作； 3：巩固FLASH制作中的重要动画形式：运动渐变动画。 教学重点：奥运五环的制作； 教学难点：理解元件的概念； 教学方法：讲授法，演示法，实践法 教学过程： 一、操作步骤1： 1：打开Flash 软件 “开始”菜单“程序”Flash MX 2004 2：元件的新建 在菜单栏中插入新建元件，选择图形元件，并命名为wh1，这里要制作奥运五环中的一 个环，其他的四个通过复制粘贴完成 方法：选择椭圆工具，并设置其线条颜色和填充颜色 注意：线条颜色根据五环的颜色设置，填充颜色设置为“无” 另外还可以设置线条粗细 3：元件的复制 第一个五环完成后，用选择工具将其选中，然后再次通过插入新建元件，命名为wh2， 将复制的wh1粘贴其中，并根据奥运五环颜色改变它的线条颜色 4：用同样的方法完成其他三个圆环 5：元件的新建（制作文字），命名为wz 选择文字工具，设置其大小，字体，颜色等后在元件中输入“心系奥运放飞梦想” 技巧：阴影文字的制作 选中该文字，按住CTRL的同时，拖动鼠标，将该文字复制，并将复制的文字换一颜色， 利用方向键将文字微调，实现阴影效果。 至此，元件制作完毕。 二、操作步骤2：讲解元件的功能 三、操作步骤3： 回到场景中 1：五环的运动 （1） 在图层1第一帧处，将五环wh1,wh2,wh3,wh4,wh5依次拖入场景中，并根据奥运五 环的造型构件好，此时，五个环是五个独立的个体，将五环全部选中，通过修改 组合，将其组合成一个统一的整体。 （2）在图层1的30帧处，插入一关键帧，并将五环移动至某一位置（不同于第一帧） （3）构建动画，选中图层1第一帧，设置动画中间为“形状” （4）实现奥运五环从高处落下运动。 2：文字的运动 （1） 新建图层2，在图层2第一帧处，将制作好的元件wz拖入 （2） 在图层2的30帧处，插入一关键帧 （3） 在图层2第一帧处，将文字通过任意变形工具进行缩放，旋转 （4） 构建动画，选中图层1第一帧，设置动画中间为“形状” （5） 实现文字旋转出现在场景中。 四、操作步骤4 通过菜单栏中“控制”“播放”，观看效果 实践：完成奥运五环以及文字的运动动画 五、教学反思 在上节课构建七巧板动画的基础上，引入了元件的概念，制作了奥运五环的动画。学生的完 成情况较好，但是对于如何正确使用元件，如：何时何处使用元件，学生了解的还不是十分 深刻，大部分只是在单纯的模仿教师的演示。 课题：Flash动画制作之四 镂空文字 教学目标：通过应用文本工具和创建遮罩层，当使用遮罩层，可透过文字看到被遮罩的动态效果。 教学重点：理解遮罩层的含义。 教学难点：理解遮罩层的含义。 教学方法：讲授法，演示法，实践法 教学过程：一、操作步骤1： 1：打开Flash 软件 “开始”菜单“程序”Flash MX 2004 2：新建文档 3：新建元件 插入新建元件。输入名称，行为选为“影片剪辑”。 二、操作步骤2： 讲解元件影片剪辑与图形的区别。 三、操作步骤3： 在元件影片剪辑中操作 在图层1第一帧处，选择工具箱中文本工具，在编辑区输入文字“心系奥运放飞梦想” 四、操作步骤4： （1）新建图层2，并将图层2拖到图层1的下面； （2）在图层2第一帧处，绘制一个矩形，矩形大小可通过工具箱中任意变形工具改变，并将其放在文字的左侧； （3）在图层1的30帧处，插入帧，延长时间轴到第30帧； （4）在图层2的30帧处，插入关键帧，并用选择工具将文字拖到文字的右侧； （5）构建动画，选中图层2第一帧，设置动画中间为“形状” 五、操作步骤5： 右击图层1的层名处，在快捷菜单中选择“遮罩层” 六、操作步骤6： 回到场景中 从库中将该影片剪辑元件拖到场景中 七、操作步骤7 通过菜单栏中“控制”“测试影片”，观看效果 八、操作步骤8 讲解遮罩层含义 实践：制作“镂空文字”动画效果。 九、教学反思： 遮罩层是FLASH图层中非常重要的图层，由于遮罩层的效果与实际对于“遮罩”两字的理 解正好相反，所以在讲解“遮罩层”概念时比较困难，通过对作品的制作来逐步理解这个概 念。理解这个概念非常重要，只有理解透彻，才能举一反三。 Flash 制作之五引导层的使用 教学目标：通过制作小球曲线运动的动画，学会正确使用引导层 教学重点：通过引导层引导小球进行运动 教学难点：引导层的正确使用 教学方法：讲授法，演示法 教学过程： 引入： 播放一段小球曲线运动的动画。 前一次课上，我们讲了遮罩层的使用，今天我们再来研究一下怎样使用运动引导层，让 小球进行曲线运动。 一：制作小球元件 1 使用新建元件工具，新建一个图形元件，命名为“小球 1”。在小球 1的编辑界面， 2 使用椭圆工具画一小球。 3再插入一个图形元件“小球 2”，制作方法与小球1相同。 二：制作路径元件 1 插入一影片剪辑元件，命名为“路径”，为两个小球创建运动路径。 2 将小球1元件拖到“路径”元件的图层1第一帧的地方。 3 添加运动引导层，在引导层的第一帧处，使用铅笔工具，为小球添加一条曲线运动 路径。并在30帧处插入一普通帧。 4 为小球1构建动画。在30帧处插入关键帧，创建补间动画。并在开始帧与结束帧 处将小球的中心点置与路径的两个端点。 5 在图层1处插入一新的图层，将小球2拖到新图层的第一帧处，并为小球2构建动 画，使其运动的方向与小球1相反。 三：测试动画 回到“场景”中，将制作完成的路径元件拖到场景中，通过“控制”菜单的“测试影片” 测试所做动画。 四：实践 尝试制作两个小球相对运动的动画，注意正确使用引导层。 五引导层也是FLASH中非常重要的图层，在以前制作的动画中，无论是运动渐变还是 形状渐变，动画都是无规则的动画效果，而有了引导层，制作动画时，动画就会朝着 制作者设定的路径进行运动，有利于制作出符合一定效果的动画。Flash 制作之六按钮元件的使用 教学目标：学会在动画制作中正确使用按钮元件 教学重点：制作按钮元件 教学难点：在按钮元件中编辑添加动画 教学方法：讲授法，演示法