·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明，给关键帧命名，并实现跳转功能  
举例：点击右侧的图标（方块、圆、五角星），可以实现跳转到指定帧，具体操作步骤如下：  
 
选择出现红色方框的关键帧，在关键帧处命名“方块”，鼠标在空白处单击一下，如图：

 
命名成功后，关键帧上方会出现一个黄色的三角，如图：

 
同理，给出现蓝色圆形的关键帧命名“圆”，如图：

 
同理，给出现黄色五角星的关键帧命名“五角星”，如图：

 
然后依次给右侧图标添加跳转行为，选择红色方块，如图：

 
添加“跳转到帧并停止”的行为，触发条件为“点击”，如图：

 
点击编辑，在帧名称里选择“方块”，如图：

 
注：其他图标的行为添加方式相同，这里就不一一说明了  
 
给关键帧命名的好处：有时候我们要修改动画，删帧或者增帧，这时候如果采用的是跳转帧号的话，就要一个个去修改，很麻烦，给关键帧命名就方便多了。
 
如果既填写了帧号，又填写了帧名称，Mugeda会先找帧号，如图：

 
2、给页面命名  
Mugeda默认的页面名，以数字升序排列，把鼠标放到页面名处，就可更改页面名称，给第2页重命名为“尾页”，如图：

 
给红色方框添加“跳转到页”行为，如图：

 
在编辑里设置参数，页名称设置为“尾页”，如图：

 
与帧名称不同的是，如果既填写了页号，又填写了页名称，Mugeda会首先去找页名称。

 

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​​

本节视频教程请点击此处。
 
本节知识点： 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
 
一般我们把舞台的尺寸设置为320*520：

 
我们可以对适配方式进行设置，让我们的作品可以满足不同屏幕的播放。适配方式从【文件】—【文档信息】里设置：

 
这里需要说明的是，【文档信息】里的导出名称指的是发布后微信标题栏的名称

 
而舞台上【属性】中的【内容标题】指的是在编辑页面里的名称：

 
渲染模式，默认为标准，其他几个说明如下 
标准：单个网页的引用 
嵌入：可以嵌入iframe元素中 
内联：通过js方式加载动画 
弹出：弹出对话框显示动画

 
自适应，一般我们用【宽度适配，垂直居中】 
宽度适配，垂直居中：以宽度来等比例放大缩小您的作品，以320宽度做的，那么在屏幕上显示就是320，通过改变作品的高，来适配您的屏幕；如果您的手机比较窄，那就会把作品的上下两端截掉。
高度适配，水平居中：以高度适配宽度，如果你手机特别的窄，也会把两端截掉。 
全屏：无论你在什么屏幕播放，都会显示您作品的完整内容。

 
宽度适配，垂直居中，让所有画面显示在屏幕上的小技巧 
在舞台上画安全框，320*416基于iPhone4s大小，目前这个是最小的，所以用这个作为我们的安全框：

 
把安全框移动到舞台中间，可以对照绿色的参考线，此时的状态下，安全框位于舞台的中央：

 
如图，完成安全框的绘制：

 
我们预览时，无论屏幕有多大，背景图片都是把屏幕撑满的，就算手机截掉上下两端，在安全框里设计，有效内容都能被看到：

 
当您要发布作品时，记得把安全框图层删掉，这样别人预览你的作品时，就不会看到安全框了：

 
高度适配，水平居中，让所有画面显示在屏幕上的小技巧，同样的方式，这里不再赘述。
 
发布方式： 
前两种发布方式不推荐，动画会卡顿，推荐使用智能加速渲染发布。智能加速渲染的意思就是配合硬件加速动画：

 
适配方式： 
自动适配：默认是竖屏，动画会撑满竖屏屏幕；默认是横屏，动画会撑满横屏屏幕，但是会发生变形，更多的情况我们选用的是强制竖屏：

 
如果您要做强制横屏的H5，设置舞台大小520*256。这是基于iPhone6s plus在微信播放时的全屏尺寸。当然你也可以根据需要自行设置，但前提是保证在大屏幕手机能看到全屏：

 
然后选择【文件】—【文档信息】，设置旋转模式和自适应：

 

 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​​
 Mugeda制作的内容可以很方便的直接发布到Mugeda CDN。参见下图。发布到Mugeda CDN后，你会得到一个发布地址，该地址可以用来进行分享。Mugeda会自动处理所有必要的操作，例如微信权限认证等。


如果你选择导出Mugeda内容并自行部署到一个第三方的服务器上，Mugeda提供一套完善的机制来支持这些操作。简单来说，需要完成如下步骤： 
 
1. 你拥有一个微信公众号，和一个绑定了微信的域名； 
2. 你知道如何获取有效的微信认证信息； 
3. 用微信认证信息对Mugeda内容进行配置； 
4. 部署配置后的内容； 

下面详细介绍每一个步骤。
1.  你拥有一个微信公众号，和绑定了微信的域名 
任何一个可以在微信中进行分享的域名，都必须通过微信的认证并绑定域名。为了绑定域名，你必须先有一个公众号。有了公众号后，登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。关于如何申请公众号以及如何进行微信域名绑定，不在本文讨论范围。请咨询你们的微信管理员或者访问微信官方文档。 以下的讨论假定你已经拥有一个绑定了微信的域名。

2.  你知道如何获取有效的微信认证信息 
拥有微信绑定的域名后，你还需要有有效的微信认证信息。典型的微信认证信息包括： 
appId: 分配给公众号的唯一标识 
timestamp: 生成签名的时间戳 
nonceStr: 生成签名时的随机串 
signature: 认证需要的签名  

关于如何获取或者生成这些参数，请参考微信官方开发文档。这里不再赘述。需要强调的是，由于微信签名认证信息有效期为7200秒，即2个小时，因此在第三方部署时需要保证这些信息在必要时需要实时更新，保障总是能够获取到最新的认证信息。

