《多媒体交互设计H5》课程教学实施方案

1、武汉软件工程职业学院课程教学实施方案2018-2019学年度第 一 学期开课院部艺术与传媒学院课程名称多媒体交互设计H5授课班级任课教师填表日期：2018年8月31 日填写说明1本方案由任课教师填写， 教研室主任、 院（部） 负责人审核同意后， 于每学期第二周交各院 （部） 教务科存档。2本方案一式二份：开课院（部）一份，教师本人一份。3所有栏目应填写完整，“理论教学进度安排”表和“实践教学进度安排” 表的空格内可以按照教学内容分章、分节、分项的要求自行加画子栏目，并可加页或适当调整表格。4理论课程（ A 类）填写“理论教学进度安排”表，理实一体化课程（ B 类）填写“理论教学进度安排” 表和

2、“实践教学进度安排” 表，实践课程（ C 类）填写“实践教学进度安排” 表。5. 理论课程（ A 类）一般按 2 学时为一个条目填写，理实一体化课程（ B 类）中的 “实践教学进 度安排” 表和实践课程（ C 类）填写“实践教学进度安排”表一般按半天为一个条目填写。课程类别：B类（必修），开课时间：第9周至第12周，周课时16；本学期课时数（学分）64（4）。考核要求：考核类型（考试 /考查） 考试，考核方式：随堂设计作品考核。成绩分配：期末考试成绩占总分比例60 %;平时成绩占总分比例40 %，其中：书面作业占10%，实践性环节占 20 %，考勤占10 %。本课程 授课已宀 完本学期理论时教

3、学数实践教学 时数复习机动授课总时数 （总学分）成 学时数总学时数讲授其它单项技能 训练综合技能 训练课程设计640642401822000教学目的:本课程是数字媒体艺术设计专业学习领域的核心课程。通过学习运用Mugeda这个专业级 H5交互动画制作云-平台，使学生掌握H5动效及其应用、熟练掌握关键帧动画、路径动画、进度动画、曲线变形动画、预置动画、兀件动画等多种动画形式，并利课程教学用行为添加与关联控制物体的交互行为，在基本无代码情况下，在线就可以直接创建有丰富表现力的互动动画、移动广告、H5小游戏、目的和要求移动教育等应用，咼效率低成本的完成开发和制作。（分述）教学要求:本课程面向 H5设

