2.1.11 界面与舞台：关键帧和页面的命名
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
1、用一个例子来说明，给关键帧命名，并实现跳转功能
举例：点击右侧的图标（方块、圆、五角星），可以实现跳转到指定帧，具体操作步骤如下：
选择出现红色方框的关键帧，在关键帧处命名“方块”，鼠标在空白处单击一下，如图：
命名成功后，关键帧上方会出现一个黄色的三角，如图：
同理，给出现蓝色圆形的关键帧命名“圆”，如图：
同理，给出现黄色五角星的关键帧命名“五角星”，如图：
然后依次给右侧图标添加跳转行为，选择红色方块，如图：
添加“跳转到帧并停止”的行为，触发条件为“点击”，如图：
点击编辑，在帧名称里选择“方块”，如图：
注：其他图标的行为添加方式相同，这里就不一一说明了
给关键帧命名的好处：有时候我们要修改动画，删帧或者增帧，这时候如果采用的是跳转帧号的话，就要一个个去修改，很麻烦，给关键帧命名就方便多了。
如果既填写了帧号，又填写了帧名称，Mugeda会先找帧号，如图：
2、给页面命名
Mugeda默认的页面名，以数字升序排列，把鼠标放到页面名处，就可更改页面名称，给第2页重命名为“尾页”，如图：
给红色方框添加“跳转到页”行为，如图：
在编辑里设置参数，页名称设置为“尾页”，如图：
与帧名称不同的是，如果既填写了页号，又填写了页名称，Mugeda会首先去找页名称。
收起阅读 »
本节视频教程请点击此处。
1、用一个例子来说明，给关键帧命名，并实现跳转功能
举例：点击右侧的图标（方块、圆、五角星），可以实现跳转到指定帧，具体操作步骤如下：
选择出现红色方框的关键帧，在关键帧处命名“方块”，鼠标在空白处单击一下，如图：
命名成功后，关键帧上方会出现一个黄色的三角，如图：
同理，给出现蓝色圆形的关键帧命名“圆”，如图：
同理，给出现黄色五角星的关键帧命名“五角星”，如图：
然后依次给右侧图标添加跳转行为，选择红色方块，如图：
添加“跳转到帧并停止”的行为，触发条件为“点击”，如图：
点击编辑，在帧名称里选择“方块”，如图：
注：其他图标的行为添加方式相同，这里就不一一说明了
给关键帧命名的好处：有时候我们要修改动画，删帧或者增帧，这时候如果采用的是跳转帧号的话，就要一个个去修改，很麻烦，给关键帧命名就方便多了。
如果既填写了帧号，又填写了帧名称，Mugeda会先找帧号，如图：
2、给页面命名
Mugeda默认的页面名，以数字升序排列，把鼠标放到页面名处，就可更改页面名称，给第2页重命名为“尾页”，如图：
给红色方框添加“跳转到页”行为，如图：
在编辑里设置参数，页名称设置为“尾页”，如图：
与帧名称不同的是，如果既填写了页号，又填写了页名称，Mugeda会首先去找页名称。
收起阅读 »
1.6.4 作品创建前必读：屏幕适配设置（渲染模式、自适应、发布模式、旋转模式）
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
本节知识点： 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
一般我们把舞台的尺寸设置为320*520：
我们可以对适配方式进行设置，让我们的作品可以满足不同屏幕的播放。适配方式从【文件】—【文档信息】里设置：
这里需要说明的是，【文档信息】里的导出名称指的是发布后微信标题栏的名称
而舞台上【属性】中的【内容标题】指的是在编辑页面里的名称：
渲染模式，默认为标准，其他几个说明如下
标准：单个网页的引用
嵌入：可以嵌入iframe元素中
内联：通过js方式加载动画
弹出：弹出对话框显示动画
自适应，一般我们用【宽度适配，垂直居中】
宽度适配，垂直居中：以宽度来等比例放大缩小您的作品，以320宽度做的，那么在屏幕上显示就是320，通过改变作品的高，来适配您的屏幕；如果您的手机比较窄，那就会把作品的上下两端截掉。
高度适配，水平居中：以高度适配宽度，如果你手机特别的窄，也会把两端截掉。
全屏：无论你在什么屏幕播放，都会显示您作品的完整内容。
宽度适配，垂直居中，让所有画面显示在屏幕上的小技巧
在舞台上画安全框，320*416基于iPhone4s大小，目前这个是最小的，所以用这个作为我们的安全框：
把安全框移动到舞台中间，可以对照绿色的参考线，此时的状态下，安全框位于舞台的中央：
如图，完成安全框的绘制：
我们预览时，无论屏幕有多大，背景图片都是把屏幕撑满的，就算手机截掉上下两端，在安全框里设计，有效内容都能被看到：
当您要发布作品时，记得把安全框图层删掉，这样别人预览你的作品时，就不会看到安全框了：
高度适配，水平居中，让所有画面显示在屏幕上的小技巧，同样的方式，这里不再赘述。
发布方式：
前两种发布方式不推荐，动画会卡顿，推荐使用智能加速渲染发布。智能加速渲染的意思就是配合硬件加速动画：
适配方式：
自动适配：默认是竖屏，动画会撑满竖屏屏幕；默认是横屏，动画会撑满横屏屏幕，但是会发生变形，更多的情况我们选用的是强制竖屏：
如果您要做强制横屏的H5，设置舞台大小520*256。这是基于iPhone6s plus在微信播放时的全屏尺寸。当然你也可以根据需要自行设置，但前提是保证在大屏幕手机能看到全屏：
然后选择【文件】—【文档信息】，设置旋转模式和自适应：
收起阅读 »
本节视频教程请点击此处。
本节知识点： 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
一般我们把舞台的尺寸设置为320*520：
我们可以对适配方式进行设置，让我们的作品可以满足不同屏幕的播放。适配方式从【文件】—【文档信息】里设置：
这里需要说明的是，【文档信息】里的导出名称指的是发布后微信标题栏的名称
而舞台上【属性】中的【内容标题】指的是在编辑页面里的名称：
渲染模式，默认为标准，其他几个说明如下
标准：单个网页的引用
嵌入：可以嵌入iframe元素中
内联：通过js方式加载动画
弹出：弹出对话框显示动画
自适应，一般我们用【宽度适配，垂直居中】
宽度适配，垂直居中：以宽度来等比例放大缩小您的作品，以320宽度做的，那么在屏幕上显示就是320，通过改变作品的高，来适配您的屏幕；如果您的手机比较窄，那就会把作品的上下两端截掉。
高度适配，水平居中：以高度适配宽度，如果你手机特别的窄，也会把两端截掉。
全屏：无论你在什么屏幕播放，都会显示您作品的完整内容。
宽度适配，垂直居中，让所有画面显示在屏幕上的小技巧
在舞台上画安全框，320*416基于iPhone4s大小，目前这个是最小的，所以用这个作为我们的安全框：
把安全框移动到舞台中间，可以对照绿色的参考线，此时的状态下，安全框位于舞台的中央：
如图，完成安全框的绘制：
我们预览时，无论屏幕有多大，背景图片都是把屏幕撑满的，就算手机截掉上下两端，在安全框里设计，有效内容都能被看到：
当您要发布作品时，记得把安全框图层删掉，这样别人预览你的作品时，就不会看到安全框了：
高度适配，水平居中，让所有画面显示在屏幕上的小技巧，同样的方式，这里不再赘述。
发布方式：
前两种发布方式不推荐，动画会卡顿，推荐使用智能加速渲染发布。智能加速渲染的意思就是配合硬件加速动画：
适配方式：
自动适配：默认是竖屏，动画会撑满竖屏屏幕；默认是横屏，动画会撑满横屏屏幕，但是会发生变形，更多的情况我们选用的是强制竖屏：
如果您要做强制横屏的H5，设置舞台大小520*256。这是基于iPhone6s plus在微信播放时的全屏尺寸。当然你也可以根据需要自行设置，但前提是保证在大屏幕手机能看到全屏：
然后选择【文件】—【文档信息】，设置旋转模式和自适应：
收起阅读 »
2.9.9 API的应用：将Mugeda部署在第三方服务器
想要了解更多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 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）进行交流。 收起阅读 »
2.9.8 行为：使用自定义回调函数
想要了解更多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提供完善的交互行为功能，能够无需代码即可方便的添加丰富的交互行为，例如对动画的控制（播放、暂停、跳转等），提交表单，播放视频，上传图片等。
在一些特殊情况下，用户可能希望能够编写自定义函数来处理交互逻辑。比如，在一些小游戏内容中，用户可能希望能够实现较为复杂的自定义逻辑来满足游戏的需要。这时候，就可以考虑通过自定义的回调函数来进行处理。本教程将会说明如何定义自己的回调函数来添加自己的代码。
使用自定义的回调函数的基本流程是在创作的动画内容中为一个指定的元素添加名为“回调函数”的行为，并为行为指定一种触发方式。然后，就可以在代码编辑器中添加回调函数的定义了。
下面举例说明一下。在下面的例子中，我们为一个矩形添加一个点击后移动一个圆形的回调函数。首先生成一个包含有圆形和矩形的一个内容，并将圆形命名为"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官方客服服务时间如下：
（点击查看大图）
Mugeda学习交流QQ1群： 237082431（已满）
Mugeda学习交流QQ2群：262201240（已满）
Mugeda学习交流QQ3群：263360290（已满）
Mugeda学习交流QQ4群：475633109
Mugeda学习交流QQ5群：338214678
客服电话：010-53384810
论坛地址：bbs.mugeda.com 收起阅读 »
（点击查看大图）
Mugeda学习交流QQ1群： 237082431（已满）
Mugeda学习交流QQ2群：262201240（已满）
Mugeda学习交流QQ3群：263360290（已满）
Mugeda学习交流QQ4群：475633109
Mugeda学习交流QQ5群：338214678
客服电话：010-53384810
论坛地址：bbs.mugeda.com 收起阅读 »
【Mugeda公告】版本更新1130：操作界面优化，设计师空间免费开通，bug修复
Mugeda本周优化内容如下：
一、优化了工作台整体样式，更易操作。
图片说明如下：（点击图片查看大图）
1）选中——鼠标拖动该作品可以移动至任意“我的作品”文件夹内。
2）当鼠标滑动至作品名称的范围内，可以显示该作品的全称。
3）优化了已发布标志，避免遮住作品名称。
4）删除按钮，点击直接删除该作品。
5）统计：点击可以查看该作品的统计详情。
6）点击该区域可以预览作品 。
图片说明如下：（点击图片查看大图）
1）优化了预览页面，看起来更加美观。
2）Mugeda为所有的设计师开放了个人空间，点击”加入空间“可以将该作品添加至您的空间。（必须是发布作品才可以）
3）可以将该作品转为您自己的模板，重复使用。
4）直接可以查看该作品的二维码，不需要再用其他的第三方软件了，是不是很方便。
二、优化了教程页面的一些操作体验问题，更方便Mu友们学习
三、优化了发布作品的操作界面
图片说明如下：（点击图片查看大图）
1）点击作品名称可以直接修改备注名（第一次发布不可以改哦）。
2）点击可以复制链接，Mu友再也不用担心找不到发布地址啦。
3）删除：点击之后该作品的发布地址将不能再访问，但是该作品还可以您的“动画作品”找到。（注意：如果选择删除，该作品发布地址无法找回，必须发布新链接才可以访问，但是跟之前链接不同哦）
4）可以直接查看该作品的二维码，点击鼠标右键另存为，可以保存1000*1000高清大图。
四、优化了模板的操作界面和使用流程
五、管理账号可以查看子账号的作品，还可以看到作者哦。
六、增加了“推荐设计师”标志，点击设计师昵称可以查看该设计师的所有作品。
七、设计师空间免费开通（每个Mu都有自己的个人空间啦）
如果您想在Mugeda官网的设计师页面展示，并且被推荐，您需要添加至少3个优质的作品（添加方法如下图“1”，然后选择“我要被推荐”下图“2”，按照要求发送资料就可以啦，敬请期待我们的通知吧。
成功申请设计师后的福利：（联系QQ：3024076303）
H5作品宣传／享受会员折扣／赠送任意2个模板／免费外包接单
八、bug修复 收起阅读 »
一、优化了工作台整体样式，更易操作。
图片说明如下：（点击图片查看大图）
1）选中——鼠标拖动该作品可以移动至任意“我的作品”文件夹内。
2）当鼠标滑动至作品名称的范围内，可以显示该作品的全称。
3）优化了已发布标志，避免遮住作品名称。
4）删除按钮，点击直接删除该作品。
5）统计：点击可以查看该作品的统计详情。
6）点击该区域可以预览作品 。
图片说明如下：（点击图片查看大图）
1）优化了预览页面，看起来更加美观。
2）Mugeda为所有的设计师开放了个人空间，点击”加入空间“可以将该作品添加至您的空间。（必须是发布作品才可以）
3）可以将该作品转为您自己的模板，重复使用。
4）直接可以查看该作品的二维码，不需要再用其他的第三方软件了，是不是很方便。
二、优化了教程页面的一些操作体验问题，更方便Mu友们学习
三、优化了发布作品的操作界面
图片说明如下：（点击图片查看大图）
1）点击作品名称可以直接修改备注名（第一次发布不可以改哦）。
2）点击可以复制链接，Mu友再也不用担心找不到发布地址啦。
3）删除：点击之后该作品的发布地址将不能再访问，但是该作品还可以您的“动画作品”找到。（注意：如果选择删除，该作品发布地址无法找回，必须发布新链接才可以访问，但是跟之前链接不同哦）
4）可以直接查看该作品的二维码，点击鼠标右键另存为，可以保存1000*1000高清大图。
四、优化了模板的操作界面和使用流程
五、管理账号可以查看子账号的作品，还可以看到作者哦。
六、增加了“推荐设计师”标志，点击设计师昵称可以查看该设计师的所有作品。
七、设计师空间免费开通（每个Mu都有自己的个人空间啦）
如果您想在Mugeda官网的设计师页面展示，并且被推荐，您需要添加至少3个优质的作品（添加方法如下图“1”，然后选择“我要被推荐”下图“2”，按照要求发送资料就可以啦，敬请期待我们的通知吧。
成功申请设计师后的福利：（联系QQ：3024076303）
H5作品宣传／享受会员折扣／赠送任意2个模板／免费外包接单
八、bug修复 收起阅读 »
2.1.10 界面与舞台：翻页的相关设置
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
当我们制作的动画有2页以上，就会用到属性栏的【翻页】，如图：
【翻页】中的设置有以下几种方式：
1、 翻页效果： 平移、覆盖、出现、淡入、三维翻转、门轴翻转
2、 退出效果： 无、缩小、淡出、缩小淡出
3、 翻页方向： 上下翻页、左右翻页
4、 循环： 是、否
5、 翻页时间： 默认600毫秒，可以自己设置
6、 翻页图标： 默认是箭头，支持直接从素材库上传；如果不想要翻页图标，可以在【翻页图标】处上传一个透明底的PNG
7、 多页动画如何设置无缝跳转： Mugeda是分页加载模式，如果做了多页动画，想让动画过渡的更自然，可以在【翻页效果】设置为出现。 收起阅读 »
本节视频教程请点击此处。
当我们制作的动画有2页以上，就会用到属性栏的【翻页】，如图：
【翻页】中的设置有以下几种方式：
1、 翻页效果： 平移、覆盖、出现、淡入、三维翻转、门轴翻转
2、 退出效果： 无、缩小、淡出、缩小淡出
3、 翻页方向： 上下翻页、左右翻页
4、 循环： 是、否
5、 翻页时间： 默认600毫秒，可以自己设置
6、 翻页图标： 默认是箭头，支持直接从素材库上传；如果不想要翻页图标，可以在【翻页图标】处上传一个透明底的PNG
7、 多页动画如何设置无缝跳转： Mugeda是分页加载模式，如果做了多页动画，想让动画过渡的更自然，可以在【翻页效果】设置为出现。 收起阅读 »
2.2.18 素材与媒体：导入PSD及注意事项
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具栏，选中PS图标，如图：
直接把PSD文件拖拽到指定区域。如图：
可以选择导入单个图层，也可以按住Ctrl选择多个图层，然后分层导入，如图：
PSD素材分图层导入舞台，而且导入的图片和PSD中的位置完全一致，如图：
常见问题：
1、问：为什么我按照320*520做的底图素材，但用手机扫描却很模糊？
答：Mugeda默认的画布尺寸为320*520
在PS里处理素材时，应把素材的尺寸设置为640*1040（即2倍精度大小），这样导入到Mugeda里的图片才足够清晰，切记素材的尺寸设置要与舞台尺寸保持比例一致。
如果导入的PSD文件过大，会出现如下提示：
2、问：为什么我导入不了带有图层样式的PSD？
答：在PS中做了一张有图层样式的素材，如图：
导入Mugeda里效果如下，如图：
Mugeda不可以直接导入带有图层样式的PSD文件，如果想保留效果，可以选择图层，点击右键【转换为智能对象】，如图：
经过这样的处理后，再导入Mugeda，就可以保留原来素材的效果，如图：
3、问：我想导入JPG，但导进来却是透明背景的PNG，是什么原因？
答：在你的PS文件中，舞台外还有另一个图形，如图：
选择合并后，如图：
把这个素材导入到Mugeda里，默认保留了通道，如图：
4、问：怎么处理素材，才能让文件尽可能的小？
答：减少素材的用色，尽量让素材图片少一些，另外严格按照1.5/2两倍精度（等比例）制作素材。
5、问：怎么摆脱PPT样式的H5？
答：在做设计的时候，就要考虑到H5中的交互，如图：
如果素材过大，可以利用PS中的裁剪工具裁剪成多个再保存，如图：
收起阅读 »
本节视频教程请点击此处。
在工具栏，选中PS图标，如图：
直接把PSD文件拖拽到指定区域。如图：
可以选择导入单个图层，也可以按住Ctrl选择多个图层，然后分层导入，如图：
PSD素材分图层导入舞台，而且导入的图片和PSD中的位置完全一致，如图：
常见问题：
1、问：为什么我按照320*520做的底图素材，但用手机扫描却很模糊？
答：Mugeda默认的画布尺寸为320*520
在PS里处理素材时，应把素材的尺寸设置为640*1040（即2倍精度大小），这样导入到Mugeda里的图片才足够清晰，切记素材的尺寸设置要与舞台尺寸保持比例一致。
如果导入的PSD文件过大，会出现如下提示：
2、问：为什么我导入不了带有图层样式的PSD？
答：在PS中做了一张有图层样式的素材，如图：
导入Mugeda里效果如下，如图：
Mugeda不可以直接导入带有图层样式的PSD文件，如果想保留效果，可以选择图层，点击右键【转换为智能对象】，如图：
经过这样的处理后，再导入Mugeda，就可以保留原来素材的效果，如图：
3、问：我想导入JPG，但导进来却是透明背景的PNG，是什么原因？
答：在你的PS文件中，舞台外还有另一个图形，如图：
选择合并后，如图：
把这个素材导入到Mugeda里，默认保留了通道，如图：
4、问：怎么处理素材，才能让文件尽可能的小？
答：减少素材的用色，尽量让素材图片少一些，另外严格按照1.5/2两倍精度（等比例）制作素材。
5、问：怎么摆脱PPT样式的H5？
答：在做设计的时候，就要考虑到H5中的交互，如图：
如果素材过大，可以利用PS中的裁剪工具裁剪成多个再保存，如图：
收起阅读 »
2.2.17 素材与媒体：常用编辑操作—转换为元件
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
转换为元件，具体操作步骤如下：
在舞台上绘制一个物体，选中这个物体，单击右键【转换为元件】，如图：
双击进去才能对这个元件进行编辑，如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并
收起阅读 »
本节视频教程请点击此处。
转换为元件，具体操作步骤如下：
在舞台上绘制一个物体，选中这个物体，单击右键【转换为元件】，如图：
双击进去才能对这个元件进行编辑，如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并
收起阅读 »
2.2.16 素材与媒体：常用编辑操作—排列、对齐、变形、组合、合并功能
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
1、排列，具体操作步骤如下：
只能作用于同一图层的不同物体 在
同一图层绘制三个方框，选中灰色物体单击右键，选择【排列】—【上移一层】，如图：
灰色图形就会把紫色图形盖住，如图：
2、对齐，具体操作步骤如下：
对齐有左、右、上、下、左右居中（以左右的中心点对齐）、上下居中（以上下的中心点对齐）、均分宽度（间隔的宽度相同）、均分高度（间隔的高度相同）8种方式，如图：
3、变形，具体操作步骤如下：
为左右翻转和上下翻转，如图：
4、组合，具体操作步骤如下：
同一图层的不同物体，才可以进行此操作，操作后两个图形会变成一个图形，如图：
组合后双击可以对单个物体进行编辑，如图：
5、合并，具体操作步骤如下：
这个是关于裁剪的一些功能，选中舞台上的两个物体，选择【合并】，如图：
两个图形会合并成一个图形，如图：
选择【用上层物体裁剪】，效果如图：
选择【用下层物体裁剪】，效果如图：
选择【相交】，效果如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—转换为元件
收起阅读 »
本节视频教程请点击此处。
1、排列，具体操作步骤如下：
只能作用于同一图层的不同物体 在
同一图层绘制三个方框，选中灰色物体单击右键，选择【排列】—【上移一层】，如图：
灰色图形就会把紫色图形盖住，如图：
2、对齐，具体操作步骤如下：
对齐有左、右、上、下、左右居中（以左右的中心点对齐）、上下居中（以上下的中心点对齐）、均分宽度（间隔的宽度相同）、均分高度（间隔的高度相同）8种方式，如图：
3、变形，具体操作步骤如下：
为左右翻转和上下翻转，如图：
4、组合，具体操作步骤如下：
同一图层的不同物体，才可以进行此操作，操作后两个图形会变成一个图形，如图：
组合后双击可以对单个物体进行编辑，如图：
5、合并，具体操作步骤如下：
这个是关于裁剪的一些功能，选中舞台上的两个物体，选择【合并】，如图：
两个图形会合并成一个图形，如图：
选择【用上层物体裁剪】，效果如图：
选择【用下层物体裁剪】，效果如图：
选择【相交】，效果如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—转换为元件
收起阅读 »
2.2.15 素材与媒体：常用编辑操作—路径工具
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
路径工具，具体操作步骤如下：
给物体添加动画后，选中物体单击鼠标右键，选择【路径】—【自定义路径】，如图：
可以看到，此时的路径线是直线，即物体做直线运动，如图：
选中工具栏中的【节点工具】，可以对物体的运动线路进行自定义，如图：
再次选中物体单击鼠标右键，选择【路径】中【自定义路径】，可以看到路径线变成黑色，还原成直线运动，如图：
若想再次编辑，只需选中物体单击鼠标右键，选择【路径】—【自定义路径】，可以看到路径线变成紫色，如图：
显示和隐藏路径线，可以通过【切换路径显示】来操作，如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件 收起阅读 »
本节视频教程请点击此处。
路径工具，具体操作步骤如下：
给物体添加动画后，选中物体单击鼠标右键，选择【路径】—【自定义路径】，如图：
可以看到，此时的路径线是直线，即物体做直线运动，如图：
选中工具栏中的【节点工具】，可以对物体的运动线路进行自定义，如图：
再次选中物体单击鼠标右键，选择【路径】中【自定义路径】，可以看到路径线变成黑色，还原成直线运动，如图：
若想再次编辑，只需选中物体单击鼠标右键，选择【路径】—【自定义路径】，可以看到路径线变成紫色，如图：
显示和隐藏路径线，可以通过【切换路径显示】来操作，如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件 收起阅读 »
2.2.14 素材与媒体：常用编辑操作—节点工具
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
节点工具，具体操作步骤如下：
这个工具，只作用于用Mugeda绘制的图形，对于导入的PNG、JPG不起作用，如图：
选择工具栏的【曲线工具】在舞台上绘制一条曲线，结束时敲击键盘“V”，结束绘制，并在属性面板上把填充色设置为空，如图：
选中图形，并选择节点工具，如图：
选中想编辑的节点，单击右键，可【添加节点】【删除选中节点】【重置选中节点】，如图：
选中节点，控制手柄就可以调整曲线，如图：
对于选中没有手柄的节点，可单击右键，选择【重置节点】就可以调用出手柄，如图：
添加节点快捷键，在选中节点工具状态下，Ctrl+单击鼠标左键
删除节点快捷键，在选中节点工具状态下，Alt +单击鼠标左键
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件 收起阅读 »
本节视频教程请点击此处。
节点工具，具体操作步骤如下：
这个工具，只作用于用Mugeda绘制的图形，对于导入的PNG、JPG不起作用，如图：
选择工具栏的【曲线工具】在舞台上绘制一条曲线，结束时敲击键盘“V”，结束绘制，并在属性面板上把填充色设置为空，如图：
选中图形，并选择节点工具，如图：
选中想编辑的节点，单击右键，可【添加节点】【删除选中节点】【重置选中节点】，如图：
选中节点，控制手柄就可以调整曲线，如图：
对于选中没有手柄的节点，可单击右键，选择【重置节点】就可以调用出手柄，如图：
添加节点快捷键，在选中节点工具状态下，Ctrl+单击鼠标左键
删除节点快捷键，在选中节点工具状态下，Alt +单击鼠标左键
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件 收起阅读 »
2.2.13 素材与媒体：常用编辑操作—锁定物体
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在编辑菜单里，是Mugeda的常用编辑操作，如图：
锁定物体，具体操作步骤如下：
在舞台上绘制两个物体，如图：
选择要锁定的物体，【编辑】—【锁定物体】，就把选中物体锁定，不可对其进行编辑，如图：
如果想重新对锁住物体进行编辑，选择【编辑】—【全部解锁】即可，如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件 收起阅读 »
本节视频教程请点击此处。
在编辑菜单里，是Mugeda的常用编辑操作，如图：
锁定物体，具体操作步骤如下：
在舞台上绘制两个物体，如图：
选择要锁定的物体，【编辑】—【锁定物体】，就把选中物体锁定，不可对其进行编辑，如图：
如果想重新对锁住物体进行编辑，选择【编辑】—【全部解锁】即可，如图：
了解更多常用编辑操作：
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件 收起阅读 »
2.10.3 判断:多种逻辑表达式的写法
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
本节知识点：取值的方法、获取物体的属性、基本算法符号、基本判断符号、满足条件符号、保留后几位小数、判断字符串的长度
1、取值的方法
给某个物体取名叫a，获取a的值如下： {{a}}
2、获取物体的属性
{{a.top}} 上坐标
{{a.left}} 左坐标
{{a.height}} 物体的高
{{a.width}} 物体的宽
{{a.text}} 字符
举例：如何让文本框获取到物体的上坐标？具体步骤如下：
给方块命名为“A”，文字框命名为“T”，如图：
给方块添加改变元素属性行为，触发条件为出现，如图：
进入编辑设置相关参数，取值{{a.top}}，如图：
注：给物体命名可以是中文的，但是符号一定要在英文状态下输入
3、基本算法符号
+ 加
- 减
* 乘
/ 除
== 等于
‘’ 字符串（注意：是英文状态下的引号）
4、基本判断符号
> 大于
< 小于
!= 不等于
举例：iPhone解锁效果，具体步骤如下：
在舞台上绘制滑动条和解锁块，给解锁块在右侧属性中添加“水平拖动”和“结束时复位”，如图：
给解锁块命名为“a”，并给它添加跳转到“下一页”的行为，触发条件是“属性改变”，设置的参数应该写成{{a.left}}>210，即当解锁块的左坐标大于210的时候，就会跳到第二页，如图：
5、满足条件符号
|| 或
&& 同时满足
举例：{{a.text}}==’2’||{{b.text}}==’6’就翻页
举例：小球a移动到方框b里就成功，表达式 {{a.top}} > {{b.top}} && {{a.left}} > {{b.left}} && ({{a.top}} + {{a.height}} < {{b.top}} + {{b.height}}) && ({{a.left}} + {{a.width}} < {{b.left}} + {{b.width}})
6、保留后几位小数
~~ 取整数
{{a}}.toFixed(n) a保留n位小数，当n=0时，取的是整数
举例：用文本框获取运动圆球的上坐标，具体步骤如下：
给运动的圆球命名为”a”，在舞台上添加文本框，并让它关联圆球“a”的上坐标，默认是保留三位小数，如图：
实现效果，如图：
在舞台上新添加一个文本框t2，让它的值等于t，如图：
给t添加改变元素属性行为，触发条件为属性改变（注：哪个物体在动，就把行为添加在它那里），在参数设置里的取值填入{{t}}.toFixed(1)，能实现保留一位小数的效果，如图：
注：如果要取整数，在参数设置里的取值填入{{t}}.toFixed(0) 或 ~~{{t}} 均可。
取整数的另一种方法，在被控量【关联属性】前加”~~”，但适用于取整，如图：
7、'{{a}}'.length==n 判断字符串的长度
举例，输入框不能输入6个字以上，超出则会弹出提示，具体步骤如下：
给输入框命名“a”，给提示语命名”b”，提示语默认的透明度为0，如图：
给输入框添加改变元素属性行为，触发条件是“属性改变”，设置参数'{{a}}'.length>5，如图：
8、字符判断
'{{a}}'.length==n 判断字符串的长度
'{{a}}' == '' 等于空
'{{a}}' != '' 不等于空
'{{a}}' == 'mugeda' 等于字符
'{{a}}' != 'mugeda' 不等于字符
收起阅读 »
本节视频教程请点击此处。
本节知识点：取值的方法、获取物体的属性、基本算法符号、基本判断符号、满足条件符号、保留后几位小数、判断字符串的长度
1、取值的方法
给某个物体取名叫a，获取a的值如下： {{a}}
2、获取物体的属性
{{a.top}} 上坐标
{{a.left}} 左坐标
{{a.height}} 物体的高
{{a.width}} 物体的宽
{{a.text}} 字符
举例：如何让文本框获取到物体的上坐标？具体步骤如下：
给方块命名为“A”，文字框命名为“T”，如图：
给方块添加改变元素属性行为，触发条件为出现，如图：
进入编辑设置相关参数，取值{{a.top}}，如图：
注：给物体命名可以是中文的，但是符号一定要在英文状态下输入
3、基本算法符号
+ 加
- 减
* 乘
/ 除
== 等于
‘’ 字符串（注意：是英文状态下的引号）
4、基本判断符号
> 大于
< 小于
!= 不等于
举例：iPhone解锁效果，具体步骤如下：
在舞台上绘制滑动条和解锁块，给解锁块在右侧属性中添加“水平拖动”和“结束时复位”，如图：
给解锁块命名为“a”，并给它添加跳转到“下一页”的行为，触发条件是“属性改变”，设置的参数应该写成{{a.left}}>210，即当解锁块的左坐标大于210的时候，就会跳到第二页，如图：
5、满足条件符号
|| 或
&& 同时满足
举例：{{a.text}}==’2’||{{b.text}}==’6’就翻页
举例：小球a移动到方框b里就成功，表达式 {{a.top}} > {{b.top}} && {{a.left}} > {{b.left}} && ({{a.top}} + {{a.height}} < {{b.top}} + {{b.height}}) && ({{a.left}} + {{a.width}} < {{b.left}} + {{b.width}})
6、保留后几位小数
~~ 取整数
{{a}}.toFixed(n) a保留n位小数，当n=0时，取的是整数
举例：用文本框获取运动圆球的上坐标，具体步骤如下：
给运动的圆球命名为”a”，在舞台上添加文本框，并让它关联圆球“a”的上坐标，默认是保留三位小数，如图：
实现效果，如图：
在舞台上新添加一个文本框t2，让它的值等于t，如图：
给t添加改变元素属性行为，触发条件为属性改变（注：哪个物体在动，就把行为添加在它那里），在参数设置里的取值填入{{t}}.toFixed(1)，能实现保留一位小数的效果，如图：
注：如果要取整数，在参数设置里的取值填入{{t}}.toFixed(0) 或 ~~{{t}} 均可。
取整数的另一种方法，在被控量【关联属性】前加”~~”，但适用于取整，如图：
7、'{{a}}'.length==n 判断字符串的长度
举例，输入框不能输入6个字以上，超出则会弹出提示，具体步骤如下：
给输入框命名“a”，给提示语命名”b”，提示语默认的透明度为0，如图：
给输入框添加改变元素属性行为，触发条件是“属性改变”，设置参数'{{a}}'.length>5，如图：
8、字符判断
'{{a}}'.length==n 判断字符串的长度
'{{a}}' == '' 等于空
'{{a}}' != '' 不等于空
'{{a}}' == 'mugeda' 等于字符
'{{a}}' != 'mugeda' 不等于字符
收起阅读 »
2.3.12 动画：标尺和辅助线的用法
·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
标尺和辅助线的用法，具体使用方法如下
选择菜单栏，【视图】—【标尺】，即可调出标尺工具，如图：
标尺就会显示在舞台上，如图：
两侧标尺的绿色线条可以作为我们的辅助线，如图：
移动舞台上的图形时，能看到辅助线，如下图中，当用【选择工具】移动图形时，如果两条辅助线交叉于物体中心，说明物体居于舞台中央，如图：
如果想在舞台上对齐两个物体，可以用【选择工具】对物体进行拖动，如下图中当左侧的绿色辅助线重合时，表明两个物体左对齐，如图：
关闭标尺，辅助线依然存在，移动物体可以看到物体的参考位置，如图：
收起阅读 »
本节视频教程请点击此处。
标尺和辅助线的用法，具体使用方法如下
选择菜单栏，【视图】—【标尺】，即可调出标尺工具，如图：
标尺就会显示在舞台上，如图：
两侧标尺的绿色线条可以作为我们的辅助线，如图：
移动舞台上的图形时，能看到辅助线，如下图中，当用【选择工具】移动图形时，如果两条辅助线交叉于物体中心，说明物体居于舞台中央，如图：
如果想在舞台上对齐两个物体，可以用【选择工具】对物体进行拖动，如下图中当左侧的绿色辅助线重合时，表明两个物体左对齐，如图：
关闭标尺，辅助线依然存在，移动物体可以看到物体的参考位置，如图：
【已过期】推荐设计师是什么？如何将已发布作品加入个人空间？
*******
最新内容请看
http://bbs.mugeda.com/article/5232
*******
>>>领取设计师专项优惠<<<
可申请出售商业模板，收入80%归设计师所有
>>>如何出售商业模板？点击查看<<<
>>>*H5作品有哪些要求？<<<
1、缩略图尺寸为171*278，图片清晰，美观，体现作品特点。
2、作品是原创。
3、内容不少于5个页面。
4、作品从创意／设计／动画一定要完整。
特别提醒：不是加入了3个作品就一定可以成为推荐设计师，审核标准参考以上4条，敬请知晓，期待更多的优秀设计师加入木疙瘩这个大家庭。
我们审核通过后，将推荐您的个人空间。
>>>*设计师如何将已发布作品加入个人空间？<<<
1、动画作品——选择【已发布的作品】——加入空间，如下图：
2、点击“加入空间”按钮，添加缩略图——加入空间——确定即可。如下图：
（点击图片查看大图）
3、在设计师页面，点击“我的空间”可以查看添加的作品。
（点击图片查看大图）
恭喜你，作品添加成功了！你将出现这个页面哦！
【Mugeda作品发布后的分享】如何在微信及网页展示已发布的作品
1、成功发布作品后，在发布成功页面可以看到发布链接和二维码，点击复制链接按钮，如图：
2、把发布链接粘贴在浏览器地址栏，就可以浏览您刚刚发布的作品。
3、如果想在网页中显示该作品，可以把下面的代码放在目标网页中指定位置的<div></div>标签中，
举例，成功发布的地址为：
http://b1829a12.u.mgd5.com/cam ... .html
（点击看完整地址）
那么放在目标网页中指定位置的<div></div>标签中的代码为：
（注：上述粗体是要更换的地方）
4、如果您使用一个广告服务器（Ad Server），同样可以把上面的代码粘贴到该服务器上广告生成页面的指定位置（一般是一个索要HTML代码的文本框）。
收起阅读 »
2、把发布链接粘贴在浏览器地址栏，就可以浏览您刚刚发布的作品。
3、如果想在网页中显示该作品，可以把下面的代码放在目标网页中指定位置的<div></div>标签中，
举例，成功发布的地址为：
http://b1829a12.u.mgd5.com/cam ... .html
（点击看完整地址）
那么放在目标网页中指定位置的<div></div>标签中的代码为：
<script>
var _mrmcp = {
"redirect_url": "%LINK%?redir=",
"impression_pixel": "%TRACKURL%",
// 统计像素地址
"destination_url": "%DESTURL%",
"custom_params": "%CUSTOMPARAM%",
"common_path":"",
"description":"",
"thumb":"",
"render_mode":"normal",
"receiptUrl": "", // 邀请卡回执提交地址
"ticketUrl": "", // 获取微信认证票据的地址
"saveFormUrl": "", // 保存表单的地址
"eventUrl": "" // 上报事件统计的地址
};
</script>
<script
src="http://card.mugeda.com/scripts/config.js"></script>
<script defer src="http://res.wx.qq.com/open/js/j ... gt%3B
<script src="http://b1829a12.u.mgd5.com/campaigns/5768e44ca3664e1638000181/20161116105537/579ea17e3bd2083c320040e0/loader.js" id="Mugeda_579ea17e3bd2083c320040e0"></script>
（注：上述粗体是要更换的地方）
4、如果您使用一个广告服务器（Ad Server），同样可以把上面的代码粘贴到该服务器上广告生成页面的指定位置（一般是一个索要HTML代码的文本框）。
收起阅读 »
1.52 快速入门：付费会员如何使用模板
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
具体操作步骤如下：
1、会员在登录状态，登录模板页面( http://www.mugeda.com/template.php )挑选要用的模板，点击使用按钮，如图：
2、出现提示，点击确定，切换到模板列表中，可以看到选中的模板已经复制到你的模板列表中，并点击使用按钮，如图：
3、回到动画作品页面，模板已经放到你的作品中，点击编辑按钮，就可以对该模板进行编辑操作，如图：
4、选择模板中要更换的图片，在右侧属性栏，点击图像编辑，上传要替换图片（注：替换图片要和原图片保持尺寸一致，或者是1.5/2倍精度，这样才能保证替换上去的图片清晰并不变形），如图：
5、若点击模板中的图片，在右侧属性栏没有出现图像编辑按钮，则这张图是打组状态，此时的操作应该是双击图片，进入组，然后右侧属性栏就会出现图像编辑按钮，（注：替换的图片要和原图片保持尺寸一致，或者是1.5/2倍精度，这样才能保证替换上去的图片清晰并不变形），此时操作步骤与上面一致，如图：
说明：为模板替换元件、音乐、文字的方法与更换图片的方法一致，请Mu友们按照自己的需求正确替换即可。
收起阅读 »
具体操作步骤如下：
1、会员在登录状态，登录模板页面( http://www.mugeda.com/template.php )挑选要用的模板，点击使用按钮，如图：
2、出现提示，点击确定，切换到模板列表中，可以看到选中的模板已经复制到你的模板列表中，并点击使用按钮，如图：
3、回到动画作品页面，模板已经放到你的作品中，点击编辑按钮，就可以对该模板进行编辑操作，如图：
4、选择模板中要更换的图片，在右侧属性栏，点击图像编辑，上传要替换图片（注：替换图片要和原图片保持尺寸一致，或者是1.5/2倍精度，这样才能保证替换上去的图片清晰并不变形），如图：
5、若点击模板中的图片，在右侧属性栏没有出现图像编辑按钮，则这张图是打组状态，此时的操作应该是双击图片，进入组，然后右侧属性栏就会出现图像编辑按钮，（注：替换的图片要和原图片保持尺寸一致，或者是1.5/2倍精度，这样才能保证替换上去的图片清晰并不变形），此时操作步骤与上面一致，如图：
说明：为模板替换元件、音乐、文字的方法与更换图片的方法一致，请Mu友们按照自己的需求正确替换即可。
收起阅读 »
【分享案例】画花纹！
http://102f1cea.u.mgd5.com/campaigns/57831537a3664e4735000300/20161112025043/5826b89092b579729b444c3a/index.html
用画笔可以在上面画出很多不可思议的花纹图形！只用了一种行为，各位同学可以自己实现一下试试看哦！
运行起来可能会有些卡！ 收起阅读 »
用画笔可以在上面画出很多不可思议的花纹图形！只用了一种行为，各位同学可以自己实现一下试试看哦！
运行起来可能会有些卡！ 收起阅读 »
【代码入门】如何在mugeda中，实现H5作品和外部 网页之间实现数据连接
先看案例
这个案例核心点在于，如何将在H5中输入的 数据传递到外部网页中。本人曾尝试过无代码去实现，但是结果不是很理想，没能达到在两者之间实时传递数据的效果 。
最终做出这个案例觉得还是用代码比较方便一点。用代码的话，其实方法很简单
逻辑分析，该类案例简单点说就是如何将输入的信息与查询的网址合成一个链接，然后点击按钮就可以打开这个合成后的链接，如果理解了这个逻辑的话，我想应该下面的制作就不会太难了
切入正题：
首先、要了解相关查询网站的规则，一般都是查询网站查询时都会在网址后面附带输入信息的，（需要先查询一下看一下查询后网址变化，并复制）举个栗子：
截图为某天气查询网站查询某地的天气情况"id="后面的数据即使我们需要传递的数据
第二步、在舞台出入一个文本输入框（sr） ，一个文本框（addr）和一个按钮（btn）
注：括号内为 元素名称，可自定义，建议采用英文格式
第三步、将输入框内的数据传输转化为查询链接传递给 文本 （此项为重点）
我们以电话号码查询为例，查询链接为http://shouji.supfree.net/fish.asp?cat=数据
这里我们将输入框中的数据带入即可，即addr=http://shouji.supfree.net/fish.asp?cat={{sr}}
注意：一定不要忘了“http://”这个前缀。
剩下就是见证奇迹的时刻了 ：
在上方代码编辑框输入
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener("renderReady", function () {
var scene = this.scene;
var btn = scene.getObjectByName("btn");
btn.addEventListener("inputend", function (event) {
var addr = scene.getObjectByName("addr”);
window.location.href=addr.text;
});
});
注上方括号内下划线所代表的即为上方所命名的元素
至此，所有结果就已完成 。
ps.如果还需要增加其他查询想的话，在复制一段中间代码（下图），并对元素（下图标红部分）重新命名即可。
了解了以上的操作后，我们就可以在木疙瘩上实现更多的H5和网页之间的数据传递了，比如 ：天气查询、火车票查询等查询类的H5制作，甚至是讲述距提交到自己的数据库中，更多想不到等待着你去探索.....
本教程主要针对无代码基础用户，代码大神勿喷。 收起阅读 »
这个案例核心点在于，如何将在H5中输入的 数据传递到外部网页中。本人曾尝试过无代码去实现，但是结果不是很理想，没能达到在两者之间实时传递数据的效果 。
最终做出这个案例觉得还是用代码比较方便一点。用代码的话，其实方法很简单
逻辑分析，该类案例简单点说就是如何将输入的信息与查询的网址合成一个链接，然后点击按钮就可以打开这个合成后的链接，如果理解了这个逻辑的话，我想应该下面的制作就不会太难了
切入正题：
首先、要了解相关查询网站的规则，一般都是查询网站查询时都会在网址后面附带输入信息的，（需要先查询一下看一下查询后网址变化，并复制）举个栗子：
截图为某天气查询网站查询某地的天气情况"id="后面的数据即使我们需要传递的数据
第二步、在舞台出入一个文本输入框（sr） ，一个文本框（addr）和一个按钮（btn）
注：括号内为 元素名称，可自定义，建议采用英文格式
第三步、将输入框内的数据传输转化为查询链接传递给 文本 （此项为重点）
我们以电话号码查询为例，查询链接为http://shouji.supfree.net/fish.asp?cat=数据
这里我们将输入框中的数据带入即可，即addr=http://shouji.supfree.net/fish.asp?cat={{sr}}
注意：一定不要忘了“http://”这个前缀。
剩下就是见证奇迹的时刻了 ：
在上方代码编辑框输入
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener("renderReady", function () {
var scene = this.scene;
var btn = scene.getObjectByName("btn");
btn.addEventListener("inputend", function (event) {
var addr = scene.getObjectByName("addr”);
window.location.href=addr.text;
});
});
注上方括号内下划线所代表的即为上方所命名的元素
至此，所有结果就已完成 。
ps.如果还需要增加其他查询想的话，在复制一段中间代码（下图），并对元素（下图标红部分）重新命名即可。
了解了以上的操作后，我们就可以在木疙瘩上实现更多的H5和网页之间的数据传递了，比如 ：天气查询、火车票查询等查询类的H5制作，甚至是讲述距提交到自己的数据库中，更多想不到等待着你去探索.....
本教程主要针对无代码基础用户，代码大神勿喷。 收起阅读 »
如何在mugeda上无代码实现倒计时（天、时、分、秒）
本教程以上一篇教程为基础如何在mugeda上无代码实现日期倒计时（天、时、分、秒），想要理解本教程的话先看上一篇教程
直接切入正题，
设置：
目标时间设为：TIME,即Y月D日H时M分00秒（注：你可以想直接将目标时间填写为你要达到的目标时间）；
当前时间是time1，即y1月d1日h1时m1分s1秒；
倒计时剩余时间设为time，即剩余时间为d日h时m分s秒（注：没有月）
（ps.本教程目标时间的“秒”不建议自定义，因为如果加入秒的话，操作难度将会无限增大，不信的话你可以先懂这篇教程再说）
直接上逻辑判断方法：
注：以上执行结果一栏并不符合标准的数学语言写法，大家可以将括号内的理解为一整体即可。
只要大家将上面的大写字母换成你想要的目标时间
，即可制作倒计时案例了作品了。（什么 逻辑表达式不会写，看这里http://bbs.mugeda.com/?/question/480）
顺便附赠一份本人做的demo案例：http://7b2a3775.u.h5mc.com/campaigns/56ea907ba3664eea6b000015/20161109031439/5822b91792b579135a79d031/index.html
http://beta.mugeda.com/client/preview_css3.html?id=3554102e
特别声明：因本教程每月天数按30天计算，所以存在误差，如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可（此方法较为麻烦） 收起阅读 »
直接切入正题，
设置：
目标时间设为：TIME,即Y月D日H时M分00秒（注：你可以想直接将目标时间填写为你要达到的目标时间）；
当前时间是time1，即y1月d1日h1时m1分s1秒；
倒计时剩余时间设为time，即剩余时间为d日h时m分s秒（注：没有月）
（ps.本教程目标时间的“秒”不建议自定义，因为如果加入秒的话，操作难度将会无限增大，不信的话你可以先懂这篇教程再说）
直接上逻辑判断方法：
注：以上执行结果一栏并不符合标准的数学语言写法，大家可以将括号内的理解为一整体即可。
只要大家将上面的大写字母换成你想要的目标时间
，即可制作倒计时案例了作品了。（什么 逻辑表达式不会写，看这里http://bbs.mugeda.com/?/question/480）
顺便附赠一份本人做的demo案例：http://7b2a3775.u.h5mc.com/campaigns/56ea907ba3664eea6b000015/20161109031439/5822b91792b579135a79d031/index.html
http://beta.mugeda.com/client/preview_css3.html?id=3554102e
特别声明：因本教程每月天数按30天计算，所以存在误差，如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可（此方法较为麻烦） 收起阅读 »
【Mugeda新功能教程】最新上线的小功能（超实用，赶紧马）
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
1、增加给单页命名的功能
具体操作步骤，在左侧页面栏中，每一页默认的命名是“第1页”、“第2页”……，如图：
把鼠标移至默认命名处，就能给单页重新命名，如图：
2、增加当使用舞台上的播放功能时，点击舞台任意位置【暂停】功能
具体操作步骤，点击舞台上的播放按钮，如图：
随意点击舞台任意处，即可暂停动画。
3、增加在属性栏改变某元素宽高属性时，锁定长宽比的功能
具体操作步骤，如图：
4、可直接将图片粘贴在舞台上原有“上传”按钮消失，直接点击“选择”按钮就可以将图片添加到舞台，图片会在后台上传
具体操作步骤，点击工具条中的“导入图片”功能，如图：
然后选择图片，直接点击“选择”按钮，直接上传图片，如图：
5、绘画板功能增加只显示编辑颜色和画笔粗细的功能 ，不显示勾叉
具体操作步骤，点击工具条中的“绘画板”功能，如图：
在舞台上拉出画布大小，并保持选中状态，如图：
在右侧属性栏中，选择“仅显示线宽和颜色”，在预览中就不会显示勾叉，如图：
6、鼠标点击范围精确识别为矢量图形范围（例：三角形就是三角形），目前任何图形的点击生效区域都是矩形的
具体操作步骤，在舞台中绘图圆形，并给圆形添加一个“点击跳转到上一页”功能，如图：
预览动画可以看到，动作只在圆形部分生效。
7、单选框、多选框增加横板显示
具体操作步骤，在左侧工具条添加“单选框”工具到舞台，如图：
然后选择工具条中的“变形工具”，对单选框进行调整，即可调整成竖版，如图：
8、点赞控件增加：不可以取消赞的功能
具体操作步骤，在左侧工具条添加“点赞”控件到舞台，如图：
在属性栏新增，不允许撤销点赞的选项，如图：
收起阅读 »
1、增加给单页命名的功能
具体操作步骤，在左侧页面栏中，每一页默认的命名是“第1页”、“第2页”……，如图：
把鼠标移至默认命名处，就能给单页重新命名，如图：
2、增加当使用舞台上的播放功能时，点击舞台任意位置【暂停】功能
具体操作步骤，点击舞台上的播放按钮，如图：
随意点击舞台任意处，即可暂停动画。
3、增加在属性栏改变某元素宽高属性时，锁定长宽比的功能
具体操作步骤，如图：
4、可直接将图片粘贴在舞台上原有“上传”按钮消失，直接点击“选择”按钮就可以将图片添加到舞台，图片会在后台上传
具体操作步骤，点击工具条中的“导入图片”功能，如图：
然后选择图片，直接点击“选择”按钮，直接上传图片，如图：
5、绘画板功能增加只显示编辑颜色和画笔粗细的功能 ，不显示勾叉
具体操作步骤，点击工具条中的“绘画板”功能，如图：
在舞台上拉出画布大小，并保持选中状态，如图：
在右侧属性栏中，选择“仅显示线宽和颜色”，在预览中就不会显示勾叉，如图：
6、鼠标点击范围精确识别为矢量图形范围（例：三角形就是三角形），目前任何图形的点击生效区域都是矩形的
具体操作步骤，在舞台中绘图圆形，并给圆形添加一个“点击跳转到上一页”功能，如图：
预览动画可以看到，动作只在圆形部分生效。
7、单选框、多选框增加横板显示
具体操作步骤，在左侧工具条添加“单选框”工具到舞台，如图：
然后选择工具条中的“变形工具”，对单选框进行调整，即可调整成竖版，如图：
8、点赞控件增加：不可以取消赞的功能
具体操作步骤，在左侧工具条添加“点赞”控件到舞台，如图：
在属性栏新增，不允许撤销点赞的选项，如图：
收起阅读 »
如何在mugeda上无代码实现日期倒计时（天、时、分、秒）
如何在mugeda上无代码实现日期倒计时（天、时、分、秒）
前段时间有人在论坛抛出倒计时如何实现的问题，本人觉得无代码实现倒计时挺有趣的，就是做了个里约奥运会倒计时的demo，不过昨天又有人问，本人又重新翻回以前的demo，发现demo有bug，
到底什么bug，看图
所以本人决定大一下补丁，同时为广大mu友分享（chun）下（shu）经（zhuang）验（b），下面开始装B时刻：
本人首先做了一个2017年元旦倒计时的demo，不要问为什么，因为元旦做起来比较简单，结束时间是2017年01月01日00点00分00秒，百度了一下，目前时间2016年11月7日，距离元旦还有54天，下面就是操作了，基本操作请查看mugeda教程，
首先，在舞台新建几个文本工具，分别分别分别设置其预置文本为当前时间/日期，格式最好设置为英文，格式最好设置为英文，格式最好设置为英文格，（说了三遍因为这很重要）我这里除了小时用了英文，其他用的中文（因为本人比较懒，所以没改英文格式，不改的话，出现bug后果自负！！！）
并且将获取的当前时间分别命名为h1、m1、s1，
剩余时间则为d、h、m、s,（计算倒计时要从秒开始算起，不要问为什么 ，你长大就懂了）
s=59-{{s1}}，（也许你会问为什么是59而不是60，因为当前时间是0秒的时候，如果是60的话，s=60-0=60，所以差一秒而已，就忽略了吧，毕竟工作量可以减少不少，如果你是处女座的话来找我，来找本人给你开小灶）
m=59-{{m1}}
h=23-{{h1}}
剩下的看图，
关于剩余天数，可以直接用文本工具输入55，（问为什么是55，看上面）然后设置属性改变行为，，执行条件为：{{h.text}}=0&&{{m.text}}=0&&{{s.text}}=0&&{{h1.text}}!=23，什么看不懂什么意思，看这里http://bbs.mugeda.com/?/article/34，自己猜，
设置方式看下图
注：需要在桌面添加个计时器，是否循环设置为循环，所有的属性改变行为都要设置在这个计时器上，所有的属性改变行为都要设置在这个计时器上，所有的属性改变行为都要设置在这个计时器上。
到此，整个demo应该算结束了，为了圆满一点，本人加上了背景元素什么的装饰一下，然后插入了第二帧，当时时间到元旦的时候，就可以跳转到第二帧了，（怎么设置跳转的方法我就不说了，自己百度）。
下面看看demo：http://7642bdb8.u.h5mc.com/cam ... .html
由于本人技术有限，以上教程如有bug，纯属胡扯，敬请见谅
特别声明：因本教程每月天数按30天计算，所以存在误差，如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可（此方法较为麻烦）
未完待续......
下期预告《如何在mugeda上无代码实现倒计时（天、时、分、秒）》 收起阅读 »
前段时间有人在论坛抛出倒计时如何实现的问题，本人觉得无代码实现倒计时挺有趣的，就是做了个里约奥运会倒计时的demo，不过昨天又有人问，本人又重新翻回以前的demo，发现demo有bug，
到底什么bug，看图
所以本人决定大一下补丁，同时为广大mu友分享（chun）下（shu）经（zhuang）验（b），下面开始装B时刻：
本人首先做了一个2017年元旦倒计时的demo，不要问为什么，因为元旦做起来比较简单，结束时间是2017年01月01日00点00分00秒，百度了一下，目前时间2016年11月7日，距离元旦还有54天，下面就是操作了，基本操作请查看mugeda教程，
首先，在舞台新建几个文本工具，分别分别分别设置其预置文本为当前时间/日期，格式最好设置为英文，格式最好设置为英文，格式最好设置为英文格，（说了三遍因为这很重要）我这里除了小时用了英文，其他用的中文（因为本人比较懒，所以没改英文格式，不改的话，出现bug后果自负！！！）
并且将获取的当前时间分别命名为h1、m1、s1，
剩余时间则为d、h、m、s,（计算倒计时要从秒开始算起，不要问为什么 ，你长大就懂了）
s=59-{{s1}}，（也许你会问为什么是59而不是60，因为当前时间是0秒的时候，如果是60的话，s=60-0=60，所以差一秒而已，就忽略了吧，毕竟工作量可以减少不少，如果你是处女座的话来找我，来找本人给你开小灶）
m=59-{{m1}}
h=23-{{h1}}
剩下的看图，
关于剩余天数，可以直接用文本工具输入55，（问为什么是55，看上面）然后设置属性改变行为，，执行条件为：{{h.text}}=0&&{{m.text}}=0&&{{s.text}}=0&&{{h1.text}}!=23，什么看不懂什么意思，看这里http://bbs.mugeda.com/?/article/34，自己猜，
设置方式看下图
注：需要在桌面添加个计时器，是否循环设置为循环，所有的属性改变行为都要设置在这个计时器上，所有的属性改变行为都要设置在这个计时器上，所有的属性改变行为都要设置在这个计时器上。
到此，整个demo应该算结束了，为了圆满一点，本人加上了背景元素什么的装饰一下，然后插入了第二帧，当时时间到元旦的时候，就可以跳转到第二帧了，（怎么设置跳转的方法我就不说了，自己百度）。
下面看看demo：http://7642bdb8.u.h5mc.com/cam ... .html
由于本人技术有限，以上教程如有bug，纯属胡扯，敬请见谅
特别声明：因本教程每月天数按30天计算，所以存在误差，如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可（此方法较为麻烦）
未完待续......
下期预告《如何在mugeda上无代码实现倒计时（天、时、分、秒）》 收起阅读 »
【双十一来啦】一年仅一次，5折抢购Mugeda会员！
双十一来啦，Mugeda怎么能没有活动呢？
全年仅一次的会员5折疯抢，这次错过再等一年，而且此次优惠力度史无前例，聪明的宝宝们们都会快人一秒点击这里
·双十一狂欢日 5折抢购Mugeda会员
活动形式： 购买会员享5折优惠（不含加量包,存储空间），新用户入会、老用户续费均可参加。
下单就送：99元案例课程包
活动时间： 11月10日——11月12日（3天）
特别注意： 在双十一期间成功抢购会员的Mu友，凭自己的用户名与班主任—松月联系（QQ：154065262），兑换99元案例课程。
·5折会员有什么服务？
Mugeda会员能享受什么服务，值得在双十一剁手呢？请听小编细细掰着指头跟你数数：海量H5模板免费使用、最热H5案例课程免费听、一对一专属答疑服务……更多会员服务请点击这里
收起阅读 »
全年仅一次的会员5折疯抢，这次错过再等一年，而且此次优惠力度史无前例，聪明的宝宝们们都会快人一秒点击这里
·双十一狂欢日 5折抢购Mugeda会员
活动形式： 购买会员享5折优惠（不含加量包,存储空间），新用户入会、老用户续费均可参加。
下单就送：99元案例课程包
活动时间： 11月10日——11月12日（3天）
特别注意： 在双十一期间成功抢购会员的Mu友，凭自己的用户名与班主任—松月联系（QQ：154065262），兑换99元案例课程。
·5折会员有什么服务？
Mugeda会员能享受什么服务，值得在双十一剁手呢？请听小编细细掰着指头跟你数数：海量H5模板免费使用、最热H5案例课程免费听、一对一专属答疑服务……更多会员服务请点击这里
收起阅读 »
【高级互动】如何用木疙瘩做游戏？
在众多H5作品中，游戏无疑是最吸引人的类型！而木疙瘩强大的行为功能合集已经足够实现大部分的游戏功能了，这里将分享一下 如何用木疙瘩来做游戏！
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧！
1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
更多案例→http://www.mugeda.com/cases.php 选择互动游戏分类
那么怎么用木疙瘩做游戏呢？
1.准备素材
首先需要把游戏所要用到的所有素材尽可能的先准备齐全，这样可以更直观的观察到游戏的效果，在做的过程中遇到还没有的素材可以临时绘制几何图形代替。
2.充分了解游戏规则
这一部分很重要，充分了解游戏规则并不只是和我们平时看到的游戏规则说明那样，而是要在玩游戏过程中更深度的去理解！
就拿上面的第五个案例《像素鸟》来说明吧
像素鸟的游戏规则说明是：点击屏幕让小鸟上下移动，每穿过一次柱子并且没有碰到柱子则记一分
但我们要结合游戏理解为：
1.小鸟会在场景中前行
2.柱子的出口位置随机变化
3.小鸟会匀加速向下掉落，并且旋转角度也随其改变
4.鼠标点击屏幕会使小鸟瞬间向上移动一段固定的距离，仅仅在手指按下瞬间时有效，持续按下无法连续触发
5.小鸟碰到柱子或者屏幕上下方均使游戏失败，成功穿过柱子则记1分
……等
3.将每一条游戏规则翻译成逻辑语言
到这一部分开始就需要费点脑子了，这里将涉及逻辑判断、数学和物理的各种运算，这一步的翻译可能需要进行很多次，先是翻译成木疙瘩功能可以实现的方法，再翻译成具体的各种公式，这是相对比较难的一部分，也是最容易让人开始放弃的部分。我们要对木疙瘩现有的各种行为的作用以及逻辑表达式的书写格式有足够的了解，详情请参考教程贴：http://bbs.mugeda.com/?/article/289
示范：（对应第二部分游戏规则编号进行翻译）
1. 创建随机数控件，设置变化频率为0.1秒，并在控件上添加行为，使得“改变元素属性”行为持续响应
第一个“改变元素属性”行为持续改变背景图片和柱子的横向坐标
第二个行为判断当坐标超出屏幕范围后，将坐标改为进入屏幕前的坐标
2.在更改柱子坐标的同时再改变柱子的纵向坐标，坐标每次与随机数进行一个取值关联
3.在舞台外创建一个文本框，定义为数值，在随机数控件上添加“改变元素”行为，实时改变小鸟的纵向坐标，使得小鸟按每次按速度下降，同时每次下降增加速度的数值，产生加速掉落效果
4.在屏幕前放置一个透明的块，用来触发鼠标点击行为，鼠标点击触发行为改变速度为向上数值，产生小鸟瞬间向上移动的效果。
5. 在判断小鸟纵向坐标在柱子缝隙范围内，并且小鸟穿过柱子宽度后，坐标小于小鸟坐标时，加1分，用改变元素属性行为对舞台外用于记录分数的文本框进行数值改变。
当小鸟纵向坐标超出屏幕范围、或者在进入柱子区域时候纵向坐标并不在柱子间隙范围内的时候判断游戏失败
……等
4.问题（BUG）检测
在做第三步的时候，绝大部分人都会有BUG产生，有可能是因为行为触发方式选择错误，也有可能是逻辑表达式写错，取值公式算错等等各种原因，这时候我们就要在这种情况下更精确的寻找到BUG是如何产生的。
这里提供几个BUG查找的几个要领：
1.如果出现关联动画失效，或者通过“改变元素”行为无法正确使得物体改变的时候，可以新建一个用于测试的文本框，用来显示关联的数值，或者公式计算结果，可以直观的看到数值的变化，以检查公式是否有错。像陀螺仪这类数值就通常与我们想象中的变化规律不同，最好在做之前先关联文本框观察一下变化规律。
2.如果出现一个或多个导致最终结果实现的行为无法执行的时候，先依次取消执行条件，看看取消后能不能正常产生变化，就可以判断是取值公式的错误还是罗技表达式的错误了。
3.如果确定了是取值公式或者逻辑表达式出错的话，请一定仔细检查一下书写的格式，不要急着让老师帮你找错，有时候很细微的书写问题是很难被找到的，例如英文括号写成了中文括号，英文i写成了数字1，对逻辑表达式没有了解透彻，把判断是否相等的公式写成了 a = b（正确应该是a == b），等等很多细节问题都是BUG产生的一大原因。
4.一个游戏效果不符合理想中的效果，这个时候就需要返回到第三步重新开始审查自己翻译的逻辑是不是正确的，毕竟计算机不是人类，需要很严谨的根据你的命令去执行。
最后，木疙瘩教程页中有一些游戏的案例教程，大家可以去看看老师们是如何按照了上面的流程去做的！
教程地址：http://www.mugeda.com/help.php
4.案例讲解→小游戏
5.热门案例
觉得这篇文章对你有帮助的话，给我点个赞吧！
我的其它文章：
【代码分享】贴边UI功能！ http://bbs.mugeda.com/?/article/426
【代码分享】用鼠标进行控制（鼠标响应事件）！ http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办？5招教你解决！ http://bbs.mugeda.com/?/question/230 收起阅读 »
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧！
1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
更多案例→http://www.mugeda.com/cases.php 选择互动游戏分类
那么怎么用木疙瘩做游戏呢？
1.准备素材
首先需要把游戏所要用到的所有素材尽可能的先准备齐全，这样可以更直观的观察到游戏的效果，在做的过程中遇到还没有的素材可以临时绘制几何图形代替。
2.充分了解游戏规则
这一部分很重要，充分了解游戏规则并不只是和我们平时看到的游戏规则说明那样，而是要在玩游戏过程中更深度的去理解！
就拿上面的第五个案例《像素鸟》来说明吧
像素鸟的游戏规则说明是：点击屏幕让小鸟上下移动，每穿过一次柱子并且没有碰到柱子则记一分
但我们要结合游戏理解为：
1.小鸟会在场景中前行
2.柱子的出口位置随机变化
3.小鸟会匀加速向下掉落，并且旋转角度也随其改变
4.鼠标点击屏幕会使小鸟瞬间向上移动一段固定的距离，仅仅在手指按下瞬间时有效，持续按下无法连续触发
5.小鸟碰到柱子或者屏幕上下方均使游戏失败，成功穿过柱子则记1分
……等
3.将每一条游戏规则翻译成逻辑语言
到这一部分开始就需要费点脑子了，这里将涉及逻辑判断、数学和物理的各种运算，这一步的翻译可能需要进行很多次，先是翻译成木疙瘩功能可以实现的方法，再翻译成具体的各种公式，这是相对比较难的一部分，也是最容易让人开始放弃的部分。我们要对木疙瘩现有的各种行为的作用以及逻辑表达式的书写格式有足够的了解，详情请参考教程贴：http://bbs.mugeda.com/?/article/289
示范：（对应第二部分游戏规则编号进行翻译）
1. 创建随机数控件，设置变化频率为0.1秒，并在控件上添加行为，使得“改变元素属性”行为持续响应
第一个“改变元素属性”行为持续改变背景图片和柱子的横向坐标
第二个行为判断当坐标超出屏幕范围后，将坐标改为进入屏幕前的坐标
2.在更改柱子坐标的同时再改变柱子的纵向坐标，坐标每次与随机数进行一个取值关联
3.在舞台外创建一个文本框，定义为数值，在随机数控件上添加“改变元素”行为，实时改变小鸟的纵向坐标，使得小鸟按每次按速度下降，同时每次下降增加速度的数值，产生加速掉落效果
4.在屏幕前放置一个透明的块，用来触发鼠标点击行为，鼠标点击触发行为改变速度为向上数值，产生小鸟瞬间向上移动的效果。
5. 在判断小鸟纵向坐标在柱子缝隙范围内，并且小鸟穿过柱子宽度后，坐标小于小鸟坐标时，加1分，用改变元素属性行为对舞台外用于记录分数的文本框进行数值改变。
当小鸟纵向坐标超出屏幕范围、或者在进入柱子区域时候纵向坐标并不在柱子间隙范围内的时候判断游戏失败
……等
4.问题（BUG）检测
在做第三步的时候，绝大部分人都会有BUG产生，有可能是因为行为触发方式选择错误，也有可能是逻辑表达式写错，取值公式算错等等各种原因，这时候我们就要在这种情况下更精确的寻找到BUG是如何产生的。
这里提供几个BUG查找的几个要领：
1.如果出现关联动画失效，或者通过“改变元素”行为无法正确使得物体改变的时候，可以新建一个用于测试的文本框，用来显示关联的数值，或者公式计算结果，可以直观的看到数值的变化，以检查公式是否有错。像陀螺仪这类数值就通常与我们想象中的变化规律不同，最好在做之前先关联文本框观察一下变化规律。
2.如果出现一个或多个导致最终结果实现的行为无法执行的时候，先依次取消执行条件，看看取消后能不能正常产生变化，就可以判断是取值公式的错误还是罗技表达式的错误了。
3.如果确定了是取值公式或者逻辑表达式出错的话，请一定仔细检查一下书写的格式，不要急着让老师帮你找错，有时候很细微的书写问题是很难被找到的，例如英文括号写成了中文括号，英文i写成了数字1，对逻辑表达式没有了解透彻，把判断是否相等的公式写成了 a = b（正确应该是a == b），等等很多细节问题都是BUG产生的一大原因。
4.一个游戏效果不符合理想中的效果，这个时候就需要返回到第三步重新开始审查自己翻译的逻辑是不是正确的，毕竟计算机不是人类，需要很严谨的根据你的命令去执行。
最后，木疙瘩教程页中有一些游戏的案例教程，大家可以去看看老师们是如何按照了上面的流程去做的！
教程地址：http://www.mugeda.com/help.php
4.案例讲解→小游戏
5.热门案例
觉得这篇文章对你有帮助的话，给我点个赞吧！
我的其它文章：
【代码分享】贴边UI功能！ http://bbs.mugeda.com/?/article/426
【代码分享】用鼠标进行控制（鼠标响应事件）！ http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办？5招教你解决！ http://bbs.mugeda.com/?/question/230 收起阅读 »
等灯登凳
111
2.9.7 API的应用：获取Mugeda后台数据
方法一：
跳过Mugeda后台，把在Mugeda里做的作品导出，放到自己的服务器上，然后通过添加代码的方式获取数据。
方法二：
可以在api中使用ajax的方式发送和获取数据，但是要注意跨域问题，当你的动画直接使用Mugeda平台发布的时候，使用ajax向自己所在域名的服务器发送请求的时候，是存在跨域问题的，这个时候推荐使用jsonp的方式来请求数据，如果你的动画部署在自己的服务器上，这个时候就不会存在跨域问题，你可以使用ajax方式来请求数据。
推荐在动画中引入jQuery，这样你可以使用jQuery ajax方法来发送请求，以下是例子，其中url需要执行你自己后台的请求地址，注意，跨域情况下使用jsonp的请求需要服务器后台支持。
1.没有跨域的情况：
$.ajax({
url: '/submit',
type: 'POST',
data: {name: 'test'},
success: function (response) {
//TODO；
}
});
2.跨域的情况：
$.ajax({
url: "/submit.jsonp",
jsonp: "callback",
dataType: "jsonp",
data: {name: 'test'},
success: function( response ) {
//TODO;
}
});
2.9.6 API的应用：工具API
2.9.5 API的应用：aObject对象
2.9.4 API的应用：scene对象
2.9.3 API的应用：Mugeda对象
2.9.2 API的应用：Mugeda API的整体结构
2.9.1 API的应用：在动画中添加代码 收起阅读 »
跳过Mugeda后台，把在Mugeda里做的作品导出，放到自己的服务器上，然后通过添加代码的方式获取数据。
方法二：
可以在api中使用ajax的方式发送和获取数据，但是要注意跨域问题，当你的动画直接使用Mugeda平台发布的时候，使用ajax向自己所在域名的服务器发送请求的时候，是存在跨域问题的，这个时候推荐使用jsonp的方式来请求数据，如果你的动画部署在自己的服务器上，这个时候就不会存在跨域问题，你可以使用ajax方式来请求数据。
推荐在动画中引入jQuery，这样你可以使用jQuery ajax方法来发送请求，以下是例子，其中url需要执行你自己后台的请求地址，注意，跨域情况下使用jsonp的请求需要服务器后台支持。
1.没有跨域的情况：
$.ajax({
url: '/submit',
type: 'POST',
data: {name: 'test'},
success: function (response) {
//TODO；
}
});
2.跨域的情况：
$.ajax({
url: "/submit.jsonp",
jsonp: "callback",
dataType: "jsonp",
data: {name: 'test'},
success: function( response ) {
//TODO;
}
});
2.9.6 API的应用：工具API
2.9.5 API的应用：aObject对象
2.9.4 API的应用：scene对象
2.9.3 API的应用：Mugeda对象
2.9.2 API的应用：Mugeda API的整体结构
2.9.1 API的应用：在动画中添加代码 收起阅读 »