《网页动画设计与制作》教案.docx

1、网页动画设计与制作教案电脑艺术设计专业网页动画设计与制作项目课程教学实施方案一、课程综述1.课程名称：网页动画设计与制作网页动画设计于制作是多媒体设计专业的一门专业必修课。本课程的主要任务就是分别介绍利用Adobe Flash动画制作工具和Adobe Edge HTML5动画制作工具进行基本的网页动画创建。主要内容是用Adobe Flash来控制各种媒体，如图形图像、音频和视频，辅助基本的基本的交互式编程创作不同形式的网络动画作品，主要应用领域集中在网页广告上。另外使用Adobe Edge工具来制作HTML5的动画，这是网页动画未来的发展方向。本课程是一门实践性较强的课程，在介绍基本理论、基础

2、知识、基本技能和方法的基础上，特别要培养学生的创造性、实际制作动画的动手能力和计算机应用能力。2.前续及后续课程： 前续课程网页美术设计、用户界面设计等 后续课程互动多媒体设计多媒体互动综合创作课程3.学习时段 64学时4.学习目标本课程总体学习目标：让学生了解网页动画的基本形式和技术要点，并且掌握网页动画制作工具Adobe Flash动画制作工具和Adobe Edge HTML5动画制作工具的使用技巧，能够集成文字、声音、视频等多媒体元素，并能够发挥创意、自主完成网页动画作品的创作。本课程的能力目标：掌握Flash和Edge这2个主流网页动画制作工具的安装和使用方法；能够合理选择不同的技术来

3、制作动画来适应日趋复杂性的网页应用平台；能够在网页动画的基础上进行一定的交互编程工作，让网页动画和交互设计结合起来。本课程的知识目标：能够正确认识网页动画在网站上的形式和作用；能够了解不同类型网页动画和网页动画广告的技术要点和优劣；能够掌握网页动画创作的一般流程和流程中涉及的基本工具和操作方法；5.学习（训练）方法 本课程主要采用典型的项目案例教学方法来完成课程的学习。课程教学以实际网站动画制作的典型工作项目为主，辅助以网页广告相关知识理论的讲解。本课程所涉及的知识点和能力技能都被安排在不同案例项目的训练过程中，通过项目案例的跟做练习、临摹练习和创作等一系列的训练从浅到深、从简单到复杂的反复强

4、化相关知识点和技能，最终达到掌握网页动画相关知识点和技能的目的。本课程采用生产性实训的教学方式，科学设计教学活动，将教室、工作室、顶岗实训基地、图书馆、网络组织为一个开放性的教学和训练系统，营造一个类似等同于企业真实场景的训练环境，使学生在仿真的企业氛围内学习知识和技术，在校园内感受岗位压力，在教学中感受社会竞争压力，从而注重学生知识、能力、素质这一职业综合能力的培养，缩短学生走上社会的适应期。本课程采用“数码四步教学法”组织教学活动，运用科学手段，遵循网页动画制作专业技术能力的形成规律，有序地、科学地展开训练内容，在由易及难的训练过程中，融汇理论知识创收；在逐次提升能力的同时，不断培养专业兴

5、趣和树立专业志向。本课程采用开放式的专业教学动态评价系统。建立学校课程评价、行业技能标准评价和社会评价二位一体的教学评价考核方法；建立同网页动画及新媒体行业发展相适应、同步调整和修订的教学考核动态评价形式。6.知识要点1)网页动画的认知；2)网页动画的应用范围及特点；3)网页动画的不同类型及特点；4)网页动画创作的一般流程及相关工具的认知；5)能够分析一般网页动画项目的重点难点和素材支撑；7.技能要点1)网页动画相关软件的安装和设置能力；2)矢量图形的绘制能力；3)声音、图像和视频元素的集成能力；4)帧动画、遮罩动画和引导层动画等三种基本动画的制作能力；5)编写FLASH ActionScri

