木疙瘩自带了一些模板，比如这个转盘抽奖的模板
 


 
 
但是这个转盘模板的中奖行为设置并不是真正的抽奖控件，而是使用随机数来模拟的中奖效果，如果你使用这个模板来抽奖，需要修改成真正的抽奖控件，下边的链接是对这个模板的分析和修改办法。
 
 木疙瘩转盘抽奖模板分析和修改办法
 
 
 
你可以在以下公众号回复“转盘抽奖模板”，得到视频中修改好的作品链接


 
 
 

 最新上线了一个新功能：动态数据。
 
你可以把它理解为一个特殊的数据库，数据库里的数据是你账号里的作品（特指发布链接）、图片、视频。这些数据可以显示在图文作品的固定区域，这个固定区域可以动态地更新内容。

举个例子，某些图文作品的固定区域需要时不时地新增、减少或者定期更新内容，如果是以前，用户会多次经历这样的步骤：编辑图文作品，保存，重新发布，编辑图文作品，保存，重新发布等等。

新闻网站里有个今日话题的栏目，网站运营者只用设置好这个区域叫做“今日话题”，里面显示7条数据，以后就只用在新闻库里一直更新新闻就好，今日话题栏目会自动从新闻库里获取最新的7条显示。动态数据功能跟这个效果是一致的。



当作品规划好动态更新区域后，用户不用编辑图文作品本身，也不用多次重新发布图文作品，只需要去编辑和更新动态数据库里的内容，图文作品的动态区域会自动从动态数据库获取内容并更新到图文作品的发布链接里。

 
要完成这个功能，需要三个步骤

1.账号设置动态数据源

2.图文作品设置动态更新区域

3.后期维护数据源
 
 


下面的例子，把账号里的作品（特指发布链接）作为数据源。
 


第一步：设置动态数据源

动态数据的入口在左边
 


 
 
新增文件夹，取名为“春节专用”




进入文件夹




点添加内容




可以从已发布的作品中选择几个作品添加到此文件夹里
 




第二步：图文作品设置动态更新区域

新建图文作品



在左侧菜单里，动态数据被分类到了“样式”里面。点加号，将此样式添加到舞台中，这样就添加好了动态数据区域



在舞台中，选中某个动态数据样式中间的任意元素，再点设置按钮。



数据来源选择第一步新建的“春节专用”，显示数量选5，意思是从“春节专用”这个数据库里选5条显示在这个区域。




保存一下，点预览，可以看到动态数据区域的这里显示了3条，而不是5条。因为数据源里只有3条信息。






到这时，可以保存并发布此图文了。再次提示，微信公众号不支持动态数据，所以即使推到微信草稿箱了，微信那边也不显示，建议使用发布作品。




第三步：编辑数据源，发布链接自动更新

回到动态数据菜单，编辑某个文件夹里面的内容，比如进入“春节专用”文件夹



可在这里拖动作品，改变排序，它在发布链接里的顺序也会改变，新增或减少作品数量，发布链接里显示的作品数量也会新增或减少。

这边已经添加了7个作品
 




打开第二步最后生成的发布链接，发现已经有显示5条信息了。因为第二步设置动态区域时规定了这里显示数量为5个。
 






至此就完成了作品（发布链接）作为动态数据，显示到图文的发布链接里，并维护和更新数据的作品。


图片和视频作为动态数据，显示到图文作品发布链接里的方法跟上述的类似，你可以自己试一下。



微信公众号文章群发以后不能动态显示部分内容。而动态数据功能会在图文内容的部分区域动态更新，所以有这个功能的图文作品推送到微信那边后，会被微信去掉这部分的功能，导致不能正常使用。

所以，动态数据功能目前暂时只支持图文编辑器，发布作品得到发布链接来使用，而不支持推送到公众号。如果需要在公众号访问这个作品的发布链接，可以把生成好的发布链接添加到微信的原文链接或者把发布链接的二维码图片放到微信公众号文章里当图片。

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
木疙瘩可以方便的插入一个视频，并控制视频的播放、暂停、停止等。
现在，木疙瘩可以更自由的控制视频播放，可以跳转到视频的某个时间点并播放哦！

