Flash网页动画设计.docx

1、Flash网页动画设计Flash网页动画设计课程整体教学设计一、管理信息课程名称：Flash网页动画设计 制定时间：2013.9.1课程代码： 所属部门：经济贸易系制 定 人：郑金萍 审 核：二、基本信息学 分：6 课程类型：电子商务专业的主干课程 学 时：120 先修课程：PhotoShop 图像处理后续课程：网页制作 授课对象：电子商务专业二年级学生 三、课程设计1课程目标设计（1）能力目标总体能力目标：能够利用Macromedia Flash cs5软件制作二维动画；能够对文本、图像、声音等多种媒体进行集成，借助Flash的ActionScript的交互控制功能，制作Flash动画广告短

2、片、MTV、网站等有动感的适于在网上传播、展示的各类作品。单项能力目标：序号单项能力目标1课程相关软件的应用能力会下载、安装Flash软件会使用FlashGet软件获取网络上的SWF文件2静态矢量图形的绘制能力能使用绘图工具绘制图形，能对已有的图像作修改。能制作不同效果的文字。能灵活应用库及库中图形元件，实现集成化制图。3帧动画的制作能力能利用不同性质的帧制作逐帧动画。能做物体的变形动画，适当使用变形控制点。能制作移动动画，灵活实现平移、缩放、转动等动画效果。4图层动画的制作能力能使用引导层制作引导动画能够使用遮罩层制作遮罩图像的效果和具有遮罩效果的动画。5外部媒体的集成能力能在作品中添加声音

3、，设置音频的效果等属性。会加入视频，并制作简单的播放控制。6ActionScript代码编写能力会制作按钮，能编写按钮的鼠标单击等触发动作。会一些基本的ActionScript语句，控制影片流程，实现人机交互效果。 （2）知识目标序号知识目标1了解Flash cs5的用途、优点，熟悉Flash cs5的基本工作环境。2掌握Flash cs5的工作界面、菜单、工具面板、属性面板以及各种控制面板的布局方式和使用方法。 3掌握基本绘图工具的使用方法。4掌握元件编辑窗口的打开方法、使用方法、关闭方法。5正确理解Flash cs5的基本术语。6掌握绘画工具的使用、辅助选项和属性的设置。7掌握文本的输入与

4、编辑，文本的打散与分离的方法。8了解常用的文字编辑、修饰方法。9掌握颜色的编辑，笔触和填充的设置与编辑方法。10了解标尺和网格线的使用方法。11掌握Flash cs5时间轴的概念、时间轴中各元素的功能及操作方法。12掌握不同性质帧的使用与编辑方法。13了解逐帧动画的原理。14掌握元件与实例的概念、创建与编辑方法。15了解Flash cs5图层的概念，掌握创建图层以及编辑图层的方法。16掌握形变动画的创建方法。17掌握位移动画中平移、缩放、转动动画的创建方法。18理解引导层与运动引导层的概念，创建、编辑引导层与运动引导层的方法。19理解遮罩层的含义，掌握创建遮罩层的方法。20掌握鼠标拖动等常用的

5、ActionScript语句。21掌握Flash cs5交互中的事件与动作的概念，熟悉Flash cs5常用的事件和动作。22了解声音导入时的注意事项。23掌握在动画中添加声音的操作方法以及设置动画声音的各种属性。24了解有关声音的ActionScript语句及声音的编辑方法。25掌握场景的切换方法。2课程内容设计模块名称学时认识Flash，熟悉软件界面与基本工作环境6图形图像处理及文字编辑12逐帧动画的制作6形变动画技术12移动动画制作6特殊移动动画（引导动画和遮罩动画）制作24元件的应用18声音处理技术6Flash cs5动作脚本语言的使用6Flash cs5外部插件及周边软件介绍6Fla

6、sh cs5应用实例：动画广告、MTV、网站等183能力训练项目设计项目序号能力训练项目名称实现的能力目标训练方法手段与步骤项目（可展示）1基础绘画及动画部分项目一：初识Flash学习目标：了解flash的历史发展及应用领域；学习掌握flash的安装与运行；熟悉flash的操作环境；详细介绍工作环境中的菜单、工具、面板。项目二：绘图学习目标：了解绘图工具的概念；掌握绘制线条、对象、形状的方法；学会使用变形功能；掌握着色工具的使用方法；了解橡皮擦工具的擦除模式。项目三：如何在动画中使用文字学习目标：认识flash中的文本类型，学会创建文字链接，使用文本工具制作乐队海报。1.利用时间轴特效制作简单

