问题答疑

问题答疑

提出您在创作作品时遇到的问题和疑惑
BUG反馈

BUG反馈

反馈您在使用Mugeda时遇到的BUG
原创分享

原创分享

分享您的原创作品,创作经验,操作技巧
新功能需求

新功能需求

写下您期待Mugeda增加的新功能
Mugeda培训

Mugeda培训

加入我们的培训,提高您的技巧

3.3.1 游戏测试:手速测试

mingyueliu 发表了文章 • 0 个评论 • 197 次浏览 • 2016-10-10 17:01 • 来自相关话题

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

添加素材:

新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图,输入文本框内容 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

添加素材:

新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图,输入文本框内容为“0”

3.3-1_.png


图3.3-1
为各个素材命名:
命名文本框素材为“分数”
命名宇航员图片素材为“宇航员”

3.3-2_.png


图3.3-2

3.3-3_.png


图3.3-3

如下图,新建“控制”图层,添加一个定时器,将其移至“舞台”之外,在定时器“属性”面板内设置相关属性:
精度:“毫秒”
记时方向:“倒计时”
是否循环:“循环”
不可见时:“暂停记时器”
长度:“3”秒

3.3-4_.png


图3.3-4
命名定时器为“up”

3.3-5_.png


图3.3-5
移动宇航员图片至“舞台”上方,在其“属性”面板下点击“上”属性右边的“关联”按钮,在下拉关联属性菜单下设置
关联对象:“up”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“3”时被控量=“-200”(宇航员在“舞台”上方的位置)
当主控量=“0”时被控量=“541”(宇航员在“舞台”下方的位置)

3.3-6_.png


图3.3-6
点击“预览”观察效果

3.3-7_.png


图3.3-7
点击“随机数”按钮,在“舞台”上添加一个随机数,为其命名为“角度”

3.3-8_.png


图3.3-8
调整随机数的最大值、最小值分别为“-90”“90”,更新间隔为“3”秒

3.3-9_.png


图3.3-9
选中“宇航员”,在其“属性”面板下点击“Z轴旋转”属性右边的“关联”按钮,在下拉关联属性菜单下设置
关联对象:“角度”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了“宇航员”每次的Z轴旋转角度与随机数的文本取值相等

3.3-10_.png


图3.3-10
选中文本框,在其“属性”面板下点击字体内容右边的“关联”按钮,在下拉的关联属性菜单栏内设置
关联对象:“宇航员”
关联属性:“上”
关联方式:“自动关联”
当主控量=“75”时被控量=“0” 
当主控量=“175.7”(宇航员在圆圈正中心位置)时被控量=“100” 
当主控量=“275”时被控量=“0”,设置分数与“宇航员”位置相关 

3.3-11_.png


图3.3-11
点击“预览”观察效果

3.3-12_.png


图3.3-12
可点击“保存”

3.3-13_.png


图3.3-13
选中所有图层的第2帧,右键→“插入帧”

3.3-14_.png


图3.3-14
点击“控制”图层的第2帧,右键→“插入关键帧”

3.3-15_.png


图3.3-15
选中第2帧上的两个控制元素,右键→“删除物体”

3.3-16_.png


图3.3-16
点击拍照图片按钮右边的“添加/编辑行为”按钮

3.3-17_.png


图3.3-17
在“编辑行为”对话框中添加“跳转下一帧”以及“暂停”两个行为
“跳转下一帧”行为:“动画播放控制”→“下一帧”→触发条件:“点击”
“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”

3.3-18_.png


图3.3-18
选中“按钮”图层第2帧,右键→“插入关键帧”

3.3-19_.png


图3.3-19
删除“按钮”图层第2帧上的拍照按钮图片素材

3.3-20_.png


图3.3-20
同时,在“按钮”图层第2帧上点击添加一个文本框素材,输入文字内容“再来一次”,调整文本框大小、位置、字体、颜色等属性

3.3-21_.png


图3.3-21
点击“再来一次”文本框“添加/编辑行为”按钮,进入“编辑行为”对话框,选择“动画播放控制”→“上一帧”→触发条件:“点击”

3.3-22_.png


图3.3-22
同理,添加“改变元素属性”编辑行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮

3.3-23_.png


图3.3-23
设置“参数”为
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”

3.3-24_.png


图3.3-24
点击“预览”观察效果

3.3-25_.png


图3.3-25

3.2 UI原型:图标动效

mingyueliu 发表了文章 • 0 个评论 • 236 次浏览 • 2016-10-10 16:31 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例抢先预览
 
本节视频教程请点击此处。






添加素材:如下图,在“舞台”的“属性”面板下将其填充色调整为浅蓝色,点击“素材库”按钮添加相应的火箭图片素材,调整火箭大小、位置等。

查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例抢先预览
 
本节视频教程请点击此处。

小图标动画.png


添加素材:如下图,在“舞台”的“属性”面板下将其填充色调整为浅蓝色,点击“素材库”按钮添加相应的火箭图片素材,调整火箭大小、位置等。

3.2-1_.png


图3.2-1
添加动画:在图层第10帧的位置右键→“插入帧”

3.2-2_.png


图3.2-2
右键→“插入关键帧动画”

3.2-3_.png


图3.2-3
选中第1帧,在“舞台”上将火箭垂直拖动至“舞台”底端

3.2-4_.png


图3.2-4
按照Ctrl键将火箭等比例缩小

3.2-5_.png


图3.2-5
制作路径:选中“舞台”上的火箭,右键→“路径”→“自定义路径”

3.2-6_.png


图3.2-6
使用“节点”工具调整火箭路径的弧度

3.2-7_.png


图3.2-7
在第1帧的位置上,选中“变形”工具,调整火箭的角度,使火箭头对准路径起始的方向

3.2-8_.png


图3.2-8
同理,选中最后一帧,使用“变形”工具调整火箭的角度使其符合路径的方向

3.2-9_.png


图3.2-9
选中第1帧,在其“属性”面板下调整“运动”效果为“阻尼退出”

3.2-10_.png


图3.2-10
如下图,将“图层0”重命名为“火箭”,新建图层“圆”

3.2-11_.png


图3.2-11
在“圆”图层上添加一个圆形使其覆盖住火箭,鼠标选中“圆”图层不放将其拖动至“火箭”图层下方,调整图层之间的覆盖位置。

3.2-12_.png


图3.2-12
调整“舞台”上的圆形的填充色、线条色如下图

3.2-13_.png


图3.2-13
选中“火箭”图层最后一帧,鼠标调整“舞台”上火箭的位置至圆形中央位置

3.2-14_.png


图3.2-14
选中“圆”图层第10帧,右键→“插入关键帧”

3.2-15_.png


图3.2-15
选中“圆”图层10帧之前的任意一帧,在“舞台”上选中圆形,右键→“删除物体”

3.2-16_.png


图3.2-16
选中所有图层20帧,右键→“插入帧”

3.2-17_.png


图3.2-17
选中“圆”图层10帧之后的任意一帧,右键→“插入关键帧动画”

3.2-18_.png


图3.2-18
选中“圆”图层第一个关键帧(即第10帧),使用“变形”工具按照Ctrl键将“舞台”上的圆形等比例缩小

3.2-19_.png


图3.2-19
鼠标按照“圆”图层最后一帧不放,将其向前拖动至16帧,缩小圆形动画的运动时间

3.2-20_.png


图3.2-20
选中“圆”图层第8、9两帧,右键→“删除帧(可多选)”,即将“圆”图层第一个关键帧移至第8帧

3.2-21_.png


图3.2-21
选中“圆”图层第20帧,右键→“插入帧”,将后面两个空缺帧补齐

3.2-22_.png


图3.2-22
选中“圆”图层第一个关键帧(即第8帧),在圆形元素“属性”面板下调整“运动”效果为“阻尼退出”

3.2-23_.png


图3.2-23
选中“圆”图层动画定格帧(第14帧),点击“舞台”的圆形,右键→“复制”

3.2-24_.png


图3.2-24
新建图层“边框”,在第14帧右键→“插入关键帧”。

3.2-25_.png


图3.2-25
选中第14帧关键帧位置,按Ctrl+Shift+V,将原先复制的圆形原位粘贴进“舞台”

3.2-26_.png


图3.2-26
选中“边框”图层上的圆形,右键→“组”→“取消组合”

3.2-27_.png


图3.2-27
修改圆形的填充色为透明色,调节线条颜色为浅蓝,大小为“5”

3.2-28_.png


图3.2-28
选中“边框”图层14帧以后的任意一帧,右键→“插入进度动画”

3.2-29_.png


图3.2-29
制作光线效果:新建图层“光1”,在第9帧右键→“插入关键帧”

3.2-30_.png


图3.2-30
在该关键帧上添加线条,调整位置、大小、颜色如下图

3.2-31_.png


图3.2-31
同理,新建“光2”“光3”“光4”,分别在第9帧插入关键帧,并在“舞台”上添加相应的线条,制作出发散的光线效果。

3.2-32_.png


图3.2-32
制作光线动画效果:同时选中“光1”至“光4”四个图层第9帧之后的任意一帧,右键→“插入曲线变形动画”

3.2-33_.png


图3.2-33
在“光4”图层的最后一帧,选择“节点”工具,将“舞台”上的该线条拉动缩小长度,并稍调整位置

3.2-34_.png


图3.2-34
同理,缩小其他三个图层在最后一帧位置上的线条长度

3.2-35_.png


图3.2-35
在9帧之后选中“光1”至“光4”四个图层的某些帧,右键→“删除帧(可多选)”

3.2-36_.png


图3.2-36
调节“光1”至“光4”每个图层第一个关键帧的“运动”效果为“淡出”

3.2-37_.png


图3.2-37
新建“云”图层,添加云的图片素材,使用“变形”工具调整云的大小、位置

3.2-38_.png


图3.2-38
在“云”图层的第13帧,右键→“插入关键帧”

3.2-39_.png


图3.2-39
选中13帧之前的任意一帧,点击“舞台”上的云素材,右键→“删除物体”

3.2-40_.png


图3.2-40
选中“云”图层13帧之后的任意一帧,右键→“插入关键帧动画”

3.2-41_.png


图3.2-41
在“云”图层第13帧,鼠标垂直向下拖动“舞台”上的云素材,使其位置向下移动一点。同时,在“属性”面板下调节“运动”效果为“阻尼退出”



3.2-42_.png


图3.2-42
鼠标选中“云”图层将其拖动至“边框”图层下方

3.2-43_.png


图3.2-43
新建图层“遮罩”,在“遮罩”图层13帧右键→“插入关键帧”

3.2-44_.png


图3.2-44
复制“圆”图层上的圆形,按Ctrl+Shift+V原位粘贴到“遮罩”图层第13帧

3.2-45_.png


图3.2-45
选择“遮罩”图层,点击“转为遮罩层”按钮

3.2-46_.png


图3.2-46

3.2-47_.png


图3.2-47
如下图,在“云”图层下方新建“星星”图层,自动转为“遮罩”图层下的被遮图层,选中“星星”图层第20帧,右键→“插入关键帧”


