Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容。它提供了一下方法:

    •访问Mugeda内容中的对象。

    •获取和设置对象属性,如位置、旋转、比例、不透明度等。

    •控制Mugeda动画的回放(例如:播放/暂停/跳转)。

    •在舞台中添加/移除/编辑对象。

    •处理鼠标/触控事件创造互动体验

    Mugeda API 是基于系统JavaScript技术。  不需要额外的库。

二.开始

    开始使用Mugeda API是很轻松的。 在Mugeda IDE中,只需点击脚本工具栏上的按钮Mugeda HTML5技术教程:Mugeda API简介

Mugeda HTML5技术教程:Mugeda API简介


三.命名空间和类

    大部分的Mugeda API是基于一个叫做Mugeda的命名空间(对象) 。

    Mugeda API包含三个主要类:内容、场景、和元素。

Mugeda HTML5技术教程: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.

});

七.场景对象

Mugeda HTML5技术教程:Mugeda API简介

访问元素对象:

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.cacheZone()函数。如果需要预加载前几帧资源可以在加载renderReady监听前调用mugeda.cacheZone(),这时回调函数不会被调用。而在renderReady回调里面再次调用mugeda.cacheZone()以便加载后面剩余帧资源时,回调函数会被调用,通过判断参数percent是否等于1来判断加载是否完成:

var mugeda = Mugeda.getMugedaObject();
mugeda.cacheZone(startFrame, endFrame, [], function(percent){   console.log(percent);

if(1 === percent)
{
//加载完成,做相应处理
}

})

  • 十四.Mugeda 对象概述

Mugeda HTML5技术教程:Mugeda API简介

十五.编码框架

Mugeda HTML5技术教程:Mugeda API简介

十六.例程

    在演示中,我们创建一个时钟显示当前时间。

Mugeda HTML5技术教程:Mugeda API简介

Mugeda HTML5技术教程:Mugeda API简介

https://cn.mugeda.com/client/preview_css3.html?id=58df45ca

步骤 1: 在Mugeda IDE中创建一个时钟的模型。

在0图层、1帧导入钟面、时针、分针和秒针四个图片。

Mugeda HTML5技术教程:Mugeda API简介

步骤 2: 移动时钟表针的旋转中心。

    选择每一个表针,然后右击,选择“组->组合”。 然后选择比例按钮,并按住“Ctrl”键拖拽旋转中心到钟面的中心。

Mugeda HTML5技术教程:Mugeda API简介

步骤3: 命名每一个图片

    在IDE中选中每一个图片,并为其提供一个名字。

    在演示中,我们将钟面、时针、分针和秒针分别命名为“face”、 “hour_hand”、“minute_hand”和“second_hand”。

Mugeda HTML5技术教程:Mugeda API简介

步骤4: 编码

    在IDE工具栏中,单击脚本按钮来打开脚本编辑器。

Mugeda HTML5技术教程:Mugeda API简介

步骤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你可以编写脚本代码控制动画作品,来实现一些复杂的动画,比如小游戏。下一节,我们将要讲述”制作跨屏互动应用”,敬请期待。