6、pt交互代码的能力；6)利用JavaScript语言实现交互的程序编写能力；7)能够演示并充分阐述项目设计的成果；8.行为要点 1)严守技术标准的态度； 2)遵守工作纪律的习惯； 3)善于探索研究的学习风格； 4)对工作认真负责的职业操守； 5)从专业角度为设计委托客户精心工作和服务观念； 6)团队协同工作的合作精神； 7)能够承受工作压力的忍耐品格。二、教学单元及内容9.教学项目设计本课程的教学项目的来源：均来自于真实的各种类型网站的典型交互动画广告案例，集中了主流网站中的典型交互动画广告制作过程中的典型问题，以及典型解决方法，经过教学化处理以后，成为网页动画设计与制作的典型教学活动，用于专

7、业教学过程中能够体现职业性特色。教学项目设计的基本结构：网页动画设计与制作项目包项目课程包括Flash交互动画广告制作项目和HTML5交互动画广告制作项目，主要由横幅动画广告制作项目和条幅扩展式交互广告制作项目训练课程这二类产品并行又关系紧密的课程组合。帮助学生通过分类项目训练理解这两种不同类别动画广告的设计与制作的特点，掌握正确的制作方法，确保该项目课程专业制作能力和知识训练的完整性。教学项目设计的基本目标：以实际网站动画广告制作的典型工作项目引领学习训练过程和实际操作过程，以完成各具体动画广告制作项目任务为教学活动的主线，以专业任务项目为专业知识和能力传达的载体，通过系统化学习训练提高学生

8、的专业能力、专业知识水平、专业审美情趣等综合专业素养，使整个教学过程贴近实际专业工作过程，保证专业教学职业性特色。教学项目设计的基本形式：从简单到复杂的典型动画广告设计与制作分类，系列典型项目为知识和能力教学载体，组织安排由易及难的典型教学训练任务，让典型项目任务引领整个教学训练过程，使学生在完成项目任务中得到模拟工作岗位岗位和工作内容的体验，使教学训练得以遵循实际专业能力形成路径、对应完成专业工作的综合要求。教学项目设计的基本原则：项目任务的透明性、项目完成结果的可见性、项目教学过程学生情绪的控制性、所有学生行动的参与性、教学指导意见的建设性、项目知识讲解的形象性、项目执行主题的共识性、项目

9、评价归纳的简约性。教学项目设计的基本内容：A、Flash动画广告设计与制作项目；B、HTML5交互动画广告设计与制作项目。在A和B项目中具体主要以汽车广告制作项目制作训练课程、手风琴式交互展示广告设计与制作项目训练课程、网页动画设计与制作训练课程等交互动画广告制作来表现A和B项目，由易到难，由简到繁的设计制作过程。10.教学项目内容本课程包由Flash交互动画广告制作项目课程和HTML5交互动画广告制作项目课程组成，分别对应于完成两种不同项目的工作要求。这两种不同教学内容的组合安排，基本遵循了从专业技术掌握运用到灵活应用的专业能力过渡，符合网页动画师行业目前的专业业务领域工作细分关系。（1）F

10、lash交互动画广告制作项目课程a、汽车交互动画广告制作技术；交互动画的概念交互动画与传统动画的区别网络广告概念及发展现状网络广告交互动画特点Flash交互动画广告应用领域Flash交互动画广告设计原则Flash交互动画广告制作流程和要求b、Flash动画广告元素制作技术； 广告动画元素制作技术标准和基本流程图形的建立与编辑文字的建立与编辑色彩处理元件与元件库导入外部素材的方法c、Flash动画广告制作技术；广告动画制作技术标准和基本流程时间轴和关键帧逐帧动画制作动画补间动画制作形状补间动画制作引导层动画制作遮罩层动画制作d、Flash交互动画广告制作技术；交互按钮的制作利用ActionScr