以下的讨论假定你已经拥有了有效的微信认证信息。  

3.  用微信认证信息对Mugeda 内容进行配置 
当你准备好了上述数据，我们就可以对Mugeda内容进行配置了。步骤如下： 
首先在Mugeda云编辑器中导出想要发布的内容：


导出后会得到一个完整的HTML5内容包。 在内容包中包含有一个index.html文件，这个文件是我们配置的对象。用文本编辑器打开该文件。


在index.html文件中，有一个参数变量叫做_mrmcp，这个变量记录了Mgueda内容进行播放时的一系列控制参数。我们需要定制的就是在这个参数列表中加入我们需要的信息。


配置信息可以包括微信认证信息，_mrmcp.wechatAuth。所需参数参见上述第2步的描述。配置好后的_mrmcp参数如下图所示：


需要说明的是： 
1.    由于微信权限设置有时间限制（7200秒），因此这些权限信息，主要是签名signature和时间戳timestamp参数，需要及时进行更新。可以参考的办法，是在服务器端通过动态技术（例如php等）动态生成这些信息，或者在页面中通过动态技术（例如Ajax请求）获取这些信息，并配置相应的_mrmcp参数。

2.    如果采用异步Ajax等异步技术加载权限信息时，index.html中名为loader.js的脚本文件，需要在Ajax处理完成后才能加载，否则可能会导致加载或者渲染异常。

3.    对Mugeda内容进行第三方部署时，仅需要按照上述步骤配置_mrmcp.wechatAuth参数即可，不需要再次加载微信的SDK JS文件（本文生成时地址为http://res.wx.qq.com/open/js/jweixin-1.0.0.js），也不需要再次调用wx.config, wx.ready或者wx.onMenuShareTimeline等函数。这些具体的操作Mugeda内容都会自动完成。否则可能会导致分享和权限异常。

4.     部署配置后的内容:完成上述步骤后，就可以将配置后的内容部署到目标第三方服务器上，并将部署后的地址发布出去就可以了。对上述流程如有疑问，可以加入Mugeda学习群（QQ: 377927748）进行交流。

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​​
 Mugeda提供完善的交互行为功能，能够无需代码即可方便的添加丰富的交互行为，例如对动画的控制（播放、暂停、跳转等），提交表单，播放视频，上传图片等。
 
在一些特殊情况下，用户可能希望能够编写自定义函数来处理交互逻辑。比如，在一些小游戏内容中，用户可能希望能够实现较为复杂的自定义逻辑来满足游戏的需要。这时候，就可以考虑通过自定义的回调函数来进行处理。本教程将会说明如何定义自己的回调函数来添加自己的代码。
 
使用自定义的回调函数的基本流程是在创作的动画内容中为一个指定的元素添加名为“回调函数”的行为，并为行为指定一种触发方式。然后，就可以在代码编辑器中添加回调函数的定义了。
 
下面举例说明一下。在下面的例子中，我们为一个矩形添加一个点击后移动一个圆形的回调函数。首先生成一个包含有圆形和矩形的一个内容，并将圆形命名为"circle"。如下图所示：

 
然后选中矩形，并点击矩形右下角的添加行为按钮。

 
在出现的“编辑行为”对话框中，选择“回调函数”条目。在右侧的“触发条件”中，默认的触发条件即为“点击”。也可以用其它合适的触发条件，比如“向左滑动”，“摇一摇”等。

 
点击操作中的编辑按钮，编辑回调函数的参数。

 
下面就可以开始编写回调函数的代码了。首先打开代码窗口。

 
在代码窗口中输入自定的回调函数实现。下面这段代码的含义是，在舞台上寻找一个叫做"circle"的对象，并把它移动到x=100的位置。 
 
window.moveObject = function (){     
 // 获取名称为name的元素对象     
 var target = mugeda.scene.getObjectByName(name);     
 if(target){         
    // 修改获取的元素的位置         
    target.x = 100;     
 } 
}


 
回调函数的定义方式为：  
window.functionName = function(object, param1, param2){}
 
注意：  
1) 目前回调函数需要定义在window的全局空间。我们今后会取消这个约束用更加规范的方式来定义回调函数。
2) 回调函数目前携带3个参数：第1个参数是行为触发的API对象，在上面这个例子中，即为矩形的API对象。除此以外，回调函数允许用户指定两个参数，即第2个和第3个参数param1和param2。这两个参数可以在编辑回调函数属性的时候指定。
 
在最简单直接的场景下，用户只需要指定一个回调函数名称，并在代码窗口中提供该函数的定义即可。
 
关于如何在Mugeda内容中使用代码以及API，可以参见如下文档：  
API的应用：在动画中添加代码 
http://bbs.mugeda.com/?/question/305 
 
API的应用：Mugeda API的整体结构
http://bbs.mugeda.com/?/article/282
 
API的应用：Mugeda对象 
http://bbs.mugeda.com/?/question/307 
 
API的应用：scene对象 
http://bbs.mugeda.com/?/article/284 
 
API的应用：aObject对象 
http://bbs.mugeda.com/?/article/285 
 
API的应用：工具API 
http://bbs.mugeda.com/?/article/286 
 
API的应用：获取Mugeda后台数据 
http://bbs.mugeda.com/?/article/390
 
 

Mugeda官方客服服务时间如下：



 （点击查看大图）

Mugeda学习交流QQ1群： 237082431（已满）
Mugeda学习交流QQ2群：262201240（已满）
Mugeda学习交流QQ3群：263360290（已满）
Mugeda学习交流QQ4群：475633109
Mugeda学习交流QQ5群：338214678

客服电话：010-53384810 
论坛地址：bbs.mugeda.com