flash优质课教案.docx
- 文档编号:9460238
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:23
- 大小:423.33KB
flash优质课教案.docx
《flash优质课教案.docx》由会员分享,可在线阅读,更多相关《flash优质课教案.docx(23页珍藏版)》请在冰豆网上搜索。
flash优质课教案
哈尔滨科学技术职业学院
理工系
教案
课程名称:
《网页制作技术教程----flash基本操作》
授课教师:
韩绍鑫
教学时间:
2010年12月8日第三节
授课班级:
09级动漫3班(五年制网络)
学科
网页三剑客
班级
2009级(五)网络
任课
教师
韩绍鑫
课时
1
授课
时间
2010-12-8
第三节
课题
Flash基本操作---5.2.2时间轴5.2.5动作补间动画5.2.6形状补间动画
教学目标及
要求
1、掌握Flash的基本操作
2、掌握Flash时间轴的分类与使用
3、了解Flash动画的制作原理和基本方法
4、掌握简单动画的创建方法
教学重点
∙理解时间轴上帧的类别及作用
∙在动画中灵活运用实例制作动画
∙制作补间动画
教学难点
综合运用
教学用具
多媒体网络教室NewClass教学平台
教学方法
实例演示、任务驱动、案例教学
板
书
设
计
5.2Flash基本操作
5.2.2时间轴
5.2.3元件与库
5.2.5动作补间动画
5.2.6形状补间动画
课后追记或
小节
教研室主任签字
步骤
教学阶段任务
教学内容与教学方法
学生活动形式
教
学
过
程
复习:
巩固学过的知识点
组识教学:
同学们好,今天我们来继续学习flash动画设计的动画创建部分。
在开始学习之前,先来复习上堂的主要内容。
复习:
上节课我们学习了Flash的基本绘图,通过一些小任务学习了基本图形的绘制方法。
我们现在共同回忆一下在任务中都用到了哪些工具和操作方法。
第一个,线条工具。
按住Shift键拖动鼠标可以绘制水平、垂直或45度角的水平线。
第二个,椭圆、矩形和多角星形工具。
使用铅笔和线条工具绘制的是一个对象,而用矩形和多角星形工具绘制出的是有填充的图形,由两个对象组成:
一个是轮廓线,另一个是填充。
另外,在对象绘制模式下绘制的图形,自动合成一个整体,不会出现两个对象的现象。
按住SHIFT即可绘制正圆或正矩形。
第三个,我们学习了用颜料桶工具,填充颜色或渐变色;用墨水瓶工具填充边线。
第四个,学习了用Ctrl+G进行群组。
作用是可以避免因误操作将图形的部分移动,删除和改变形状等。
第五个,学习了两个对象一个中心点如何对齐,按住Shift选中两个对象,使用对齐命令,但不要选中相对于舞台,直接单击水平居中和垂直居中即可。
第六个,制作风车图案时,用到了“修改”--“变形”命令,将图象变形。
以上就是我们上节课学过的基本工具及其操作使用的方法。
本节课我们要学习创建动画的方法和如何创建制作动画所必需的重要元素。
温故而知新
1、讲授新知识
3、易思网络教学:
新课讲解:
打开flash文件,创建一个新的文档。
知识点1:
5.2.2认识时间轴
时间轴又称时间线,用来贯穿和组织每个影片的内容,而使之成为一个完整流畅的动画。
与电影中的胶片一样,flash影片播放的基本单位叫做帧。
一帧就是一幅画面。
一帧帧画面按一定的速率播放,就形成了动画。
时间轴窗口:
其中,有许多图层和帧单元格,每一行表示一个图层,每一列表示一帧。
其中各个帧的内容会不同,不同的帧表示了不同的含义。
(1)空白帧:
也叫帧。
该帧内容是空的,没有任何对象。
也不可以在其内创建对象。
(2)空白关键帧:
帧单元格内有一个空心的圆圈。
表示它是一个没有内容的关键帧。
新建的文件,会在第1帧自动创建一个空白关键帧。
该帧可以创建各种对象。
(3)关键帧:
帧单元格内有一个实心的圆圈,表示该帧内有对象,可以进行编辑。
选中其后的某一帧,再按F6键,可能创建一个关键帧。
(4)普通帧:
在关键帧右边的浅灰色背景帧单元格是普通帧,表示它的内容与左边的关键帧内容一样。
接下来我们就通过时间轴来学习帧-帧动画的操作。
[任务5-2-1]逐帧动画----奔跑的豹子。
执行控制菜单中的测试影片命令,(观看影片奔跑的豹子)
介绍:
动画开始播放了,有一只矫健的豹子在不停奔跑着。
这是一个利用连续导入位图而创建的逐帧动画,下面我们来看看它是怎么做的。
演示教学:
(1)首先我们准备好动画的“序列”图片。
(2)执行文件菜单中的“新建”命令,弹出“新建文档”对话框,选择“flash文档”,单击“确定”按钮。
新建一个影片文档,在“属性”面板中,单击大小右边的“按钮”弹出文件属性对话框,设置“宽度”为400像素,“高度”为260像,选择“背景颜色”为白色,设置完后单击确定。
(3)选中第一帧,执行“文件”菜单中“导入”――“导入到舞台”命令,弹出“导入对话框”,选中“奔跑的豹子1”图像,单击“打开”按钮,弹出一个“提示对话框”,寻问我们是否导入序列中的所有图像,如果选择“是”,表示将导入同一目录中的所有图像。
图像已被导入到了flash中,拖动“播放头”,我们看到了,图片序列被分到了8个关键帧中,每一帧为一幅图片。
制作此类动画时,我们也可以在每一帧中绘制不同的图形,以形成动画。
(4)我们需要把图像移动到合适的位置上去,按下时间轴下方的“编辑多个帧”按钮,再单击“修改绘图纸标记”按钮,在弹出的菜单中,选择“绘制全部”选项,执行“编辑”菜单中的“全选”命令,拖到图片到舞台的合适位置处,可以看到8个关键帧中的图像被一起拖动了,单击“编辑多个帧”按钮,使动画退出编辑多个帧的状态,一个逐帧动画就制作完成了。
(5)来测试一下效果吧,执行“控制”菜单中的“测试影片”命令,观赏完后,单击右上角的“关闭”按钮,关闭播放窗口。
执行“文件”菜单中的“保存”命令,并导出影片。
请同学们做练习。
(可作为作业任务完成)[任务5-2-2]
Flash:
帧动画——眨眼
下面就通过一个小实例来更深的了解下这些帧吧,就拿眨眼睛来说吧。
^0^
新建一个Flash文档,一般来讲,对于新建的文档,如果有必要的话,就设置下属性,没必要的话,一般都按默认的就可以了。
新建的文档和新建的图层,第一帧都是空白关键帧。
先把默认的图层1重命名为眨眼睛,在做动画的时候,给图层重命名是一个良好的习惯,这样方便在做到图层多的时候,不会弄乱了。
好了,在第一帧画上眼睛先,空白关键帧一但有内容,就自动变成关键帧了的。
把画好的眼睛选起来,按CTRL+G组合下。
在第2帧上右击,插入关键帧,或是直接按F6,这里,会发现,原来的眼睛还在,没关系,在原来的眼睛的位置再画上闭着的眼睛,把原来睁着的眼睛删掉。
好了,这时候按Ctrl+Enter测试下,是不是发现,这,眨得好快,几乎看不出来了。
是了,因为12帧为一秒,这一秒要帧多少下了,能看得出才怪了,所以,下面就要用到帧了~
因为我们画好了的,那就用鼠标左键点住第2帧不放,往后拉,发现了没有,第1帧和原来的第2帧中间自动延长了帧,也就是自动插入了帧。
因为我们画好了的,那就用鼠标左键点住第2帧不放,往后拉,发现了没有,第1帧和原来的第2帧中间自动延长了帧,也就是自动插入了帧。
再测试下发现这回好多了,就是,这眨下去后一闪就恢复了,那么,也在原来的第2帧后面插入两帧使其更自然吧。
像我这里,15帧是闭着眼睛的,那么,我在17帧按F5插入帧,或是右击插入帧就可以了。
这时再测试下~嗯,是不是像眨眼睛的了呢~
知识点2:
5.2.3元件与库
学习要点:
元件和实例是创建flash动画的重要元素。
元件存放在元件库中,将元件从元件库中取出并拖放到舞台上,就生成了该元件的实例,并作为元件的引用。
元件保存在库中,可作为共享库资源在文档之间共享,以便更容易地创建动态的且密集的flash影片。
下面介绍元件
元件有3种:
影片剪辑元件、图形元件、按钮元件。
图形元件:
可反复取出使用的图片,用于构建动画主时间轴上的内容,好像刚才制作的奔跑的豹子动画,(将奔跑的豹子动画打开)然后新建文档,在共享库中找到奔跑的豹子原文件。
将图转换为图形元件。
图形元件一般是只含一帧的静止图片,有时也可以制作成由多个帧组成的动画。
但它不具有交互性。
它就好比剧中群众演员,是一些普通的静态图形。
按钮元件:
用于创建响应鼠标单击、滑过和其他动作的交互式按钮。
它就好比特殊演员,可以实现交互动画。
影片剪辑元件:
可以反复取出使用的一段小动画,可独立于主动画进播放。
具有交互性。
它就好万能演员,是自成一格的实例小动画。
影片剪辑实例在主时间轴上只需要“一个”关键帧就可以播放动画,而图形实例在主时间轴上需要足够的帧才可以播放动画。
接下来,在了解了元件的基础上我们进一步来学习它在制作补间动画中的具体应用。
知识点3:
5.2.5动作补间动画
动画可以分成逐帧动画和补间动画两类。
逐帧动画也叫“帧-帧动画”,它需要定义每一帧的内容,以完成动画的创建。
我们前面制作的两个动画就属于这一类。
在补间动画中,用户只需要创建起始帧和终止帧的内容,中间的帧由计算机来创建。
在FLASH中,补间动画又分为动作补间动画和形状补间动画。
下面通过任务来讲解动作补间动画的制作方法。
[任务5-2-3]制作动作补间动画(动态的圣诞场景)(观看影片实例动作补间动画1.swf)
[操作要求]
新建flash文档,制作“动画”影片剪辑元件,该元件的动画方式为:
圣诞老人从左向右运动,且运动速度逐渐减慢。
[操作步骤]
(1)新建文档。
选择文件菜单下的导入到舞台命令,将“圣诞图1”
导入到舞台中央。
(可以调整画布大小与图片大小相符并对齐)。
(2)新建元件。
选择“插入”----“新建元件”命令或按组合键ctrl+F8,创建一个“动画”影片剪辑元件,即进入“动画”元件的编辑状态。
(3)制作动作补间动画。
a.制作起始帧。
选中第一帧将“圣诞图2”导入到库中,从库中将图片拖至舞台工作区,并移到舞台的左上方。
b.制作终止帧。
选中第40帧并右击,在弹出的帧快捷菜单中选择“插入关键帧”命令,或按快捷键F6,这时第40帧的小格中会出现一个黑色实心圆点。
将“图片”从舞台左上方移到右下方。
c.创建补间。
选中第1帧到第39帧之间的任何一帧,右击,在弹出的帧快捷菜单中选择“创建补间动画”命令,或在“属性”面板中的“补间”下拉列表框中选择“动画”。
在“缓动”下拉列表框中,选择输入一个正值,使图像运动速度逐渐减慢(提示:
如果是负值,则运动速度逐渐加快)。
动画制作完成,按回车键可以检查动画的运行情况。
制作完成的动作补间动画的关键帧之间有一个箭头,背景为淡蓝色。
(4)在主场景中添加“动画”元件实例。
回到主场景,将图层1锁定,将元件从“库”面板中拖动到舞台工作区中。
(5)测试影片,保存文档。
接下来请同学们练习。
5.2.6形状补间动画
通过形状补间可以实现一幅图形变为另一幅图形的效果。
形状补间和动作补间的主要区别在于,形状补间不能应用到实例群组等组合的对象上,必须是“被打散”的形状图形之间才能产生补间。
下面通过任务来讲解形状补间动画的创建方法。
(其中会增加文本工具使用的学习)
[任务5-2-4]制作形状补间动画(动态的圣诞贺卡)(观看影片实例形状补间动画1、2)
[操作要求]
新建文档。
创建文字的变形动画,背景图上有一个橙色的文本圣诞快乐,红色的文字在变形,“圣”逐渐变为“诞”,“诞”逐渐变为“快”,“快”逐渐变为“乐”
[操作步骤]
(1)新建文档。
(2)添加背景图片。
选择“文件”—“导入”—“导入到舞台”命令,将素材圣诞图2导入到舞台上。
调整图片及舞台尺寸为500*800,并对齐。
锁定图层。
(3)创建橙色的文本。
在“图层1”上新建一个“图层2”。
单击工具箱中的“文本工具”按钮,在“属性”面板中设置文本类型为“静态文本”,字体为ComicSansMS,字体大小为72,颜色设为橙色(#ff9900),在舞台上单击后输入文本圣诞快乐。
选中文本,复制。
然后锁定图层。
(4)创建“动画”影片剪辑元件。
选择“插入”—“新建元件”创建一个“动画”影片剪辑元件,在舞台工作区中按ctrl+v,将文本粘帖到舞台上。
将文本颜色调整为橙红色(#ff3300),按两次Ctrl+B对文本进行分离。
分离后的文本被选中时呈小点状,此时静态文本变成了形状。
(5)制作形状补间动画。
a.制作关键帧。
选中第5帧,按F6插入一个关键帧,用同样的方法在第10、15帧各插入一个关键帧。
选中第1帧,只留下“圣”,删除其他内容。
用同样的方法在第5、10、15帧分别只留下“诞”、“快”、“乐”。
b.创建补间。
选中第1帧到第4帧之间的任何一帧,在“属性”面板中的“补间”下拉列表框中选择“形状”。
第一段由“圣”变为“诞”的动画制作完成。
用同样的方法制作后面3段动画。
制作完成的形状补间动画的关键帧之间有一个箭头,背景为淡绿色。
动画制作完成,按Enter键可以在编辑状态下检查动画的运行情况。
(6)在主场景中添加“动画”元件实例。
回到主场景中,在图层2上添加一个图层3 ,从库面板中将“动画”拖动到舞台工作区中。
将“动画”实例的“圣”字与“图层2”中的“圣”字重合。
(7)测试影片,保存文档。
接下来请同学们练习。
小结:
今天我们认识了时间轴上的各种帧。
一帧帧画面的连续播放,形成了动画。
动画又分为逐帧动画和补间动画两种。
补间动画只需创建起始帧和结束帧,而让Flash创建中间帧。
在创建动作补间时,在一个时间点定义对象的位置,大小等属性,然后在另一个时间点上改变这些属性。
在创建形状补间时,补间形状就是变形,跟补间动作一样,也可以是位置,尺寸和颜色的变化,但更主要的是形状的改变。
与动作补间不同的是,形状补间的对象是“分离”的可编辑图形。
在创建动作补间和形状补间动画时我们还使用了元件以及文本工具,我们还会把今后的学习中将另外两种元件也应用到动画的制作当中去。
作业:
[操作要求]制作一个补间动画
要求创建影片剪辑元件,元件的动画方式不限。
制作包含文字,图片等元素的圣诞宣传动态广告。
理解
领会
听讲
笔记
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flash 优质课 教案