11、ipt语言实现交互的程序编写 （2）HTML5交互动画广告制作项目课程：a、手风琴式交互展示广告设计与制作技术；HTML5交互动画广告制作的主要特点HTML5交互动画广告制作的基本要求和操作流程b、HTML5动画广告元素制作技术；基本形的建立和编辑方法文件的建立和编辑方法为图形添加色彩的方法元件的建立和编辑c、HTML5动画广告制作技术；位移、旋转动画的制作遮罩动画的制作添加背景音乐的方法建立视频播放的方法动画特效的处理方法d、HTML5交互动画广告制作技术；了解事件及事件驱动的概念利用JavaScript语言实现交互的程序编写11.教学项目完成过程（1）岗位能力目标交互动画广告制作的概念、项

12、目任务及岗位内容的介绍。（2）岗位能力分解Flash交互动画广告和HTML5交互动画广告项目的跟随制作训练。（3）岗位能力复制典型Flash交互动画广告和HTML5交互动画广告项目案例的临摹制作训练。（4）岗位能力重组Flash交互动画广告和HTML5交互动画广告项目的完整设计与制作训练。12.案例及活动设计本项目包课程的教学活动设计遵循以典型项目引领整个专业教学过程，将专业知识融汇于专业项目的制作训练过程中，在本专业知识和能力总量不变的前提下，通过采用经过实践验证的典型项目引领教学行动过程，从而以职业化、专业化的教学活动设计来实现专业教学目标。本项目包课程的教学活动的设计根据学生的能力设定教

13、学难度和教学进度，充分考虑目前高职学生的学习基础、学习能力和学习习惯，通过专业能力要求渐次递进的项目案例组合训练学生，使学生在学习中得到工作的体验，在训练中不断强化专业兴趣。本项目包课程的教学活动设计本项目包课程由Flash交互动画广告制作项目课程和HTML5交互动画广告制作项目课程两个专业业务部分内容组合而成，每个专业业务教学部分设定相应的“教学项目任务指标”，以此作为项目教学训练为起点和教学指导依据，通过逐次渐进的不同难度系数项目任务训练，着力营造具有专业工作目标、专业工作情境和专业工作内容的教学过程。通过细分在专业项目教学过程中教师和学生各自的角色和任务，尽量使本课程的教学专业化、规范化

14、，标准化、可复制化。贴近一线工作实际状态。（1）Flash交互动画广告制作项目部分：汽车交互动画广告制作示例教学项目任务指标：汽车交互动画广告制作项目项目技术指标与制作总体要求获取的重点知识和能力广告尺寸720X100dpi专业知识：熟悉Flash交互动画广告的表现技术指标和流程，理解技术概念。专业能力：掌握分析Flash交互动画广告分镜头策划的方法，具备制作元件、各种动画效果表现的能力，重点解决交互功能问题。背景颜色黑色（RGB：0，0，0）帧率25fps语言ActionScript3.0动画时间14秒制作文件及输出文件FLA，SWF项目完成时间30课时教学项目训练活动设计：项目训练内容概要

15、教师的教学工作重点学生的学习和训练重点课余安排教学和训练步骤项目任务要求教学重点与难点教学组织与执行概要操作技术技能训练指导造型表现能力训练指导阶段性检查和评价方法要求能力要求思考要求审美要求资源运用教学准备与补充1、专业项目分析（使学生“知道”汽车交互动画广告）。2课时。1、交互动画广告表现-汽车交互动画广告应用领域；2、交互动画广告表现-汽车交互动画广告制作工作流程，岗位工作形式，制作技术指标，阶段性工作任务要求。3、理解汽车交互动画广告结构及尺寸概念。1、提起学生对于本项目的学习和训练的兴趣；2、对于交互动画广告表现-汽车交互动画广告制作工作任务和技术指标的理解；3、对于汽车交互动画广告

