网页动画设计与制作.ppt

网页动画设计与制作,制作：顾雷平、潘尚仕 上海工艺美术职业学院,课程专业属性,采用单元制的教学安排，以保持本课程的职业性和专业性特色。强调模拟专业工作流程、工作内容和工作质量指标。,属于电脑艺术设计专业大平台多元化专业教学体系中专业岗位技能类学习包项目课程，是专业主干核心课程。,由Flash交互动画广告制作项目课程和HTML5交互动画广告制作项目课程两门紧密联系的课程组成，分别对应于横幅动画广告制作项目和条幅扩展式交互广告制作项目专业技能，形成能力递进学习关系，并能够较为全面地覆盖交互网页动画设计与制作的专业领域。,前序课程,网页美术设计、用户界面设计等，需要具备这些学习包课程所赋予的专业知识和专业能力作为学习本学习包课程的专业基础。,后续课程,互动多媒体设计和多媒体互动综合创作课程是所有学习多媒体设计类交互动画课程综合能力的体现，能够直接对接多媒体设计与制作的相应专业工作。,课时安排,（1）FLASH交互动画广告制作项目课程：32课时； （2）HTML5交互动画广告制作项目课程：32课时。,总课时：64课时,课程体系,网页美术元素设计项目包课程,专业基础课程,用户界面元素设计项目包课程,专业主干核心课程,网页动画设计与制作项目包课程,HTML5交互动画广告制作项目课程,Flash交互动画广告制作项目课程,行业专业岗位技能水平认证,学习目标,让学生了解网页动画的基本形式和技术要点，并且掌握网页动画制作工具Adobe Flash动画制作工具和Adobe Edge HTML5动画制作工具的使用技巧，能够集成文字、声音、视频等多媒体元素，并能够发挥创意、自主完成网页动画作品的创作。,能力目标,掌握Flash和Edge这2个主流网页动画制作工具的安装和使用方法；能够合理选择不同的技术来制作动画来适应日趋复杂性的网页应用平台；能够在网页动画的基础上进行一定的交互编程工作，让网页动画和交互设计结合起来。,知识目标,能够正确认识网页动画在网站上的形式和作用；能够了解不同类型网页动画和网页动画广告的技术要点和优劣；能够掌握网页动画创作的一般流程和流程中涉及的基本工具和操作方法,学习/训练方法,运用数码四步教学法及项目案例设计制作程序为主的方式训练学生，通过由易及难，由简及繁的系列专业项目训练，帮助学生具备网页动画设计与制作的专业能力，并在项目化教学训练的过程中，理解和掌握专业知识。,让学生通过系列项目任务训练，经由从“不会专业工作”到“会制作型专业工作”，再到“善于做制作型专业工作”，最后到“善于做设计与制作并举的专业工作”这一专业工作能力成长的科学路径，最终形成相对完整的网页动画设计与制作专业岗位能力。,2,3,4,数码四步教学法,1,工作认知,项目跟做训练,临摹和变化训练,创作和设计训练,单个实训项目,制作训练,创作训练,2,3,4,教学过程的具体形式,1,工作认知,项目跟做训练,临摹和变化训练,创作和设计训练,具体工作过程及项目认知（调研、提问、报告，收集资料）,分阶段渐次提高难度（跟教师制作步骤）,因才施教、有选择地布置临摹稿（教师布置任务）,根据调研及前期经验自行设计制作产品，并完成制作报告书（教师针对性引导）,知识要点,了解设计交互网页动画制作的应用领域及制作的技术标准；,了解交互网页动画设计的制作流程；,熟悉交互网页动画制作中的专用术语及其代表的概念；,理解交互网页动画制作软件工具的功能和作用；,能够分析一般网页动画项目的重点难点和素材支撑；,技能要点,能够使用Flash和Edge软件工具根据设计方案正确制作交互网页动画；,能够正确进行矢量图形的绘制和声音、图像和视频元素的集成能力；,能够合理设置设计网页动画制作中的帧动画、遮罩动画和引导层动画等三种基本动画的能力；,能够编写Flash ActionScript和JavaScript代码实现交互的能力；,能够演示并充分阐述项目设计的成果；,行为要点,严守技术标准的态度,遵守工作纪律的习惯,善于探索研究的学习风格,对工作认真负责的职业操守,团队协同工作的合作精神,能够承受工作压力的忍耐品格,从专业角度为设计委托客户精心工作和服务观念,对应技能职业,通过本课程的学习以后，学生能够初步掌握网页动画设计和网页动画交互制作的技能，具备上海市职业指导中心的“网页设计师”三级（高级）和“多媒体作品制作师”三级（高级）技能资质标准中的专业技能水平。,在修完本项目包课程以后，还可以参加我国工信部网页设计师和多媒体设计师的专业技能资质认证，获得全国公认的“网页设计师”的专业技能资质证书。更可以参加国际公认的Adobe交互设计师资质认证，获得 “交互设计师”专业能力标准的行业认定资质。,教学项目设计,均来自于真实的各种类型网站的典型交互动画广告案例，集中了主流网站中的典型交互动画广告制作过程中的典型问题，以及典型解决方法。,本课程的教学项目的来源,网页动画设计与制作项目包项目课程包括Flash交互动画广告制作项目和HTML5交互动画广告制作项目，主要由横幅动画广告制作项目和条幅扩展式交互广告制作项目训练课程这二类产品并行又关系紧密的课程组合。,教学项目设计的基本结构,使整个教学过程贴近实际专业工作过程，保证专业教学职业性特色。,教学项目设计的基本目标,由难到易，使学生在完成项目任务中得到模拟工作岗位岗位和工作内容的体验，使教学训练得以遵循实际专业能力形成路径、对应完成专业工作的综合要求。,教学项目设计的基本形式,教学项目设计的基本原则,项目任务的透明性、项目完成结果的可见性、项目教学过程学生情绪的控制性、所有学生行动的参与性、教学指导意见的建设性、项目知识讲解的形象性、项目执行主题的共识性、项目评价归纳的简约性。,在A和B项目中具体主要以汽车广告制作项目制作训练课程、手风琴式交互展示广告设计与制作项目训练课程、网页动画设计与制作训练课程等交互动画广告制作来表现A和B项目，由易到难，由简到繁的设计制作过程。,教学项目设计的基本内容,A、Flash动画广告设计与制作项目,B、HTML5交互动画广告设计与制作项目,教学内容,A、Flash动画广告设计与制作项目课程,a、汽车交互动画广告制作技术； 交互动画的概念 交互动画与传统动画的区别 网络广告概念及发展现状 网络广告交互动画特点 Flash交互动画广告应用领域 Flash交互动画广告设计原则 Flash交互动画广告制作流程和要求 b、 Flash动画广告元素制作技术； 广告动画元素制作技术标准和基本流程 色彩处理 图形的建立与编辑 文字的建立与编辑 元件与元件库 导入外部素材的方法 c、 Flash动画广告制作技术； 广告动画制作技术标准和基本流程 时间轴和关键帧 逐帧动画制作 动画补间动画制作 形状补间动画制作 引导层动画制作 遮罩层动画制作 d、 Flash交互动画广告制作技术； 交互按钮的制作 利用ActionScript语言实现交互的程序编写,教学内容,B、HTML5交互动画广告设计与制作项目课程,a、手风琴式交互展示广告设计与制作技术； HTML5交互动画广告制作的主要特点 HTML5交互动画广告制作的基本要求和操作流程 b、 HTML5动画广告元素制作技术； 基本形的建立和编辑方法 文件的建立和编辑方法 为图形添加色彩的方法 元件的建立和编辑 c、 HTML5动画广告制作技术； 位移、旋转动画的制作 遮罩动画的制作 添加背景音乐的方法 建立视频播放的方法 动画特效的处理方法 d、 HTML5交互动画广告制作技术； 了解事件及事件驱动的概念 利用JavaScript语言实现交互的程序编写,教学案例和教学活动设计,本项目包课程的教学活动计设遵循以典型项目引领整个专业教学过程，将专业知识融汇于专业项目的制作训练过程中；,本项目包课程的教学活动的设计根据学生的学力设定教学难度和教学进度，充分考虑目前高职学生的学习基础、学习能力和学习习惯，通过专业能力要求渐次递进的项目案例组合训练学生，使学生在学习中得到工作的体验，在训练中不断强化专业兴趣。,本项目包课程由Flash交互动画广告制作项目课程和HTML5交互动画广告制作项目课程两个专业业务部分内容组合而成，每个专业业务教学部分设定相应的“教学项目任务指标”，以此作为项目教学训练的起点和教学指导依据，通过逐次渐进的不同难度系数项目任务训练，着力营造具有专业工作目标、专业工作情境和专业工作内容的教学过程。,考核方式,本项目课程采用多元开放式考核评价方式，即：任课教师的课内考核，后续课程教师的考核校验，社会综合考核三结合的全面评价方式。,任课教师的课内考核：是在教学任课过程中，根据课程教学标准予以阶段性的考核，主要侧重于在教学过程中，依据学生的学习状况和学习成果，通过比对教学目标和课程评价标准后对学生的：专业知识、专业能力和专业学习态度这3个方面进行综合评价。,后续课程教师的考核校验：是在教学课程开始之初，对于学生进行的学习准备的情况进行考核，重点测评学生前序课程的专业知识和专业能力掌握状况，根据发现的问题，及时补充或者调整部分教学内容，以确保教学质量。,社会评价主要利用现代网络技术展示学生的学习成果，请本专业相关企业和家长等通过对学生的学习成果进行评价。,教师资质,担任网页动画设计与制作项目课程的专任教师应该具备3年以上的从教经验。担任网页动画设计与制作项目课程的兼职教师应该具备Adobe交互设计师等国际专业设计师资质，或者具有我国工信部网页设计师的行业专业资质，并且具有3年以上的本专业岗位工作经验。,教学实训条件,本课程的实施的基本条件是同企业生产情境相匹配，确保学生人手一台安装有Flash、Edge、PHOTOSHOP、OFFICE等软件的计算机，并且还具备投影仪等多媒体设备。,教学资源,参考书：网络广告设计