下面来看具体操作方法吧！
 
第一步给放置在舞台的视频命名


 
第二步设置视频的跳转行为：1.打开行为弹窗——2.媒体播放控制——3.控制视频——4.编辑行为——5.选择视频——设置控制方式为：跳转并播放或跳转并暂停——设置跳转位置（时间单位为秒）——6.确定。这样我们就设置完成了。


 
音频的跳转同理，如下图


 
学会了吗？这功能是不是很实用？赶快尝试吧！

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
 
木疙瘩的虚拟现实VR功能大家都用过，添加一张全景图片即可实现VR全景效果。
现在，木疙瘩对全景视频开放支持了！
这都得利于广大木友的热情投票参与，感谢木友们积极提出宝贵的新功能建议，让木疙瘩不断地加入用户最需要的新功能，笔芯～
 
下面来看在虚拟现实控件中，如何使用并控制全景视频吧！

第一步：在工具栏选择全景组件并添加至舞台



第二步：添加视频长宽尺寸比例符合2:1或6:1的全景视频



系统提示：全景视频场景，由于不同的浏览器策略不同，在用户和内容交互之前，不同浏览器的策略可能不允许视频自动播放。因此，如果你想要视频自动播放，需要在播放视频之前，在内容流程中引导用户进行“点击”等操作后在播放全景视频。
 

 
第三步：引导用户进行“点击”等操作我们可以在全景视频页面的前面一页增加一个引导页，通过用户点击跳转至全景页面


 
注：上面只是一个例子，你也可以通过增加添加其他帧或页面的交互行为来引导用户跳转至全景视频的播放。
 
第四步：添加完成，我们可以像设置全景图片一样给全景视频设置一些交互热点及其他配置


 
马上去试试吧！
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址： http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,，一个按钮用来改变对应图形的填充色，另一个按钮用来改变对应图形的边框颜色。



然后分别给被改变填充色和边框颜色的两个图形分别命名。





然后分别给下面的两个按钮绑定上行为。







然后在作品里点击这个按钮，对应元素的填充色就会变为行为里所选择的颜色。




改变元素边框颜色的行为操作与之类似，选择另一个按钮,，然后点击改变元素属性，点击编辑。

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

为了方便设计师更好的编辑内容，防止内容在设备上超出可见显示范围（安全框），木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角，可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。



选择后，物体上会出现一个方框指示指定设备的可见范围（安全框）。如果舞台上添加的内容超出了指定设备的安全框，方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框，方框会显示为绿色。


 

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
通常我们在制作作品时，涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图，我们点击计数器工具在舞台上添加一个计数器，设置默认值和计数值。



我们先在舞台上添加相关按钮素材。如图，添加两个文本框分别命名为“显示计数”“获取计数”



为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件：点击→设置参数 
计数器名称：“计数器1” 
显示计数元素：“显示计数”





同理，为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框，点击“管理实时数据”，可以修改当前数据。


 

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

编辑地址：http://prerelease.mugeda.com/a ... 15485
预览地址：http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线，关键帧动画增加了“自定义运动曲线”的功能。



选择“自定义运动曲线”后，可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例，打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线，即可在右侧显示出运动曲线并可进行编辑。



第一次打开时，默认曲线是线性，并且显示为半透明，表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型，这时候，曲线会显示为实线。运动曲线的横坐标代表时间，纵坐标代表运动进度（即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示，左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%，右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑，实现不同运动特征的运动。



添加了运动曲线后，左侧对应的的属性列表会显示一个关闭按钮，表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性（例如宽度、透明度、滤镜等），都可以定义自己独立的运动曲线。如果没有指定，对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线，则会采用线性运动曲线。

如果关键帧动画包含有多个关键帧动画，运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中，显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段，可以切换曲线上方“显示所有关键帧”选项。



