3.1.1 展示动画:邀请函

想要了解更多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

0 个评论

要回复文章请先登录注册