一.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简介的更多相关文章

  1. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  2. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  3. [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  4. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  5. [Mugeda HTML5技术教程之10]发布内容

    动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...

  6. [Mugeda HTML5技术教程之4] Studio 概述

    Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...

  7. [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容

    1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...

  8. [Mugeda HTML5技术教程之9]使用元件

    元件是一个可以在舞台上实例化和再利用的预先生成的独立动画.一个元件有它自己的时间轴(层,单位等),可以独立显示的动画.元件提高了动画的重用性和灵活性,是个强大的存在.元件可用于创建复杂的动画效果. 所 ...

  9. [Mugeda HTML5技术教程之6]添加元素

    我们上节讲了怎么创建新作品.新作品创建好后,我们就可以在里面添加内容了.这一节,我们将要讲述如何在作品中添加元素.动画的中的内容都是以各种元素的形式组成的.对于添加到舞台上的元素,我们可以在时间线上添 ...

随机推荐

  1. AngularJs 如何监视外部变量是否改变? 如何使用$cookieStore保存cookie?

    1. 如何监视外部变量是否改变? 如果我们要求:在$scope之外改变一个外部变量时,触发一些操作.我们可以将外部变量写进$watch中,如图中所示.返回的n表示newValue,即新的值.o表示ol ...

  2. IOS NSUserDefaults 讲解 用法

    IOS NSUserDefaults 讲解 用法    NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults ...

  3. CentOS安装MySQL问题汇总

    遇到的错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) denied for ...

  4. css、js的相互阻塞

    先决条件:脚本前面存在外部样式 以下试验虽然是在chrome下,但是对于IE8+以及其他浏览器也适用. 1.内联脚本(http://jsbin.com/mudab/1) <!DOCTYPE ht ...

  5. Android百度地图默认位置中心点设置

    //初始化地图    MapView mMapView = (MapView) findViewById(R.id.map); BaiduMap mBaidumap = mMapView.getMap ...

  6. Android系统的进程分类

    1.前台进程:即当前正在前台运行的进程,说明用户当前正在与通过该进程与系统进行交互,所以该进程为最重要的进程,除非系统的内容已经到不堪重负的情况,否则系统是不会将改进程终止的.2.可见进程:一般还是显 ...

  7. 利用http实现文件的上传和下载

    其他语言都比较方便,使用http上传.但是C++这样就差点,不过还好,Linux下有个curl的命令行工具,这是一个开源项目,底下有个子项目是libcurl,curl就是调用这个API实现的一系列ft ...

  8. BZOJ3297: [USACO2011 Open]forgot

    3297: [USACO2011 Open]forgot Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 54  Solved: 38[Submit][ ...

  9. C++中的string类(2)

    相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯 ...

  10. HDU_2023——求平均成绩

    Problem Description 假设一个班有n(n<=50)个学生,每人考m(m<=5)门课,求每个学生的平均成绩和每门课的平均成绩,并输出各科成绩均大于等于平均成绩的学生数量. ...