4、计师设计岗位能力,以培养H5设计人才为目标，培养学生制作H5宣传页面的制作，视频商业广告、一镜到底特效、长图拖动、表单及照片合成、全景虚拟、遮罩、H5商业展示类广告、微信小游戏设计等设计和制作能力，具有扎实的操作技能，具有团队协作、自主创新的职业素养，满足H5设计师的岗位任职要求。教材：新媒体运营实战技能张向南主编人民邮电出版社2017-5;教材和参考书参考书：零代码 html5交互动画设计陈志主编高等教育出版社2017-9;HTML5基础知识刘欢主编人民邮电出版社2016-1;移动互联网之路李晓斌主编清华大学出版社2016-1;教研室院责 负 立口 z(审查意见人审查意见年月日年月日理论教学

5、进度安排周次章、节及内容重、难点（重难点分别说明）教学类型（讲授或其 它教学形式）学 时 数使用教学设备 及软（课）件作业第9周一、HTML5的概述（一）H5的技术简介（二）移动端的特点（三）H5内容的创新（四）H5行业应用（五）木疙瘩简介重点：使学生了解 H5的技 术特点及内容创新运用行业范 围。难点：H5的行业应用及未来 趋势。讲授1配有网络的多媒体教室、Mugeda在线软件市场调 研H5的应用， 了解各类H5 的展示形式 和表现方法。一、Mugeda界面与舞台（一）界面组成及功能介绍（二）时间线的简单介绍（三）H5简单制作流程重点：掌握木疙瘩界面的组 成。难点：熟练掌握时间线的涵 义及H

6、5的简易制作流程。讲授1配有网络的多媒体教室、Mugeda在线软件设计一款 摇一摇随机 出现画面游 戏三、图片与声音导入（一）图片的导入及控制浏览方式（二）音频的导入及控制方式重点：掌握图片类文件的导 入及控制编辑。难点：掌握音频导入及控制讲授2配有网络的多媒体教室、Mugeda在线软件带音频 的H5宣传页 面的制作四、视频的导入与控制（一）视频的导入（二）视频的控制播放方式（三）跳转网页链接重点：不同文字与页面图形 处理及其特点。难点：了解不同页面头部及 菜单制作的知识。讲授2配有网络的多媒体教室、Mugeda在线软件带视频 的H5汽车广 告宣传页面 的制作五、媒体的导入与编辑及素材的绘制（

7、一）文字、段落文字（二）网页（三）幻灯片（四）图表（五）常用编辑与操作（六）绘制素材重点：掌握视频文件导入。 难点：视频文件播放控制。讲授2配有网络的多媒体教室、Mugeda在线软件编组操 作的卡通类 型长图拖动理论教学进度安排周次章、节及内容重、难点（重难点分别说明）教学类型（讲授或其 它教学形式）学 时 数使用教学设备 及软（课）件作业第10周六、动画的几种类型（一）进度动画（二）变形动画（三）关键帧动画（四）路径变形动画（五）元件动画重点：使学生掌握不冋类型 动画效果的区别，熟练掌握关键 帧动画的涵义及制作技巧。难点：熟练掌握路径变形对 关键帧动画的应用，元件动画的 建立及序列帧的导入。

8、讲授2配有网络的多媒体教室、Mugeda在线软件动画类 型较丰富的 一个完整H5 页面制作七、行为的添加及触发事件的交互（一）动画播放控制（二）媒体播放控制（三）属性控制（四）手机功能（五）微信定制（六）触发事件的交互重点：掌握动画及媒体播放 控制方式及触发条件；熟练掌握 属性控制对于交互的作用。难点：熟练掌握手机功能及 微信行为行为添加；掌握不同方 式的触发条件。讲授2配有网络的多媒体教室、Mugeda在线软件H5 一镜到底动画制 作八、关联与逻辑判断（一）舞台关联（二）属性关联（三）元件动画关联（四）自动关联、公式关联（五）条件判断、逻辑表达式判断、多 种表达式的写法重点：熟练掌握关联中控

9、制 关系，掌握不同类型关联的区 另熟练掌握属性关联涵义。难点：熟练掌握元件关联、 自动关联、公式关联，关联中条 件的判断及逻辑表达式的写法。讲授2配有网络的多媒体教室、Mugeda在线软件长图拖 动效果制作； 利用拖动滑 块控制手机 展示动画第11周九、表单的制作（一）表单的几种输入框的形式（二）表单的数据收集与分析（三）行为中属性控制的舞台截图重点：熟练掌握不同表单输 入的区别及数据收集与分析。难点：表单输入与文字关 联，舞台截图的使用。讲授2配有网络的多媒体教室、Mugeda在线软件H5表单问卷制作理论教学进度安排周次章、节及内容重、难点（重难点分别说明）教学类型（讲授或其 它教学形式）学

10、 时 数使用教学设备 及软（课）件作业第11周十、全景虚拟动画制作（一）全景虚拟空间（二）自定义场景重点：掌握全景虚拟空间创 建，熟练掌握热点创建及行为。难点：熟练掌握自定义场景 的制作方式。讲授2配有网络的多媒体教室、Mugeda在线软件全景虚 拟空间及自 定义场景制 作十一、遮罩动画效果制作（一）遮罩动画原理（二）遮罩动画制作步骤重点：掌握遮罩制作过程。难点：熟练掌握遮罩动画的 制作技巧及与元件动画和关键 帧动画配合使用。讲授2配有网络的多媒体教室、Mugeda在线软件利用遮 罩制作一个 完整的画面 对比H5动画第12周十二、控件的使用及与行为配合（一）擦玻璃和点赞（二）摇一摇（三）陀螺仪

11、（四）定时器和随机数（五）投票和计数（六）画板（七）连线（八）拖放容器（九）抽奖（十）排行榜重点：掌握不同控件使用。难点：熟练掌握不同控件与 其相对应行为的配合使用。讲授2配有网络的多媒体教室、Mugeda在线软件完整的 H5商业展示 类广告或楼 书广告十三、H5游戏制作（一）游戏环节与交互设计；（二）游戏发布与测试重点：掌握游戏制作中各类 行为与关联的技巧；难点：熟练掌握游戏中逻辑 的建立。讲授2配有网络的多媒体教室、Mugeda在线软件行为判 断类的H5手 机游戏实践教学进度安排周次项目名称目的和要求主要内容设施和条件检验形式学时数支撑项目的知识点第9周单项技能训练' .设计一款摇

12、一 摇游戏。目的：通过任务的实践，掌 握木疙瘩界面的组成。要求：熟练掌握时间线的涵 义及H5的简易制作流程。摇一摇游戏配有网络的多媒体教 室、Mugeda在线软件作品考核2时间线、行为中 的跳转到页、触发行 为、预置动画、运动、 元件动画等单项技能训练带音频的H5宣传页面的制作目的：通过任务的实践，掌 握了解UI图标或按钮设计规范 及原则。要求：熟练掌握 UI界面设 计图标或按钮技巧。美丽中国公益宣传配有网络的多媒体教 室、Mugeda在线软件作品考核2图片导入、音频 导入、预置动画综合技能训练' .为某汽车品牌 制作H5广告目的：熟悉媒体素材的导入 及视频文件的播放与控制；要求：能利

13、用跳转链接方式 到实体网站。带视频的H5汽 车广告制作配有网络的多媒体教室、Mugeda在线软件作品考核2图片导入、视导 入、视频的控制及播 放方式、物体行为属 性中跳转链接等。单项技能训练编组操作的卡 通长图拖动目的：通过任务的实践，掌 握媒体文件的导入。要求：熟练掌握对象的编组 及应用，掌握图形的绘制技巧。编组操作的卡 通类型长图拖动配有网络的多媒体教室、Mugeda在线软件作品考核2媒体文件的导 入；对象的编组及应 用；素材的绘制。第10周单项技能训练四：动画类型较丰 富的一个完整 H5页面制作目的：通过任务的实践，使 学生掌握不冋类型动画效果的 区别，熟练掌握关键帧动画的涵 义及制作技

14、巧。要求：熟练掌握路径变形对 关键帧动画的应用，元件动画的 建立及序列帧的导入。开车小游戏制 作配有网络的多媒体教 室、Mugeda在线软件作品考核6进度动画、变形 动画、关键帧动画、 路径变形动画、元件 动画实践教学进度安排周次项目名称目的和要求主要内容设施和条件检验形式学时数支撑项目的知识点第10周单项技能训练五：H5 一镜到底 动画制作目的：通过任务的实践，掌 握动画及媒体播放控制方式及 触发条件；熟练掌握属性控制对 于交互的作用。要求：熟练掌握手机功能及 微信行为行为添加；掌握不同方 式的触发条件。一镜到底动画 制作（2016网易娱 乐画传）配有网络的多媒体教 室、Mugeda在线软件

15、作品考核2关键帧动画、属 性控制、触发事件的 交互第10周第11周综合技能训练长图拖动效果 制作目的：熟练掌握关联中控制 与被控制对象之间的关系、 掌握 不冋类型关联效果的区别、 熟练 掌握属性关联的涵义及属性的 种类、元件关联的应用、自动关 联中控制量的使用以及公式关 联中的公式的运用。要求：掌握关联中条件的判 断及逻辑表达式的写法。H5长图拖动效 果制作配有网络的多媒体教室、Mugeda在线软件作品考核6关键帧动画制 作、路径变化动画制 作、舞台关联、属性 关联、元件动画关联、 自动关联、公式关联、 条件判断、逻辑表达 式判断、多种表达式 的写法等。单项技能训练六：H5表单问卷 制作目的：

16、通过任务的实践，掌 握熟练掌握不同表单输入的区 另掌握表单的数据收集与分 析。要求：表单输入与文子关 联，舞台截图的使用。1. H5表单问卷 制作。2. 输入文字与 图片合成效果制作（舞台截图）。配有网络的多媒体教室、Mugeda在线软件作品考核2表单的几种输入 框的形式、表单的数 据收集与分析、行为 中属性控制的舞台截 图实践教学进度安排周次项目名称目的和要求主要内容设施和条件检验形式学时数支撑项目的知识点第11周单项技能训练七:全景虚拟空间 及自定义场景 制作目的：通过任务的实践，掌 握全景虚拟空间的创建，熟练掌 握热点的创建及行为。要求：熟练掌握自定义场景 的制作方式。全景虚拟空间 及自

17、定义场景制 作。配有网络的多媒体教 室、Mugeda在线软件作品考核2全景虚拟空间、自定义场景综合技能训练H5遮罩动画制 作目的：掌握遮罩动画原理及 遮罩动画制作步骤。要求：熟练掌握遮罩动画的 制作技巧及与元件动画和关键 帧动画配合使用。利用H5遮罩动 画制作图片切换对 比配有网络的多媒体教 室、Mugeda在线软件作品考核2遮罩动画原理、 遮罩图形制作、遮罩 与兀件动画和关键帧 动画配合使用技巧 等。第12周综合技能训练四：商业展示类H5广告目的：掌握商业类案例制作 流程。要求：熟悉h5制作中各类 动画特效的制作技巧以及交互 与关联类按钮的制作方法。商业展示类H5 广告配有网络的多媒体教 室、