教学单元设计（网站Flash动画制作）教学课件.ppt

《教学单元设计（网站Flash动画制作）教学课件.ppt》由会员分享，可在线阅读，更多相关《教学单元设计（网站Flash动画制作）教学课件.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、单元教学实施流程单元教学实施流程任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务地 点： 网影科技有限公司网站开发部时 间： 上午8：20主 持： 项目总监、规划馆代表（教师）参加者： 各项目组组长及成员（学生）会议议题：规划展览馆网站引导页面制作网站开发部每周例会1）拟设学习情境）拟设学习情境角色扮演法2-3网站网站Flash动画制作动画制作 单元教学实施流程单元教学实施流程任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务2）检查进展情况）检查进展情况 工作流程教学单元主导项目规划展览馆网站前台设计任务分析A任务一 需求分析进行用户需求调研及分

2、析方案制定P任务二方案确定确定网站风格、确定网站结构、制定网站文件规范、制定网站建设方案任务实施D任务三 素材采集及处理搜集素材、处理素材任务实施D任务四 网页界面设计根据方案绘制主页草图、在Photoshop中设计主页界面根据页面要求切割界面设计图任务实施D任务五 网站主页页面制作创建本地站点、构建站点结构、设置页面属性用表格布局网页页面、添加图文元素、设置各页面间的超链接、应用CSS样式规范页面元素任务实施D任务六 网页动态特效设计为网页添加flash动态效果为网页添加JavaScript动态效果任务实施D任务七 网站引导页面制作利用Flash工具制作引导页任务实施D任务八 模块化制作页面

3、运用库和模板批量制作次级页面任务实施D任务九 网页交互设计能制作用户留言簿等交互页面任务实施D任务十 网站测试与发布了解站点测试、发布网页的方法任务评估C任务十一 项目评估按照项目验收要求进行项目评估总结归档A任务十二 项目总结与文档整理撰写项目工作总结报告，归纳整理项目实施文档任务驱动法任务驱动法角色扮演法角色扮演法单元教学实施流程单元教学实施流程任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务3）理解需求，引导页初步制作）理解需求，引导页初步制作角色扮演法角色扮演法项目开发需求登记表（规划展览馆网站前台设计）.doc项目建设方案（规划展览馆网站前台设计）.doc项目

4、工作进程表（规划展览馆网站前台设计）.mpp网站建设协议书（规划展览馆网站前台设计）.doc单元教学实施流程单元教学实施流程任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务4）引导页第一次展示）引导页第一次展示问题：1、引导页大小不协调2、图片导航不清晰3、动态效果过于夸张4、场景间切换过渡不自然 问题探究法问题探究法单元教学实施流程单元教学实施流程任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务1、设计思路分析2、制作流程及方法分析3、修改完成制作4、总结提升5）工作策略）工作策略参考样例案例分析法案例分析法分组讨论法分组讨论法头脑风暴法头脑风

5、暴法单元教学实施流程单元教学实施流程目的：目的：初步了解如何根据本网站的主体风格确定引导页面的动态效果，形成动态效果设计思路设计思路，培养自主学习能力任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务6）引导页样例设计思路分析）引导页样例设计思路分析1）文字动画（1）屏幕居中“*城市规划展览馆”标记文字由大到小、由模糊到清晰到消失；（2）屏幕左上角的“*城市规划展览馆”Logo由模糊逐渐变清晰；（3）“城市规划展览馆”Logo下方从无到有慢慢延展出一条白线；（4）白线下方显示“展示*城市规划展览馆”的英文缩写从无到有，并抖动；（5）居中显示的图片上下方的白线移动效果。2）

6、大图动画 屏幕居中展示一幅“*城市规划展览馆”全景的图片；3）小图按钮动画 （1）图片右侧依次出现“图片按钮”。 （2）单击“图片按钮”能切换到展示“*城市规划展览馆”的其他大图；4） skip效果 单击“skip”文字按钮能跳过引导页面动画，进入到网站首页面。分组讨论法分组讨论法观察法观察法主色调要与主页协调1.拟定工作情境、检查计划进度、样例展示分析2.以用户方的角色提供素材、作品评价意见3. 以总监的角色提供咨询 、参考资源1.聆听，记录，理解任务要求，搜集素材，了解引导页的动态效果制作方法2.构想工作思路，初步制作引导页3. 部分组展示汇报，其它组点评4.将所做工作记录在“项目工作日志

