[Mugeda HTML5技术教程之15]案例分析：制作移动教育课件
本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件，从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法。Mugeda为移动教育领域和移动数字出版领域提供理想的教育课件/微课程和交互动画内容制作方案，在PC上制作相关内容的Flash创作人员可无障碍使用Mugeda制作适合平板电脑和智能手机的课件和数字出版物。
课件内容：
一氧化碳还原氧化铜实验课件。课件动画的前半段是实验设备的安装过程动画；后半段是交互部分，在这部分学生可以通过点击按钮的步骤来完成实验，有点燃酒精灯1，点燃酒精灯2，通入CO，然后是停止实验的步骤，有关闭两个酒精灯，和关闭CO。该实验有一定的危险性，必须严格按照正确实验步骤操作，否则会有爆炸（酒精灯1在通入CO前点燃就存在爆炸危险）和一氧化碳中毒（酒精灯2在通入CO之后点燃或者在关闭CO之前关闭都存在CO中毒的危险）的危险。该课件通过动画的形式模拟操作过程，在学生真实操作实验前，先通过动画来模拟会减少因为不熟练而产生危险的可能。互动操作后，会根据学生操作的步骤判断实验步骤是否正确，如果正确给出鼓励的画面，如果错误，给出错误的警告，并显示正确的实验操作步骤。
课件动画演示：
https://cn.mugeda.com/client/preview_css3.html?id=01f00e3a
设计思路：
该课件相对于游戏来说逻辑比较简单，主要就是记录下点击按钮的顺序，当操作完成后检查记录下来的操作顺序来判断结果是否正确。
关键点：
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动画可以实现的功能和应用领域。下一节，我们将做案例分析：制作跨屏互动应用。