3.2-48_.png


图3.2-48
在该关键帧上添加星星图片素材

3.2-49_.png


图3.2-49
选中“遮罩”图层,点击“转为遮罩层”按钮,将“遮罩”图层的“遮罩”功能暂时取消

3.2-50_.png


图3.2-50
如下图,选中“火箭”至“圆”图层的第30帧,右键→“插入帧”

3.2-51_.png


图3.2-51
选中“星星”图层第一个关键帧之后的任意一帧,右键→“插入关键帧动画”

3.2-52_.png


图3.2-52
为方便观察,将“遮罩”图层上的圆形修改填充颜色,并点击图层上眼睛状按钮,隐藏该图层

3.2-53_.png


图3.2-53
选中“星星”图层起始帧(即第20帧),鼠标将“舞台”上的星星素材向上拖动一些位置,并在“属性”面板下将“运动”效果选择为“淡出”

3.2-54_.png


图3.2-54
点击“遮罩”图层眼睛状按钮,将其转换为可见

3.2-55_.png


图3.2-55
选中“遮罩”图层,点击“转为遮罩层”按钮

3.2-56_.png


图3.2-56
选中“星星”图层,点击“添加到遮罩”按钮,将“星星”图层添加进“遮罩”图层的遮罩范围内

3.2-57_.png


图3.2-57
新建“文字”图层,在25帧右键→“插入关键帧”

3.2-58_.png


图3.2-58
在“舞台”上添加一个文本框,输入文字内容,调整大小、字体、颜色等属性

3.2-59_.png


图3.2-59
在“文字”图层第一个关键帧之后的任意一帧右键→“插入进度动画”,使文字出现打字机进入的效果

3.2-60_.png


图3.2-60
新建“音乐”图层,点击“素材库”选择添加所需的音频素材,点击“添加”

3.2-61_.png


图3.2-61
将音频图标移至“舞台”之外,在音频元素的“属性”面板下选择“自动播放”为“是”

3.2-62_.png


图3.2-62
鼠标选中“声音”图层第1帧,按住不放将其拖至第2帧

3.2-63_.png


图3.2-63
最后,分别选中“光1”至“光4”四个图层的最后一帧,分别在“舞台”上调整光线线条位置、大小,优化光线扩散的动画效果。

3.2-64_.png


图3.2-64

3.1.5 展示动画:公司广告

mingyueliu 发表了文章 • 0 个评论 • 265 次浏览 • 2016-10-10 15:22 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览

本节视频教程请点击此处。






1.添加序列图片制作元件

如图,在“元件”面板下点击新建一个元件,命名为“打开盒子”
 




图3.1-239

点击“素材库”按钮, 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览

本节视频教程请点击此处。

酷炫手机.png


1.添加序列图片制作元件

如图,在“元件”面板下点击新建一个元件,命名为“打开盒子”
 
3.1-239_.png

图3.1-239

点击“素材库”按钮,在“媒体库”对话框中按住Ctrl键选择多张所需要的序列图片,勾选右下角的“以序列帧形式添加”,点击“添加”
 
3.1-240_.png


图3.1-240

我们发现,图片会以每张添加进每一帧的形式添加进“舞台”,可点击“播放”按钮播放动画
 
3.1-241_.png


图3.1-241

同理,导入“手机旋转”的元件
 
3.1-242_.png


图3.1-242

在“元件”面板下新建元件,命名为“手机展开”

3.1-243_.png

 
图3.1-243

以相同方式在“媒体库”中点击以序列帧形式添加序列图片
 
3.1-244_.png


图3.1-244

2.在“舞台”上添加元件

点击回到“舞台”,鼠标将“元件”面板下的“打开盒子”元件直接拖至“舞台”,并调整元件位置、大小等属性。

3.1-245_.png

 
图3.1-245
新建“背景”图层,将其拖拉至“图层0”下层。点击“素材库”,在“舞台”上选择添加一个背景图片。

3.1-246_.png

 
图3.1-246

如下图,重命名“图层0”为“盒子”,新建“手机”图层。在“手机”图层上鼠标将“元件”面板下的“手机展开”元件拖拉至“舞台”上
 
3.1-247_.png


图3.1-247
修改“舞台”上各元素的大小、位置如下图
 
3.1-248_.png


图3.1-248
双击“打开盒子”元件,进入该元件编辑页面,我们观察到当元件动画在第9帧时,盒子有差不多已打开的效果。
 
3.1-249_.png


图3.1-249
点击回到“舞台”,选中所有图层的第10帧,右键→“插入帧”
 
3.1-250_.png


图3.1-250
鼠标选中“手机”图层的第1帧,按照不放将其拖动至第9帧
 
3.1-251_.png


图3.1-251
点击“动画”→勾选掉“循环”功能
 
3.1-252_.png


图3.1-252
双击“舞台”上的“打开盒子”元件进入“打开盒子”元件编辑页面,鼠标选中最后一帧,点击最后一帧上的图片的“添加/编辑行为”按钮

3.1-253_.png


图3.1-253
在“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”
 
3.1-254_.png


图3.1-254
同理,双击“手机展开”元件,在元件编辑页面中,选中最后一帧,点击最后一帧上放置的图片的“添加/编辑行为”按钮
 
3.1-255_.png


图3.1-255
同理,设置编辑行为:选择“动画播放控制”→“暂停”→触发条件:“出现”

3.1-256_.png

 
图3.1-256
回到“舞台”,点击“预览”观察效果

3.1-257_.png

 
图3.1-257
点击添加第2页面,在第2页面添加相关素材
 
3.1-258_.png


图3.1-258

3.制作关联动画

点击新建“手机旋转”图层,鼠标在“元件”面板下选中“手机旋转”元件,将其直接拖拉至“舞台”上,调整元件位置、大小。

3.1-259_.png

 
图3.1-259

选中滑杆素材,在其“属性”面板下设置“拖动/旋转”为“水平拖动”

3.1-260_.png


图3.1-260
在“属性”面板下为滑杆元素取名为“滑杆”
 
3.1-261_.png


图3.1-261

选中“手机旋转”元件,在其“属性”面板下选择“动画关联”为“启动”,点击右边的“关联”按钮,设置关联属性
关联对象:“滑杆”
关联属性:“左”
开始值:“25”(“滑杆”在开始时在左边的左值)
结束值:“194”(“滑杆”在结束时在右边的左值)
播放模式:“同步”
 
3.1-262_.png


图3.1-262

将“滑杆”放置线条中央,在其“属性”面板下打开“结束时复位”功能,即设置了松开鼠标或手指时 “滑杆”自动回到中间位置的动画。
 
3.1-263_.png


图3.1-263

4.制作点击效果按钮

如下图,在“元件”面板下点击新建一个“按钮”元件
 
3.1-264_.png


图3.1-264
点击添加一个圆形,并修改其填充色为“透明”,线条边框为白色
 
3.1-265_.png


图3.1-265

为便于观察,我们先回到“舞台”页面,鼠标点击空白处选中“舞台”,在其“属性”面板下将填充色调为黑色
 
3.1-266_.png


图3.1-266
在“元件”面板下找到“按钮”元件,双击进入“按钮”元件页面,发现“舞台”变成黑色,可观察到白色的“按钮”元素
 
3.1-267_.png


图3.1-267
点击“快捷工具”隐藏掉圆形按钮右边的两个快捷图标
 
3.1-268_.png


图3.1-268

选中时间轴第10帧,右键→“插入帧”

3.1-269_.png

 
图3.1-269

右键→“插入关键帧动画” 

3.1-270_.png


图3.1-270

选中第5帧,右键→“插入关键帧”

3.1-271_.png

 
图3.1-271
按照Shift+Ctrl键使用“变形”工具将圆形以中心点缩小

3.1-272_.png

 
图3.1-272

选中第5帧,在“属性”面板内将该位置的圆形透明度设为“50”
 
3.1-273_.png


图3.1-273
鼠标点击回到“舞台”,选中第2页面,新建“按钮”图层,在“元件”面板下将“按钮”元件直接拖至“舞台”,调整“按钮”元件的位置、大小等。
 
3.1-274_.png


图3.1-274

5.制作手机缩小动画

如下图,同时选中第2页面的所有图层第30帧,右键→“插入帧”
 
3.1-275_.png


图3.1-275
选中“手机旋转”图层任意一帧,右键→“插入关键帧动画”
 
3.1-276_.png


图3.1-276
鼠标选中“手机旋转”图层最后一帧,将其拖动至第10帧位置
 
3.1-277_.png


图3.1-277
在第10帧位置使用“变形”工具改变“手机旋转”元件的大小、位置以及旋转角度,如下图
 
3.1-278_.png


图3.1-278
选中“手机旋转”图层第1帧,在“属性”面板下改变其“运动”效果为“淡出”
 
3.1-279_.png


图3.1-279

6.新建元件

在“元件”面板下新建“手机硬件展开”元件,在其元件编辑页面中添加所需要的图片素材,如下图,每一张素材分别添加进一个图层内
 
3.1-280_.png


图3.1-280
选中元件中所有图层第10帧,右键→“插入帧”
 
3.1-281_.png


图3.1-281
选中所有图层,右键→“插入关键帧动画”
 
3.1-282_.png


图3.1-282
在每个图层的第1帧上依次将图片素材拼合至右下角的图片中
 
3.1-283_.png


图3.1-283
依次选中每个图层的第1帧,分别在其“属性”面板下找到“运动”,选择“淡出”效果
 
3.1-284_.png


图3.1-284
新建图层“暂停”,在“暂停”图层最后一帧右键→“插入关键帧”
 
3.1-285_.png


图3.1-285
在“暂停”图层最后一帧添加一个矩形在“舞台”上,点击“快捷工具”显现出原先隐藏的快捷图标,点击“添加/编辑行为”按钮

3.1-286_.png

 
图3.1-286
选择“动画播放控制”→“暂停”→触发条件:“出现”
 
3.1-287_.png


图3.1-287
最后将矩形透明度设为“0”

3.1-288_.png

 
图3.1-288

7.继续设置第2页动画

点击选中第2页面,新建图层“手机硬件展开”,在“元件”面板下找到“手机硬件展开”元件,鼠标将其拖动至“舞台”,调整其位置、大小等
 
3.1-289_.png


图3.1-289
鼠标直接将“手机硬件展开”图层下拉一层,使“舞台”上的“手机硬件展开”元件置于“手机旋转”元件底下,方便调整。

3.1-290_.png

 
图3.1-290
在“舞台”上调整“手机硬件展开”与“手机旋转”两个元件大小、位置、角度,使其重叠在一起,如下图
 
3.1-291_.png


图3.1-291
选中“手机旋转”图层10帧之后的所有帧,右键→“删除帧(可多选)”

3.1-292_.png

 
图3.1-292
鼠标选中“手机硬件展开”图层的第1帧,将其拖动移至第11帧
 
3.1-293_.png