7、”中学生行为与结果学生行为与结果角色扮演法问题探究法任务驱动法头脑风暴法分组讨论法案例教学法观察法教师行为与结果教师行为与结果单元教学实施流程单元教学实施流程任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务参考资源 基本素材 引导页第一次制作图书馆电子阅览室展览馆实地考察教学做一体化教室目的：目的：根据设计思路，了解引导页面设计的基本工作流程和要求 任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程（1）引导页大小及播放速度如何确定（2）如何制作开场文字动态效果（3）如何制作大图动画效果（4）如何制作小图动画按钮（5

8、）如何跳过引导动画1、提出引导页制作时的主要问题、提出引导页制作时的主要问题 问题探究法问题探究法观察法观察法教师教学活动教师教学活动学生活动学生活动采用案例分析法、问题探究法，引导学生根据案例的设计思路，提出探究性问题，学习引导页制作流程及方法。1.采用问题探究法和观察法分析引导页制作过程中需解决的主要问题；2.将主要问题记录在“项目工作日志”中3.主要场地为：教学做一体化教室任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程2、知识回顾、知识回顾1）帧、图层、时间轴的区别2）元件与实例的应用图形元件（graph symbol）按钮元件(

9、button symbol)影片剪辑(movie symbol) 3）位图与矢量图的区别位图失量图4）遮罩效果（遮罩层）如何实现、如何按自定义路线运动（引导层）？5）动作脚本的基本动作（ On/ release/ release outside / Press）谈论法（问答法）教师教学活动教师教学活动学生活动学生活动采用问答法引导学生回顾Flash基本知识1.回答问题；2.将要点记录在“项目工作日志”中；3.主要场地为：教学做一体化教室任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程3、分析问题解决问题、分析问题解决问题 问题探究法讲授法

10、1）引导页大小及播放速度如何确定）引导页大小及播放速度如何确定引导页大小不协调引导页大小不协调（1）文档的尺寸）文档的尺寸（2）帧频（帧）帧频（帧/秒，刷新率）秒，刷新率） 教师教学活动教师教学活动学生活动学生活动利用讲授法，教师讲解1.将要点记录在“项目工作日志”中；2.主要场地为：教学做一体化教室任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程1、居中“*城市规划展览馆”标记文字动画效果 1）导入文字素材图片title01.png ，转变成图形元件注意：导入影片剪辑元件到主场景，注意要对齐方式2、其它文字动画效果类似，学生练习2）如何

11、制作引导页开场文字动态效果）如何制作引导页开场文字动态效果2）改变元件的大小、透明度等参数，创建文字的补间动画3、分析问题解决问题、分析问题解决问题变化：文字由大到小、由模糊到清晰到消失变化：文字由大到小、由模糊到清晰到消失教师教学活动教师教学活动学生活动学生活动1.引导学生演示制作方法；2.巡视学生文字动画效果制作方法学习文字动画效果制作：1.演示文字动画效果制作方法2.练习多种文字动画效果3. 将制作中出现的问题记录在“项目工作日志”中问题探究法、观察法、演示法（学生）、练习法任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程1、分析大

12、图动画效果 正常情况显示第一张图，触发后原图消失，按钮对应的大图从无到清晰展示观察法讲授法技巧： 原图加透明度50%遮罩； 原图慢慢消失，显示白光借助由无到白的动画元件 新图从无到清晰（有五张）3）分析问题解决问题）分析问题解决问题教师教学活动教师教学活动学生活动学生活动1.采用讲授法、演示法介绍引导页大图动画制作方法；2.巡视检查学生制作情况，进行个别辅导。1.采用观察法记录学习动画制作方法2.模仿制作大图动画效果3.独立制作其它几张大图的动画效果4. 将制作中出现的问题记录在“项目工作日志”中（3）如何制作引导页大图动画）如何制作引导页大图动画任务准备阶段任务实施阶段任务检评阶段任务完善修

13、改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程2、分解制作流程l原图慢慢消失：原图慢慢消失： 将素材图片bg001.jpg转换成bg001图形元件 为了使颜色变化效果更自然，创建rect元件，实现由无到白的效果，创建rect元件，类型“影片剪辑”，绘制5px*5px大小的白色矩形，无边框 创建bg_pic01影片剪辑元件，在第1帧导入rect元件，并拉大到780 px *320 px（和图片同样大小），在第3帧插入关键帧，设置第1帧“Alpha”为0%，设置第3帧“颜色”的“高级” ，如图观察法演示法（教师）（3）如何制作引导页大图动画）如何制作引导页大图动画3）分析问题解决问题）