16、应用领域的了解。1、检验和复习交互动画广告制作类前序课程；2、说明汽车交互动画广告制作项目的教学训练目标；3、分析汽车交互动画广告制作技术指标和工作任务要求；4、讨论汽车交互动画广告制作可能会遇到的问题。1、通过经典汽车交互动画广告作品介绍和欣赏，帮助学生熟悉技术标准； 2、通过设计方法以及设计思想介绍，帮助学生理解汽车交互动画广告的制作。3、注意激发学生的学习本课程专注力和学习兴趣。1、汽车交互动画广告的用途问题。2、汽车交互动画广告的元件、动画、交互间的关系问题。3、汽车交互动画广告制作项目的计划可执行度；4、汽车交互动画广告的设计风格讨论。1、对于制作汽车交互动画广告项目任务的理解；2、

17、对于汽车交互动画广告制作技术标准的理解；3、对于汽车交互动画广告制作术语理解和运用。1、掌握理解和分析汽车交互动画广告制作项目要求的方法；2、通过调试掌握分析汽车交互动画广告元件和动画要点的方法。1、通过收集Flash交互动画广告资料信息来归纳项目任务的能力。2、具备测试汽车交互动画广告和分析动画的能力。1、汽车交互动画广告制作和应用领域关系的思考；2、对于汽车交互动画广告的分析思考；1、汽车交互动画广告特征分析的归类素材；2、汽车交互动画广告参数表。3、汽车交互动画广告制作计划。1、调研汽车交互动画广告的设计元素，编写分镜头文稿（分镜头草图量不少于6个）；2、调研汽车交互动画广告用途。1、登

18、陆“数字艺术港湾”专业网站，搜索Flash动画广告制作信息。2、项目跟做训练,（使学生“会做”汽车交互动画广告）。10课时知识点：1、熟悉汽车交互动画广告的制作流程；2、理解汽车交互动画广告制作技术和工具；3、确立分析汽车交互动画广告主要元素、动画及交互的概念。能力点：1、掌握运用Flash工具进行图形、文字制作、元件和动画处理等工作步骤制作汽车交互动画广告的正确操作方法；2、熟悉汽车交互动画广告制作流程和方法。1、Flash工具的正确操作方法；2、汽车交互动画广告动画及交互的表现和把握。1、让学生跟随教师的制作演示，一步步地完成汽车交互动画广告制作；2、注意在跟做训练过程中，重点解释各种动画

19、制作的原理和要求；3、在每一跟随制作训练步骤中，注意及时总结学生的制作完成度和出现的问题。1、明确汽车交互动画广告跟做训练的目标要求和步骤；2、注意汽车交互动画广告跟做节奏对应学生的技术掌握进度；3、在制作训练过程中重点讲解专业术语、制作方法、工具命令的功能。1、如何检查跟做效果方面提问；2、跟做汽车交互动画广告元件和动画等制作参数的合理性问题；3、对汽车交互动画广告制作造型细节的观察问题和表现。1、比对项目要求的完成度和质量进行评价；2、对于专业术语以及运用程度的合理性进行评价。1、在训练过程中，熟记每一操作步骤的要领；2、分析每个制作步骤的同实现任务目标间的关系；3、汽车交互动画广告元件、

20、动画、交互表现控制方法。1、工具和技术运用训练，体验最基本的技术过程；2、了解Flash工具的特点和使用方式；3、汽车交互动画广告的元素和动画正确表现的能力。1、梳理整个工作流程，理解汽车交互动画广告制作的主要步骤和最终目标间的关系；2、分析归纳汽车交互动画广告制作中的工具主要命令及其功能，提炼出工具的结构框架。1、汽车交互动画广告跟做项目导出可执行文件；2、汽车交互动画广告跟做项目工程项目文件。浏览阅读Flash交互动画广告制作教程，学习并验证Flash交互动画广告制作步骤。登陆各网络资源，了解Flash交互动画广告知识及应用。3、项目临摹训练。（使学生“能做”汽车交互动画广告）10课时知识

