[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动画可以实现的功能和应用领域。下一节,我们将做案例分析:制作跨屏互动应用。
[Mugeda HTML5技术教程之15]案例分析:制作移动教育课件的更多相关文章
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- [Mugeda HTML5技术教程之12]制作跨屏互动应用
mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面.通过手机就可以和PC端的显示界面跨 ...
- [Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...
- [Mugeda HTML5技术教程之5] 创建新作品
前一节,我们介绍了Mugeda Studio.这一节我们讲一下怎么通过Studio创建新作品.首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个.登录网站后,点击 ...
- [Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
- [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容
1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...
随机推荐
- 网站的优化----首页优化---app调取服务端数据
高并发经常会发生在有大活跃用户量来访问网站的某个点,例如用户高聚集的业务场景中,如:抢购,促销等.为了让用户流畅的访问网站,来根据自己的业务设计适合系统的处理方案. //对于APP网站首页数据,通常是 ...
- 解决IE10以下对象不支持“bind”属性或方法
IE10一下的浏览器,如果在JS代码中用了bind函数,那么就会报“SCRIPT438: 对象不支持“bind”属性或方法” 因为浏览器没有提供这个参数的方法,所以我们就自己写一个bind,来让这个参 ...
- iOS学习之导航条NavigationControl的一些属性设置
/** * 配置公共的属性,该属性作用于所有的导航条界面; */ - (void)configureConmmonPropety { //1.设置导航条的颜色 self.navigationContr ...
- Activity生命周期的学习以及Logcat的使用
http://android.blog.51cto.com/268543/322518/ Activities是由Activity stack管理的.当一个新的Activity被启动,它就会处于st ...
- BZOJ1263: [SCOI2006]整数划分
1263: [SCOI2006]整数划分 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 677 Solved: 332[Submit][Status] ...
- 虚拟机最佳实践:单个 VM、临时存储和已上传磁盘
大家好! 我是 Drew McDaniel,来自 Microsoft Azure虚拟机功能研发团队,我从团队成立之初就已加入. 在本博客文章中,我将分享一些最佳实践指南,帮助您充分利用您的Azure虚 ...
- yaml 1.6 操作
/** * Copyright (c) 2008, http://www.snakeyaml.org * * Licensed under the Apache License, Version 2. ...
- Webservice-Java-Xfire
最近公司最近需要将以前提供出去的接口统一用一个标准来实现,考虑到webservice这个是标 准,因此我花时间大概学习了一下webservice,也对JAVA的几个webservice框架进行了一些小 ...
- Android 按二次后退键退出应用程序
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- Android Studio使用技巧系列教程(二)
尊重劳动成果,转载请注明出处:http://blog.csdn.net/growth58/article/details/46764575 关注新浪微博:@于卫国 邮箱:yuweiguocn@gmai ...