7、动画。2. 绘制线条：立方体、卡通螃蟹。绘制形状：流氓兔邮票、八卦图、商标、卡通海星，简易LOGO。3. 绘制形状综合案例“蘑菇房屋”。4. 学会使用变形功能制作夸张的图形效果：旋转与倾斜和缩放、使用变形面板、扭曲与封套变形。5. 学会着色工具的使用：用墨水瓶工具为水兽描边、用颜料桶工具为猫换颜色、使用填充变形工具绘制蜻蜓。6. 掌握橡皮擦工具的不同擦出模式。展示每次实训的效果，并进行互评，自评2动画的简单应用项目四：初级动画制作学习目标：学会制作逐帧动画；学会制作动作补间动画；学会制作形状补间动画；了解动画的优化、测试和发布。项目五：引导层和蒙板层在动画中的应用学习目标：使用引导层制作花体字

8、动画；使用引导层制作萤火虫动画；使用蒙版制作流动的炫彩文字；使用蒙版制作热气腾腾的水纹。1. 行走中的人2. 新旧照片、旋转雷达3. 公鸡变凤凰4. 使用引导层制作花体字动画。5. 使用引导层制作飞舞的萤火虫。6.使用蒙版制作流动的炫彩文字。7. 使用蒙版制作热气腾腾的水纹特效。展示每次实训的效果，并进行互评，自评3动画的综合应用项目七：ActionScript动画学习目标：了解ActionScript语言；学会使用动作面板；学会ActionScript基本语法；利用脚本制作网页按钮；利用脚本制作鼠标特效动画；利用脚本制作全屏动画；利用脚本制作载入动画；利用脚本制作气泡效果导航动画。项目八：高

9、级音频制作学习目标：通过学习，掌握添加及编辑音频的方法。项目九：综合动画的制作学习目标：为了全面掌握制作动画的技巧，温习巩固所学的知识。1.利用goto,play,stop,和getURL制作网页按钮。2. 鼠标特效制作：隐藏鼠标指针、鼠标拖拽动画、。3. 全屏动画制作。4. Loading动画的制作。5. 制作气泡效果的导航动画。6. 制作声音控件动画。7. 制作打击乐器动画。8. 制作音乐盒动画。9. 生日贺卡/新年贺卡的制作展示每次实训的效果，并进行互评，自评4.进度表设计序号学时教学目标和主要内容单元标题能力目标能力训练项目编号知识目标16制作一个简单的Flash逐帧动画1. 学会Fl

10、ash cs5软件的下载与安装。2. 能新建动画文档，保存文档，生成默认设置的影片文件。3. 认识Flash的工作界面，能熟练操作菜单、工具栏、属性面板。4. 能使用绘图工具绘制图形。11. Flash cs5软件的下载与安装。2. 菜单、工具栏、属性面板与常用浮动面板介绍。26Flash中绘图工具的应用（一）1. 掌握使用选择工具选择并修改节点和图形。2. 掌握椭圆工具和矩形工具的使用并掌握分离图形的融合与切割操作。3. 掌握直线工具、铅笔工具的使用。4. 掌握利用颜料桶工具进行单色填充的操作；掌握用墨水瓶工具绘制线条的操作。5. 能使用对齐工具、变形工具及菜单处理图形。11. 熟悉椭圆、矩

11、形、多边形与星形、直线、铅笔、墨水瓶、颜料桶等基本绘图工具的使用方法、相关属性。2. 熟悉变形工具、对齐面板的功能与用法。36Flash中绘图工具的应用（二）1. 掌握并使用选择工具选择并修改节点和图形。2. 能正确地设置与编辑笔触、擦除效果和填充颜色，能设置各种颜色效果。3. 能正确使用钢笔工具绘制任意形状的图形。11. 熟悉刷子、钢笔、颜料桶等基本绘图工具的使用方法、相关属性。2. 熟悉变形工具、对齐面板、调色面板的功能与用法。46第一阶段综合操作能力实训制作逐帧动画，检查第一个项目的教学效果。1能综合调用第一个项目涉及的知识与操作，并加以灵活应用。56形变动画原理及应用(一)1. 能用形