14、分析问题解决问题场景间切换过渡不自然动态效果过于夸张任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程2、分解制作流程l新图从无到清晰：新图从无到清晰： 在第4帧，导入bg001元件，在第16帧插入关键帧，设置第4帧bg001元件“颜色”的“高级”，如右图（使图片动画切换更自然） 分别在第13帧和416创建动作补间动画，得出动画效果 ， 最后添加脚本“stop();”；如下图 制作其它图片动画（3）如何制作引导页大图动画）如何制作引导页大图动画3）分析问题解决问题）分析问题解决问题观察法演示法（教师）任务准备阶段任务实施阶段任务检评阶段任务

15、完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程2、分解制作流程l添加实例到场景添加实例到场景 创建bg_pic影片剪辑元件，分别在第1-5帧导入bg_pic01- bg_pic05元件； 添加title1元件新图层名称为“bgpic”，在第80帧插入关键帧，导入bg_pic实例，命名为bgpic；l设置原图的朦胧效果设置原图的朦胧效果 添加title1元件新图层，名称为“bgpic遮罩层” ，在第80帧插入关键帧，导入bg001图片；l添加新图层名称为添加新图层名称为“action”在第1-5帧均插入关键帧，选中帧，为每一帧添加脚本“stop();”；l制作其它图片动画制作其

16、它图片动画问题探究法观察法演示法（教师）练习法（3）如何制作引导页大图动画）如何制作引导页大图动画3）分析问题解决问题）分析问题解决问题任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程（4）小）小图按钮效果制作图按钮效果制作 观察法小组讨论法1、分析小图按钮动态效果图片按钮出现顺序：从上到下依次播放，并停止。图片按钮效果：Pop时： 图片模糊（Alpha 设置为60%）； Pass时：图片的Alpha由60%到正常，并停止播放；Press时：图片保持不变，点击图片按钮，则播放相应的大图。大图动画：正常情况在bg_Pic01，触发后原图消失

17、，按钮对应的大图从无到清晰展示。3）分析问题解决问题）分析问题解决问题教师教学活动教师教学活动学生活动学生活动1.采用启发教学法、讲授法、演示法介绍引导页小图按钮制作方法；2.巡视检查学生制作情况，进行个别辅导。采用小组讨论法、观察法、练习法学习小图按钮制作方法：1、观察记录学习小图按钮动画制作方法；2.模仿制作小图按钮效果；3.独立制作其它几张小图按钮效果。4. 将制作中出现的问题记录在“项目工作日志”中任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程2、制作小图按钮逐渐上升动画效果l制作小图按钮制作小图按钮pic01.jpg素材图片转

18、换成pic01图形元件；制作pic001影片剪辑元件，使图片由清晰到模糊 ；创建rect1影片剪辑元件，导入rect元件，设置65px*50px大小，制作自然过渡的效果；创建btn01按钮元件，制作小图按钮。学生独立完成btn02- btn05元件的制作 （4）小）小图按钮效果制作图按钮效果制作 3）分析问题解决问题）分析问题解决问题观察法演示法（教师）任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程2、制作小图按钮逐渐上升动画效果创建btn_pic影片剪辑元件在btn_pic元件的场景中，btn01层上，制作btn01按钮由下往上升的效

19、果同样方法依次btn02、btn03、btn04、btn05按钮的上升的效果，每个图层的起始帧向后移动5帧添加 “stop();”3、在title1元件中添加“pic”图层，在第80帧导入btn_pic元件；（4）小）小图按钮效果制作图按钮效果制作 3）分析问题解决问题）分析问题解决问题观察法演示法（教师）任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程3、为小图按钮添加行为分析小图按钮行为释放按钮时，转到bgpic影片的相应帧，并停止播放；bgpic影片的第1帧为1张pop时的图片（bg_Pic01）。对于Btn01，转到第2帧播放（b

20、g_Pic01）；对于Btn02，转到第3帧播放（bg_Pic02）；对于Btn03，转到第4帧播放（bg_Pic03）；对于Btn04，转到第5帧播放（bg_Pic04）；对于Btn05，转到第6帧播放（bg_Pic05）；实现方法 btn01按钮添加动作脚本。在btn_pic元件中，选中图片按钮完全显示的那一帧，选中按钮，添加代码如下：on (release) /Movieclip GotoAndStop Behaviorthis._parent.bgpic.gotoAndStop(2);/End Behavior（4）小）小图按钮效果制作图按钮效果制作 3）分析问题解决问题）分析问题解决

