博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Mugeda HTML5技术教程之15]案例分析:制作移动教育课件
阅读量:7104 次
发布时间:2019-06-28

本文共 1840 字,大约阅读时间需要 6 分钟。

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

 

课件内容:

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

课件动画演示:

设计思路:

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

关键点:

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

例如:

for(var i = 0; i < 3;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 < 3;i++)

       {

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

       };

       success.scene.playSegment("off");

       fail.scene.playSegment("off");

   }

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

 

转载于:https://www.cnblogs.com/mugeda/p/3544054.html

你可能感兴趣的文章
Swift 值类型/引用类型
查看>>
【WPF】点击滑动条(Slider),移动滑块(Tick)到鼠标点击的位置
查看>>
[每天五分钟,备战架构师-9]数据库系统
查看>>
[转]WinForm和WebForm下读取app.config web.config 中邮件配置的方法
查看>>
HDU-1903 Exchange Rates
查看>>
ado.net entity framework使用odp.net(ODAC for .net)连接oracle11g体验
查看>>
svn怎么版本还原?
查看>>
ABP源码分析三十七:ABP.Web.Api Script Proxy API
查看>>
Quartz 定时任务管理
查看>>
大公司都有哪些开源项目~~~简化版
查看>>
java生成word的完美解决方案
查看>>
ubuntu使用记录
查看>>
java生成zip压缩文件,解压缩文件
查看>>
我的Ajax服务端框架 - 安全问题,初始化设置,实现原理
查看>>
一位程序员的十个忠告
查看>>
[转]代理(Proxy)和委派(Delegate)的区别
查看>>
【JAVASCRIPT】js知识点整理1
查看>>
两天入门五天掌握,这样的laravel别告诉我难
查看>>
老司机飙车GITC2016!金山混合云不只是获了个奖!
查看>>
PyTorch 1.0 正式发布,支持 eager 和 graph 模式无缝转换
查看>>