12、变动画制作物体的变形。2. 应用层实现叠加效果。21. 掌握形变动画的原理与方法。2. 初步掌握图层的类型与使用方法。66形变动画原理及应用(二)1. 能通过控制形变实现特殊的形变效果。21. 了解形变提示点的作用与使用方法。2. 初步掌握图层的类型与使用方法。76动变动画原理及应用1. 能将场景中静态对象转换成图形元件。2. 能创建和编辑图形元件。3. 能熟练调用图形元件，并编辑调用后实例的相关属性。4. 能制作动变动画，灵活实现平动、转动、缩放、变色调等动画技术。5. 能通过图层实现效果的叠加。21. 了解运动渐变动画的原理。2. 掌握动变动画的制作方法。3. 掌握图形元件的含义。4. 熟

13、练掌握图形元件的转换、创建及调用方法。5. 掌握动变属性的设置方法。6. 熟练掌握图层的类型与使用方法。86第二阶段综合操作能力实训制作形变、动变综合应用的网站动感广告，检查第二个项目的教学效果。2能综合调用第二个项目涉及的知识与操作，并加以灵活应用。96引导运动1. 能利用引导线实现动画的单层引导。2. 能实现形如行星绕地球转动的环形引导。3. 能利用一个引导层实现动画的多层同步引导。4. 能利用一个引导层实现动画的多层非同步引导。31. 掌握引导层的特殊含义。2. 掌握引导线的使用技巧。3. 巩固平动、转动等动画技术并能综合应用。106遮罩技术（一）1. 能利用静态遮罩技术，实现各种特殊的

14、效果。2. 能利用动态遮罩技术，实现简单的特殊效果。31. 正确理解遮罩的含义与作用。2. 掌握静态遮罩方法。3. 掌握动态遮罩的方法。116遮罩技术（二）1. 能利用动态遮罩技术，实现动态图片过渡效果。2. 能利用动态遮罩技术，实现其他复杂的特殊效果。31. 进一步掌握动态遮罩的方法。2. 了解并尝试复杂遮罩制作方法。3. 了解遮罩与引导结合的技术。126引导与遮罩的综合应用能完成山东省潍坊商业学校网站首页的头部动画制作。31. 深入理解引导层动画的概念及应用。2. 深入理解遮罩层动画的概念及应用。3. 领会网页头部动画设计的思路与方法。136影片剪辑元件的创建与应用1. 能制作简单的影片剪

15、辑元件。2. 能制作各种特殊效果的影片剪辑元件。31. 掌握影片剪辑元件的含义与作用。2. 掌握影片剪辑元件的创建和编辑方法。3. 掌握影片剪辑元件的应用操作。146声音处理技术1. 音乐的准备与编辑；音乐的导入与设置。2. 加入歌词。3. 能在作品中添加声音，设置音频的各种属性。3掌握Flash cs5中声音处理的技术。156按钮元件的制作（一）1. 认识按钮元件。2. 能熟练使用工具组绘制各种形状按钮。3. 能熟练地制作三态按钮。31. 掌握按钮元件四个关键帧的含水。2. 掌握按钮的制作方法。166按钮元件的制作（二）1. 能制作隐形按钮。2. 能在“指针经过”状态加入MC实现动画按钮。3

16、1. 了解隐形按钮的原理。2. 掌握隐形按钮的实现方法。3. 掌握具有交互动画效果的特殊按钮制作方法。176Flash cs5 行为脚本语言应用1. 能熟练编写跳转类ActionScript语句。2. 能用设置鼠标对象的方法来改变鼠标状态。3. 能利用ActionScript语句实现简单的人机交互。4. 能够理解ActionScript语句的含义。31. 进一步掌握脚本的相关知识。2. 掌握关于鼠标对象的方法mouse.hide()3. 掌握关于影片剪辑控制的方法：startdrag,stopdrag.掌握关于影片剪辑对象的属性：setproperty,getproperty。186综合操作能

17、力实训能完成山东省潍坊商业学校网站欢迎页面的轮显广告。3掌握用ActionScript脚本语言制作动态网站装载进度的制作方法。196组件的使用能使用常用组件制作简单的网站留言板。31. 了解组件的类型。2. 掌握常用组件的功能与用法。206综合操作能力实训期末考试综合要求1. 能利用Flash cs5的各类动画制作技术设计网站装载进度动态显示效果。2. 能利用Flash cs5的各类动画制作技术设计网站欢迎页面。3. 能利用Flash cs5的各类动画制作技术制作网站头部动画。4. 能利用Flash cs5的各类动画制作技术制作网站动态效果导航条。5. 能通过场景切换和元件调用实现作品的连缀。