21、点：汽车交互动画广告制作方法和流程的自主设定要求。能力点：对于汽车交互动画广告制作工作任务的综合分析能力，工作计划编制和执行的能力。1、能够在教师指导下，正确编辑并完成工作计划；2、能够根据项目任务目标，在教师指导下综合运用工具和方法完成项目任务。1、给出汽车交互动画广告示例项目范例，要求学生予以整体临摹制作；2、分析讨论汽车交互动画广告制作的可行性，优化完善工作计划；3、在训练过程中，及时发现和指出操作问题，提出改正建议。1、强化对于汽车交互动画广告制作工作流程和技术标准的解释；2、正确选用完成汽车交互动画广告制作任务的方法；3、预判制作效果，解释技术和结果关系的指导；4、注意总结项目制作的

22、整体方法和出现问题；1、学生编制临摹汽车交互动画广告制作计划中的技术问题；2、学生控制汽车交互动画广告元素、动画、交互功能的缺陷问题；3、学生自主分析制作问题的遗漏部分问题。1、通过比对汽车交互动画广告项目的元素和动画，检查临摹效果；2、通过制作流程、时间和方法的检查，考察综合运用汽车交互动画广告制作技术法的能力；3、对于汽车交互动画广告制作方案的讨论，判断学生对于技术的理解程度。1、对于汽车交互动画广告制作整体流程正确判断分析的方法；2、对于汽车交互动画广告制作项目综合制作的规划方法。1、独立确定工作规划和方法的能力；2、对于汽车交互动画广告制作项目的自主检查分析问题的能力。1、通过发散思维

23、，尽可能多地列出实现目标项目的表现方式方法，并总结归纳出合理的制作流程；2、根据既定工作方案，推测判断制作效果。1、临摹制作汽车交互动画广告效果图，包括工程文件和输出文件；2、汽车交互动画广告临摹制作工作计划。网络及书本资源：Flash交互动画广告制作教程，学习并验证动画制作步骤。登陆各网络资源，了解Flash交互动画广告的表现及应用。4、项目变化与设计训练（使学生能“善做”汽车交互动画广告）8课时知识点：1、对于汽车交互动画广告设计方案和制作要求的理解判断；2、汽车交互动画广告的设计制作流程。能力点：1、分析具体任务要求指标的能力；2、具备拓展应用所学知识和技能的初步能力。1、进一步提高判读

24、设计方案、理解设计要求；2、汽车交互动画广告制作方法的拓展应用能力；3、设计与制作方案的交流表述能力。1、给出汽车交互动画广告设计和制作文档，要求学生掌握从分镜头草图到最后成品效果图的全部完整过程；2、通过指导设计与制作全程，提升学生的设计能力，拓展制作能力；3、通过发布和总结项目训练，形成完整的Flash交互动画广告制作专业能力。1、按照设计要求，全程指导学生设计与制作过程，注重设计能力的培养；2、强化学生操作能力拓展应用的指导；3、对设计方案和技术的可行性予以重点指导。1、用分镜头表达汽车交互动画广告制作方案训练中的问题；2、汽车交互动画广告制作中遇到的技术和操作问题。1、较为完整的汽车交

25、互动画广告设计制作调查报告；2、设计与制作方案草图；3、汽车交互动画广告设计与制作可视化效果图。1、对设计要求的分析理解方法；2、从设计资料素材的收集、整理到出方案、再到完成可视化效果制作的完整流程和方法；3、对于设计与制作效果的自评方法。1、正确判读设计要求，同客户交流表现要求的能力；2、能够独立设定设计制作方案，完成项目制作和预测评估效果的能力；3、能够灵活应用专业技术，拓展应用方法的能力。1、学会根据实现工作目标，分析工作条件和工作问题，归纳总结工作流程；2、尝试采用发散性思维方法，提出独到的汽车交互动画广告设计方案。1、汽车交互动画广告设计与制作的草图方案；2、汽车交互动画广告设计与制

