·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
（点击图片看大图）

 1. 添加一个投票组件：

 
2. 按照提示完成投票的设置：

 
3. 确认投票数据设置后，会在舞台上生成一个投票组件，并且会自动命名（投票1），同时会在数据库上注册一个投票数据点。注意，投票组件是一个服务器数据组件，在内容展示时不会出现。为了能够投票，还需要添加投票行为：

 
4. 添加3个文字对象，投票给上海、投票数、是否投票。分别对应的功能为：投票按钮、显示“上海”的投票数，和显示当前用户是否给“上海”投过票。后两个文字对象需要命名，后面要引用：

 
5. 为投票按钮添加“投票”行为：

 
6. 编辑投票行为进行设置。其中，投票对象是上面添加的投票数据对象；显示结果对象和显示是否投票分别对应上面添加的对应文字对象：

 
7. 设置成功后就可以进行投票了。投票结果会显示在对应的文字信息中便于后续处理，同时会根据投票设置显示相应的结果文字，便于用关联、条件等方式控制更多的交互行为：

 

2016年，Mugeda总共讲过13个热门H5案例，每个都是刷屏级，目的是希望Mu友们都能在第一时间掌握当下最流行的H5制作技术。  
 
岁末年初，想把这一兜子干货全部给你！还没有看过？现在还来得及，而且每个只要9.9，就能一人抵百，掌握只有大公司大团队才能做出的神作！
 
点击课程名称，马上学习。
 
1、【动画类】什么才是福
知识点：曲线变形动画、元件动画、控制元件

 
2、【长图拖动类】你玩过ROOM吗
知识点：背景拖动、关联动画、逻辑判断

 
3、【3D视角】小爷吴亦凡
知识点：陀螺仪、关联动画、视频使用 

 
4、【视频类】星巴克咖啡
知识点：序列帧动画、控制元件、表单制作

 
5、【小游戏类】拍出惊喜
知识点：随机数、逻辑判断、控制元件 

 
6、【课件类】化学课件制作
知识点：高级交互、控制元件、逻辑判断

 
7、【交互游戏类】谁是足球明星
知识点：陀螺仪、逻辑判断、高级交互

 
8、【仿朋友圈类】CEO邀你群聊
知识点：关键帧动画、行为添加、Mugeda图形绘制

 
9、【绘画板功能】里约大冒险
知识点：绘画板功能、元件动画、添加行为

 
10、【超炫景深】天猫双十一宇宙邀请函
知识点：关联动画结合逻辑判断，制作超炫景深透视效果

 
11、【快闪】仿苹果7发布会超炫快闪
知识点：多种快闪的组合效果，用色块遮盖文字消失

 
12、【小游戏】H5换装小游戏
知识点：手指拖动放下，及多种逻辑表达式的写法

 
13、【视差类】视差类H5的制作
知识点：动画关联的用法

 
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程 
 
如何压缩图片、声音和视频？ 
答：http://bbs.mugeda.com/?/article/429 
 
为什么导入H5里的视频无法播放？ 
答：确保视频格式为MP4，另外大小控制在20M以内，另外注意视频的格式，视频编码必须是H.264，音频编码必须是AAC。
 
Mugeda里的模板如何使用？ 
答：单页模板使用说明http://bbs.mugeda.com/?/article/297 
精品模板使用说明http://bbs.mugeda.com/?/article/401 
 
如何实现H5里可以定制文字和图片的功能？ 
答：定制文字教程http://bbs.mugeda.com/?/article/363 
定制图片教程http://bbs.mugeda.com/?/article/351 
 
H5作品文件要如何设置？ 
答： http://bbs.mugeda.com/?/article/296 
 
屏幕适配要如何设置？如渲染模式、自适应、选择发布模式、如何设置强制横屏竖屏？
答：http://bbs.mugeda.com/?/article/418 
 
我想让一个物体不断循环动，怎么实现？ 
答：用元件动画可以实现，相关教程http://bbs.mugeda.com/?/article/323 
 
如何复制帧/图层？ 
答：http://bbs.mugeda.com/?/article/427 
 
为什么无法导入PSD？ 
答：导入PSD及注意事项说明http://bbs.mugeda.com/?/article/412 
 
逻辑表达式要怎么写？ 
答：7种逻辑表达式的写法http://bbs.mugeda.com/?/article/406 
 
Mugeda API的使用方法？ 
答：具体文档http://card.mugeda.com/mugedaApiDoc/index.html
 
如何使用回调函数？ 
答：具体文档http://bbs.mugeda.com/?/article/416
 