图3.1-293
选中“手机旋转”第1帧,在“属性”面板下将“运动”效果改为“淡入”

3.1-294_.png

 
图3.1-294
选中“手机旋转”图层最后一帧,在“属性”面板下改变其“Y轴旋转”角度为“180”,“Z轴旋转”角度为“8”
 
3.1-295_.png


图3.1-295
选中“按钮”图层第2帧,右键→“插入关键帧”

3.1-296_.png

 
图3.1-296
在“舞台”上选中新插入的关键帧上的物体
 
3.1-297_.png


图3.1-297
右键→“删除物体”
 
3.1-298_.png


图3.1-298
在“按钮”图层第21帧位置右键→“插入关键帧”

3.1-299_.png

 
图3.1-299
选中“按钮”图层第1帧,复制“舞台”上的物体:右键“舞台上的物体”→“复制”
 

3.1-300_.png



图3.1-300
鼠标点击选中“按钮”图层第21帧关键帧位置,按照Ctrl+Shift+V粘贴物体,将其移至合适位置
 
3.1-301_.png


图3.1-301
在“舞台”上复制粘贴一个“按钮”,调整其位置大小
 
3.1-302_.png


图3.1-302
建议不断点击“预览”按钮已调节效果
 
3.1-303_.png


图3.1-303
新建图层“说明”,在该图层22帧(“按钮”出现后)位置上右键→“插入关键帧”
 
3.1-304_.png


图3.1-304
在该帧上插入线条、文本框,输入文字内容,调节颜色、大小等属性如下图
 
3.1-305_.png


图3.1-305
选中两个物体,右键→“复制”

3.1-306_.png

 
图3.1-306
在“说明”图层第30帧位置右键→“插入关键帧”
 
3.1-307_.png


图3.1-307
在最后一个关键帧上将原来的两个物体移至第二个“按钮”上
 
3.1-308_.png


图3.1-308
调节大小、文字内容等

3.1-309_.png

 
图3.1-309
在“说明”图层第22至最后一帧之间,右键→“插入进度动画”
 
3.1-310_.png


图3.1-310
选中“手机旋转”图层的第11帧,右键→“插入关键帧”
 
3.1-311_.png


图3.1-311
选中所有图层40帧位置,右键→“插入帧”
 
3.1-312_.png


图3.1-312
在“说明”图层最后一个关键帧之后的帧数上右键→“插入进度动画”
 
3.1-313_.png


图3.1-313
8.添加编辑行为
如下图,新建一个“暂停”图层,在该图层上添加一个“矩形”
 
3.1-314_.png


图3.1-314
点击“矩形”的“添加/编辑行为”按钮
 
3.1-315_.png


图3.1-315
设置“编辑行为”:“动画播放控制”→“暂停”→触发条件:“出现”
 
3.1-316_.png


图3.1-316
选中“暂停”图层的第21帧,右键→“插入关键帧”
 
3.1-317_.png


图3.1-317
选中“暂停”图层的第29帧,右键→“插入关键帧”
 
3.1-318_.png


图3.1-318
选中“暂停”图层的第2帧,右键→“插入关键帧”


 
3.1-319_.png


图3.1-319
在第2帧中删除暂停物体

3.1-320_.png

 
图3.1-320
同理,删除第22帧上的暂停物体
 
图3.1-321
 
3.1-322_.png


图3.1-322
点击“按钮”图层第一帧上的按钮的“添加/编辑行为”
 
3.1-323_.png


图3.1-323
设置“编辑行为”为:“动画播放控制”→“播放”→触发条件:“点击”
 
3.1-324_.png


图3.1-324
选中“按钮”图层第21帧上的大按钮,点击“添加/编辑行为”按钮,设置“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,点击“编辑”按钮
 
3.1-325_.png


图3.1-325
跳转帧号为“22”,点击“确认”

3.1-326_.png

 
图3.1-326
同理选中“按钮”图层第21帧上的小按钮,点击“添加/编辑行为”按钮
 
3.1-327_.png


图3.1-327
设置“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,点击“编辑”按钮
 
3.1-328_.png


图3.1-328
跳转帧号为“30”,点击“确认”
 
3.1-329_.png


图3.1-329
选中“暂停”图层第30帧之后的所有帧数,右键→“删除帧(可多选)”
 
3.1-330_.png


图3.1-330
点击“预览”观察效果
 
3.1-331_.png


图3.1-331

9.制作第3页

如下图,点击添加第3页面,在第3页面添加一张背景图片素材
 
3.1-332_.png


图3.1-332
新建一个“手机”图层,在“元件”面板下将“手机展开”元件拖动至“舞台”上,调节大小与位置
 
3.1-333_.png


图3.1-333
新建“文字”图层,在所有图层的第20帧上右键→“插入帧”
 
3.1-334_.png


图3.1-334
在“文字”图层的第15帧,右键→“插入关键帧”

3.1-335_.png

 
图3.1-335
如下图,在第15帧位置上分别添加“马上预约”“即将隆重上市”两个文本框、一个背景矩形等元素,在“属性”面板下输入文字内容,分别调整文本域矩形元素的大小、字体、颜色、位置等属性
 
3.1-336_.png


图3.1-336
如下图,同时选中矩形与“马上预约”文本框,右键→“组”→“组合”,组合成一个“按钮”
 
3.1-337_.png


图3.1-337
点击“按钮”右边的“添加/编辑行为”
 
3.1-338_.png


图3.1-338
选择“属性控制”→“跳转链接”→触发条件:“点击”,点击“编辑”按钮
 
3.1-339_.png


图3.1-339
可在“参数”对话框中填写需跳转的网址,点击“确认”

3.1-340_.png

 
图3.1-340
点击“即将隆重上市”文本框的“添加预置动画”按钮
 
3.1-341_.png


图3.1-341
添加“淡入”的动画效果
 
3.1-342_.png


图3.1-342
同理为“马上预约”按钮添加“淡入”的预置动画效果。之后再点击“编辑预置动画”按钮,设置延迟时间为“1”秒,点击“确认”

3.1-343_.png

 
图3.1-343

3.1-344_.png

 
图3.1-344
如下图,在第2页面新建图层“禁止翻页”,添加一个矩形,点击矩形“添加/编辑行为”按钮
 
3.1-345_.png


图3.1-345
选择“动画播放控制”→“禁止翻页”→触发条件:“出现”
 
3.1-346_.png


图3.1-346
点击“我已了解”按钮的“添加/编辑行为”
 
3.1-347_.png


图3.1-347
选择“动画播放控制”→“下一页”→触发条件:“点击”
 
3.1-348_.png


图3.1-348
选择“滑杆”所在的“背景”图层,点击第2帧,右键→“插入关键帧”
 
3.1-349_.png


图3.1-349
在第二帧关键帧上删除滑杆元素
 
3.1-350_.png


图3.1-350

3.1.4 展示动画:贺卡

mingyueliu 发表了文章 • 0 个评论 • 221 次浏览 • 2016-10-10 14:38 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。






 操作步骤:如下图,新建元件“海”,在元件页面中点击“媒体库”,添加一张海的素材图片






图3.1-172

点击图片,右键→“复 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。

可定制贺卡.png


 操作步骤:如下图,新建元件“海”,在元件页面中点击“媒体库”,添加一张海的素材图片

3.1-172_.png


图3.1-172

点击图片,右键→“复制”

3.1-173_.png


图3.1-173
按照Ctrl+Sift+V原位粘贴进当前位置

3.1-174_.png


图3.1-174

将两张图片左右衔接排列成如下图位置,与“舞台”右对齐

3.1-175_.png


图3.1-175

为两张图添加帧动画:在第420帧位置右键→“插入帧”

3.1-176_.png


图3.1-176

右键→“插入关键帧动画”

3.1-177_.png


图3.1-177

在动画最后一帧将图片素材平移位置使其与“舞台”左对齐

3.1-178_.png


图3.1-178

如下图,新建图层“水2”,修改“图层0”名称为“水1”

3.1-179_.png


图3.1-179

在“水2”图层第1帧上添加进一张相同的海的素材

3.1-180_.png


图3.1-180

将“水2”图层上的图片素材透明度调为“50”度

3.1-181_.png


图3.1-181

点击“播放”按钮,观察“舞台”上水的运动动画出现波动效果。

3.1-182_.png


图3.1-182

新建图层“过渡色”,点击“素材库”按钮添加一张过渡色图片素材,将其移动至海水图片上方位置

3.1-183_.png


图3.1-183

点击“舞台”回到“舞台”编辑页面

3.1-184_.png


图3.1-184

将“舞台”上的“图层0”改名为“背景”,点击“素材库”添加背景图片素材,并将背景图片素材移动至与“舞台”上对齐

3.1-185_.png


图3.1-185

新建图层“海”,在“元件”面板下将原先做好的“海”元件用鼠标直接拖动至“舞台”

3.1-186_.png


图3.1-186

将“元件”移动至“舞台”底端,并使其与“舞台”右对齐

3.1-187_.png


图3.1-187

新建图层“月亮”,添加月亮图片素材至“舞台”,调整月亮图片素材位置、大小等

3.1-188_.png


图3.1-188

在所有图层的60帧上右键→“插入帧”

3.1-189_.png


图3.1-189

选中“月亮”图层上的任何一帧,右键→“插入关键帧动画”

3.1-190_.png


图3.1-190

在“月亮”图层第1帧上,按住Shift键将月亮素材垂直往下移动

3.1-191_.png


图3.1-191

鼠标选中“月亮”图层,将其拖动至“海”图层下面

3.1-192_.png


图3.1-192

新建图层“文字”,在“文字”图层第40帧上右键→“插入关键帧”

3.1-193_.png


图3.1-193

在“文字”图层第40帧空白关键帧上添加文字图片素材

3.1-194_.png


图3.1-194

选中“海上生明月”文字图片素材,点击其“预置动画”按钮,添加“移入”的预置动画效果

3.1-195_.png


图3.1-195

3.1-196_.png


图3.1-196

点击“编辑预置动画”按钮,默认时长、延迟时间,调节方向为“从下”

3.1-197_.png


图3.1-197

3.1-198_.png


图3.1-198

同理,添加“天涯共此时”文字图片素材的预置动画效果,让其动画延迟“1”秒,其余与“海上生明月”素材动画效果一致

3.1-199_.png


图3.1-199

点击“保存”按钮,命名作品为“中秋”

3.1-200_.png


图3.1-200

在所有图层80帧位置右键→“插入帧”

3.1-201_.png


图3.1-201

在“文字”图层第70帧位置右键→“插入关键帧”

3.1-202_.png


图3.1-202

在70帧位置,点击“海上生明月”素材“编辑预置动画”按钮

3.1-203_.png


图3.1-203

在出现的“动画”对话框中点击“删除”→“确认删除”,删除掉该预置动画

3.1-204_.png


图3.1-204

同理删除掉70帧上“天涯共此时”文字图片素材的预置动画效果
重新添加预置动画:点击“海上生明月”素材“添加预置动画”按钮