18、6. 能完成司网站进入页面、产品展示、网页头部动画及首页导航条的制作。31. 综合应用Flash cs5动画制作技术。2. 综合应用各类其他课程相关知识。3. 本课程一学期所学的所有相关知识，以及课外自主学习能力、独立完成能力等。5.第一次课设计梗概（2课时）（1）铺垫展示精选Flash经典作品。类型包括：动感广告、MTV、故事短片、课件、网站、特色片段，重点展示企业网站中的优秀动画作品。目的：让学生认识到Flash软件的强大功能，在于引发学生浓厚的学习兴趣。介绍从事动画设计的优秀毕业生。目的：使学生明确学习本课程的目标，指导学生就业。告知学生本课程的总体教学安排、课内外学习方式、学习资源网站

19、，介绍Flash的安装方法。目的：使学生明确本课程学习任务，从基于工作过程的学习任务中找到成就感，为以后就业打下坚实的基础；课外有学习平台和软件环境，能自主学习。介绍课程考核方式。目的：主要告知学生功在平时，平时成绩占总分 30%。实训时的表现、课后的实训作业、阶段的综合实训项目、小组讨论学习的情况和出勤的情况等都是平时成绩的重要组成部分。（2）进入正题。完成基本能力训练：一个简单的逐帧动画，作品名称为“欢迎进入闪客世界”。教学实施过程：首先，师出示“欢迎进入闪客世界.SWF”文件，介绍主要实现的关键技术，示范实现过程。并在示范过程中，使学生熟悉时间轴、面板、工具栏和部分菜单等Flash基本工

20、作界面的操作，掌握制作一个Flash所需的完整操作流程。接着，生完成“欢迎进入闪客世界”动画文件，文字内容生自己创意，不必和示例相同。师巡回指导，并从中了解学情。完成拓展能力训练：在前一作品的基础上，略微提高一点难度，即关键技术是逐帧加简单遮罩，作品名称为“Flash学习之旅”。教学实施过程：首先，让学生分组讨论动画效果的变化之处和技术上的解决办法。接着，开展分组抢答的方式，以归纳技术要点和操作要领。师从中了解学情。然后，师根据学生讨论学习的情况作出点评，并对遮罩技术重点讲解接着，生完成拓展能力训练“Flash学习之旅”动画文件，文字内容生自己创意，不必和示例相同。师巡回指导，再次并从中了解学

21、情。最后，师归纳本次课学习要点，展示下次课学习任务，布置课外预习内容。四、考核方案设计1基本思路（1）本课程操作性强，鉴于平时学习过程、实训操作的重要性，考核以平时课堂表现、课后训练为主，基于过程的期末考试为辅的形式。具体比例如下：平时成绩占总分30%，采分依据主要来自于考勤（5%）、课内课外完成的作品质量和数量（20%）、理论作业（5%）。期中考试成绩占30%。期末考试采用基于过程的上机操作方式，占总分的40%。（2）课程设计与课程名称“网页动画设计”紧紧相扣，每个课程项目都是网络动画的一个应用方面，期末的课程设计重点在于检验学生通过一个学期的学习，对Flash动画制作各项技术的综合应用能力

22、，时间安排的期末最后两个星期。（3）制作的作品要求包括：设计并制作网站装载进度动态显示效果、网站动画欢迎页面、网站动态头部动画、网站动态效果导航条等，并能通过场景切换和元件调用实现作品的连缀。要求：界面规范、美观。运行流畅。ActionScript代码的规范（含格式）。作品用到的技术全面（含图像制作、形变、运动渐变、逐帧、引导、遮罩、按钮、音效等）。结构、方法合理。有自己的创意。独立、按时完成。2评分标准评分标准编号评分标准内容所占分数1作品能够实现大作业所要求的主要功能202界面规范、美观，布局合理。103作品中用到的技术全面（含图像制作、形变、运动渐变、逐帧、引导、遮罩、按钮、音效等）。3

23、04自主设计的部分质量、数量情况。305用到了课堂外的方法、技术10五、教材、资料教材：郑芹.Flash动画设计.北京：电子工业出版社，2008参考资料：1李冬芸.Flash动画实例教程.北京：电子工业出版社，20102王圣强.中文版Flash MX实用教程.北京：北京希望电子出版社3网上的各种素材和作品Flash网页动画设计课程单元教学设计引导层与遮罩层动画的综合应用一、教案头本次课标题：引导层与遮罩层动画的综合应用授课班级10计算机（2）上课时间2课时上课地点理工北楼410机房教学目标能力（技能）目标知识目标能熟练利用引导层实现多层动画引导效果。能熟练利用动态遮罩技术，实现特殊动画效果。提