26、作的过程文件和输出文件。收集相关Flash交互动画广告设计的网络资料和素材，进一步分析汽车交互动画广告设计制作的形式特点和方式方法。（2）HTML5交互动画广告制作项目部分： 手风琴横幅交互动画广告制作示例教学项目任务指标：手风琴横幅交互动画广告制作项目项目技术指标与制作总体要求获取的重点知识和能力横幅交互广告尺寸（响应式布局方式）100%X500dpi专业知识：熟悉Edge交互动画广告的表现技术指标和流程，理解技术概念。专业能力：掌握分析Edge交互动画广告分镜头策划的方法，具备制作元件、各种动画效果表现的能力，重点解决交互功能问题。背景颜色黑色（RGB：0，0，0）语言JavaScript

27、兼容性Down-level Stage缓冲过渡Preloader制作文件及输出文件an，html、oam、wdgt项目完成时间30课时教学项目训练活动设计：项目训练内容概要教师的教学工作重点学生的学习和训练重点课余安排教学和训练步骤项目任务要求教学重点与难点教学组织与执行概要操作技术技能训练指导造型表现能力训练指导阶段性检查和评价方法要求能力要求思考要求审美要求资源运用教学准备与补充1、专业项目分析（使学生“知道”手风琴横幅交互动画广告）。2课时。1、交互动画广告表现-手风琴横幅交互动画广告应用领域；2、交互动画广告表现-手风琴横幅交互动画广告制作工作流程，岗位工作形式，制作技术指标，阶段性工

28、作任务要求。3、理解手风琴横幅交互动画广告结构及响应式布局概念。1、提起学生对于本项目的学习和训练的兴趣；2、对于交互动画广告表现-手风琴横幅交互动画广告制作工作任务和技术指标的理解；3、对于手风琴横幅交互动画广告应用领域的了解。1、检验和复习交互动画广告制作类前序课程；2、说明手风琴横幅交互动画广告制作项目的教学训练目标；3、分析手风琴横幅交互动画广告制作技术指标和工作任务要求；4、讨论手风琴横幅交互动画广告制作可能会遇到的问题。1、通过经典手风琴横幅交互动画广告作品介绍和欣赏，帮助学生熟悉技术标准； 2、通过设计方法以及设计思想介绍，帮助学生理解手风琴横幅交互动画广告的制作。3、注意激发学

29、生的学习本课程专注力和学习兴趣。1、手风琴横幅交互动画广告的用途问题。2、手风琴横幅交互动画广告的元件、动画、交互间的关系问题。3、手风琴横幅交互动画广告制作项目的计划可执行度；4、手风琴横幅交互动画广告的设计风格讨论。1、对于制作手风琴横幅交互动画广告项目任务的理解；2、对于手风琴横幅交互动画广告制作技术标准的理解；3、对于手风琴横幅交互动画广告制作术语理解和运用。1、掌握理解和分析手风琴横幅交互动画广告制作项目要求的方法；2、通过调试掌握分析手风琴横幅交互动画广告元件和动画要点的方法。1、通过收集HTML5交互动画广告资料信息来归纳项目任务的能力。2、具备测试手风琴横幅交互动画广告和分析动

30、画的能力。1、手风琴横幅交互动画广告制作和应用领域关系的思考；2、对于手风琴横幅交互动画广告的分析思考；1、手风琴横幅交互动画广告特征分析的归类素材；2、手风琴横幅交互动画广告参数表。3、手风琴横幅交互动画广告制作计划。1、调研手风琴横幅交互动画广告的设计元素，编写分镜头文稿（分镜头草图量不少于6个）；2、调研手风琴横幅交互动画广告用途。1、登陆 “数字艺术港湾”专业网站，搜索FHTML5动画广告制作信息。2、项目跟做训练,（使学生“会做”手风琴横幅交互动画广告）。10课时知识点：1、熟悉手风琴横幅交互动画广告的制作流程；2、理解手风琴横幅交互动画广告制作技术和工具；3、确立分析手风琴横幅交互动画广告主要元素、动画及交互的概念。能力点：1、掌握运用Edge工具进行图形、文字制作、元件和动画处理等工作步骤制作手风琴横幅交互动画广告的正确操作方法；2、熟悉手风琴横幅交互动画广告制作流程和方法。1、Edge工具的正确操作方法；2、手风琴横幅交互动画广告动