如何使用Mugeda平台制作场景应用微卡

mugeda

本文档描述了如何采用Mugeda平台制作酷炫移动场景应用。

制作步骤小结如下：

1、新建一个木疙瘩动画内容；

2、生成若干元件，每一个元件对应一个页面；

3、将生成的页面组合成一个完整的场景应用；

这是一个例程：

https://cn.mugeda.com/animation/edit/9aaa62c0

1. 在IDE中导入脚本；



2. 导入mugeda_page.js，这个脚本是场景应用的引擎



3. 制作动画内容，将每一个准备切换的页面制作为一个元件。虽然mugeda_page提供了若干选项供配置，为简便起见，建议将元件尺寸制作为和舞台一样大小。例如，如果舞台尺寸为320x480, 则元件大小也为320x480。如果原件中内容不够舞台大小，建议在元件中放置一个和舞台相同大小的透明方框以填充元件大小。元件内容随意，可以是一个图片，也可以是任意定义在时间线上的动画。



4. 在action文件中增加如下代码（请参考上述演示中的脚本模板）。

var pages = [ // 在这里，按顺序定义每一页

   { name: "场景1", type: "symbol" }, // type为instance，对应元件库中名为场景1的物体

   {

       type: "group", items: [ // type为group，建立滑动方向正交的一组页面

           { name: "场景2", type: "symbol" }, // type为symbol，页面为名为name的元件

           { name: "场景3", type: "symbol" }

       ]

   },

   { name: "场景4", type: "symbol", left: -22, top: -27 },

// 若果物体没有对准舞台，需手工指定偏移left，top

   { name: "场景5", type: "symbol"},

   { name: "场景6", type: "symbol"},

   { name: "场景7", type: "symbol" },

   { name: "场景8", type: "symbol" },

   { name: "场景9", type: "symbol" },

   { name: "场景10", type: "symbol" },

   { name: "场景11", type: "symbol" },

   { name: "场景12", type: "symbol" }

];

var mugeda = Mugeda.getMugedaObject();

mugeda.addEventListener('renderReady', function () {

   var slider = new MugedaPage({

       scene: mugeda.scene, // 必须，传入scene对象

       additional: pages, // 必须，传入上方定义的图片组

       link: "http://www.baidu.com", // 可选，当滑动到最后一页时，点击屏幕跳转地址

       direction: 'horizontal', // 可选，vertical或horizontal，默认vertical（垂直）

       music: mugeda.createInstanceOfSymbol('声音2'),

// 可选，背景声音，可以是url或者audio对象

       mode: 'cover', // 可选，切换模式cover或ladder，默认为ladder

       showArrowIcon: true, // 可选，是否显示箭头，默认为显示。

       showAudioIcon: true, // 可选，是否声音图标，默认为显示。

       arrayMargin: '9,4,9,4', // 可选，按上右下左设置箭头边距，默认’9,4,9,4‘

       loop: false, // 可选，是否循环。默认为否

       realtime: 'follow', // 可选，取值follow或none。follow是指当手指按下不放

// 时，是否页面跟随手指位置滑动，默认为follow

       exit: 'fadeout zoomout', // 可选，页面退出的方式，空格隔开。取值fadeout或

// 者zoomout或其组合，默认为fadeout zoomout

       arrowImg: '', // 可选，箭头的图片，url或base64数据

       audioOnImg: '', // 可选，声音图标“开”的图片，url或base64数据

       audioOffImg: '' // 可选，声音图标“关”的图片，url或base64数据

   });

  mugeda.scene.gotoAndPause(0); //

});

5. 预览确认效果。

附：

实例预览地址：

https://cn.mugeda.com/client/preview_css3.html?id=9aaa62c0



编辑地址：https://cn.mugeda.com/animation/edit/9aaa62c0