3.1-205_.png


图3.1-205

选择“移出”的动画效果

3.1-206_.png


图3.1-206

点击“编辑预置动画”按钮,设置其延迟时间为“1”秒,其他默认

3.1-207_.png


图3.1-207

同理添加“天涯共此时”图片素材的预置动画效果为“移出”,不修改动画选项

3.1-208_.png


图3.1-208

点击新建图层“人物”,在该图层70帧位置右键→“插入关键帧”

3.1-209_.png


图3.1-209

在第70帧空白关键帧上添加人物剪影素材

3.1-210_.png


图3.1-210

在“人物”图层70帧之后的任意一帧上右键→“插入关键帧动画”

3.1-211_.png


图3.1-211

在第70帧上将“人物”素材平移至“舞台”右侧之外

3.1-212_.png


图3.1-212

鼠标选中70帧之后的所有图层部分帧数

3.1-213_.png


图3.1-213

右键→“插入帧”

3.1-214_.png


图3.1-214

调整人物素材的“运动”效果为“淡出”

3.1-215_.png


图3.1-215

新建“定制文字”图层,在最后一帧,右键→“插入关键帧”

3.1-216_.png


图3.1-216

为方便排版,将“文字”图层最后一帧删除,点击选中最后一帧,右键→“删除帧(可多选)”

3.1-217_.png


图3.1-217

如图,点击“定制文字”图层最后一帧,在“舞台”上添加一个“中秋快乐”文字图片素材,以及三个文本框素材,输入文字内容,调节各个素材的大小、位置、文字颜色、字体等属性。

3.1-218_.png


图3.1-218

为各个素材添加预置动画:如下图,点击“中秋快乐”素材的“添加预置动画”按钮,选择“移入”的动画效果

3.1-219_.png


图3.1-219

3.1-220_.png


图3.1-220

点击其“编辑预置动画”按钮,修改方向为“从右”,其余默认,点击“确认”

3.1-221_.png


图3.1-221

设置修改三个文本框的预置动画效果都为“移入”,时长默认“1.5”秒,方向为“从右”。只延迟时间稍作改变,三个文字框从上往下分别延迟“1”秒、“1.5”秒、“2”秒

3.1-222_.png


图3.1-222

3.1-223_.png


图3.1-223

3.1-224_.png


图3.1-224

继续在“定制文字”图层最后一帧添加一个矩形、文本框,调节其大小、颜色、透明度以及文字内容等属性,参考下图。

3.1-225_.png


图3.1-225

选中矩形、文本框两个元素,右键→“组”→“组合”

3.1-226_.png


图3.1-226

为该组合添加一个“淡入”的预置动画效果

3.1-227_.png


图3.1-227

设置该预置动画的延迟时间为“3”秒

3.1-228_.png


图3.1-228

点击“预览”观察效果

3.1-229_.png


图3.1-229

为第一个文本框命名为“收卡人”

3.1-230_.png


图3.1-230

为第二个文本框命名为“祝福词”

3.1-231_.png


图3.1-231

为第三个文本框命名为“发卡人”

3.1-232_.png


图3.1-232

选择“定制”按钮,在其“属性”面板下选择“动作”为“表单”,点击右边的“编辑”按钮

3.1-233_.png


图3.1-233

在“编辑表单”对话框内设置
表单名称:“定制文字”
提交方式:“GET”
提交目标:“微信定制入口”
确认消息:“定制成功!”
修改背景颜色、字体颜色、字体大小等
点击“添加表单项”

3.1-234_.png


图3.1-234

在“添加表单项”中添加
名称:“收卡人”(即第一个文本框)
描述:“收卡人”
类型“输入框”
点击“保存”

3.1-235_.png


图3.1-235

同理再添加一个表单项
名称:“祝福词”(即第二个文本框)
描述:“祝福词”
类型“文本域”
点击“保存”

3.1-236_.png


图3.1-236

同理再添加一个表单项
名称:“发卡人”(即第三个文本框)
描述:“发卡人”
类型“输入框”
点击“保存”,最后点击“确认”

3.1-237_.png


图3.1-237

点击“保存”,点击“预览”观察定制效果

3.1-238_.png


图3.1-238

最后可通过右侧“属性栏”添加背景音乐。

3.1.3 展示动画:简历

mingyueliu 发表了文章 • 0 个评论 • 177 次浏览 • 2016-10-10 11:07 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。






 1.制作图标

如下图,在“舞台”上添加一个五边形,选择“节点”工具






图3.1-101
鼠标选中多边形边上的节点,将其往多边 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。

个人简历.png


 1.制作图标

如下图,在“舞台”上添加一个五边形,选择“节点”工具

3.1-101_.png


图3.1-101
鼠标选中多边形边上的节点,将其往多边形中心方向拖动,形成一个五角星图标

3.1-102_.png


图3.1-102
在“舞台”上分别添加一个圆形、矩形

3.1-103_.png


图3.1-103
选择“节点”工具,点击选中矩形,按住Ctrl键,鼠标移动到矩形最上一边,箭头出现一个“+”的符号,点击添加一个节点

3.1-104_.png


图3.1-104
同理,在矩形最上一边再添加两个节点,使其平均分布在矩形最上一边

3.1-105_.png


图3.1-105
鼠标选中中间的节点,按住Shift键将其往上拖动

3.1-106_.png


图3.1-106
选中最上方节点,按住Ctrl键水平拉动最上方节点的杠杆,使尖角变成有弧度的圆角

3.1-107_.png


图3.1-107
如下图调整左右两边角的弧度

3.1-108_.png


图3.1-108
移动圆形至如下图位置,如果圆形在矩形底下,则可选中圆形,右键→排列→移至顶层

3.1-109_.png


图3.1-109

同时选中两个图形,右键→对齐→左右居中

3.1-110_.png


图3.1-110

右键→合并→合并

3.1-111_.png


图3.1-111

选择“节点”工具,选中矩形下边两个节点,按照Shift键鼠标将其向上拖动

3.1-112_.png


图3.1-112
则可以画出一个头像图标

3.1-113_.png

图3.1-113

2.制作第1页加载页面

如下图,在第1页面添加背景图片、文字等元素,在右边“加载”页面中选择“样式”为“首页作为加载页”

3.1-114_.png


图3.1-114

3.制作第2页微信对话页面

制作微信头像:如下图,在“舞台”上添加一个圆形,在圆形“属性”面板下点击背景图片的“+”标志

3.1-115_.png

图3.1-115

在弹出的“媒体库”中找到自己想要的头像图片,点击“添加”

3.1-116_.png

图3.1-116

即可制作出圆形的头像

3.1-117_.png

图3.1-117

添加素材:如下图,在第2页面添加图片、文字等元素。
注意:分别新建一个图层放置每一则对白的元素,例如新建“对白1”图层放置第一则对白的头像、文字以及对话框等

3.1-118_.png

图3.1-118

第一则对白中的“微信昵称”需点击“微信”工具条下的“微信昵称”按钮添加,其余对白中的文字可直接点击“文字”按钮添加文字内容

3.1-119_.png


图3.1-119
添加动画:在所有图层的第10帧上右键→“插入帧”

3.1-120_.png


图3.1-120
选中四个对白图层的一帧,右键→“插入关键帧动画”

3.1-121_.png


图3.1-121
点击锁状按钮,锁定不需做动画的图层

3.1-122_.png


图3.1-122
同时选中四则对白元素,在时间轴第1帧位置,按照Shift键垂直向下拖动“舞台”上的对白元素

3.1-123_.png


图3.1-123
双击“对白2”的时间轴,选中“对白2”图层上的时间单元

3.1-124_.png


图3.1-124
鼠标选中将其往后拖动至“对白1”动画完成之后的位置

3.1-125_.png


图3.1-125
同理拖动“对白3”“对白4”的时间单元至如下位置

3.1-126_.png


图3.1-126
点击其余图层的锁状按钮解锁,选中动画最后一帧的所有图层,右键→“插入帧”

3.1-127_.png


图3.1-127
选中 “对白1”图层的第1帧,在“属性”面板下选择“运动”为“淡出”

3.1-128_.png


图3.1-128
同理在“对白2”“对白3”“对白4”图层动画的第一帧上也分别将其“运动”效果设为“淡出”

3.1-129_.png


图3.1-129
分别在“对白1”“对白2”“对白3”“对白4”图层动画的第1帧上将其透明度设为“0”

3.1-130_.png


图3.1-130
如下图,我们在“菜单”图层上添加的是“舞台”底端菜单栏下的背景矩形,在“按钮”图层上添加的是四个菜单图标。选中“按钮”“菜单”两个图层动画的最后一帧,右键→“插入关键帧”

3.1-131_.png


图3.1-131
鼠标选中“按钮”图层的第28帧(即最后一则对白出现时),在“舞台”上对准图标右键→“删除物体”

3.1-132_.png


图3.1-132
同理鼠标选中“菜单”图层的第28帧(即最后一则对白出现时),在“舞台”上对准菜单背景矩形,右键→“删除物体”

3.1-133_.png


图3.1-133

添加预置动画效果:
选中菜单背景矩形,点击“添加预置动画”按钮

3.1-134_.png


图3.1-134
选择“移入”效果

3.1-135_.png


图3.1-135
再选择菜单背景矩形,点击“编辑预置动画”按钮

3.1-136_.png


图3.1-136
设置动画选项:时长“1”秒,延时“0”秒,方向“从下”,点击“确认”

3.1-137_.png


图3.1-137

同理,设置四个图标的欲置动画效果都为“移入”,时长为“1”秒,方向“向下”。但注意“技能”图标延迟“0.2”秒,“经验”图标延迟“0.4”秒,“联系”图标延迟“0.6”秒,出现先后移入的效果

3.1-138_.png


图3.1-138

3.1-139_.png


图3.1-139

3.1-140_.png


图3.1-140

4.添加编辑行为

如下图,在第3、4、5页分别添加作品、技能、经验、联系的相关素材

3.1-141_.png


图3.1-141

3.1-142_.png


图3.1-142

3.1-143_.png


图3.1-143

3.1-144_.png


图3.1-144

添加跳转页面动画:
如图,回到第2页动画最后一帧,点击“作品”图标的“添加/编辑页面”按钮

3.1-145_.png


图3.1-145

在“编辑行为”对话框中选择“动画播放控制”→“跳转到页” →触发事件:“点击”,点击“编辑”按钮

3.1-146_.png


图3.1-146

在“参数”对话框中填写“页号”为“3”,“翻页方式”为“淡入”,点击“确认”

3.1-147_.png


图3.1-147

同理,添加“技能”“经验”“联系”图标的“跳转到页”编辑行为,分别跳转到第“4”“5”“6”页

3.1-148_.png


图3.1-148

3.1-149_.png


图3.1-149

3.1-150_.png


图3.1-150

如下图,选中第2页的“作品”图标,点击“编辑”→“复制行为”

3.1-151_.png


图3.1-151