为什么我的背景音乐无法播放？ 
答：Mugeda支持的声音格式为mp3和wav； 
保证声音文件大小10M以内（通常建议压缩处理后声音文件大小500kb左右）。
 
为什么我的背景音乐只在一页中播放？ 
答：整个作品的背景音乐在属性栏——背景音乐处添加 
其他Mugeda声音使用相关问题请参考http://bbs.mugeda.com/?/article/13
 
为什么打开内容时，会提示素材缺失？ 
答：素材缺失，指的是图片、视频和音频素材在源文件里丢失的情况，这是因为素材没有上传完成造成的。 
以图片为例，当图片上传到素材库时，会有进度条显示上传进度，橙色进度条完成时才算上传成功，如图：


同时如果在素材库里删除了素材，相关作品中用到的素材也会删除，会显示如下：

 
为什么我的内容发布后还是会有橙色的广告条？ 
答：内容发布后，如果扫描“效果预览”旁的二维码，这时候看到的是预览链接，在最上方会看到橙色的广告条，如果是正式发布链接，则不会出现广告条，特此说明。如图：

（此图二维码是预览地址，有广告条）


（此图二维码是发布地址，无广告条）
 
【预览和发布链接的详细区别】可参考： https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=964413431636375&vid=s1415c5xz65
 
我想让画面上的一个物体停下来，用手指点击再播放，怎么做？ 
答：这个属于动画控制，建议学习下基础课程： https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=982606913102231&vid=c1415r781id
 
为什么我做的H5打不开了，说是涉及违规内容被举报？ 
答：请先自查作品是否违规：http://bbs.mugeda.com/?/article/272 
如果你确实没有违反的话，可以重新发布一遍。
 

 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点：图片压缩、声音压缩、视频压缩
 
图片压缩： 
https://tinypng.com/ 可以对图片进行压缩处理，而且质量不会降低。把要压缩的图片拖动到方框内，即可开始压缩，如图：

 
压缩好，点击【Downloud】下载到电脑的指定位置，如图：

 
声音压缩： 
推荐大家【Audacity】这个软件，如图：

 
把要压缩的声音拖到灰色区域，就能上传并开始编辑，如图：

 
用选择工具选中音轨中不需要的部分，【Delete】就可删除，如图：

 
点击放大镜，可以放大音轨，如图：

 
给声音加特效，需先选中需要添加特效的音轨部分，点击【特效】，如图：

 
把立体声分离成单声，可以让声音文件变得更小，如图：

 
在能保证声音质量的前提下，可删除其中一个声道，如图：

 
【文件】—【导出】，在弹窗的右下角【选项】，可以对声音质量进行选择，数字越小，表示声音质量越差，文件尺寸越小，一般默认为24，如图：

 
【声道模式】选择【合并立体声】，如图：

 
视频压缩： 
推荐大家用Freemake Video这个软件，它在压缩的质量和大小上都不错，如图：

 
左上角【视频】可以导入视频，视频右侧【小剪刀】可裁剪视频，如图:

 
如果只保留前10秒视频，先定位在10s的位置，单击【开始选取范围】，如图：

 
单击【移动至选取范围的开始】，即此时的点是要裁剪视频的开始，如图：

 
把鼠标移动到要裁剪内容的末尾，点击【剪下选取范围】，如图：

 
只保留了前10s的视频，点击右下角【ok】，完成裁剪，如图：

 
该软件提供了很多格式的导出，如图：

 
如果要导出MP4，点击【编辑预先设定】按钮，如图：

 
点击【转换】，画面大小可以自定义，视频编码器一定要选【H.264】，如图：

 
比特率类型，设置越大导出的视频文件也就越大，如图：

 
关于视频中音频的设置，音频解码器一定要选择【AAC】，其他可根据自己的需求设置，如图：

 
特别注意：在H5导入的视频，视频编码器一定要设置成【H.264】，音频编解码器一定要 设置成【AAC】。
 

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程   
 
本节知识点：复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧： 
选择某一个图层的全部帧，全选后时间线呈草绿色，右键选择【复制帧】，如图：

 
在没有帧的地方，右键【粘贴帧】，如图：

 
这时候刚才的一整段动画就被粘贴过来了，如图：

 
选中第一个空白关键帧，右键【删除帧】，就会得到与复制动画完全一致的一整段动画，如图：

 
复制关键帧-粘贴关键帧： 
选中关键帧，右键【复制关键帧】，如图：

 
选择要粘贴的位置，右键【粘贴关键帧】，如图：

 
注意，不能把关键帧粘贴在另外一段动画的时间单元里，否则会出现如下提示，如图：

 
目前，不支持复制一个图层的多个关键帧，如图：

 
则会出现如下提示，如图：

 
但支持同时复制多个图层的关键帧，如图：

 
然后选择要粘贴的位置，右键【粘贴关键帧】，如图：

 
复制多个图层-粘贴多个图层： 
选中所有的4个图层，右键【复制帧】，如图：

 
另外新建4个图层，如图：

 
选择最上面图层第2个没有帧的地方，【右键】粘贴站，如图：

 
复制的4个图层的全部内容全部都粘贴过来了，如图：

 

