[Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述
Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容。它提供了一下方法:
•访问Mugeda内容中的对象。
•获取和设置对象属性,如位置、旋转、比例、不透明度等。
•控制Mugeda动画的回放(例如:播放/暂停/跳转)。
•在舞台中添加/移除/编辑对象。
•处理鼠标/触控事件创造互动体验
Mugeda API 是基于系统JavaScript技术。 不需要额外的库。
二.开始
开始使用Mugeda API是很轻松的。 在Mugeda IDE中,只需点击脚本工具栏上的按钮 。 然后在脚本窗口中输入你的代码。
三.命名空间和类
大部分的Mugeda API是基于一个叫做Mugeda的命名空间(对象) 。
Mugeda API包含三个主要类:内容、场景、和元素。
四.访问内容对象
每一个Mugeda内容都被用一个内容对象来表示,它可以这样获得:
var content = Mugeda.getMugedaObject();
五.内容属性
例如:获取内容的标题、宽度、高度。
var content = Mugeda.getMugedaObject();
var title = content.title;
var width = content.width;
var height = content.height;
六.renderReady 事件
直到Mugeda内容加载好并准备好被呈现,场景才是有效的。 监听到“renderReady” 事件后再去访问场景对象。
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener(‘renderReady’, function () {
var scene = mugeda.scene;
// Your code here.
});
七.场景对象
访问主舞台的场景:
var scene = mugeda.scene;
访问元件实例的场景:
// 获取一个元件实例
var symbolInstance = mugeda.scene.getObjectByName(‘symObj’);
//获取场景对象
var symbolScene = symbolInstance .scene;
八.播放控制
scene.play(); // 播放场景
scene.pause(); // 暂停场景
scene.gotoAndPlay(num); // 跳转到特定帧然后播放场景
scene.gotoAndPause(num); // 跳转到特定帧然后暂停场景
var id = scene.currentId; // 获取到当前帧号
九.元件场景的段(Segment)
在一个元件场景内可以定义多个段(Segment )并在运行是引用,,这样你可以精确地控制一个元件场景的播放行为。
scene.setSegment(‘seg1’, 0, 5, false) // 命名 0~5 帧作为seg1,不循环scene.setSegment(‘seg2’, 6, 10, true) //命名6~10帧作为seg2,循环
scene.playSegment(‘seg1’) //跳转到0帧并一直播放到5帧
scene.playSegment (‘seg2’) //跳转到6真并一直播放到10帧
// 然后再跳到6帧并一直播放到10帧
//这样循环播放
十.帧回调
每一帧被呈现后,一个场景对象将触发“enterFrame” 事件。在你自己的程序中添加这个事件监听。
var callback = function (frameId)
{
console.log(‘Current frame is: ‘ + frameId
}
scene.addEventListener(‘enterframe’, callback);
十一.元素对象
场景中的每一个对象都用一个元素对象来表示。
一个元素对象可能代表一个图像,文本,图形,或一个元件实例。
访问元素对象:
var element = scene.getObjectByName(‘face’);
复制元素:
var element = scene.getObjectByName(‘name’);
var copy = element.clone();
创建新的元件实例:
var instance = mugeda.createInstanceOfSymbol(‘symbol_name’);
添加/移除元素:
scene.appendChild(element);
scene.removeChild(element);
要添加一个元素应该克隆一个存在的元素,或者由一个元件创建一个实例。
要删除的元件应该通过scene.getObjectByName函数来获取。
获取/设置 元素属性:
var x = element.x // 得到这个元素的x坐标
element.x = 100 //设置这个元素的x坐标
同样,我们可以访问name, x, y, top, bottom, left, right, scaleX, scaleY, width, height, rotateCenterX, rotateCenterY, rotate, visible, alpha这些属性。对于图像,element.src是它的url 。对于文本对象,element.text 是文本的内容。对于元件实例,obj.scene (只读)是元件实例场景。
十二.处理元素事件
输入事件:
给对象添加事件很容易,就像处理dom一样:
element.addEventlistener(‘click’, callback);
支持的事件包括:mousedown, mouseup , click , dblclick , mouseover , mouseout , mousemove , touchstart , touchmove , touchend , inputstart , inputmove, and inputend。
InputStart, InputEnd, InputMove事件:
Input*事件包装了鼠标和触摸事件。 通过监听input* 事件,鼠标(在PC上) 和触摸事件(在智能手机和平板电脑) 将以统一的方式处理。
element.addEventlistener(‘inputmove’, function(event) {
var x = event.inputX;
var y = event.inputY; // 得到鼠标或手指的位置
});
十三.加载资源
默认情况下,Mugeda播放器加载完所有的资源(图像、音频等)后才开始播放创意。有时你可能想要手动控制资源加载。比如,你可能想要缓存一些信头帧,这样就可以减少缓冲时间和开始播放动画更快。要做到这一点,可以设置Mugeda.zoneCache属性,或调用Mugeda.cacheZone()函数。Mugeda.zoneCache 可以添加到loader.js文件的末尾:
Mugeda.zoneCache = [startFrame, endFrame];
Mugeda.cacheZone()函数在renderReady 事件被激活之前被调用:
Mugeda.cacheZone(startFrame, endFrame, null, function(percent){ console.log(percent);
})
十四.Mugeda 对象概述
十五.编码框架
十六.例程
在演示中,我们创建一个时钟显示当前时间。
https://cn.mugeda.com/client/preview_css3.html?id=58df45ca
步骤 1: 在Mugeda IDE中创建一个时钟的模型。
在0图层、1帧导入钟面、时针、分针和秒针四个图片。
步骤 2: 移动时钟表针的旋转中心。
选择每一个表针,然后右击,选择“组->组合”。 然后选择比例按钮( ),并按住“Ctrl”键拖拽旋转中心到钟面的中心。
步骤3: 命名每一个图片
在IDE中选中每一个图片,并为其提供一个名字。
在演示中,我们将钟面、时针、分针和秒针分别命名为“face”、 “hour_hand”、“minute_hand”和“second_hand”。
步骤4: 编码
在IDE工具栏中,单击脚本按钮来打开脚本编辑器。
步骤4.1: 获取mugeda对象
var mugeda = Mugeda.getMugedaObject();
步骤4.2: 等到一切都准备好了
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener(‘renderReady’, function () {
});
步骤4.3: 得到场景对象
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener(‘renderReady’, function () {
var scene = mugeda.scene;
});
步骤4.4: 取到表针
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener(‘renderReady’, function () {
var scene = mugeda.scene;
var hourHand = scene.getObjectByName(‘hour_hand’),
minuteHand = scene.getObjectByName(‘minute_hand’),
secondHand = scene.getObjectByName(‘second_hand’);
});
步骤4.5: 更新表针的旋转角度
var now = new Date(),
sec = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + now.getMilliseconds() / 1000;
hourHand.rotate = sec / (6 * 3600) * Math.PI;
minuteHand.rotate = sec / 1800 * Math.PI;
secondHand.rotate = sec / 30 * Math.PI;
步骤5: 在每一帧都更新表针
为了让钟表运转,需要在每一帧都要更新表针的位置。一个方便的方法是在每当一帧进入时,都调用 updateTime()函数。
scene.addEventListener(‘enterframe’, function () {
updateTime();
});
点击预览按钮,运行程序。
全部代码
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener(‘renderReady’, function () {
var scene = mugeda.scene;
var hourHand = scene.getObjectByName(‘hour_hand’),
minuteHand = scene.getObjectByName(‘minute_hand’),
secondHand = scene.getObjectByName(‘second_hand’);
var updateTime = function () {
var now = new Date(),
sec = now.getHours() * 3600 + now.getMinutes() * 60
+ now.getSeconds() + now.getMilliseconds() / 1000;
hourHand.rotate = sec / (6 * 3600) * Math.PI;
minuteHand.rotate = sec / 1800 * Math.PI;
secondHand.rotate = sec / 30 * Math.PI;
}
scene.addEventListener(‘enterframe’, function () {
updateTime();
});
});
总结,通过Mugega API你可以编写脚本代码控制动画作品,来实现一些复杂的动画,比如小游戏。下一节,我们将要讲述”制作跨屏互动应用”,敬请期待。
[Mugeda HTML5技术教程之11]Mugeda API简介相关推荐
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- [Mugeda HTML5技术教程之10]发布内容
动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...
- [Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
- [Mugeda HTML5技术教程之6]添加元素
我们上节讲了怎么创建新作品.新作品创建好后,我们就可以在里面添加内容了.这一节,我们将要讲述如何在作品中添加元素.动画的中的内容都是以各种元素的形式组成的.对于添加到舞台上的元素,我们可以在时间线上添 ...
- [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...
- [Mugeda HTML5技术教程之17] 理解Mugeda访问统计结果
1. 功能简介 Mugeda提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况. 目前统计功能主要展示动画内容和广告工程的统计数据.在动画被发布或导 ...
最新文章
- Chtml的一些例子
- linux-mint 安装 python 包 Gevent
- 2.2 Logistic 回归-深度学习-Stanford吴恩达教授
- Python基础教程:一个单列split转换为多行的练习题
- 关于“svn: Can't connect to host '*.*.*.*': 由于连接方在一段时间后没有正确答复或连接”的解决方法...
- 一个Google Chrome浏览器的英文字典扩展应用
- sql程序调用批处理_批处理学习之常用命令
- LeetCode 1222. 可以攻击国王的皇后(set)
- setstate是同步还是异步_谈谈 IO模型:同步、异步、阻塞、非阻塞
- html overflow 样式,css修改overflow滚动条默认样式
- ModelArts黑科技揭秘|弹性训练,让训练资源张弛有度
- 数值计算基础(上溢下溢、梯度优化、牛顿法、KKT方法)
- java 值传递 引用传递的理解 言简意赅 一字千金
- 互联网巨头:必须要裁员吗?
- 世界级3D渲染大赛TOP3大佬们的制作流程大揭秘!
- 小米蓝牙耳机和手机突然无法连接且不在通讯范围内
- 欧洲共同语言参考标准英语c1,美国小学英语3年级语言知识对标欧洲共同语言参考标准CEFR...
- 【Tkinter】终于把StringVar讲明白了
- 中国文旅进入4.0时代,全域旅游掘金开启
- 正则表达式验证手机号码、身份证号码、邮箱、统一社会信用代码/营业执照号
热门文章
- 大厂Redis day2 自用笔记
- 常见专业术语名词解释(持续更新)
- 【图像隐藏】基于小波变换+SURF、RANSAC、LT码、CRC(循环冗余检验)码多种算法实现图像隐藏(抗多种攻击)matlab源码
- f2fs系列文章truncate
- 用Aira2高速下载
- 最接地气的一套PHP面试题(总结不易,踩坑踩到挂了好多面试)
- taobao.trade.fullinfo.get( 获取单笔交易的详细信息 )、淘宝店铺卖出订单详情接口,店铺订单明文接口,店铺订单解密接口,店铺订单消息推送接口
- 用递归方法将十进制转化为二进制数
- uniapp 显示消息提示框 操作
- Python知识点总结(1)