选中第4页的“作品”图标,点击“编辑”→“粘贴行为”,即可将第2页面的“作品”图标设置的“跳转到页”编辑行为复制到第4页

3.1-152_.png


图3.1-152

同理,将第2页面的“作品”图标编辑行为复制到第5、6页;将第2页面的“技能”图标编辑行为复制到第3、5、6页;将第2页面的“经验”图标编辑行为复制到第3、4、6页;将第2页面的“联系”图标编辑行为复制到第3、4、5页;

禁止翻页:如下图,在第2页面新建图层“禁止翻页”,在该图层上添加一个矩形,点击矩形“添加/编辑行为”按钮

3.1-153_.png


图3.1-153

在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件:“出现”

3.1-154_.png


图3.1-154

5.制作第3页面动画

如图,点击第3页面,在“作品组”图层添加相关的素材

3.1-155_.png


图3.1-155

右键→“组”→“组合”

3.1-156_.png


图3.1-156

在组的“属性”面板下选择“组类型”为“裁剪内容”,“允许滚动”设置为“垂直滚动”,鼠标选中“变形”工具调节组的位置

3.1-157_.png


图3.1-157

同时,也可为组内的“H5游戏”文字设置一个跳转动画,跳转到第2帧的网页链接(此处略谈)

3.1-158_.png


图3.1-158

6.制作第4页面动画

点击第4页面,添加“曲线图表”(具体可参看图表制作章节)

3.1-159_.png


图3.1-159

7.制作第5页面动画

点击选中第5页面,如下图,在“经验”图层上添加相关素材

3.1-160_.png


图3.1-160

新建“陀螺仪”图层,在该图层上添加一个陀螺仪,将其移至“舞台”之外,并在“属性”面板下将其命名为“陀螺仪”

3.1-161_.png


图3.1-161

在陀螺仪的“属性”面板下选择“类型”为“绕Y轴旋转角”

3.1-162_.png


图3.1-162

选中“经验”图层上的所有元素,右键→“组”→“组合”

3.1-163_.png


图3.1-163

在“组”的“属性”面板下点击“X轴旋转”的“关联”按钮,在下拉菜单中设置:

关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-45”
当主控量=“180”时被控量=“45”

3.1-164_.png


图3.1-164

同理在“组”的“属性”面板下点击“Y轴旋转”的“关联”按钮,在下拉菜单中设置:
关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-50”
当主控量=“180”时被控量=“50”

3.1-165_.png


图3.1-165

同理在“组”的“属性”面板下点击“Z轴旋转”的“关联”按钮,在下拉菜单中设置:

关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-5”
当主控量=“180”时被控量=“5”

3.1-166_.png


图3.1-166

可在手机上观察效果

8.制作第6页面动画

如下图,点击第6页面,分别在“简介”“文字”图层上添加头像、联系方式等相关素材

3.1-167_.png


图3.1-167

如图,新建“定时器”图层,在该图层上添加一个定时器,并在“属性”面板下将其命名为“定时器”

3.1-168_.png


图3.1-168

点击选中头像,在其“属性”面板下点击“Z轴旋转”的“关联”按钮,设置关联属性:

关联对象:“定时器”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“30”时被控量=“0”
当主控量=“0”时被控量=“360”

3.1-169_.png


图3.1-169

设置定时器属性:精度为“毫秒”,“记时方向”为“倒计时”,“是否循环”为“循环”

3.1-170_.png


图3.1-170

同时,我们也可在该作品中添加背景音乐以及补充其他信息,美化简历。
点击“预览”或扫描二维码观察效果

3.1-171_.png


图3.1-171

3.1.2 展示动画:招聘

mingyueliu 发表了文章 • 0 个评论 • 177 次浏览 • 2016-10-09 18:14 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。






 1.添加素材、排版

如下图,在新建页面上添加图片素材、矩形、文本框,调整其位置、大小、文字内容、文字大小、颜色等属性






图3 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。

招聘.png


 1.添加素材、排版

如下图,在新建页面上添加图片素材、矩形、文本框,调整其位置、大小、文字内容、文字大小、颜色等属性

3.1-67_.png


图3.1-67

同理添加三组相同的素材,排版如下:

3.1-68_.png

图3.1-68

在添加图片时,我们应注意,将每一个职位的素材分别合并成组,并放在不同的图层内。例如,将“总顾问”一组放置“顾问”图层,将“市场总监”一组放置“市场总监”图层,将“快递员”一组放置“快递员”图层上。

3.1-69_.png


图3.1-69

2.添加动画效果

在时间轴上选择所有图层的第30帧,右键→“插入帧”

3.1-70_.png

图3.1-70

点击无需添加动画的图层3、4的类似锁状的按钮,将其锁住,选中“快递员”“市场总监”“顾问”三个图层的时间线,右键→“插入关键帧动画”

3.1-71_.png


图3.1-71

如下图,为方便编辑,可选中三个组,将其向右移动至合适编辑的位置

3.1-72_.png


图3.1-72

选中“快递员”图层第1帧,调整“快递员”组的“Y轴旋转”角度为“-50”

3.1-73_.png


图3.1-73

选中“市场总监”图层第1帧,调整“市场总监”组的“Y轴旋转”角度为“-40”

3.1-74_.png


图3.1-74

将所有素材拖动至原来位置,即使第一组“总顾问”放在“舞台”正中间。

3.1-75_.png

图3.1-75

选中动画最后一帧,即第30帧,将“舞台”上的所有元素向左拖动,使最后一组“快递员”组放在“舞台”正中间。

3.1-76_.png

图3.1-76

可点击“播放”按钮观察整体的动画效果

3.1-77_.png

图3.1-77

同时,在动画最后一帧,即第30帧,点击设置“市场总监”组的“Y轴旋转”为“40”

3.1-78_.png

图3.1-78

移动元素至合适位置,在动画最后一帧,即第30帧,点击设置“总顾问”组的“Y轴旋转”为“50”

3.1-79_.png

图3.1-79

最后,在最后一帧将所有元素移到合适位置,即将最后一组“快递员”组放在“舞台”正中间。

3.1-80_.png

图3.1-80

3.添加按钮

如下图,新建一个图层,命名为“按钮”,在“按钮”图层上添加一个矩形,使其高度与“舞台”相同,宽度大于“舞台”

3.1-81_.png

图3.1-81

将按钮矩形“透明度”设置为“0”,并为其命名为“透明按钮”

3.1-82_.png

图3.1-82

点击“舞台”空白处,在“舞台”的“属性”面板下找到“动画关联”,选择“启用”,点击“关联”按钮

3.1-83_.png

图3.1-83

设置“关联”属性
关联对象:“透明按钮”
关联属性:“左”
开始值:“-203”(“透明按钮”最右端与舞台右端重合时的位置)
结束值:“0”
播放模式:“同步”
注意:为方面观察,也可先将“透明按钮”透明度调整为“20”

3.1-84_.png

图3.1-84

选中“透明按钮”,在其“属性”面板下找到“拖动/旋转”按钮,选择“水平拖动”

3.1-85_.png

图3.1-85

可点击“预览”观察效果,若观察到动画移至重复播放,可回到“舞台”,点击“动画”,勾除“循环”

3.1-86_.png

图3.1-86

4.添加表单

为方便编辑,将图层4(放置“我要应聘”按钮)移至最上层,并改名为“表单按钮”。注意:此处为区分,已将原先的“按钮”图层重命名为“透明按钮”

3.1-87_.png


图3.1-87

选中“我要应聘”按钮元素,在其“属性”面板下找到“动作”,选择“表单”,点击右边的“编辑”按钮

3.1-88_.png


图3.1-88

在弹出的“编辑表单”中设置
表单名称:“应聘”
提交方式:“GET”
提交目标:“提交数据到后台”
确认消息:“提交成功”
背景颜色、字体颜色、字体大小等
点击“添加表单项”

3.1-89_.png


图3.1-89

在“添加表单项”对话框中填写
名称:“姓名”
描述:“姓名”
类型:“输入框”,点击“保存”

3.1-90_.png


图3.1-90

同理,再添加一个表单项,设置内容为
名称:“应聘职位”
描述:“应聘职位”
类型:“单选框”
取值:“总顾问、市场总监、快递员”(一行为一个选项)
点击“保存”

3.1-91_.png


图3.1-91

同理,再添加一个表单项,设置内容为
名称:“电话”
描述:“电话”
类型:“电话号码”,点击“保存”

3.1-92_.png


图3.1-92

点击“确认”回到“舞台”,点击“保存”,点击“预览”观察效果

3.1-93_.png


图3.1-93

5.添加背景音乐

如图,在“媒体库”中添加音乐素材

3.1-94_.png

图3.1-94

将音乐素材移动至“舞台”之外,点击“舞台”空白处,在“背景音乐”中选择“声音1”

3.1-95_.png

图3.1-95

点击“预览”观察效果

3.1-96_.png

图3.1-96

同时,也可设置“分享”与“加载”

3.1-97_.png

图3.1-97

6.查看后台表单数据

点击操作界面右上角“动画作品”

3.1-98_.png

图3.1-98

在“动画作品”界面点击该作品“统计”按钮

3.1-99_.png

图3.1-99

在“数据”界面选择“表单数据”,即可查看所提交的表单信息。

3.1-100_.png

图3.1-100

3.1.1 展示动画:邀请函

mingyueliu 发表了文章 • 0 个评论 • 261 次浏览 • 2016-10-09 17:36 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
>>>案例预览






1.添加素材

如下图,在“舞台”上添加一个长形图片素材





图3.1-1

使用“变形”工具调整长图大小位置如下





图3 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
>>>案例预览

邀请卡.png


1.添加素材

如下图,在“舞台”上添加一个长形图片素材

3.1-1_.png

图3.1-1

使用“变形”工具调整长图大小位置如下

3.1-2_.png

图3.1-2

在“舞台”下端空白部分添加一个矩形,调整矩形宽高使其符合“舞台”

3.1-3_.png

图3.1-3

在矩形“属性”面板下点击设置矩形填充颜色,按照Alt键使用吸管吸取图片素材上的背景颜色,统一矩形颜色。

3.1-4_.png

图3.1-4

3.1-5_.png

图3.1-5

如下图,点击在“舞台”上添加一个文本框,在其“属性”面板下调整其颜色、大小、位置等属性

3.1-6_.png

图3.1-6

同理,添加一个矩形,修改其填充色、边框颜色、大小、位置等属性如下图

3.1-7_.png

图3.1-7

同理,点击添加一个输入框

3.1-8_.png

图3.1-8

按需求在其“属性”面板下调整输入框位置、大小、文字颜色、字体等使其符合整体样式

3.1-9_.png

图3.1-9

按照Ctrl键同时选中输入框与背景矩形框,右键→“复制”

3.1-10_.png

图3.1-10

按住Ctrl+Shift+V粘贴至当前位置

3.1-11_.png


图3.1-11
按照Shift键将新粘贴进的对象移动至合适位置

3.1-12_.png


图3.1-12
添加矩形背景按钮和文本框,输入文本框内容为“提交”,调整二者的大小、位置、颜色等属性至合适程度,如下图