还记得苹果7发布会的那则快闪广告啵？

 
节奏把握的太好了，不仅用户看的爽，而且信息量巨大！  
 
这种形式用H5做，不仅效果好，而且巨简单，Mugeda案例课程这次就以《快闪H5制作》为例，为大家揭秘如何用H5打造一款堪比苹果快闪的特效。
 
案例学习：《快闪H5制作》

 
课程时长：1小时  
知识点：快闪的几种组合效果，用色块遮盖控制文字消失。   
课程形式：随到随听  
 
点击这里开始学习
 

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 说明：浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作，具体步骤如下：  
1、加载页面默认是进度条，如图：

 
2、样式、提示文字、文字大小均可自由设置，如果设置了动态文字，在页面加载的时候，可以看到文字在动，如图：


 
3、图片位置，设置的值越大，前景图片的位置越靠下；图片宽度设置的值越小，前景图片的尺寸就越小，如图：

 
4、当然你还可以在首页里自己制作加载页，只需要在右侧的样式中设置【首页作为加载页面】，如图：

 
5、除了自己制作，还可以从Mugeda模板里添加加载页，如图：

 
Mugeda提供丰富的加载界面模板，除此之外还有表单、交互、逻辑判断等模板供大家免费使用，如图：

 
点击【确定】添加加载界面到舞台上，并把添加的模板调整至首页，然后在样式上设置【首页作为加载界面】，如图：

 
关于Mugeda模板的更多使用方法，请点击这里学习。

 

 

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点：新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板，左下第一个按钮“新建元件”，如图：

 
默认命名为“元件1”，自动进入元件编辑界面，如图：

 
二、如何把新建元件添加到舞台？ 
在元件编辑界面完成编辑后，点击页面回到舞台，如图：

 
把元件添加到舞台的方法有两种
1、鼠标放到元件上，成“十字”后拖动不放，到舞台再松开，如图：

 
2、点击元件面板下方的“添加到绘画板”按钮，也可把元件导入到舞台，如图：

 
三、复制元件： 
点击元件面板左下第二个“复制元件”，即可复制一个新的元件，默认命名为“元件2”，如图：

 
在复制元件，即“元件2”里进行修改，不会影响到“元件1”内的内容 ，如图：

 
四、新建元件文件夹： 
点击元件面板下方的“新建文件夹”按钮，可以在元件面板里添加文件夹，如图：

 
文件夹可以方便的对元件、视频、音频等进行管理，如图：

 
五、导出元件：
点击元件面板下方的“导出”按钮，如图：

 
如果想让同一个元件应用在不同的作品中，可以用导出功能。选择要导出的元件，点击“导出”按钮，如图：

 
在新建的作品里，就能看到刚才导出的元件，把它拖动到舞台上就可以使用了，如图：

 
六、编辑元件： 
编辑元件有多种方法，既可以点击元件面板下方的“编辑”按钮，也可以双击元件，进入到元件编辑界面，如图：

 
七、删除元件：

 
 

