课件17张PPT。 第十课
多变的形状补间动画Flash
动画逐帧动画补间动画动作补间形状补间书中学道魔法小动画制作圆变方形状补间动画1、所有形状补间动画,都在影片剪辑元件中做。
2、第1帧处画一个圆。
3、第20帧插入一个空白关键帧,画一个方块。
4、建立形状补间动画。(注意查看:两关键帧上的图形)
5、将元件应用到舞台。做中习道什么是形状补间动画?形状补间动画是指从一个形状变成另一个形状的动画效果,例如圆变方,狗变蚂蚁等。
可以实现两个图形之间的颜色、形状、大小、位置的变化,其强调的是形状变化,而动作补间动画强调的是动作的变化。
组成元素是分散的图形。形状补间与动作补间区别任务二:完成一个物体形变动画注意:第1个关键帧和最后1个关键帧位置是完全重合的。任务二:完成一个字母变形动画提示:文字必需分离后才能产生形变,CTRL+B省中悟道1、Flash有两种补间动画:动作补间和形状补间
2、共同点:二者都是由制作者设定起始和结束关键帧,然后由Flash自动产生中间的变化过程。
3、区别:动作补间改变的是对象的属性,例如大小、位置、色彩、角度等;而形状补间改变的是对象的形状。你能完成以下的形变作品吗?书中学道复习上节课动画请同学们根据自己水平任选一个作品完成人是怎么形成的 ,这是一个千古之谜,至今没有谁能说清楚,就是今后相当长的时间也不会有一个统一的答案。
我们来自何处?我们的祖先是谁?他们是在怎样的环境下以怎样的程序,慢慢地衍生、分化,并遍布全世界的? 人类的进化视频可搜索“人类进化过程”下载视频完成人类进行形状补间动画做中习道对上面这个动画形变有不满意的地方吗?省中悟道比较以下两个动画 运用形状提示使动画更流畅 Flash虽然能自动生成补间动画,但是在2个关键帧图形差异较大时,其生成的变形过程通常较为“生硬”。使用形状提示 未定义或位置不正确的形状提示为红色 结束帧的形状提示为绿色 起始帧的形状提示为黄色完成P43页中3个动画第八课 人类进化 多变的形状补间动画
教学目标:
通过制作标题形变动画,学会分离的方法,理解分离的作用,掌握创建形状补间动画的制作方法
在制作过程中,体会形状补间动画与动画补间动画的异同点
重点:插入空白关键帧,创建补间动画
难点:理解分离的作用
教学过程:
课时1
一、情景导入
(从展示有趣的动画和回顾旧知入手,设计了一个小障碍,引出今天的课题—形状补间动画)
二、书中学道
师:展示Flash动画的分类
展示魔法小动画,同学们来说一说这个动画中实现了哪些效果?
生:旋转、透明度变化、颜色渐变
师:这个是我们上一节课学习的动画补间动画,可以实现丰富的变化,下面老师请同学们来帮一个忙,帮老师把一个圆形变化成正方形(展示flash文件)
生:试一试,发现不能
师:似乎不能,中间无法体验变化过程。那么如何才能实现这样的效果呢,这就是我们今天要学习的另一种补间方法-----形状补间动画
三、做中习道【任务驱动】
任务一 制作圆变方形状补间动画
1、新建影片剪辑元件。
2、第1帧处画一个圆。(注意:不要转化为元件)
3、第20帧插入一个空白关键帧,画一个方块。
4、建立形状补间动画。
5、将元件应用到舞台,测试影片观看动画效果。
巩固练习:制作“圆——正方形——三角形——圆”的形状补间动画。
任务二 制作“你——好”形状补间动画
(设置障碍,通过小障碍引出分离的作用)
师:刚才同学们尝试了利用形状补间动画实现圆形到三角形的渐变,现在老师再让同学们看一个动画
师:展示你—好的转变动画,同学们能自己试一试吗?
生:试一试,发现不成功
师:为什么形状补间动画在这里又不成功了呢?请同学们参考课本47,自主探究文字的形状补间动画
形状补间动画要求对象是分散的图形。( Tips : Ctrl + B可以快速分离所需分离对象)
任务三 制作“Hello——你好”的形状补间动画。
师:从刚才同学的成功演示中我们可以看到,关键的一步叫做分离 ,你们注意了分离了几次吗?分离到什么效果才算可以呢?
生:两次,分离到字上面都是白色的点
师:我们再回到上一个范例,圆形变化成三角形,我们注意到,单击相应的帧圆形三角形上也布满白色的点,我们把这样的图形叫做矢量图。形状补间只能在矢量图中适用。所以我们必须将元素都打散成矢量图才能实现形状补间动画。
师:现在请同学们再来体验一下多个文字形变的形状补间动画
巩固练习:将自己的名字形变成一同学的名字。
生:操作、体验
课时2
回顾两种补间动画的知识,重点强调:动作补间的元件;形状补间的图形分离(Ctrl+B)至散状图点为止。
任务一 Flash逐字母显示动画。
任务二 完成书本范例
在“图像数字化.fla”中插入名为“标题”的影片剪辑元件,在第1帧输入英文标题“Image Digitization”,并适当调整位置。
在第50帧插入空白关键帧,在相同的位置上输入中文标题“图像数字化”,并适当设置字号、字体等。
选中英文标题“Image Digitization”,选择“修改”菜单中的“分离”命令,标题文本中的每个字符都会放入一个单独的文本字段中,如图10-1。
再次选择“修改”菜单中的“分离”命令( Tips : Ctrl + B可以快速分离所需分离对象),将字符转换为形状,舞台上的标题则已完全分离,如图10-2。
用相同的方法分离中文标题“图像数字化”。
创建形状补间动画——在起始帧和结束帧之间的任意帧上单击,设置属性面板中的“补间”为形状即可。此时时间轴面板的背景色呈淡绿色,在起始帧和结束帧之间有一条带箭头实线。
将标题元件应用到舞台,播放动画。
课时3
回顾上节课的形状补间动画特点。
四、作品体验
(任务中包含形状补间动画和动作补间动画,学生在完成任务的过程中体验两种补间动画)
师:母亲节快要到了,我们来做一个简单的flash祝福妈妈母亲节快乐吧
师:任务布置
(1)图层1重命名为“祝福语”,在第一帧写上“妈妈”,第20帧写上“节日快乐”,建立形状补间动画
(2)图层2重命名为“礼物”,用动画补间动画制作礼物从远到近,从大到小的效果
生:自我探究,完成
师:演示
生:作品展示
五、省中悟道
(四)动画补间与形状补间的区别(通过对比,认识两种补间动画的区别)
师:通过刚才的任务,同学们能总结下动画补间与形状补间的区别吗?
师:展示表格,分四个方面讨论
(1) 在时间轴上的表现
(2) 组成元素
(3) 完成作用
(4) 时间轴上选中关键帧时该对象的特征
生:分组讨论,思考,填写
生:举手交流,师生交流(通过分组讨论,师生互动,填写表格,理清思路)
课时4
探索:制作“烟花绽放”的动画。
作品分析:
烟花点燃上升的过程:动作补间,对象必须是元件。
烟花绽放的过程:形状补间,对象必须是完全分离的散点。
要求:在新建的影片剪辑元件中创作,最后将元件应用到舞台,测试影片观看效果,提交:班级+学号+姓名(烟花).swf。
**************************教学反思****************************
多变的形状补间动画1
新建文档,保存重命名,要求所有动画都做在影片剪辑元件里。
【任务驱动】
任务一 制作圆变方形状补间动画
1、新建影片剪辑元件。
2、第1帧处画一个圆。(注意:不要转化为元件)
3、第20帧插入一个空白关键帧,画一个方块。
4、建立形状补间动画。
5、将元件应用到舞台,测试影片观看动画效果。
巩固练习:制作“圆——正方形——三角形——圆”的形状补间动画。
任务二 制作“你——好”形状补间动画
形状补间动画要求对象是分散的图形。( Tips : Ctrl + B可以快速分离所需分离对象)
任务三 制作“Hello——你好”的形状补间动画。
分离到什么效果才算可以呢?
巩固练习:将自己的名字形变成一同学的名字。
提交:班级+学号+姓名.swf文件。
任务一
①在“图像数字化.fla”中插入名为“标题”的影片剪辑元件,在第1帧输入英文标题“Image Digitization”,并适当调整位置。
②在第50帧插入空白关键帧,在相同的位置上输入中文标题“图像数字化”,并适当设置字号、字体等。
任务二
①选中英文标题“Image Digitization”,选择“修改”菜单中的“分离”命令,标题文本中的每个字符都会放入一个单独的文本字段中,如图10-1。
②再次选择“修改”菜单中的“分离”命令( Tips : Ctrl + B可以快速分离所需分离对象),将字符转换为形状,舞台上的标题则已完全分离,如图10-2。
③用相同的方法分离中文标题“图像数字化”。
④创建形状补间动画——在起始帧和结束帧之间的任意帧上单击,设置属性面板中的“补间”为形状即可。此时时间轴面板的背景色呈淡绿色,在起始帧和结束帧之间有一条带箭头实线。
任务三
将标题元件应用到舞台,播放动画。
拓展:完成一个“Flash”逐字母显示的动画。
探索:制作“烟花绽放”的动画。
作品分析:
烟花点燃上升的过程:动作补间,对象必须是元件。
烟花绽放的过程:形状补间,对象必须是完全分离的散点。
要求:在新建的影片剪辑元件中创作,最后将元件应用到舞台,测试影片观看效果,提交:班级+学号+姓名(烟花).swf。
操作步骤:
新建影片元件1,做烟花上升的动作补间;
新建影片元件2,做烟花绽放的形状补间;
元件放到舞台,分图层。