3.1-13_.png


图3.1-13
按照Ctrl键选中矩形背景按钮与文字框,右键→“组”→“组合”

3.1-14_.png


图3.1-14

点击选中第一个输入框,在其“属性”面板下修改“提示文字”为“请输入姓名”

3.1-15_.png

图3.1-15

同理,点击选中第二个输入框,在其“属性”面板下修改“提示文字”为“请输入电话”,“类型”为“电话号码”,“必填项”为“是”

3.1-16_.png

图3.1-16

分别为两个输入框命名为“姓名”“电话”

3.1-17_.png

图3.1-17

3.1-18_.png


图3.1-18

2.添加行为

点击“提交”按钮右边的“添加/编辑行为”按钮

3.1-19_.png


图3.1-19
在“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件:“点击”,点击“编辑”按钮

3.1-20_.png


图3.1-20
在“参数”对话框内,选择“提交目标”为“默认数据服务”,勾选“提交对象”为“姓名”“电话”,点击“确认”

3.1-21_.png


图3.1-21
点击“预览”观察效果

3.1-22_.png


图3.1-22
如下图,点击添加第2页,点击“舞台”空白处,在“舞台”的“属性”面板下修改填充颜色:点击填充颜色框,按照Alt键吸取第1页背景图片的颜色,统一舞台颜色。

3.1-23_.png


图3.1-23
在第2页点击添加文本框,输入文字内容如下图,并在其“属性”面板下修改文本框文字大小、字体、颜色等属性

3.1-24_.png


图3.1-24
回到第1页,选中“提交”按钮,右键→“复制”

3.1-25_.png


图3.1-25
点击回到第2页,按照Ctrl+Shift+V粘贴至当前位置


3.1-26_.png


图3.1-26
双击按钮进入“组”页面,修改文本框文字内容为“我想再看看活动时间”

3.1-27_.png


图3.1-27
回到“舞台”,点击选中按钮,在其“属性”面板下找到“动作”,选择“无”,取消掉表单行为

3.1-28_.png


图3.1-28

3.1-29_.png


图3.1-29
点击第2页右下角“复制页面”按钮,复制第2页至第3页面

3.1-30_.png


图3.1-30
修改文本框“老朋友 提交失败 再来一次吧”,如下图

3.1-31_.png


图3.1-31
双击按钮组进入“组”页面,修改按钮文字内容为“OK,再来一次”

3.1-32_.png


图3.1-32
点击“保存”并填写名称为“邀请卡”

3.1-33_.png


图3.1-33
回到第1页,点击选中第1帧,即全选第一页素材

3.1-34_.png


图3.1-34
右键→“组”→“组合”,将第1页第1帧上的所有元素合并成一个组

3.1-35_.png


图3.1-35
在该组合的“属性”面板下找到“拖动/旋转”选项,选择“垂直拖动”。

3.1-36_.png


图3.1-36
按照Shift键将组合往下拖动,手动使其顶部与“舞台”顶部对齐

3.1-37_.png


图3.1-37
也可在“属性”面板下调整其“上”值为“0”,使其顶部与“舞台”顶部对齐

3.1-38_.png


图3.1-38
双击“组”进入组页面,点击“提交”按钮右边的“添加/编辑行为”按钮

3.1-39_.png


图3.1-39
在“编辑行为”对话框内点击“提交表单”行为的“编辑”按钮

3.1-40_.png


图3.1-40
在“参数”对话框选择“操作成功后”为“跳转到页”,点击其右边的“编辑”按钮

3.1-41_.png


图3.1-41
在新弹出的“参数”对话框内选择“页号”为“2”,“翻页方式”为“平移”,点击“确认”

3.1-42_.png


图3.1-42
同理,选择“操作失败后”为“跳转到页”,点击其右边的“编辑”按钮

3.1-43_.png


图3.1-43
在新弹出的“参数”对话框内选择“页号”为“3”,“翻页方式”为“平移”,点击“确认”

3.1-44_.png


图3.1-44
回到“舞台”页面,点击“预览”观察效果

3.1-45_.png


图3.1-45
接下来,在“舞台”上添加一个矩形,点击矩形“添加/编辑行为”按钮

3.1-46_.png


图3.1-46
在其“编辑行为”对话框内选择“动画播放控制”→“禁止翻页”→触发条件:“出现”,即设置了当该矩形出现即禁止系统默认的上下翻页行为。

3.1-47_.png


图3.1-47
如图,在第2页面,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮

3.1-48_.png


图3.1-48
在“参数”对话框内设置“页号”为“1”,“翻页方式”为“平移”,点击“确认”

3.1-49_.png


图3.1-49
回到第1页,选中“组”,为其命名为“首页”

3.1-50_.png


图3.1-50
在第2页,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,添加“改变元素属性”行为:选择“属性控制”→“改变元素属性”→触发条件:“点击”,点击该行为的“编辑”按钮

3.1-51_.png


图3.1-51
如图,在“参数”对话框内设置:
元素名称:“首页”
元素属性:“上”
赋值方式:“用设置的值替换现有的值”
取值:“-370”
点击“确认”,即设置行为:点击“我想再看看活动时间”按钮时,页面跳转至第1页,且“首页”组合的“上”值为“-370”,即活动时间刚好显示在“舞台”中间的位置

3.1-52_.png


图3.1-52
点击“预览”效果

3.1-53_.png


图3.1-53
如图,点击选中第3页失败页面,点击“ok,再来一次”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框内选择:“动画播放控制”→“跳转到页”→触发条件:“点击”,点击该行为的“编辑”按钮

3.1-54_.png


图3.1-54
设置参数“页号”为“1”,“翻页方式”为“平移”,点击“确认”

3.1-55_.png


图3.1-55

3.添加背景音乐

点击“素材库”,选择添加已上传的“声音”素材至“舞台”

3.1-56_.png


图3.1-56
将音频移至“舞台”之外,鼠标点击“舞台”空白处,在“舞台”的“属性”面板下选择“背景音乐”为“音乐1”(即刚刚添加的音乐素材)

3.1-57_.png


图3.1-57
点击“预览”背景音乐

3.1-58_.png


图3.1-58

4.设置“加载”界面

如下图,点击“加载”界面,选择“样式”为“进度条”,“提示”为“嘿,老朋友,好久不见”,并修改文字大小,是否为动态文字以及文字颜色、进度颜色、进度背景等其他自定义形式。

3.1-59_.png


图3.1-59

如下图,点击“分享”界面,填写分享信息,上传添加分享图标等。

3.1-60_.png


图3.1-60

5.发布

点击“发布”按钮

3.1-61_.png


图3.1-61


在“发布动画”页面输入“备注名”为“邀请卡”,勾选同意书,点击“下一步”

3.1-62_.png


图3.1-62
发布成功

3.1-63_.png


图3.1-63

6.查看表单统计数据

我们可在Mugeda账号主页的“动画作品”中看到最新的作品缩略图。

3.1-64_.png


图3.1-64
点击动画缩略图右下角三点的按钮,点击“统计”

3.1-65_.png


图3.1-65
即在“数据”→“表单数据”下可观察到刚刚提交的表单内容

3.1-66_.png


图3.1-66

2.10.2 判断:逻辑表达式判断

mingyueliu 发表了文章 • 0 个评论 • 404 次浏览 • 2016-10-09 16:09 • 来自相关话题

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

 逻辑表达式判断即当物体条件符合所设定的表达式,即执行行为;

如下图,承接上一案例2.9.1 判断:条件判断,在矩形“下一页”编辑行为的“参数”对话框内,设置“执行条件”为“逻辑表达式”, 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 逻辑表达式判断即当物体条件符合所设定的表达式,即执行行为;

如下图,承接上一案例2.9.1 判断:条件判断,在矩形“下一页”编辑行为的“参数”对话框内,设置“执行条件”为“逻辑表达式”,具体公式为“{{圆判断.left }}==29”,即设置了当“圆判断”圆形的左值等于29时,点击矩形跳转下一页;

2.9-14_.png

图2.9-14

点击“预览”观察效果,由于此时“舞台”上的“圆判断”圆形左值正好是29,即点击矩形可跳转至下一页。

2.9-15_.png

图2.9-15

同理,也可将公式改为“{{圆判断.left }}>15”,因“舞台”上的“圆判断”圆形左值等于29,即大于15,因此点击矩形仍可跳转至下一页。

2.9-16_.png

图2.9-16

逻辑表达式可执行多种判断条件,如图,在“舞台”上添加一个输入框,命名为“sr”;

2.9-17_.png

图2.9-17

同理,回到矩形“下一页”编辑行为的“参数”对话框,将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”,即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时,点击矩形才可跳转至下一页。
注意:“&&”表示“并且”

2.9-18_.png

图2.9-18

点击“预览”观察效果;

2.9-19_.png

图2.9-19

同理,将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”,即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时,点击矩形才可跳转至下一页。点击“预览”观察效果。
注意:“||”表示“或者”

2.9-20_.png

图2.9-20

附件:逻辑表达式概念文档

101.png

 

2.10.1 判断:条件判断

mingyueliu 发表了文章 • 0 个评论 • 271 次浏览 • 2016-10-09 15:47 • 来自相关话题

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

 条件判断即通过一个物体的属性条件,判断物体行为是否执行;

如下图,点击在“舞台”上添加一个矩形;





图2.9-1

为矩形添加两个行为:
 
“跳转下一页”:点击矩形的“添加/ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 条件判断即通过一个物体的属性条件,判断物体行为是否执行;

如下图,点击在“舞台”上添加一个矩形;

2.9-1_.png

图2.9-1

为矩形添加两个行为:
 
“跳转下一页”:点击矩形的“添加/编辑行为”按钮,在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件:“点击”,点击“确认”
“禁止翻页”:在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件:“点击”,点击“确认”

2.9-2_.png

图2.9-2

新建下一页,为便于识别,在下一页中添加一张背景图片素材。

2.9-3_.png

图2.9-3

回到上一页,新建一个输入框,为其命名为“判断”;

2.9-4_.png

图2.9-4

点击矩形的“添加/编辑行为”按钮;

2.9-5_.png

图2.9-5

在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮;

2.9-6_.png

图2.9-6

在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”;
元素名称:“判断”
考察属性:“文本取值”
逻辑条件:“等于”
参考值:“100”
即设置了当“判断”输入框内容等于100时,点击矩形跳转到下一页的行为;

2.9-7_.png

图2.9-7

点击“预览”观察效果;

2.9-8_.png

图2.9-8

如下图,删除输入框,添加一个圆形,将其命名为“圆判断”;

2.9-9_.png

图2.9-9

同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框,点击“下一页”行为的“编辑”按钮进入“参数”对话框;

2.9-10_.png

图2.9-10

设置“执行条件”为“检查元素状态”;
元素名称:“圆判断”
考察属性:“左”
逻辑条件:“不等于”
参考值:“30”
即设置了当“圆判断”圆形左值不等于30时,点击矩形跳转下一页的行为;