21、问题启发教学法观察法演示法（教师）练习法任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程设计“skip”跳过按钮，添加的脚本为on (release) getURL(index.htm,_self);学习其它跳转命令 （5）如何跳出引导页）如何跳出引导页 3）分析问题解决问题）分析问题解决问题自主探索法教师教学活动教师教学活动学生活动学生活动引导学生采用自主探究法学习跳转命令1.通过查找网上资料学习跳转命令的使用；2.将学习主要内容记录在“项目工作日志”中任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施

22、流程单元教学实施流程1.引导学生根据案例的设计思路，提出探究性问题2.分解图片动画制作方法3.讲解制作要点（知识准备）4.对难点进行操作演示（任务实践）5.指导，检查1.观察、思考，聆听，提出问题2.模仿操作3.根据样例的制作方法，分析检查自己的作品4.互相交流讨论5.独立完成作品修改学生行为与结果学生行为与结果教师行为与结果教师行为与结果引导页第二次制作知识要点，实施指导案例教学法启发式教学法问题探究法分组讨论法演示法讲授法自主探索法练习法问答法观察法1.根据案例制作要求，熟悉引导页制作流程及要点，以此标准检查自已做作品的问题，记录所有问题2.点评他人作品中的问题3.将检查或点评问题记录在“

23、项目工作日志”中 1.引导学生再次分析自己所做作品的问题2.针对典型问题再作讲解 学生行为与结果学生行为与结果任务驱动法任务驱动法分组讨论法分组讨论法教师行为与结果教师行为与结果目的：目的：总结引导页面制作中的难点重点，评价互助任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务提出制作中的难点知识要点，实施指导单元教学实施流程单元教学实施流程引导页第二次展示引导页第二次展示目的：目的：根据检评阶段提出的问题进行引导页面的修改完善，准备最后 的任务考核任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务巡视，个别指导提供技术咨询 重新修改完善作品学生行为

24、与结果学生行为与结果任务驱动法任务驱动法分组讨论法分组讨论法教师行为与结果教师行为与结果引导页第三次制作知识要点，实施指导单元教学实施流程单元教学实施流程目的：目的：考核任务的最终完成情况，任务完成技能知识模块总结提升任务准备阶段任务实施阶段任务检评阶段任务完善修改任务评价阶段布置课后任务1.根据引导页面要求：是否符合客户审美需求、引导页面功能完整性是否实现考核学生作品质量，并提出修改意见； 2.根据指导过程和学生汇报结果进行工作态度评价3.总结本次任务要求 1.从项目组中选出1、2组典型设计思路、设计成果进行汇报展示2.总结引导页制作流程及要点，并记录在“项目工作日志”上。 学生行为与结果学

25、生行为与结果角色扮演法角色扮演法鼓励教学法鼓励教学法教师行为与结果教师行为与结果答辩、评价、总结考评、总结单元教学实施流程单元教学实施流程引导页第三次展示引导页第三次展示目的：目的：考核任务的最终完成情况，任务完成技能知识模块总结提升任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务单元教学实施流程单元教学实施流程1.引导页设计的要点引导页设计的要点（1）引导页面的整体风格要与网站页面相符合，背景和页面背景颜色协调，注意页面尺寸设置；（2）引导页面动画要简洁、明快，突出标记，起到震撼效果，注意帧频的设置；（3）引导页要有导航作用，能够引导用户进入到相应的网站页面，可设计图

26、片按钮等动画效果（4）分析网站内容，选取网站中精华做成特效（5）动态效果要自然（6）由整体到局部、由面到点、由粗到细进行构思2. 制作要点制作要点（1）制作由简到难（2）元件与实例的用法及区别（3）位图与矢量图的用法及别（4）注意采用过渡元件以使动画效果更自然（5）行为的添加时要注意选择相应对象，有的是控制帧、有的控制对象（6）图层命名要规范； 目的：目的：布置下次课任务任务准备阶段任务实施阶段任务检评阶段任务完善修改任务考核阶段布置课后任务学生行为与结果学生行为与结果任务驱动法任务驱动法教师行为与结果教师行为与结果提出新任务要求，提供素材 将任务要求记录在“项目工作日志”上。 参考资源 基本素材 单元教学实施流程单元教学实施流程