运动曲线编辑目前支持关键帧动画和变形动画，并支持如下参数的动画曲线定制：

x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜（阴影、模糊、灰度、亮度、对比度、色调等）
变形动画参数（字体大小、字间距、行间距、填充颜色、线条颜色等）

下面是2个常见的运动曲线的例子：

自由落体：自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图：



缓动进度：这是一种常见的进度显示方式，即一个减速移动，连接一个匀速缓动，再连接一个加速移动。其运动曲线类似下图：



上述提供的演示地址包含了这两种运动的实现方法和效果。

在连接多段运动曲线时需要注意，由于控制自由度的限制，有时候为了实现平滑的多段运动，需要调整关键帧的位置或者每一段运动的位移数值，以便对运动速度进行微调，实现想要达到的运动效果。

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

编辑地址（第4页）：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增对文本的支持。即：可以为文本添加变形动画， 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有：

字体颜色
字体大小
行间距
字间距
滤镜效果

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 设计师可以通过实时数据管理的功能，用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32

以投票为例：
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为，当用户发生投票行为时，被投票目标的票数会在当前基础上+1,，假如现在有北京，上海两个投票对象，假如北京目前所得票数为100，现在我们想把北京所得的票数改为50，通过实时数据管理即可轻松修改。



首先点击管理实时数据，会弹出如下对话框。



我们现在想要把北京改为50票，只需要把北京后面的输入框内的数值改为50，点击确定即可。



保存以后，打开作品，会发现北京的票数由原先票数改变成了50票。



同样的,通过抽奖组件的实时数据管理，可以去修改奖品的剩余数量以及领奖码的剩余数量。


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 动画导出器在动画导出的时候做一层检测，当用了首页作为加载的时候，符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后，当用户打开动画，可以在第一时间看到首页，减少了以前黑屏的时间。

目前符合条件的动画特征：

组件只包含文字、图片、形状、元件、组

填充效果只支持纯色填充、图片背景填充

动画支持关键帧、形状、变形的线性变换

支持组件的2d定位

所有使用的图片的总面积不大于某个阈值

支持新的预定义文字——加载进度，取值0到100

文字组件支持非云字体

屏幕适配支持默认

不含有交互特性（如行为、预置动画）

动画在导出或者发布的时候，如果上述条件满足，则自动将首页作为加载做静态导出。可以观察到的特征是：
导出：在导出包里出现了新的文件msl.js。
发布：查看msl.js链接的存在性。例如：发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html，查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 编辑地址：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜：

灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert

为了给元素添加滤镜，选中元素后，在属性面板选择想要添加的滤镜效果，然后点击“+”图标即可将指定的滤镜效果添加到元素上。



根据需要，可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如，模糊滤镜可以调节模糊程度。其中，阴影滤镜包含有多个参数，可以将鼠标移动到阴影效果上显示参数并编辑。



如果不想要使用一个已经添加的滤镜效果，可以通过对应的滤镜效果右侧的删除按钮移除。



滤镜效果也支持动画。即：在关键帧上添加的滤镜效果，可以在关键帧动画时进行插值，实现滤镜效果的动画渲染。在动画插值过程中，如果某个关键帧上没有添加指定的滤镜，那么将会采用默认滤镜效果参数进行插值。例如：

如果第1个关键帧添加了100%的灰度，而第2个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认灰度(0%)进行插值；