2.9-11_.png

图2.9-11

点击“预览”观察效果,如下图,此时“圆判断”的左值为“29”,即不等于30,因此点击矩形即会跳转至下一页;

2.9-12_.png

图2.9-12

2.9-13_.png

图2.9-13

2.8.4 关联绑定:公式关联

mingyueliu 发表了文章 • 0 个评论 • 211 次浏览 • 2016-10-09 15:29 • 来自相关话题

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

如图,在“舞台”上添加一个文本框作为被控对象,添加一个圆形作为控制物,在圆形的“属性”面板下将其命名为“遥控器3”,并调节“拖动/旋转”属性为“水平拖动”;





图2.8-38

查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

如图,在“舞台”上添加一个文本框作为被控对象,添加一个圆形作为控制物,在圆形的“属性”面板下将其命名为“遥控器3”,并调节“拖动/旋转”属性为“水平拖动”;

2.8-38_.png

图2.8-38

如图,选中被控对象文本框,在其“属性”面板下点击字体右边的“关联”按钮,在下拉的关联属性菜单栏中设置:
关联对象:“遥控器3”
关联属性:“左”
关联方式:“公式关联”
被控量=“关联属性”
即设置了被控对象文本框的内容等于“遥控器3”圆形的“左”值;

2.8-39_.png

图2.8-39

点击“预览”观察效果,我们发现,水平移动“控制器3”圆形,其“左”值被体现在文本框内;

2.8-40_.png

图2.8-40

回到被控对象输入框的“文字”关联属性栏下,修改关联公式为:被控量=关联属性*3,即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值的三倍。点击“预览”观察效果。

2.8-41_.png

图2.8-41

也可修改关联公式为:被控量=(关联属性+25)*3,即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值加25再乘以3。

2.8-42_.png

图2.8-42

点击“预览”观察效果。如图,当“遥控器3”的“左”值等于0时,输入框的内容为(0+25)*3=75

2.8-43_.png

图2.8-43

2.8.3 关联绑定:自动关联

mingyueliu 发表了文章 • 0 个评论 • 208 次浏览 • 2016-10-09 15:22 • 来自相关话题

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

 如图,在“舞台”上添加一个矩形作为被控对象,添加一个圆形作为控制物,在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”;





图2.8-32

并为圆形命名为“遥控器“;
查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 如图,在“舞台”上添加一个矩形作为被控对象,添加一个圆形作为控制物,在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”;

2.8-32_.png

图2.8-32

并为圆形命名为“遥控器“;

2.8-33_.png

图2.8-33

同理,选中被控对象矩形,在其“属性”面板下点击其“左”属性右边的“关联”按钮,在下拉的关联属性菜单内设置:
关联对象:“遥控器”
关联属性:“左”
关联方式:“自动关联”
点击弹出的“+”符号

2.8-34_.png

图2.8-34

如下图,点击“+”符号后出现主控量与被控量的输入框,输入:
当主控量=“0”时被控量=“320”
当主控量=“150”时被控量=“0”
当主控量=“300”时被控量=“320”
即设置了当“遥控器”圆形的“左”值等于0时,矩形的“左”值等于“320”;
当“遥控器”圆形的“左”值等于150时,矩形的“左”值等于“0”;
当“遥控器”圆形的“左”值等于“300”时,矩形的“左”值等于“320”。
设置了这几个节点后,系统会自动设置调节中间的动画。
注意:主控量为控制物体的关联属性(此处为“控制器”圆形的“左”值)
被控量为被控制物体的关联属性(此处为矩形的“左”值)

2.8-35_.png

图2.8-35

点击“预览”观察效果

2.8-36_.png

图2.8-36

如下图,自动关联也可只控制一部分动画,例如设置自动关联属性为:
当主控量=“100”时被控量=“0”
当主控量=“200”时被控量=“320”

2.8-37_.png

图2.8-37

点击“预览”,观察发现只有当“遥控器”圆形的“左”值在100-200区间时,矩形的动画会从左移向右,而当“遥控器”圆形的“左”值在100以下或200以上时,矩形不移动位置。

2.8.2 关联绑定:属性关联

mingyueliu 发表了文章 • 0 个评论 • 265 次浏览 • 2016-10-09 15:14 • 来自相关话题

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

 我们观察到,在“属性”面板下,所有属性右边都会有一个回形针式的“关联”按钮
 




图2.8-20

如下图,在“舞台”上添加一个输入框;





图2.8-21

为输入框命名 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 我们观察到,在“属性”面板下,所有属性右边都会有一个回形针式的“关联”按钮
 
2.8-20_.png

图2.8-20

如下图,在“舞台”上添加一个输入框;

2.8-21_.png

图2.8-21

为输入框命名为“输入框”;

2.8-22_.png

图2.8-22

选中“属性关联”元素,在其“属性”面板下点击其透明度右边的“关联”按钮;

2.8-23_.png

图2.8-23

在弹出的下拉菜单中填写关联属性:
关联对象:“输入框”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素的透明度取值;

2.8-24_.png

图2.8-24

可点击“预览”观察效果;

2.8-25_.png

图2.8-25

同理,可设置“属性关联”元素的“上”的关联属性为:

关联对象:“输入框”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素“上”的取值

2.8-26_.png

图2.8-26

点击“预览”观察效果;

2.8-27_.png

图2.8-27

同理,将输入框删除,在“舞台”上新添加一个矩形,在其“属性”面板下设置其“拖动/旋转”为“垂直拖动”

2.8-28_.png

图2.8-28

为矩形命名为“拖动遥控”;

2.8-29_.png

图2.8-29

如下图,同理点击“属性关联”的“上”属性右边的“关联”按钮,设置关联属性为:

关联对象:“拖动遥控”
关联属性:“上”
关联方式:“公式关联”
被控量=“关联属性”
即设置了“拖动遥控”矩形的上值等于“属性关联”元素“上”的取值

2.8-30_.png

图2.8-30

点击“预览”观察效果;

2.8-31_.png

图2.8-31

2.8.1 关联绑定:动画关联

mingyueliu 发表了文章 • 3 个评论 • 263 次浏览 • 2016-10-09 15:00 • 来自相关话题

​想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 在Mugeda中,动画关联有两种形式:1.关联“舞台”的动画;2.关联元件的动画。

1.“舞台”上的动画关联
本节视频教程请点击此处。

“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图,在“舞台 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 在Mugeda中,动画关联有两种形式:1.关联“舞台”的动画;2.关联元件的动画。

1.“舞台”上的动画关联
本节视频教程请点击此处。

“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图,在“舞台”添加一个矩形素材,设置其由左移到右的动画效果。动画时间为第1帧到第100帧。

2.8-1_.png

图2.8-1

新建图层1,在图层1第1帧位置上点击添加一个矩形在“舞台”上,在矩形“属性”面板内改变其“拖动/旋转”属性为“水平拖动”;

2.8-2_.png

图2.8-2

在“属性”面板下为新添加的矩形命名为“遥控器”;

2.8-3_.png

图2.8-3

鼠标点击“舞台”空白地方,在“舞台”的“属性”面板内找到“动画关联”选项,选择“启用”,点击右边弹出的“关联”按钮;

2.8-4_.png

图2.8-4

在弹出的下拉菜单中填写关联属性:

关联对象:“遥控器”(即之前命名为“遥控器”的小矩形)
关联属性:“左”(即“遥控器”小矩形的最左值离舞台左端的距离值)
开始值:“0”
结束值:“100”
播放模式:“切换”
即设置好了当“遥控器”小矩形的最左端离舞台左端的距离值为0-100时,动画启动播放,当距离值大于100时,动画停止播放。

2.8-5_.png

图2.8-5

如下图,为方便观察,我们在“舞台”上添加一个宽度为100的紫色矩形,点击“预览”,观察到当“遥控器”小矩形的最左端在紫色矩形(其左值0-100)之间时,上方的矩形播放原先设置的从左向右的动画,当“遥控器”小矩形的最左端在紫色矩形(其左值100以上)之外时,上方的矩形停止播放动画。

2.8-6_.png

图2.8-6

同理,将“舞台”上的关联属性设为开始值:“100”;结束值:“200” 

2.8-7_.png

图2.8-7

点击“预览”可观察到动画效果为当“遥控器”小矩形的最左端在离舞台左端值100-200之间时,上方的矩形播放原先设置的从左向右的动画,当“遥控器”小矩形的最左端在离舞台左端值0-100或200之外时,上方的矩形停止播放动画。

2.8-8_.png

图2.8-8

同理,修改“舞台”上的关联属性中“播放模式”为“同步”,即可设置当“遥控器”小矩形的最左端在离舞台左端值100时,上方的矩形动画开始从第一帧播放;当“遥控器”小矩形的最左端在离舞台左端值0-200之间,上方的矩形动画同步播放;当“遥控器”小矩形的最左端在离舞台左端值200时,上方的矩形动画播放至最后一帧。

2.8-9_.png

图2.8-9

可单击“预览”观察动画效果

2.8-10_.png

图2.8-10

2.“元件”的动画关联
本节视频教程请点击此处。

“元件”的动画关联与“舞台”的动画关联相似,区别是将对象由“舞台”转变为“元件”。
如图,在“舞台”上添加一个矩形,选中矩形,右键→“转换为元件”,双击矩形进入元件编辑页面。

2.8-11_.png

图2.8-11

如下图,为矩形元件设置一个从左向右移动的动画效果,动画区间为0-50帧

2.8-12_.png

图2.8-12

点击页面左上角“舞台”字样回到“舞台”,在“舞台”上新建一个小矩形,为小矩形命名为“元件遥控器”

2.8-13_.png

图2.8-13

在“元件遥控器”小矩形“属性”面板下找到“拖动/旋转”,选择“垂直拖动”,即设置了可垂直拖动“元件遥控器”

2.8-14_.png

图2.8-14

选中矩形元件,在其“属性”面板下找到“动画关联”,选择“启动”,点击弹出的“关联”按钮

2.8-15_.png

图2.8-15

在弹出的下拉菜单中填写关联属性:
关联对象:“元件遥控器”
关联属性:“上”(即“元件遥控器”小矩形的最上端离舞台上端的距离值)
开始值:“200”
结束值:“400”
播放模式:“切换”
即设置好了当“元件遥控器”小矩形的最上端离舞台上端的距离值为200-400之间时,元件动画启动播放,当距离值小于200或大于400时,元件动画停止播放。

2.8-16_.png

图2.8-16

可点击“预览”,预览效果

2.8-17_.png

图2.8-17

同理,在元件矩形的“属性”面板下设置关联属性的“播放模式”为“同步”,即可设置当“元件遥控器”小矩形的最上端在离舞台上端值200时,元件矩形动画开始从第一帧播放;当“元件遥控器”小矩形的最上端在离舞台上端值200-400之间,元件矩形动画同步播放;当“元件遥控器”小矩形的最上端在离舞台上端值400时,元件矩形动画播放至最后一帧。

2.8-18_.png