`想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点：设置坐标，改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板：

 
绘制图形，物体的属性都在右侧查找

 
2、设置物体大小和坐标：​



 
3、设置透明度：​

 
输入值的方式更准确

 
4、线条类型： 
包括实线、点线、虚线、点划线

 
5、填充：

 
6、X、Y、Z轴旋转：

7、端点： 
端点只能对在Mugeda绘制的线条进行设置，如图：

 
8、接合： 
对绘制物体的线条接合处进行设置，如图：

 
9、背景图片： 
在绘制图形里插入图片，还可以通过图片位置和尺寸进行其他设置，如图：


如果只想保留图片造型，可以通过把线条的颜色设置为空，如图：


10、预置动画： 
可以在属性面板上给物体添加预置动画，也可以用选择工具选中物体添加，如图：


11、组类型： 
物体成组后，可以对其进行裁剪内容的操作。如果物体有动画，则裁剪后会有类似遮罩动画的效果，但占用空间更小，推荐使用。


12、结束时复位： 
首先给物体添加“自由拖动”，然后再打开结束时复位开关，这样物体无论被拖动到什么位置，结束时都会恢复原位。

 
13、运动： 
属性面板中的运动类型，只有给物体添加了“关键帧动画”或“曲线变形动画”才会出现，而且鼠标要选中时间上的关键帧。


 

·想要了解更多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: 263360290）进行交流。

想要了解更多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功能？>>>猛戳我，学习更多教程​​
 
本节视频教程请点击此处。

当我们制作的动画有2页以上，就会用到属性栏的【翻页】，如图：

 
【翻页】中的设置有以下几种方式： 
1、 翻页效果： 平移、覆盖、出现、淡入、三维翻转、门轴翻转
 
2、 退出效果： 无、缩小、淡出、缩小淡出  
 
3、 翻页方向： 上下翻页、左右翻页  
 
4、 循环： 是、否  
 
5、 翻页时间： 默认600毫秒，可以自己设置
 
6、 翻页图标： 默认是箭头，支持直接从素材库上传；如果不想要翻页图标，可以在【翻页图标】处上传一个透明底的PNG

 
7、 多页动画如何设置无缝跳转： Mugeda是分页加载模式，如果做了多页动画，想让动画过渡的更自然，可以在【翻页效果】设置为出现。

·想要了解更多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中的裁剪工具裁剪成多个再保存，如图：

 
 

·​想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
本节视频教程请点击此处。 

转换为元件，具体操作步骤如下： 
在舞台上绘制一个物体，选中这个物体，单击右键【转换为元件】，如图：

 
双击进去才能对这个元件进行编辑，如图：

 
了解更多常用编辑操作：  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并
 

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
本节视频教程请点击此处。

 1、排列，具体操作步骤如下： 
只能作用于同一图层的不同物体  在
 
同一图层绘制三个方框，选中灰色物体单击右键，选择【排列】—【上移一层】，如图：

 
灰色图形就会把紫色图形盖住，如图：

 
2、对齐，具体操作步骤如下： 
对齐有左、右、上、下、左右居中（以左右的中心点对齐）、上下居中（以上下的中心点对齐）、均分宽度（间隔的宽度相同）、均分高度（间隔的高度相同）8种方式，如图：

 
3、变形，具体操作步骤如下：  
为左右翻转和上下翻转，如图：

 
4、组合，具体操作步骤如下： 
同一图层的不同物体，才可以进行此操作，操作后两个图形会变成一个图形，如图：

 
组合后双击可以对单个物体进行编辑，如图：

 
5、合并，具体操作步骤如下： 
这个是关于裁剪的一些功能，选中舞台上的两个物体，选择【合并】，如图：

 
两个图形会合并成一个图形，如图：

 
选择【用上层物体裁剪】，效果如图：

 
选择【用下层物体裁剪】，效果如图：

 
选择【相交】，效果如图：

 
了解更多常用编辑操作：  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—转换为元件
 

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
本节视频教程请点击此处。

 路径工具，具体操作步骤如下： 
给物体添加动画后，选中物体单击鼠标右键，选择【路径】—【自定义路径】，如图：

 
可以看到，此时的路径线是直线，即物体做直线运动，如图：

 
选中工具栏中的【节点工具】，可以对物体的运动线路进行自定义，如图：

 
再次选中物体单击鼠标右键，选择【路径】中【自定义路径】，可以看到路径线变成黑色，还原成直线运动，如图：

 
若想再次编辑，只需选中物体单击鼠标右键，选择【路径】—【自定义路径】，可以看到路径线变成紫色，如图：

 
显示和隐藏路径线，可以通过【切换路径显示】来操作，如图：

 
了解更多常用编辑操作：  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

·想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
本节视频教程请点击此处。

节点工具，具体操作步骤如下： 
这个工具，只作用于用Mugeda绘制的图形，对于导入的PNG、JPG不起作用，如图：


选择工具栏的【曲线工具】在舞台上绘制一条曲线，结束时敲击键盘“V”，结束绘制，并在属性面板上把填充色设置为空，如图：


选中图形，并选择节点工具，如图：



选中想编辑的节点，单击右键，可【添加节点】【删除选中节点】【重置选中节点】，如图：


选中节点，控制手柄就可以调整曲线，如图：


对于选中没有手柄的节点，可单击右键，选择【重置节点】就可以调用出手柄，如图：



添加节点快捷键，在选中节点工具状态下，Ctrl+单击鼠标左键 
删除节点快捷键，在选中节点工具状态下，Alt +单击鼠标左键
 

了解更多常用编辑操作：  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件