本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法。Mugeda为移动教育领域和移动数字出版领域提供理想的教育课件/微课程和交互动画内容制作方案,在PC上制作相关内容的Flash创作人员可无障碍使用Mugeda制作适合平板电脑和智能手机的课件和数字出版物。

课件内容:

一氧化碳还原氧化铜实验课件。课件动画的前半段是实验设备的安装过程动画;后半段是交互部分,在这部分学生可以通过点击按钮的步骤来完成实验,有点燃酒精灯1,点燃酒精灯2,通入CO,然后是停止实验的步骤,有关闭两个酒精灯,和关闭CO。该实验有一定的危险性,必须严格按照正确实验步骤操作,否则会有爆炸(酒精灯1在通入CO前点燃就存在爆炸危险)和一氧化碳中毒(酒精灯2在通入CO之后点燃或者在关闭CO之前关闭都存在CO中毒的危险)的危险。该课件通过动画的形式模拟操作过程,在学生真实操作实验前,先通过动画来模拟会减少因为不熟练而产生危险的可能。互动操作后,会根据学生操作的步骤判断实验步骤是否正确,如果正确给出鼓励的画面,如果错误,给出错误的警告,并显示正确的实验操作步骤。

课件动画演示:

课件截图

设计思路:

该课件相对于游戏来说逻辑比较简单,主要就是记录下点击按钮的顺序,当操作完成后检查记录下来的操作顺序来判断结果是否正确。

关键点:

1.给按钮等元件实例设置segment

例如:

for(var i = 0; i

{

button[i] = scene.getObjectByName("button" + i);

button[i].scene.setSegment("off", 0, 0, false);

button[i].scene.setSegment("on",  1, 1, false);

button[i].scene.playSegment("off");

}

2.判断结果

点击按钮后将按钮相应的数值加入到数组中。

if(buttonStatus[key] !== 1)//判断该按键是否已被按

{

buttonStatus[key] = 1;

order[order.length] = key;//将该操作加入数组

//相应的操作,比如设置该操作对应的效果

}

最后判断结果时按照数组中的值的顺序判断结果

if(order[0] == 2 && order[1] == 0 && order[2] == 1 && order[3] == 1 && order[4] == 0 && order[5] == 2)

{

success.scene.playSegment("on");//结果正确则播放成功元件实例

}

else

{

help.alpha = 1;

fail.scene.playSegment("on");//否则播放失败元件实例

}

3.重新开始时,重设元件实例的segment状态

window.restart = function()

{

help.alpha = 0;

order = [];

buttonStatus = [0,0,0];

CuO.scene.playSegment("static");

blueFire.scene.playSegment("off");

turbid.scene.playSegment("off");

bubble.scene.playSegment("off");

action[0].scene.playSegment("off");

action[1].scene.playSegment("static");

action[2].scene.playSegment("static");

for(var i = 0; i

{

button[i].scene.playSegment("off");

};

success.scene.playSegment("off");

fail.scene.playSegment("off");

}

总结,本案例分析重点介绍用到的Mugeda API的接口用法,从中体会Mugeda动画可以实现的功能和应用领域。下一节,我们将做案例分析:制作跨屏互动应用。

html5做在线课件,HTML5教程:制作移动教育课件相关推荐

  1. html5做在线音乐,html5实现在线响应式音乐播放器

    大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...

  2. 小学认识计算机课件ppt课件,小学生认识计算机PPT教育课件.ppt

    <小学生认识计算机PPT教育课件.ppt>由会员分享,可在线阅读,更多相关<小学生认识计算机PPT教育课件.ppt(32页珍藏版)>请在人人文库网上搜索. 1.Jerome,走 ...

  3. 分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz

    日期:2011/12/07  来源:GBin1.com 今天在公司的网站上发现的一个在线HTML5元素的在线测试,大家有兴趣可以挑战一下,有点小BT.Enjoy! 在线测验 转载于:https://w ...

  4. html5 css3在线工具,HTML5/CSS3开发辅助工具(TopStyle)

    TopStyle 是一款 CSS 开发辅助工具,即 HTML5 / CSS3 编辑器,它专注于 HTML CSS 设计辅助,提供比较多的功能,如 CSS 代码检查等,据称 TopStyle 的帮助文件 ...

  5. html5 swf在线播放,html5怎样播放swf格式的视频

    假如swf文件名为demo.swf跟html页面在同一目录下,代码如下:如果浏览器支持html5的video标签<videosrc="demo.swf"controls/&g ...

  6. html5 3d在线网页,HTML5网页动画 3D旋转展示

    transform-style的3D效果 *{font-size: 14px;color: #fff; padding:0; margin:0;} #container { position: rel ...

  7. html5 video 在线视频,HTML5 视频(Video)

    HTML5 视频(Video) 为了更好的展示内容,很多站点都会使用到视频, HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 互联网上的视频 一直到现在,还没有一 ...

  8. html5做旋转太极图,HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)...

    效果图: 方法一: your browser does not support the canvas tag var deg = 0; var r = 30; var rl = 100; functi ...

  9. 立方体移位html5游戏在线玩,HTML5 CSS3极富创意的立方体游泳动画

    CSS 语言: CSSSCSS 确定 body { overflow: hidden; height: 100vh; perspective: 50em; background: radial-gra ...

  10. div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...

最新文章

  1. linux 脚本编程
  2. MyBatis 流式查询
  3. python中s和t是两个集合、对s|t描述正确的是_全国计算机等级考试二级教程--python语言程序设计(2018年版)第六章:组合数据类型...
  4. CTFHUB《Web-信息泄露-备份文件下载》网站源码,
  5. 选择合适的方法调试程序
  6. 专业工程师看过来~ | RDD、DataFrame和DataSet的细致区别
  7. Python练习:百分制到五级制的转换
  8. Java拷贝(赋值、浅拷贝、深拷贝)
  9. list,set,map,数组之间的相互转换详细解析
  10. android 使用shell模拟触屏_Appium常用操作之「微信滑屏、触屏操作」
  11. GIT安装与使用记录_已迁移
  12. iOS 自动化——技术方案、环境配置
  13. 几点个人信息安全感受
  14. 程序员做技术管理需要懂哪些方面?
  15. Description Resource Path Location Type The import collides with another import statement
  16. 道高一尺魔高一丈,记强大的boost regex
  17. 用调整图层给照片上色
  18. 论文阅读——Knowledge-Bridged Causal Interaction Network for Causal Emotion Entailment
  19. Python 常用的标准库以及第三方库
  20. 项目经验:排队叫号系统(Python)

热门文章

  1. PCB板上的蓝宝石---关于光学定位点的DFM
  2. 苏宁易购执行总裁任峻在IT体系年会上的讲话
  3. android检测ibeacon电量,Android检测IBeacon热点的方法
  4. Win10和win11有什么区别?想重装win10系统怎么操作?
  5. QR扫码综合示例教程(六)Qt6.2.1(widget)取出视频帧 取景器帧
  6. python二进制常量_Python SciPy 常数(Constants)
  7. 风行python_Python是啥?竟然彻底改变了老板对我的看法……
  8. 7.交易开拓者-公式进阶(一)
  9. C语言实现钢琴块小游戏(低仿拉胯版)
  10. php编写网页实例,网页实例:怎么详细介绍用PHP来编写网页记数器