如果第2个关键帧添加了8像素的模糊，而第1个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认模糊(0像素，即没有模糊）进行插值；

其它的以此类推。

目前滤镜效果的局限是，由于安卓和iOS手机上仅支持CSS滤镜，不支持Canvas滤镜，
因此手机上需要用Canvas进行渲染的部分（例如遮罩和截屏）暂时不支持滤镜，这一
点在使用中需要注意。

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似，开启辅助线后，设计师在拖拽物体至辅助线时，物体会自动停靠至辅助线位置,，辅助线仅仅在ide内可以看到,，渲染后的作品看不到辅助线。



具体使用方法
1、绘制一条辅助线
按住alt键不要松开，然后在舞台上拖拽鼠标左键至某个方向(上下左右)，即可绘制出一条辅助线。



当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.

2、隐藏\显示辅助线及删除辅助线的几种方法

拖拽辅助线的时候,，和pshotoshop一样，将辅助线拖拽至舞台之外即可删除辅助线。





也可以通过视图菜单中的删除所有辅助线进行删除。





点击工具栏中的辅助线工具，即可快速显示\隐藏所有辅助线，也可以通过视图菜单中的辅助线选项，来进行显示隐藏。
 

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

 下面我们介绍用Mugeda导出GIF动画的方法：

1.序列帧动画导出GIF动画

如图，以序列帧形式添加几张图片至舞台，使其形成一个整体的动画效果
导出GIF动画步骤：文件→导出→GIF动画注意：所有导出只支持导出第1页



可修改舞台大小改变导出的GIF动画大小



2.关键帧动画导出GIF动画

同时，我们也可以在第1页制作一个关键帧动画，点击文件→导出→GIF动画，同样可以导出GIF动画



3.元件动画导出GIF动画

我们制作一个车轮360度旋转的元件动画



将该元件放置舞台第1页（对齐小汽车元素合适的位置），同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果



点击：文件→导出→GIF动画，同样可以导出GIF动画
注意：舞台帧数大于等于元件内帧数



4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画，元件内的曲线变形动画则不可以导出



5.进度动画导出GIF动画

如图，我们将需导出的进度动画移至第1页，点击：文件→导出→GIF动画，导出GIF动画



以上列举了一些支持导出GIF动画的几种形式，如下图，是一些不支持导出GIF动画的形式


 

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前，我们首先需熟悉陀螺仪旋转轴的原理，如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。



上传视频素材
注意：为防止视频在不同手机的不兼容性，我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面


 
在舞台上添加一个陀螺仪，选择旋转类型，如下图为“绕Y轴旋转角”，同时将其命名为“Y”



设置关联属性

选择视频素材，点击其“左”属性右边的“关联”按钮，设置关联属性：
参考物体：“Y” 
参考属性：“文本取值” 
关联方式：“控制点插值”
 主控量：“-40” 
被控量：“0” 
主控量：“40” 
被控量：“-1198” 
（注意：具体数值可提前在手机上观察得出）


 
同时添加另外一个陀螺仪，设置其类型为“绕X轴旋转角”，为其命名为“X”。



选择视频素材，点击其“上”属性右边的“关联”按钮，
 
设置关联属性：
参考物体：“X” 
参考属性：“文本取值” 
关联方式：“控制点插值”
主控量：“20” 
被控量：“0” 
主控量：“80”
被控量：“-173”


 

 要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
设置首页
如下图，点击“导入Photoshopshop(PSD)素材”按钮，将PSD格式内的图片素材原位置“分层导入”编辑页面



可为每个素材添加预置动画效果



将“点击”图标右键转换为元件，双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。



设置长图元件动画

新建图层，在第3帧插入帧，插入关键帧，同时添加进长图背景素材



将背景图片右键转换为元件，进入元件页面。
新建图层，分层导入其他图片素材。



为所有素材图层插入关键帧动画，分别设置素材的动画效果，例如给人物素材设置放大缩小动画，为“向左滑动”图标设置向左滑动动画效果。



回到舞台，补全所有图层的帧数，为长图元件添加预置动画，如图为“向右移入”



如下图，为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”，添加矩形，为其添加一个“出现即暂停”的行为。注意随时保存作品。



选中长图元件，在其属性栏内设置“拖动/旋转”为“水平拖动”



设置点击出现提示效果
新建图层“提示层”，在第4帧插入空白关键帧，同时导入原先预备好的提示素材。可为其添加预置动画效果等。



新建两个按钮层，分别在一个图层的第3帧放置“分享”按钮，在另一个图层第4帧提示页面放置一个“返回”按钮。



补全“行为层”及其他图层帧数，为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为



为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画，同理可为接下来的人物素材设置提示出现消失的动画。



设置分享动画的提示：如下图，新建“分享”图层，添加分享提示的素材，命名为“分享”，将其移至舞台之外。



为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件：点击。 设置“参数” 元素名称：“分享” 元素属性：“左” 赋值方式：“用设置的值替换现有值” 取值：“0”





同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为，即点击将其移至舞台之外。


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​1. 制作科技感走线动画（进度动画）

如图，我们可以选择曲线工具、节点工具在舞台上画一个折线，同时可以调节折线的颜色等属性



然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画



我们新建5个图层，分别在每个图层上绘制一条直线



为第一条直线的某个时间段插入进度动画：右键→插入进度动画→（在特定帧数上）右键→插入关键帧




同理分别为其他几条线插入进度动画，制作出直线一条条绘制出来的炫酷效果



也可新建图层，在合适的位置添加相关图片素材等



2. 制作酷炫logo动画（进度动画）

同理，我们也可以用进度动画制作相关logo的绘制效果。
如下图，我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形



为其添加进度动画



3. 制作酷炫酒瓶走光动画（遮罩动画）

我们先用曲线工具绘制一个酒瓶形状，同时新建图层2，将酒瓶复制粘贴进图层2




选中图层2，将其物体的填充色去掉，只剩下边框



在图层2下面新建图层3，添加一个矩形，在其属性栏的填充颜色内选择“线性”，制作白色光亮效果



为所有图层添加帧，为图层3的光亮物体制作一个从上往下移动的动画效果



选中图层2，将其转换为“遮罩层”



我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 1.制作元件动画

如图，添加一张图片素材，调整舞台大小使其符合素材大小，同时右键将图片素材转换为元件，双击元件进入元件编辑页面



如图，在元件第20帧插入帧，插入关键帧动画。
选中变形工具，按住Ctrl键将中间的控制原点移至舞台右侧中间位置



分别选中第一帧、最后一帧，改变其“Y轴旋转”为“-90”“90”





可点击“预览”观察元件动画的效果

同时我们在帧数的中间位置（图片正居舞台）插入关键帧，调整“透视度”为“50”



如下图，我们新建多个图层，复制图层0上的所有帧，分别粘贴进每一个图层内



如下图，在图层8上，删除除第一帧之外的前半部分帧数，同时修改第一帧的“Y轴旋转”为“0”





同理，分别删除图层7、6、5、4前半部分的一些帧如下图，分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”



移动图层2、1、0上的关键帧如下图位置，即在前面分别插入2、4、6帧



新建图层9，在与图层0第一帧相同帧数上插入一个矩形，调整颜色如下图，制作一个光韵矩形。



如下图为光韵矩形也设置相同的翻页动画，调整其第一帧关键帧的“Y轴旋转”为“-90”，调整其最后一帧关键帧的“Y轴旋转”为“0”，同时在最后插入一个空白帧。



如下图，隔图层复制光韵图层及帧。



之后，可双击元件每个图层的物体，分别进入各自的组，添加相对应的素材。
即做好一个元件动画。



2.制作“左右滑动预览”动画

回到舞台，新建一个图层，添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”



改变文本框数值为“10”。点击其“添加/编辑行为”按钮，添加两个行为：

属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：加
设置状态：暂停记时器





属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：减
设置状态：暂停记时器



为“加”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：0.01





同理，为“减”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：-0.01



设置元件的动画关联如下图：
关联对象：关联取值
关联属性：文本取值
开始值：10
结束值：0
播放模式：同步



为元件添加六个行为，分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”



为文本框添加两个控制定时器的行为：

属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：减
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：小于等于
参考值：0





属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：加
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：大于
参考值：10


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图



在图层2添加第二张图，将第二张图放大，使其放置第一张图的画面大小符合舞台（即与图层1第一张图大小画面重合）



如下图为两个图层第50帧位置上插入帧，在图层1上第二帧插入一个空白帧使其只出现在第一帧上，为图层2插入关键帧动画，在最后一帧关键帧上调整第二张图片的大小使其符合舞台



如图我们新建图层3，在最后一帧插入空白帧，添加进第三张图片，调整图片大小使其放置第二张图的位置大小符合舞台（即与图层2最后一帧图片大小画面重合）



同理我们在三个图层第100帧位置上插入帧，为图层2、3插入关键帧动画，分别在其最后一帧关键帧上缩小图片，使第三张图的大小符合舞台



同理新建图层4添加第四张图片，制作动画效果，此处不详述。



2.制作“长按按钮播放动画”效果

如图，新建图层，添加一个按钮元素



新建“行为层”添加一个矩形，设置矩形“出现即暂停”行为，同时在该图层第二帧添加一个空白帧，使该行为只使用在第一帧



为按钮素材添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。
 
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形，设置“出现即暂停”的行为



选择最上图层,在舞台需手指按住的位置上添加一个矩形，设置其透明度为“0”



随后为该透明矩形添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。



2.控制元件动画
首先，我们可在舞台上添加一个元件动画，如下图，为其命名为“麦穗”



回到舞台，继续为控制矩形添加两个行为，即“手指抬起即暂停”“手指按下即播放”



分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”



3.控制提示元素
如下图，在舞台上添加一个“要一直按住才会播放哦”的提示语，为其命名为“提示”



为控制矩形再添加两个行为：
1.属性控制→“改变元素属性”→触发条件：手指按下→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“0”





2.属性控制→“改变元素属性”→触发条件：手指抬起→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“100”



这样，一个“长按手指控制动画播放”的效果已做好。

声音增加了如下功能： 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联（控制）元素属性 
4) 用元素属性关联（控制）声音播放位置
 