24、高引导层动画和遮罩层动画的综合应用能力。深入理解引导层动画的概念及应用。深入理解遮罩层动画的概念及应用。领会网页头部动画设计的思路与方法。能力训练任务及案例任务1：课内仿照制作网页头部动画。任务1-1：实现遮罩层动画“光线划过”文字动画任务1-2：实现引导层动画“飞鸟”引导层动画任务1-3：动画合成任务2：课外设计潍柴网站首页头部动画。任务2-1：实现遮罩层动画“光线划过”公司LOGO动画任务2-2：实现引导层动画“闪耀之光”引导层动画任务2-3：动画合成参考资料参考资料：1李冬芸.Flash动画实例教程.北京：电子工业出版社，20102王圣强.中文版Flash MX实用教程.北京：北京希望电

25、子出版社3网上的各种素材和作品二、教学设计步骤教学内容教学方法教学手段学生活动时间分配告知（教学内容教学目的）本次课主要教学内容：引导层与遮罩层动画的综合应用。教学目的：熟练掌握引导层和遮罩层动画制作技术及综合应用能力。讲授课件3分钟引入（任务项目）展示普通图层综合应用学生优秀作品。演示案例，引入新课：案例：衢职院校园公告网页。课前预习检查。演示任务驱动学生优秀作品展示任务演示预习作业个案展示5分钟操练（基本能力）分析任务1设计思路。关键技术解析：A“光线划过”遮罩动画实现： “文字”元件的制作：滤镜效果的运用、图层的应用。 “光”元件的制作：颜色面板Alpha的运用、变形工具的使用。 “文字

26、遮罩”元件的制作。B. “飞鸟”引导层动画实现： “鸟”元件的制作：图形工具的使用、逐帧动画的应用。 两只鸟沿路径飞翔效果的制作：多层引导动画的应用。启发探究实践分组指导案例演示要领提示分组讨论抢答分组制作分组选派代表演示20分钟深化（加深能力）任务1-1：实现遮罩层动画（“光线划过”文字动画）任务1-2：实现引导层动画（“飞鸟”引导层动画）任务1-3：动画合成演示启发实践个别指导要领示范个别操练15分钟归纳（知识能力）遮罩层动画综合应用分析：遮罩层与被遮罩层互换后的动画效果对比。引导层动画综合应用分析：连续性动画的实现方法；场景调用引导层动画的方法。讲授设问对比演示课件回答2分钟训练（拓展检

27、验）讨论分析任务2设计思路。关键技术解析：A光线划过公司LOGO动画： “LOGO”元件的制作：图片转换为元件、属性面板的使用。 “光条”元件的制作：变形工具的使用。 光线划过LOGO效果的制作。B.“闪耀之光”引导层动画： “星闪”元件的制作：图形工具的使用、颜色面板、属性面板。 “闪耀之光”沿着路径运动效果的制作：引导层动画的应用、图形工具的使用。启发探究实践个别指导案例演示要领提示分组讨论回答个别操练35分钟总结（知识能力操作要领)强调遮罩层动画原理：遮罩层决定显示的形状，被遮罩决定显示的内容。引导层动画可以引导影片剪辑元件。滤镜的使用场合和方法。应用翻转帧加快操作速度。妙用图形元件的A

28、lpha属性。巧用一般动画的缩放效果。讲授设问课件回答5分钟作业拓展训练：进入衢州美安普矿山机械有限公司网站，了解该公司企业文化和业务特点，为该公司设计网站首页头部动画。新课预习：“影片剪辑元件的创建与应用”。讲授演示课件5分钟后记三、设计说明1安排本次教学内容的必要性。我们在做本课程整体设计时，多次进行探讨，查阅资料，从众多优秀Flash作品中发现，引导层和遮罩层动画是实现生动、形象、复杂和妙趣横生动画的重要奠基石。因此本次教学内容“引导层与遮罩层动画的综合应用”，在整个课程教学环节中是必不可少的。2选择实训载体的科学性。所有单元教学的实训载体，不拘泥于教材，以“基于工作过程”为宗旨，科学安排教学内容和实训项目。实训项目有的是从网站下载的，有的是来自教学参考资料上的，也有的是我根据教学内容设计的。各实训项目或生动有趣，或以实际网页动画为教学内容。使枯燥乏味的绘图工具学习转变为学生都感兴趣的案例，有效地开发了学生的创新思维，进而使学生的学习兴趣更加浓厚；我在安排“动感广告”网页动画和本次课教学内容时，本着服务地方的原则，主要以山东潍坊的一些企业网站动画为教学载休。3教学过程充分挖掘学生的主观能动性。学生是学习