图2.8-18

可点击“预览”,预览效果

2.8-19_.png

图2.8-19
 

2.7.6 表单:默认表单/定制文字

mingyueliu 发表了文章 • 0 个评论 • 268 次浏览 • 2016-10-09 12:00 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

1.编辑表单
本节视频教程请点击此处。

如图,新建一个页面,在“表单”工具条下点击“表单”按钮





图2.7-26

如图,在弹出的“编辑表单”对话框中设置相关表单属性,例如填写“表单名称”为“表单”,选择“提 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

1.编辑表单
本节视频教程请点击此处。

如图,新建一个页面,在“表单”工具条下点击“表单”按钮

2.7-26_.png

图2.7-26

如图,在弹出的“编辑表单”对话框中设置相关表单属性,例如填写“表单名称”为“表单”,选择“提交方式”为“GET”,选择“提交目标”为“提交数据到后台”,填写“确认信息”为“定制成功”,选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮

2.7-27_.png

图2.7-27

在弹出的“添加表单项”对话框中输入选项“名称”为“name”,“描述”为“姓名”,“类型”为“输入框”,“取值”为“张三”,点击“保存”,点击“确认”

2.7-28_.png

图2.7-28

点击“预览”,在预览中输入姓名为“李四”,点击“确认”,即出现“定制成功”字样,点击“确认”,数据即提交至后台服务器中。

2.7-29_.png

图2.7-29

2.7-30_.png

图2.7-30

回到操作界面,点击“舞台”上的默认表单,在其“属性”面板内点击“编辑”按钮,进入“编辑表单”对话框

2.7-31_.png

图2.7-31

选择“提交目标”为“微信定制入口”,点击“确认”

2.7-32_.png

图2.7-32

回到操作界面后,点击“预览”,在输入框内输入一个新名字,点击“确认”,刷新后H5页面即变成新输入的名字,这就是微信实时定制名字,它的数据不会被提交至后台。

2.7-33_.png

图2.7-33

如下图,回到“编辑表单”对话框,点击“预置表单项(请选择)”按钮,在下拉菜单下可选择“手机号码”“电子邮件”等多种选项。

2.7-34_.png

图2.7-34

如下图,点击选择“联系方式(手机号码)”,在弹出的注意对话框中点击“确定”

2.7-35_.png

图2.7-35

回到操作界面,点击“预览”,发现会出现默认的“名称”和“手机号码”两个选项内容

2.7-36_.png

图2.7-36

2.定制文字
本节视频教程请点击此处。

如下图,在新页面上添加三个文字素材,分别为文字命名为“to”“greetings”“from”

2.7-37_.png

图2.7-37

2.7-38_.png

图2.7-38

2.7-39_.png

图2.7-39

选中“定制文字”按钮素材,在其“属性”面板下选择“动作”为“表单”,点击“定制文字”按钮素材的绿色“添加/编辑行为”按钮

2.7-40_.png

图2.7-40

在弹出的“编辑表单”对话框中设置相关表单属性,填写“表单名称”为“表单”,选择“提交方式”为“GET”,选择“提交目标”为“提交数据到后台”,填写“确认信息”为“定制成功”,选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮

2.7-41_.png

图2.7-41

在弹出的“添加表单项”对话框中输入“名称”为“to”(连接到之前命名为“to”的文字框素材),“描述”为“收件人”,“类型”为“输入框”,“取值”为“亲爱的战友”,点击“保存”

2.7-42_.png

图2.7-42

同理点击“添加表单项”按钮,再次添加“名称”为“greetings”(连接到之前命名为“greetings”的文字框素材),“描述”为“祝福语”,“类型”为“文本域”,“取值”可不填,点击“保存”

2.7-43_.png

图2.7-43

同理点击“添加表单项”按钮,再次添加“名称”为“from”(连接到之前命名为“from”的文字框素材),“描述”为“发件人”,“类型”为“输入框”,“取值”为“你的朋友”,点击“保存”

2.7-44_.png

图2.7-44

点击“预览”,如图,点击“定制文字”按钮,即可出现“定制文字”对话框,输入需定制的内容,点击“确认”,即可将定制的文字数据提交至后台。

2.7-45_.png

图2.7-45

2.7-46_.png

图2.7-46

如图,回到“舞台”,点击“舞台”上的“定制文字”按钮的“添加/编辑行为” 

2.7-47_.png

图2.7-47

在弹出的“编辑表单”对话框内容选择“提交目标”为“微信定制入口”,点击“确认”

2.7-48_.png

图2.7-48

回到“舞台”,点击“预览”,如图在文字定制框内输入需定制的文字,点击“确认”

2.7-49_.png

图2.7-49

发现页面会刷新,文字内容变成定制的内容

2.7-50_.png

图2.7-50

2.7.5 表单:表单提交

mingyueliu 发表了文章 • 4 个评论 • 318 次浏览 • 2016-10-09 11:46 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

本节视频教程请点击此处。

提交表单之前,我们要给所需提交的元素命名。如图,在输入框“属性”面板下为其命名为“姓名”;





图2.7-12

同理,分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市” 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

本节视频教程请点击此处。

提交表单之前,我们要给所需提交的元素命名。如图,在输入框“属性”面板下为其命名为“姓名”;

2.7-12_.png

图2.7-12

同理,分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市”;

2.7-13_.png

图2.7-13

点击“舞台”上的“提交”按钮右边的“添加/编辑行为”按钮;

2.7-14_.png

图2.7-14

在弹出的“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件:“点击”,点击“编辑”按钮;

2.7-15_.png

图2.7-15

在“参数”对话框中选择“提交目标”为“默认数据服务”,勾选需提交的对象,并选择“操作成功后”和“操作失败后”都为“跳转到页”,点击“操作成功后”右边的“编辑”按钮;

2.7-16_.png

图2.7-16

在新弹出的“参数”对话框中设置页号为“2”,点击“确认”;

2.7-17_.png

图2.7-17

点击“操作失败后”右边的“编辑”按钮,在新弹出的“参数”对话框中设置页号为“3”,点击“确认”;

2.7-18_.png

图2.7-18

回到操作界面,添加第2、3页面,在第2页面添加文字素材“提交成功”,在第3页面添加文字素材“提交失败”;

2.7-19_.png

图2.7-19

点击“预览”效果;

2.7-20_.png

图2.7-20

保存作品,回到Mugeda账号主页,找到新保存的该作品;

2.7-21_.png

图2.7-21

点击作品右下角的三个竖点符号,在弹出的选框中点击选择“统计”;

2.7-22_.png

图2.7-22

2.7-23_.png

图2.7-23

进入数据统计页面,点击“表单数据”,进入表单数据统计页面,可观察到之前提交的信息。这就是提交表单和数据查询方法;

2.7-24_.png

图2.7-24

点击“导出数据”,可导出一个Excel形式的数据统计表;

2.7-25_.png

图2.7-25
 

2.7.4 表单:下拉菜单(列表框)

mingyueliu 发表了文章 • 1 个评论 • 181 次浏览 • 2016-10-09 11:40 • 来自相关话题

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

在工具条下找到“列表框”按钮,点击在“舞台”上“城市”右边位置添加一个列表框





图2.7-9

在列表框“属性”面板下调节相关属性设置,例如:
 
调节字体为“黑色”,
字体大小 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

在工具条下找到“列表框”按钮,点击在“舞台”上“城市”右边位置添加一个列表框

2.7-9_.png

图2.7-9

在列表框“属性”面板下调节相关属性设置,例如:
 
调节字体为“黑色”,
字体大小为“20”,
输入“选项”内容为“北京(BJ)”“天津(TJ)”,
“必填项”选择“是”。

注意:设置“选项”内容时,观察选项内容输入框内的提示语“一行一个值,格式如:中国(CN)。其中(CN)是表单提交的值”
 
2.7-10_.png

图2.7-10

点击“预览”,观察效果
 
2.7-11_.png

图2.7-11

2.7.3 表单:多选框

mingyueliu 发表了文章 • 0 个评论 • 173 次浏览 • 2016-10-09 11:34 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
在工具条下找到“多选框”按钮,点击在“舞台”上“爱好”右边位置添加一个多选框





图2.7-7

在多选框“属性”面板下调节相关属性设置,例如:
 
调节字体为“黑色”,
字体大小 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
在工具条下找到“多选框”按钮,点击在“舞台”上“爱好”右边位置添加一个多选框

2.7-7_.png

图2.7-7

在多选框“属性”面板下调节相关属性设置,例如:
 
调节字体为“黑色”,
字体大小为“20”,
“必填项”为“是”,
设置选题“标签”为“足球”“篮球”“乒乓球”三个(每行为一个标签),
“外观”选择为“标准”,
并调节“边框颜色”和“标记颜色”,
选择“变形”工具,调节“舞台”上多选框的位置、大小等。

2.7-8_.png

图2.7-8

2.7.2 表单:单选框

mingyueliu 发表了文章 • 1 个评论 • 191 次浏览 • 2016-10-09 11:18 • 来自相关话题

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

 在工具条下找到“单选框”按钮,点击在“舞台”上“性别”右边位置添加一个单选框





图2.7-4

在单选框“属性”面板下调节相关属性设置,例如:
 
调节字体为“黑色”,
字体大小 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 在工具条下找到“单选框”按钮,点击在“舞台”上“性别”右边位置添加一个单选框

2.7-4_.png

图2.7-4

在单选框“属性”面板下调节相关属性设置,例如:
 
调节字体为“黑色”,
字体大小为“20”,
“必填项”为“是”,
设置选题“标签”为“男”“女”两个(每行为一个标签)。
选择“变形”工具,调节“舞台”上单选框的位置、大小等。

2.7-5_.png

图2.7-5

另外,在“属性”面板内,如果将“外观”选为“定制”,还可自定义选择上传“未选中图片”以及“选中图片”的素材,此处不多做详述。

2.7-6_.png

图2.7-6

2.7.1 表单:输入文字(输入框)

mingyueliu 发表了文章 • 0 个评论 • 207 次浏览 • 2016-10-08 18:18 • 来自相关话题

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

 在工具条下找到表单工具,表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。





图2.7-1

 输入文字(输入框)

如图,在工具条下找到“输入框”按钮,点击在“ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 在工具条下找到表单工具,表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。

2.7-1_.png

图2.7-1

 输入文字(输入框)

如图,在工具条下找到“输入框”按钮,点击在“舞台”上“姓名”右边位置添加一个输入框

2.7-2_.png

图2.7-2

在输入框“属性”面板下调整相关属性,例如:
改变其字体为“黑体”,大小为“20”,
“提示文字”默认为“请输入”,
“类型”默认为“普通文本”,
“必填项”为“是”。
并用“变形”工具调整输入框在“舞台”上的大小与位置。

2.7-3_.png

图2.7-3

2.1.4 Mugeda界面与舞台:时间轴

0023116082991 回复了问题 • 4 人关注 • 1 个回复 • 374 次浏览 • 2016-10-03 15:21 • 来自相关话题