示例：http://beta.mugeda.com/client/ ... 5826a 
编辑链接：http://beta.mugeda.com/animation/edit/a675826a
 
在“控制声音”的行为中增加了对音量和播放位置的控制。这两个控制和“控制方式”参数独立，并不依赖于声音播放状态。例如，如果声音目前没有播放，并且设置了播放位置为第2秒，那么声音将会在下一次播放的时候从第2秒开始播放。

 
选中声音对象，可以对其进行播放位置的关联，其关联方式类似于对动画播放进行关联控制。

 
也可以将某个元素的属性和声音播放的进度关联在一起，这样，声音播放进度（取值为0～100）将可以用来控制元素的属性。

 

 

连线组件用来在一些特定场合（例如教育类测试课件）的内容中允许用户用连线来连接两个元素，从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址： http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址： http://beta.mugeda.com/animation/edit/c36da7fa
 
1、首先在工具栏选择连线组件。

在舞台上绘制连线组件，和绘制直线是一样的。区别是： 
*连线元素绘制后，具有自身的一些特殊属性（下面会提到）； 
*绘制在舞台上的连线，只是代表了连线时的初始位置，用于给用户提示；
 
2、绘制好后，可以对其进行属性配置。

 
各个属性说明如下： 
1) 显示端点提示：是否在连线的端点提供一个脉动的圆形动画提示用户连线； 
2) 提示颜色：端点提示的颜色； 
3) 允许多线链接：打开之后连线允许同时停留在多个停靠位置 
4) 停靠位置：希望连线连接成功的命名元素的列表。连线只能和列表里面的元素连接成功；
 
