一个好的h5交互课件该怎么制作

       什么才算是好的课件呢。我认为评价课件好坏的首要标准应该是课件知识点是否涵盖完全，能否完成教学的需要。其次才是课件是否有趣，采用何种表现形式。无论是过去的板书、投影，到前几年的ppt、flash动态课件，一直到今天我讲的最热的h5交互课件，传授知识才是课件的灵魂。

       随着教育2.0的推进，html5技术在教学应用里越来越重要，h5交互课件正加速淘汰过去的flash课件、steam课件、scorm分屏课件。h5交互课件的制作形式可以说是多种多样的，总结起来大致分为三种。

        第一种是用传统的网页元素（dom）标签来制作。第二种是用在网页canvas标签内原生开发。第三种是用成熟的js引擎搭配canvas开发。

---

        第一种方法制作的课件，市面上代表产品是“易企秀”，课件更适用于企业介绍，产品移动端推广。它的原理是工具封装css3动画，让网页上的一个个dom元素动态组合，完成效果。它的优点是加载速度快，流畅度高。缺点也很明显，无法胜任复杂的交互。

---

        第二种方法制作的课件，一般是开发团队自己搭建环境，用html5里canvas画布标签，js操作元素，展现在canvas上。缺点是，小团队缺少经验，开发效率比较低。

---

       第三种方法，是市面上头部教育公司（好未来、新东方等）开发团队或者教育集团合作的第三方技术方案提供方最常提供的方法。就是采用成熟的web引擎，搭配动画，依照具体环境需求来选择最合适的引擎来编写的课件。我所了解的业内课件领域最专业的课件制作公司之一北京红格子网络科技有限公司（www.redgezi.cn），他们有上万讲次上百系列的h5课件制作经验，他们对课件选用哪种引擎有一套严格的标准。比如在电子白板上播放的课件，在一体机上播放的课件，或者在移动端上播放的课件，或者是在1v1场景pc上播放的课件，他们都会推荐不同的引擎来用。选用一个引擎，决定着制作的难易，优化的方向不同。

---

      选用了合适的引擎之后，就要开始制作了。制作课件，首先要有完善的脚本。一个好的课件，脚本就决定了课件成功的一半。写的多的脚本，未必就是好脚本。脚本在精，不在繁。脚本要把课件的知识点全部涵盖，额外的表现形式，更多应该交给制作老师。脚本编写老师往往夹了太多不是核心的内容在课件里，这样，其实限制了课件制作的发挥。后面我会讲h5交互课件的几个细节。

    1. 第一讲课件的重要性 

     为什么说，第一讲课件决定整体课件的质量呢。因为，第一讲课件在整体风格上给整个课件定了基调。在动画质量上，为后续动画制作划了线。

    2.交互题目的类型、交互方式

    h5交互课件的交互方式有：点击、拖拽、连线、画线（画笔功能）。

    3.h5课件的性能

    adobe公司发展的这么多年，flash的性能优化到了一定程度。相比flash，h5还是一个比较年轻的技术，在移动端，尤其是早几年的智能手机终端上，h5表现并不好。但是，随着智能终端硬件的升级，h5课件的性能问题已经越来越不是问题了。对市面上最近一两年内的硬件，我上面提到的北京红格子，他们依然有相应成熟的优化方式。

  今天先讲到这里，谢谢大家。                                                                              2019.1.12