Flash网页动画设计.docx
《Flash网页动画设计.docx》由会员分享，可在线阅读，更多相关《Flash网页动画设计.docx（29页珍藏版）》请在冰豆网上搜索。
Flash网页动画设计
《Flash网页动画设计》课程整体教学设计
一、管理信息
课程名称：
《Flash网页动画设计》制定时间：
2013.9.1
课程代码：
所属部门：
经济贸易系
制定人：
郑金萍审核：
二、基本信息
学分：
6 课程类型：
电子商务专业的主干课程
学时：
120 先修课程：
《PhotoShop图像处理》
后续课程：
《网页制作》授课对象：
电子商务专业二年级学生
三、课程设计
1．课程目标设计
（1）能力目标
总体能力目标：
能够利用MacromediaFlashcs5软件制作二维动画；能够对文本、图像、声音等多种媒体进行集成，借助Flash的ActionScript的交互控制功能，制作Flash动画广告短片、MTV、网站等有动感的适于在网上传播、展示的各类作品。
单项能力目标：
序号
单项能力目标
1
课程相关软件的应用能力
会下载、安装Flash软件
会使用FlashGet软件获取网络上的SWF文件
2
静态矢量图形的绘制能力
能使用绘图工具绘制图形，能对已有的图像作修改。
能制作不同效果的文字。
能灵活应用库及库中图形元件，实现集成化制图。
3
帧动画的制作能力
能利用不同性质的帧制作逐帧动画。
能做物体的变形动画，适当使用变形控制点。
能制作移动动画，灵活实现平移、缩放、转动等动画效果。
4
图层动画的制作能力
能使用引导层制作引导动画
能够使用遮罩层制作遮罩图像的效果和具有遮罩效果的动画。
5
外部媒体的集成能力
能在作品中添加声音，设置音频的效果等属性。
会加入视频，并制作简单的播放控制。
6
ActionScript代码编写能力
会制作按钮，能编写按钮的鼠标单击等触发动作。
会一些基本的ActionScript语句，控制影片流程，实现人机交互效果。
（2）知识目标
序号
知识目标
1
了解Flashcs5的用途、优点，熟悉Flashcs5的基本工作环境。
2
掌握Flashcs5的工作界面、菜单、工具面板、属性面板以及各种控制面板的布局方式和使用方法。
3
掌握基本绘图工具的使用方法。
4
掌握元件编辑窗口的打开方法、使用方法、关闭方法。
5
正确理解Flashcs5的基本术语。
6
掌握绘画工具的使用、辅助选项和属性的设置。
7
掌握文本的输入与编辑，文本的打散与分离的方法。
8
了解常用的文字编辑、修饰方法。
9
掌握颜色的编辑，笔触和填充的设置与编辑方法。
10
了解标尺和网格线的使用方法。
11
掌握Flashcs5时间轴的概念、时间轴中各元素的功能及操作方法。
12
掌握不同性质帧的使用与编辑方法。
13
了解逐帧动画的原理。
14
掌握元件与实例的概念、创建与编辑方法。
15
了解Flashcs5图层的概念，掌握创建图层以及编辑图层的方法。
16
掌握形变动画的创建方法。
17
掌握位移动画中平移、缩放、转动动画的创建方法。
18
理解引导层与运动引导层的概念，创建、编辑引导层与运动引导层的方法。
19
理解遮罩层的含义，掌握创建遮罩层的方法。
20
掌握鼠标拖动等常用的ActionScript语句。
21
掌握Flashcs5交互中的事件与动作的概念，熟悉Flashcs5常用的事件和动作。
22
了解声音导入时的注意事项。
23
掌握在动画中添加声音的操作方法以及设置动画声音的各种属性。
24
了解有关声音的ActionScript语句及声音的编辑方法。
25
掌握场景的切换方法。
2．课程内容设计
模块名称
学时
认识Flash，熟悉软件界面与基本工作环境
6
图形图像处理及文字编辑
12
逐帧动画的制作
6
形变动画技术
12
移动动画制作
6
特殊移动动画（引导动画和遮罩动画）制作
24
元件的应用
18
声音处理技术
6
Flashcs5动作脚本语言的使用
6
Flashcs5外部插件及周边软件介绍
6
Flashcs5应用实例：
动画广告、MTV、网站等
18
3．能力训练项目设计
项目序号
能力训练
项目名称
实现的能力目标
训练方法手段与步骤
项目
（可展示）
1
基础绘画及动画部分
项目一：
初识 Flash
学习目标：
了解flash的历史发展及应用领域；学习掌握flash的安装与运行；熟悉flash的操作环境 ；详细介绍工作环境中的菜单、工具、面板。
项目二：
绘图
学习目标：
了解绘图工具的概念；掌握绘制线条、对象、形状的方法；学会使用变形功能；掌握着色工具的使用方法；了解橡皮擦工具的擦除模式。
项目三：
如何在动画中使用文字
学习目标：
认识flash中的文本类型，学会创建文字链接，使用文本工具制作乐队海报。
1.利用时间轴特效制作简单动画。
2.绘制线条：
立方体、卡通螃蟹。
绘制形状 ：
流氓兔邮票、八卦图、商标、卡通海星，简易 LOGO。
3.绘制形状综合案例“蘑菇房屋”。
4.学会使用变形功能制作夸张的图形效果：
旋转与倾斜和缩放、使用变形面板、扭曲与封套变形。
5.学会着色工具的使用：
用墨水瓶工具为水兽描边、用颜料桶工具为猫换颜色、使用填充变形工具绘制蜻蜓。
6.掌握橡皮擦工具的不同擦出模式。
展示每次实训的效果，并进行互评，自评
2
动画的简单应用
项目四：
初级动画制作
学习目标：
学会制作逐帧动画；学会制作动作补间动画；学会制作形状补间动画；了解动画的优化、测试和发布。
项目五：
引导层和蒙板层在动画中的应用
学习目标：
使用引导层制作花体字动画；使用引导层制作萤火虫动画；使用蒙版制作流动的炫彩文字；使用蒙版制作热气腾腾的水纹 。
1.行走中的人
2.新旧照片、旋转雷达
3.公鸡变凤凰
4.使用引导层制作花体字动画。
5.使用引导层制作飞舞的萤火虫。
6.使用蒙版制作流动的炫彩文字。
7.使用蒙版制作热气腾腾的水纹特效。
展示每次实训的效果，并进行互评，自评
3
动画的综合应用
项目七：
ActionScript动画
学习目标：
了解ActionScript语言；学会使用动作面板；学会ActionScript基本语法；利用脚本制作网页按钮；利用脚本制作鼠标特效动画；利用脚本制作全屏动画；利用脚本制作载入动画；利用脚本制作气泡效果导航动画。
项目八：
高级音频制作
学习目标：
通过学习，掌握添加及编辑音频的方法。
项目九 ：
综合动画的制作
学习目标：
为了全面掌握制作动画的技巧，温习巩固所学的知识。
1.利用goto,play,stop,和getURL制作网页按钮。
2.鼠标特效制作：
隐藏鼠标指针、鼠标拖拽动画、。
3.全屏动画制作。
4.Loading动画的制作。
5.制作气泡效果的导航动画。
6.制作声音控件动画。
7.制作打击乐器动画。
8.制作音乐盒动画。
9.生日贺卡/新年贺卡的制作
展示每次实训的效果，并进行互评，自评
4.进度表设计
序号
学时
教学目标和主要内容
单元标题
能力目标
能力训练项目编号
知识目标
1
6
制作一个简单的Flash逐帧动画
1.学会Flashcs5软件的下载与安装。
2.能新建动画文档，保存文档，生成默认设置的影片文件。
3.认识Flash的工作界面，能熟练操作菜单、工具栏、属性面板。
4.能使用绘图工具绘制图形。
1
1.Flashcs5软件的下载与安装。
2.菜单、工具栏、属性面板与常用浮动面板介绍。
2
6
Flash中绘图工具的应用
（一）
1.掌握使用选择工具选择并修改节点和图形。
2.掌握椭圆工具和矩形工具的使用并掌握分离图形的融合与切割操作。
3.掌握直线工具、铅笔工具的使用。
4.掌握利用颜料桶工具进行单色填充的操作；掌握用墨水瓶工具绘制线条的操作。
5.能使用对齐工具、变形工具及菜单处理图形。
1
1.熟悉椭圆、矩形、多边形与星形、直线、铅笔、墨水瓶、颜料桶等基本绘图工具的使用方法、相关属性。
2.熟悉变形工具、对齐面板的功能与用法。
3
6
Flash中绘图工具的应用
（二）
1.掌握并使用选择工具选择并修改节点和图形。
2.能正确地设置与编辑笔触、擦除效果和填充颜色，能设置各种颜色效果。
3.能正确使用钢笔工具绘制任意形状的图形。
1
1.熟悉刷子、钢笔、颜料桶等基本绘图工具的使用方法、相关属性。
2.熟悉变形工具、对齐面板、调色面板的功能与用法。
4
6
第一阶段综合操作能力实训
制作逐帧动画，检查第一个项目的教学效果。
1
能综合调用第一个项目涉及的知识与操作，并加以灵活应用。
5
6
形变动画原理及应用
（一）
1.能用形变动画制作物体的变形。
2.应用层实现叠加效果。
2
1.掌握形变动画的原理与方法。
2.初步掌握图层的类型与使用方法。
6
6
形变动画原理及应用
（二）
1.能通过控制形变实现特殊的形变效果。
2
1.了解形变提示点的作用与使用方法。
2.初步掌握图层的类型与使用方法。
7
6
动变动画原理及应用
1.能将场景中静态对象转换成图形元件。
2.能创建和编辑图形元件。
3.能熟练调用图形元件，并编辑调用后实例的相关属性。
4.能制作动变动画，灵活实现平动、转动、缩放、变色调等动画技术。
5.能通过图层实现效果的叠加。
2
1.了解运动渐变动画的原理。
2.掌握动变动画的制作方法。
3.掌握图形元件的含义。
4.熟练掌握图形元件的转换、创建及调用方法。
5.掌握动变属性的设置方法。
6.熟练掌握图层的类型与使用方法。
8
6
第二阶段综合操作能力实训
制作形变、动变综合应用的网站动感广告，检查第二个项目的教学效果。
2
能综合调用第二个项目涉及的知识与操作，并加以灵活应用。
9
6
引导运动
1.能利用引导线实现动画的单层引导。
2.能实现形如行星绕地球转动的环形引导。
3.能利用一个引导层实现动画的多层同步引导。
4.能利用一个引导层实现动画的多层非同步引导。
3
1.掌握引导层的特殊含义。
2.掌握引导线的使用技巧。
3.巩固平动、转动等动画技术并能综合应用。
10
6
遮罩技术
（一）
1.能利用静态遮罩技术，实现各种特殊的效果。
2.能利用动态遮罩技术，实现简单的特殊效果。
3
1.正确理解遮罩的含义与作用。
2.掌握静态遮罩方法。
3.掌握动态遮罩的方法。
11
6
遮罩技术
（二）
1.能利用动态遮罩技术，实现动态图片过渡效果。
2.能利用动态遮罩技术，实现其他复杂的特殊效果。
3
1.进一步掌握动态遮罩的方法。
2.了解并尝试复杂遮罩制作方法。
3.了解遮罩与引导结合的技术。
12
6
引导与遮罩的综合应用
能完成山东省潍坊商业学校网站首页的头部动画制作。
3
1.深入理解引导层动画的概念及应用。
2.深入理解遮罩层动画的概念及应用。
3.领会网页头部动画设计的思路与方法。
13
6
影片剪辑元件的创建与应用
1.能制作简单的影片剪辑元件。
2.能制作各种特殊效果的影片剪辑元件。
3
1.掌握影片剪辑元件的含义与作用。
2.掌握影片剪辑元件的创建和编辑方法。
3.掌握影片剪辑元件的应用操作。
14
6
声音处理技术
1.音乐的准备与编辑；音乐的导入与设置。
2.加入歌词。
3.能在作品中添加声音，设置音频的各种属性。
3
掌握Flashcs5中声音处理的技术。
15
6
按钮元件的制作
（一）
1.认识按钮元件。
2.能熟练使用工具组绘制各种形状按钮。
3.能熟练地制作三态按钮。
3
1.掌握按钮元件四个关键帧的含水。
2.掌握按钮的制作方法。
16
6
按钮元件的制作
（二）
1.能制作隐形按钮。
2.能在“指针经过”状态加入MC实现动画按钮。
3
1.了解隐形按钮的原理。
2.掌握隐形按钮的实现方法。
3.掌握具有交互动画效果的特殊按钮制作方法。
17
6
Flashcs5行为脚本语言应用
1.能熟练编写跳转类ActionScript语句。
2.能用设置鼠标对象的方法来改变鼠标状态。
3.能利用ActionScript语句实现简单的人机交互。
4.能够理解ActionScript语句的含义。
3
1.进一步掌握脚本的相关知识。
2.掌握关于鼠标对象的方法mouse.hide（）
3.掌握关于影片剪辑控制的方法：
startdrag,stopdrag.④掌握关于影片剪辑对象的属性：
setproperty,getproperty。
18
6
综合操作能力实训
能完成山东省潍坊商业学校网站欢迎页面的轮显广告。
3
掌握用ActionScript脚本语言制作动态网站装载进度的制作方法。
19
6
组件的使用
能使用常用组件制作简单的网站留言板。
3
1.了解组件的类型。
2.掌握常用组件的功能与用法。
20
6
综合操作能力实训
期末考试综合要求
1.能利用Flashcs5的各类动画制作技术设计网站装载进度动态显示效果。
2.能利用Flashcs5的各类动画制作技术设计网站欢迎页面。
3.能利用Flashcs5的各类动画制作技术制作网站头部动画。
4.能利用Flashcs5的各类动画制作技术制作网站动态效果导航条。
5.能通过场景切换和元件调用实现作品的连缀。
6.能完成司网站进入页面、产品展示、网页头部动画及首页导航条的制作。
3
1.综合应用Flashcs5动画制作技术。
2.综合应用各类其他课程相关知识。
3.本课程一学期所学的所有相关知识，以及课外自主学习能力、独立完成能力等。
5.第一次课设计梗概（2课时）
（1）铺垫
①展示精选Flash经典作品。
类型包括：
动感广告、MTV、故事短片、课件、网站、特色片段，重点展示企业网站中的优秀动画作品。
目的：
让学生认识到Flash软件的强大功能，在于引发学生浓厚的学习兴趣。
②介绍从事动画设计的优秀毕业生。
目的：
使学生明确学习本课程的目标，指导学生就业。
③告知学生本课程的总体教学安排、课内外学习方式、学习资源网站，介绍Flash的安装方法。
目的：
使学生明确本课程学习任务，从基于工作过程的学习任务中找到成就感，为以后就业打下坚实的基础；课外有学习平台和软件环境，能自主学习。
④介绍课程考核方式。
目的：
主要告知学生功在平时，平时成绩占总分30%。
实训时的表现、课后的实训作业、阶段的综合实训项目、小组讨论学习的情况和出勤的情况等都是平时成绩的重要组成部分。
（2）进入正题。
①完成基本能力训练：
一个简单的逐帧动画，作品名称为“欢迎进入闪客世界”。
教学实施过程：
首先，师出示“欢迎进入闪客世界.SWF”文件，介绍主要实现的关键技术，示范实现过程。
并在示范过程中，使学生熟悉时间轴、面板、工具栏和部分菜单等Flash基本工作界面的操作，掌握制作一个Flash所需的完整操作流程。
接着，生完成“欢迎进入闪客世界”动画文件，文字内容生自己创意，不必和示例相同。
师巡回指导，并从中了解学情。
②完成拓展能力训练：
在前一作品的基础上，略微提高一点难度，即关键技术是逐帧加简单遮罩，作品名称为“Flash学习之旅”。
教学实施过程：
首先，让学生分组讨论动画效果的变化之处和技术上的解决办法。
接着，开展分组抢答的方式，以归纳技术要点和操作要领。
师从中了解学情。
然后，师根据学生讨论学习的情况作出点评，并对遮罩技术重点讲解
接着，生完成拓展能力训练“Flash学习之旅”动画文件，文字内容生自己创意，不必和示例相同。
师巡回指导，再次并从中了解学情。
最后，师归纳本次课学习要点，展示下次课学习任务，布置课外预习内容。
四、考核方案设计
1．基本思路
（1）本课程操作性强，鉴于平时学习过程、实训操作的重要性，考核以平时课堂表现、课后训练为主，基于过程的期末考试为辅的形式。
具体比例如下：
平时成绩占总分30%，采分依据主要来自于考勤（5%）、课内课外完成的作品质量和数量（20%）、理论作业（5%）。
期中考试成绩占30%。
期末考试采用基于过程的上机操作方式，占总分的40%。
（2）课程设计与课程名称——“网页动画设计”紧紧相扣，每个课程项目都是网络动画的一个应用方面，期末的课程设计重点在于检验学生通过一个学期的学习，对Flash动画制作各项技术的综合应用能力，时间安排的期末最后两个星期。
（3）制作的作品要求包括：
设计并制作网站装载进度动态显示效果、网站动画欢迎页面、网站动态头部动画、网站动态效果导航条等，并能通过场景切换和元件调用实现作品的连缀。
要求：
①界面规范、美观。
②运行流畅。
③ActionScript代码的规范（含格式）。
④作品用到的技术全面（含图像制作、形变、运动渐变、逐帧、引导、遮罩、按钮、音效等）。
⑤结构、方法合理。
⑥有自己的创意。
⑦独立、按时完成。
2．评分标准
评分标准编号
评分标准内容
所占分数
1
作品能够实现大作业所要求的主要功能
20
2
界面规范、美观，布局合理。
10
3
作品中用到的技术全面（含图像制作、形变、运动渐变、逐帧、引导、遮罩、按钮、音效等）。
30
4
自主设计的部分质量、数量情况。
30
5
用到了课堂外的方法、技术
10
五、教材、资料
教材：
郑芹.Flash动画设计.北京：
电子工业出版社，2008
参考资料：
1．李冬芸.Flash动画实例教程.北京：
电子工业出版社，2010
2．王圣强.中文版FlashMX实用教程.北京：
北京希望电子出版社
3．网上的各种素材和作品
《Flash网页动画设计》课程单元教学设计
——《引导层与遮罩层动画的综合应用》
一、教案头
本次课标题：
引导层与遮罩层动画的综合应用
授课班级
10计算机
（2）
上课时间
2课时
上课地点
理工北楼410机房
教学目标
能力（技能）目标
知识目标
①能熟练利用引导层实现多层动画引导效果。
②能熟练利用动态遮罩技术，实现特殊动画效果。
③提高引导层动画和遮罩层动画的综合应用能力。
①深入理解引导层动画的概念及应用。
②深入理解遮罩层动画的概念及应用。
③领会网页头部动画设计的思路与方法。
能力训练任务及案例
任务1：
课内仿照制作网页头部动画。
任务1-1：
实现遮罩层动画——“光线划过”文字动画
任务1-2：
实现引导层动画——“飞鸟”引导层动画
任务1-3：
动画合成
任务2：
课外设计潍柴网站首页头部动画。
任务2-1：
实现遮罩层动画——“光线划过”公司LOGO动画
任务2-2：
实现引导层动画——“闪耀之光”引导层动画
任务2-3：
动画合成
参考资料
参考资料：
1．李冬芸.Flash动画实例教程.北京：
电子工业出版社，2010
2．王圣强.中文版FlashMX实用教程.北京：
北京希望电子出版社
3．网上的各种素材和作品
二、教学设计
步骤
教学内容
教学方法
教学手段
学生活动
时间
分配
告知
（教学内容
教学目的）
本次课主要教学内容：
引导层与遮罩层动画的综合应用。
教学目的：
熟练掌握引导层和遮罩层动画制作技术及综合应用能力。
讲授
课件
3
分钟
引入
（任务项目）
①展示普通图层综合应用学生优秀作品。
②演示案例，引入新课：
案例：
衢职院校园公告网页。
③课前预习检查。
演示
任务驱动
学生优秀作品展示
任务演示
预习作业个案展示
5
分钟
操练
（基本能力）
①分析任务1设计思路。
②关键技术解析：
A．“光线划过”遮罩动画实现：
Ø“文字”元件的制作：
滤镜效果的运用、图层的应用。
Ø“光”元件的制作：
颜色面板Alpha的运用、变形工具的使用。
Ø“文字遮罩”元件的制作。
B.“飞鸟”引导层动画实现：
Ø“鸟”元件的制作：
图形工具的使用、逐帧动画的应用。
Ø两只鸟沿路径飞翔效果的制作：
多层引导动画的应用。
启发
探究
实践
分组指导
案例演示
要领提示
分组讨论
抢答
分组制作
分组选派代表演示
20
分钟
深化
（加深能力）
任务1-1：
实现遮罩层动画（“光线划过”文字动画）
任务1-2：
实现引导层动画（“飞鸟”引导层动画）
任务1-3：
动画合成
演示
启发
实践
个别指导
要领示范
个别操练
15
分钟
归纳
（知识能力）
①遮罩层动画综合应用分析：
遮罩层与被遮罩层互换后的动画效果对比。
②引导层动画综合应用分析：
连续性动画的实现方法；场景调用引导层动画的方法。
讲授
设问
对比演示
课件
回答
2
分钟
训练
（拓展检验）
①讨论分析任务2设计思路。
②关键技术解析：
A．光线划过公司LOGO动画：
Ø“LOGO”元件的制作：
图片转换为元件、属性面板的使用。
Ø“光条”元件的制作：
变形工具的使用。
Ø光线划过LOGO效果的制作。
B.“闪耀之光”引导层动画：
Ø“星闪”元件的制作：
图形工具的使用、颜色面板、属性面板。
Ø“闪耀之光”沿着路径运动效果的制作：
引导层动画的应用、图形工具的使用。
启发
探究
实践
个别指导
案例演示
要领提示
分组讨论
回答
个别操练
35
分钟
总结
（知识能力
操作要领）
①强调遮罩层动画原理：
遮罩层决定显示的形状，被遮罩决定显示的内容。
②引导层动画可以引导影片剪辑元件。
③滤镜的使用场合和方法。
④应用翻转帧加快操作速度。
⑤妙用图形元件的Alpha属性。
⑥巧用一般动画的缩放效果。
讲授
设问
课件
回答
5分钟
作业
①拓展训练：
进入衢州美安普矿山机械有限公司网站，了解该公司企业文化和业务特点，为该公司设计网站首页头部动画。
②新课预习：
“影片剪辑元件的创建与应用”。
讲授
演示
课件
5分钟
后记
三、设计说明
1．安排本次教学内容的必要性。
我们在做本课程整体设计时，多次进行探讨，查阅资料，从众多优秀Flash作品中发现，引导层和遮罩层动画是实现生动、形象、复杂和妙趣横生动画的重要奠基石。
因此本次教学内容——“引导层与遮罩层动画的综合应用”，在整个课程教学环节中是必不可少的。
2．选择实训载体的科学性。
所有单元教学的实训载体，不拘泥于教材，以“基于工作过程”为宗旨，科学安排教学内容和实训项目。
实训项目有的是从网站下载的，有的是来自教学参考资料上的，也有的是我根据教学内容设计的。
各实训项目或生动有趣，或以实际网页动画为教学内容。
使枯燥乏味的绘图工具学习转变为学生都感兴趣的案例，有效地开发了学生的创新思维，进而使学生的学习兴趣更加浓厚；我在安排“动感广告”网页动画和本次课教学内容时，本着服务地方的原则，主要以山东潍坊的一些企业网站动画为教学载休。
3．教学过程充分挖掘学生的主观能动性。
学生是学习
升级会员 