在渲染的时候，可以用鼠标(PC)或者手指(手机)按住某一个连线的任意位置拖动连线。当连线的端点靠近了一个设置好的停靠位置时，连线会自动吸附到该停靠位置。这时候如果松开鼠标或者手指，就可以连线成功。连线成功成功后，可以继续拖动连线进行修改。如果一个连线预先设置了多个连线停靠位置，前一个连线成功后，后一个连线会出现在初始位置，提示用户还可以继续连线。直到所有连线都成功为止。

 
3、连线的结果可以通过下面的方式来获取（假如连线元素的名称是"连线") 
{{连线}}: 连接成功的第一个命名元素的名称 
{{连线.0}}, {{连线.1}}, {{连线.2}}: 连接成功的第0,1,2个命名元素的名称 
如果连线没有成功，上面的表达式返回空字符串("")。
 
为了支持自动化处理，行为触发条件中增加了“连线完成”。该选项仅对连线元素有效。下图示范了如何利用该条件进行行为处理。

 
连线上的行为新增了一个判断条件’停靠物体名称’。如下图所示，这样的设置，让这个行为只是当连线连到’红色2’的这个物体上才会触发。如果停靠物体名称不选择任何物体，那么停靠到所有的停靠物体上面都有效。

 
 

演示地址:http://beta.mugeda.com/client/ ... 91ea1 
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
 
抽奖组件具体使用方法：
1、首先在工具栏中选中抽奖组件.


2、然后会弹出抽奖组件的配置.

开始时间和结束时间：是指抽奖发生时,如果抽奖在时间范围内则可以抽奖，否则不可以抽奖. 
允许重复抽奖次数：限制用户抽奖的次数,如果超过设置的值则不可以抽奖 
再次抽奖等待时间：限制用户多次抽奖时间间隔,单位为(秒),用户的多次抽奖时间间隔不能超过这个设置 
抽奖模式：即抽即中、均匀分布 
安全验证：如果开启了安全验证, 用户在抽奖的时候需要输入验证码,验证码输入正确才给抽奖
奖项设置：一行一个奖项,格式为: [奖品名次:奖品名称:奖品数量] ，例 
1:一等奖:10 
2:二等奖:100 
3:三等奖:1000
领奖码(非必填)：一行一个领奖码,格式为:[奖品名次:领奖码:奖品数量] ，例:
1:lingjiangma1:10 
2:lingjiangma2:100 
3:lingjiangma3:1000
奖品的名次对应奖项设置中的奖品名次,领奖码可以设置为任意不重复的值,如果配置了领奖码这个选项,当中奖的时候,中奖信息中会携带所对应的领奖码,比如抽奖时中了一等奖,那么对应的领奖码就是 lingjian
 
3、以上配置完成后,点击确认按钮即可生成一个完整的抽奖组件.  
 
4、设置4个文本框用来显示抽奖的结果,设计师可根据文本框内的内容来进行判断,然后进行样式的设计.

设置完以后分别给文本框进行命名，用来绑定抽奖组件.
 
5、绘制一个物体，用来充当抽奖按钮


6、选中绘制出的物体，给物体增加抽奖行为


然后编辑抽奖行为

抽奖组件选择刚刚的生成的抽奖组件
 
显示抽奖结果类别：抽奖的结果会显示在指定的文本框内, 如果抽奖结果为-1代表没有中奖，如果是0那么他就中了一等奖,如果是1那么就是二等奖,以此类推,设计师可根据返回的数字进行判断来决定样式 
显示抽奖结果文本：假如中了一等奖,一等奖对应的名称是小米手机，那么对应的文本框内就会显示小米手机
显示抽奖凭据：如果设置了领奖码，假如一等奖对应的领奖码是 yidengjiang1 那么这个领奖码就会显示在对应文本框内
显示剩余抽奖次数：会在对应文本框内显示用户还有几次抽奖机会
绑定表单提交：如果页面上有物体绑定了提交表单行为，如果配置了这个选项，用户在提交表单的时候，会偷偷的把抽奖结果信息绑定到表单上作为附加信息提交.

用户使用木疙程序制作投票、抽奖等数据组件时，木疙瘩不承担由于黑客或设置出错导致的经济损失.
 

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

 1. 添加一个投票组件：

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

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

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

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

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

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

 

想要了解更多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个图层的全部内容全部都粘贴过来了，如图：

 

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

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


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

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

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

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

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

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