2.2.11 素材与媒体：虚拟现实/全景组件的用法
培训教程 • songyue 发表了文章 • 12 个评论 • 19308 次浏览 • 2016-10-09 16:13
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
点击查看全景演示
本节视频教程请点击此处。
简介：
虚拟现实场景组件，可以用来显示360度全景图片，并添 查看全部
虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
点击查看全景演示
本节视频教程请点击此处。
简介：
虚拟现实场景组件，可以用来显示360度全景图片，并添 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
点击查看全景演示
本节视频教程请点击此处。
简介：
虚拟现实场景组件，可以用来显示360度全景图片，并添加热点进行交互。
具体教程：
1、添加组件
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加：
在画布上拖动鼠标画出组件的位置。松开鼠标后，即可进入编辑场景图片的界面。
插入场景图片时，注意图片格式，规定如下：
选择图片后，会出现更多的编辑选项，各区域说明如下图所示：
1) 场景预览区：这里可以看到载入的图片渲染的场景效果，可以用鼠标拖动进行全景浏览；
2) 场景列表区：显示所有添加的场景，可以对场景添加、删除、编辑、排序；
3) 热点和场景编辑：用来切换热点和场景；
4) 全局配置：用来设置导航条以及导航条中出现的条目的选择；
很多编辑区域均配有即时帮助：
2、编辑场景
场景具有如下属性：
1) 图片：即全景的导入图片，支持等距长方投影和三维六面贴图两种格式；
2) 预览图：在全景载入之前的一个小尺寸图片，可选；
3) 缩略图：如果选择显示导航条，缩略图会显示在导航条上提示用户，尺寸是64*64；
4) 标题：每一个场景的名称，会显示在导航条上；
3、热点编辑
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下，可以添加、删除、移动热点，并未热点指定图形、动画和行为。
击热点列表下的添加图标，可以进入热点添加模式。
进入热点添加模式后，加号图标会变成橙色提醒用户。
在热点添加模式下，在场景预览区域点击即可添加新的热点。
点击热点列表中的任一热点，可以在列表中和预览窗口中定位热点，便于识别。
每个热点可编辑的属性有：
1) 热点名称：用于区分和识别不同热点的名称；
2) 图标：显示在场景中的图标；
3) 尺寸：图标的显示大小；
4) 行为：点击热点后激活的行为；
5) 操作：对行为进行编辑或者删除热点；
具体说明两点：图标和行为。
3、热点图标和行为
3.1 热点图标
热点图标Mugeda提供预置的图标，如图：
以外，用户可以上传任意的图片作为热点图标，在“+”位置添加，如图：
并指定相应的尺寸即可，如图：
3.2 热点行为 点击热点后，可以触发一系列的行为。该操作和为物体添加行为类似。
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时，需要指定场景名称和热点名称。其中，热点名称可选，如果不指定，切换场景后会切换到预览窗口所显示的区域。
4、场景属性
1) 显示导航：在屏幕下方出现的导航条。当包含2个以上的场景时，建议选择;
2) 允许陀螺仪控制：是否在导航条上显示陀螺仪控制的切换图标；
3) 左右分离视角：是否在导航条上显示左右分离视角；这个目前比较小众，建议不选；
5、场景渲染
场景渲染时，可以用鼠标或者手指拖动切换视。如果选择了显示导航，还会出现一个导航条提供进一步的选择包括：上一场景、显示缩略图、VR效果、收起导航栏、下一场景。
6、如何产生全景内容
产生全景内容的方式有两种：
1) 用可以产生全景内容的App
例如：Google Street View, Sphere, 百度圈景，等等。在苹果和安卓应用商店可以搜到。
2) 用全景拍摄设备。这些设备从简单到专业有很多选择，例如Insta360在京东的旗舰店： http://insta360.jd.com/
相关教学视频本周会上线，请留意论坛和群内消息哟~
虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
点击查看全景演示
本节视频教程请点击此处。
简介：
虚拟现实场景组件，可以用来显示360度全景图片，并添加热点进行交互。
具体教程：
1、添加组件
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加：
在画布上拖动鼠标画出组件的位置。松开鼠标后，即可进入编辑场景图片的界面。
插入场景图片时，注意图片格式，规定如下：
选择图片后，会出现更多的编辑选项，各区域说明如下图所示：
1) 场景预览区：这里可以看到载入的图片渲染的场景效果，可以用鼠标拖动进行全景浏览；
2) 场景列表区：显示所有添加的场景，可以对场景添加、删除、编辑、排序；
3) 热点和场景编辑：用来切换热点和场景；
4) 全局配置：用来设置导航条以及导航条中出现的条目的选择；
很多编辑区域均配有即时帮助：
2、编辑场景
场景具有如下属性：
1) 图片：即全景的导入图片，支持等距长方投影和三维六面贴图两种格式；
2) 预览图：在全景载入之前的一个小尺寸图片，可选；
3) 缩略图：如果选择显示导航条，缩略图会显示在导航条上提示用户，尺寸是64*64；
4) 标题：每一个场景的名称，会显示在导航条上；
3、热点编辑
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下，可以添加、删除、移动热点，并未热点指定图形、动画和行为。
击热点列表下的添加图标，可以进入热点添加模式。
进入热点添加模式后，加号图标会变成橙色提醒用户。
在热点添加模式下，在场景预览区域点击即可添加新的热点。
点击热点列表中的任一热点，可以在列表中和预览窗口中定位热点，便于识别。
每个热点可编辑的属性有：
1) 热点名称：用于区分和识别不同热点的名称；
2) 图标：显示在场景中的图标；
3) 尺寸：图标的显示大小；
4) 行为：点击热点后激活的行为；
5) 操作：对行为进行编辑或者删除热点；
具体说明两点：图标和行为。
3、热点图标和行为
3.1 热点图标
热点图标Mugeda提供预置的图标，如图：
以外，用户可以上传任意的图片作为热点图标，在“+”位置添加，如图：
并指定相应的尺寸即可，如图：
3.2 热点行为 点击热点后，可以触发一系列的行为。该操作和为物体添加行为类似。
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时，需要指定场景名称和热点名称。其中，热点名称可选，如果不指定，切换场景后会切换到预览窗口所显示的区域。
4、场景属性
1) 显示导航：在屏幕下方出现的导航条。当包含2个以上的场景时，建议选择;
2) 允许陀螺仪控制：是否在导航条上显示陀螺仪控制的切换图标；
3) 左右分离视角：是否在导航条上显示左右分离视角；这个目前比较小众，建议不选；
5、场景渲染
场景渲染时，可以用鼠标或者手指拖动切换视。如果选择了显示导航，还会出现一个导航条提供进一步的选择包括：上一场景、显示缩略图、VR效果、收起导航栏、下一场景。
6、如何产生全景内容
产生全景内容的方式有两种：
1) 用可以产生全景内容的App
例如：Google Street View, Sphere, 百度圈景，等等。在苹果和安卓应用商店可以搜到。
2) 用全景拍摄设备。这些设备从简单到专业有很多选择，例如Insta360在京东的旗舰店： http://insta360.jd.com/
相关教学视频本周会上线，请留意论坛和群内消息哟~
2.10.2 判断:逻辑表达式判断
原创分享 • mingyueliu 发表了文章 • 3 个评论 • 14091 次浏览 • 2016-10-09 16:09
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；
如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”， 查看全部
本节视频教程请点击此处。
逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；
如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”， 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；
如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”，具体公式为“{{圆判断.left }}==29”，即设置了当“圆判断”圆形的左值等于29时，点击矩形跳转下一页；
图2.9-14
点击“预览”观察效果，由于此时“舞台”上的“圆判断”圆形左值正好是29，即点击矩形可跳转至下一页。
图2.9-15
同理，也可将公式改为“{{圆判断.left }}>15”，因“舞台”上的“圆判断”圆形左值等于29，即大于15，因此点击矩形仍可跳转至下一页。
图2.9-16
逻辑表达式可执行多种判断条件，如图，在“舞台”上添加一个输入框，命名为“sr”；
图2.9-17
同理，回到矩形“下一页”编辑行为的“参数”对话框，将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时，点击矩形才可跳转至下一页。
注意：“&&”表示“并且”
图2.9-18
点击“预览”观察效果；
图2.9-19
同理，将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时，点击矩形才可跳转至下一页。点击“预览”观察效果。
注意：“||”表示“或者”
图2.9-20
附件：逻辑表达式概念文档
本节视频教程请点击此处。
逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；
如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”，具体公式为“{{圆判断.left }}==29”，即设置了当“圆判断”圆形的左值等于29时，点击矩形跳转下一页；
图2.9-14
点击“预览”观察效果，由于此时“舞台”上的“圆判断”圆形左值正好是29，即点击矩形可跳转至下一页。
图2.9-15
同理，也可将公式改为“{{圆判断.left }}>15”，因“舞台”上的“圆判断”圆形左值等于29，即大于15，因此点击矩形仍可跳转至下一页。
图2.9-16
逻辑表达式可执行多种判断条件，如图，在“舞台”上添加一个输入框，命名为“sr”；
图2.9-17
同理，回到矩形“下一页”编辑行为的“参数”对话框，将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时，点击矩形才可跳转至下一页。
注意：“&&”表示“并且”
图2.9-18
点击“预览”观察效果；
图2.9-19
同理，将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时，点击矩形才可跳转至下一页。点击“预览”观察效果。
注意：“||”表示“或者”
图2.9-20
附件：逻辑表达式概念文档
2.10.1 判断:条件判断
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 8991 次浏览 • 2016-10-09 15:47
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
条件判断即通过一个物体的属性条件，判断物体行为是否执行;
如下图，点击在“舞台”上添加一个矩形；
图2.9-1
为矩形添加两个行为：
“跳转下一页”：点击矩形的“添加/ 查看全部
本节视频教程请点击此处。
条件判断即通过一个物体的属性条件，判断物体行为是否执行;
如下图，点击在“舞台”上添加一个矩形；
图2.9-1
为矩形添加两个行为：
“跳转下一页”：点击矩形的“添加/ 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
条件判断即通过一个物体的属性条件，判断物体行为是否执行;
如下图，点击在“舞台”上添加一个矩形；
图2.9-1
为矩形添加两个行为：
“跳转下一页”：点击矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件：“点击”，点击“确认”
“禁止翻页”：在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“点击”，点击“确认”
图2.9-2
新建下一页，为便于识别，在下一页中添加一张背景图片素材。
图2.9-3
回到上一页，新建一个输入框，为其命名为“判断”；
图2.9-4
点击矩形的“添加/编辑行为”按钮；
图2.9-5
在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮；
图2.9-6
在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”；
元素名称：“判断”
考察属性：“文本取值”
逻辑条件：“等于”
参考值：“100”
即设置了当“判断”输入框内容等于100时，点击矩形跳转到下一页的行为；
图2.9-7
点击“预览”观察效果；
图2.9-8
如下图，删除输入框，添加一个圆形，将其命名为“圆判断”；
图2.9-9
同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框，点击“下一页”行为的“编辑”按钮进入“参数”对话框；
图2.9-10
设置“执行条件”为“检查元素状态”；
元素名称：“圆判断”
考察属性：“左”
逻辑条件：“不等于”
参考值：“30”
即设置了当“圆判断”圆形左值不等于30时，点击矩形跳转下一页的行为；
图2.9-11
点击“预览”观察效果，如下图，此时“圆判断”的左值为“29”，即不等于30，因此点击矩形即会跳转至下一页；
图2.9-12
图2.9-13
本节视频教程请点击此处。
条件判断即通过一个物体的属性条件，判断物体行为是否执行;
如下图，点击在“舞台”上添加一个矩形；
图2.9-1
为矩形添加两个行为：
“跳转下一页”：点击矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件：“点击”，点击“确认”
“禁止翻页”：在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“点击”，点击“确认”
图2.9-2
新建下一页，为便于识别，在下一页中添加一张背景图片素材。
图2.9-3
回到上一页，新建一个输入框，为其命名为“判断”；
图2.9-4
点击矩形的“添加/编辑行为”按钮；
图2.9-5
在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮；
图2.9-6
在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”；
元素名称：“判断”
考察属性：“文本取值”
逻辑条件：“等于”
参考值：“100”
即设置了当“判断”输入框内容等于100时，点击矩形跳转到下一页的行为；
图2.9-7
点击“预览”观察效果；
图2.9-8
如下图，删除输入框，添加一个圆形，将其命名为“圆判断”；
图2.9-9
同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框，点击“下一页”行为的“编辑”按钮进入“参数”对话框；
图2.9-10
设置“执行条件”为“检查元素状态”；
元素名称：“圆判断”
考察属性：“左”
逻辑条件：“不等于”
参考值：“30”
即设置了当“圆判断”圆形左值不等于30时，点击矩形跳转下一页的行为；
图2.9-11
点击“预览”观察效果，如下图，此时“圆判断”的左值为“29”，即不等于30，因此点击矩形即会跳转至下一页；
图2.9-12
图2.9-13
2.8.4 关联绑定：公式关联
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6486 次浏览 • 2016-10-09 15:29
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；
图2.8-38
如 查看全部
本节视频教程请点击此处。
如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；
图2.8-38
如 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；
图2.8-38
如图，选中被控对象文本框，在其“属性”面板下点击字体右边的“关联”按钮，在下拉的关联属性菜单栏中设置：
关联对象：“遥控器3”
关联属性：“左”
关联方式：“公式关联”
被控量=“关联属性”
即设置了被控对象文本框的内容等于“遥控器3”圆形的“左”值；
图2.8-39
点击“预览”观察效果，我们发现，水平移动“控制器3”圆形，其“左”值被体现在文本框内；
图2.8-40
回到被控对象输入框的“文字”关联属性栏下，修改关联公式为：被控量=关联属性*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值的三倍。点击“预览”观察效果。
图2.8-41
也可修改关联公式为：被控量=（关联属性+25）*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值加25再乘以3。
图2.8-42
点击“预览”观察效果。如图，当“遥控器3”的“左”值等于0时，输入框的内容为（0+25）*3=75
图2.8-43
本节视频教程请点击此处。
如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；
图2.8-38
如图，选中被控对象文本框，在其“属性”面板下点击字体右边的“关联”按钮，在下拉的关联属性菜单栏中设置：
关联对象：“遥控器3”
关联属性：“左”
关联方式：“公式关联”
被控量=“关联属性”
即设置了被控对象文本框的内容等于“遥控器3”圆形的“左”值；
图2.8-39
点击“预览”观察效果，我们发现，水平移动“控制器3”圆形，其“左”值被体现在文本框内；
图2.8-40
回到被控对象输入框的“文字”关联属性栏下，修改关联公式为：被控量=关联属性*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值的三倍。点击“预览”观察效果。
图2.8-41
也可修改关联公式为：被控量=（关联属性+25）*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值加25再乘以3。
图2.8-42
点击“预览”观察效果。如图，当“遥控器3”的“左”值等于0时，输入框的内容为（0+25）*3=75
图2.8-43
2.8.3 关联绑定：自动关联
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 8663 次浏览 • 2016-10-09 15:22
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；
图2.8-32
并为圆形命名为“遥控器“；
查看全部
本节视频教程请点击此处。
如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；
图2.8-32
并为圆形命名为“遥控器“；
查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；
图2.8-32
并为圆形命名为“遥控器“；
图2.8-33
同理，选中被控对象矩形，在其“属性”面板下点击其“左”属性右边的“关联”按钮，在下拉的关联属性菜单内设置：
关联对象：“遥控器”
关联属性：“左”
关联方式：“自动关联”
点击弹出的“+”符号
图2.8-34
如下图，点击“+”符号后出现主控量与被控量的输入框，输入：
当主控量=“0”时被控量=“320”
当主控量=“150”时被控量=“0”
当主控量=“300”时被控量=“320”
即设置了当“遥控器”圆形的“左”值等于0时，矩形的“左”值等于“320”；
当“遥控器”圆形的“左”值等于150时，矩形的“左”值等于“0”；
当“遥控器”圆形的“左”值等于“300”时，矩形的“左”值等于“320”。
设置了这几个节点后，系统会自动设置调节中间的动画。
注意：主控量为控制物体的关联属性（此处为“控制器”圆形的“左”值）
被控量为被控制物体的关联属性（此处为矩形的“左”值）
图2.8-35
点击“预览”观察效果
图2.8-36
如下图，自动关联也可只控制一部分动画，例如设置自动关联属性为：
当主控量=“100”时被控量=“0”
当主控量=“200”时被控量=“320”
图2.8-37
点击“预览”，观察发现只有当“遥控器”圆形的“左”值在100-200区间时，矩形的动画会从左移向右，而当“遥控器”圆形的“左”值在100以下或200以上时，矩形不移动位置。
本节视频教程请点击此处。
如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；
图2.8-32
并为圆形命名为“遥控器“；
图2.8-33
同理，选中被控对象矩形，在其“属性”面板下点击其“左”属性右边的“关联”按钮，在下拉的关联属性菜单内设置：
关联对象：“遥控器”
关联属性：“左”
关联方式：“自动关联”
点击弹出的“+”符号
图2.8-34
如下图，点击“+”符号后出现主控量与被控量的输入框，输入：
当主控量=“0”时被控量=“320”
当主控量=“150”时被控量=“0”
当主控量=“300”时被控量=“320”
即设置了当“遥控器”圆形的“左”值等于0时，矩形的“左”值等于“320”；
当“遥控器”圆形的“左”值等于150时，矩形的“左”值等于“0”；
当“遥控器”圆形的“左”值等于“300”时，矩形的“左”值等于“320”。
设置了这几个节点后，系统会自动设置调节中间的动画。
注意：主控量为控制物体的关联属性（此处为“控制器”圆形的“左”值）
被控量为被控制物体的关联属性（此处为矩形的“左”值）
图2.8-35
点击“预览”观察效果
图2.8-36
如下图，自动关联也可只控制一部分动画，例如设置自动关联属性为：
当主控量=“100”时被控量=“0”
当主控量=“200”时被控量=“320”
图2.8-37
点击“预览”，观察发现只有当“遥控器”圆形的“左”值在100-200区间时，矩形的动画会从左移向右，而当“遥控器”圆形的“左”值在100以下或200以上时，矩形不移动位置。
2.8.2 关联绑定：属性关联
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 11232 次浏览 • 2016-10-09 15:14
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
图2.8-20
如下图，在“舞台”上添加一个输入框；
图2.8-21
为输入框命名 查看全部
本节视频教程请点击此处。
我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
图2.8-20
如下图，在“舞台”上添加一个输入框；
图2.8-21
为输入框命名 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
图2.8-20
如下图，在“舞台”上添加一个输入框；
图2.8-21
为输入框命名为“输入框”；
图2.8-22
选中“属性关联”元素，在其“属性”面板下点击其透明度右边的“关联”按钮；
图2.8-23
在弹出的下拉菜单中填写关联属性：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素的透明度取值；
图2.8-24
可点击“预览”观察效果；
图2.8-25
同理，可设置“属性关联”元素的“上”的关联属性为：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素“上”的取值
图2.8-26
点击“预览”观察效果；
图2.8-27
同理，将输入框删除，在“舞台”上新添加一个矩形，在其“属性”面板下设置其“拖动/旋转”为“垂直拖动”
图2.8-28
为矩形命名为“拖动遥控”；
图2.8-29
如下图，同理点击“属性关联”的“上”属性右边的“关联”按钮，设置关联属性为：
关联对象：“拖动遥控”
关联属性：“上”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“拖动遥控”矩形的上值等于“属性关联”元素“上”的取值
图2.8-30
点击“预览”观察效果；
图2.8-31
本节视频教程请点击此处。
我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
图2.8-20
如下图，在“舞台”上添加一个输入框；
图2.8-21
为输入框命名为“输入框”；
图2.8-22
选中“属性关联”元素，在其“属性”面板下点击其透明度右边的“关联”按钮；
图2.8-23
在弹出的下拉菜单中填写关联属性：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素的透明度取值；
图2.8-24
可点击“预览”观察效果；
图2.8-25
同理，可设置“属性关联”元素的“上”的关联属性为：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素“上”的取值
图2.8-26
点击“预览”观察效果；
图2.8-27
同理，将输入框删除，在“舞台”上新添加一个矩形，在其“属性”面板下设置其“拖动/旋转”为“垂直拖动”
图2.8-28
为矩形命名为“拖动遥控”；
图2.8-29
如下图，同理点击“属性关联”的“上”属性右边的“关联”按钮，设置关联属性为：
关联对象：“拖动遥控”
关联属性：“上”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“拖动遥控”矩形的上值等于“属性关联”元素“上”的取值
图2.8-30
点击“预览”观察效果；
图2.8-31
2.8.1 关联绑定：动画关联
原创分享 • mingyueliu 发表了文章 • 4 个评论 • 16297 次浏览 • 2016-10-09 15:00
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。
1.“舞台”上的动画关联
本节视频教程请点击此处。
“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台 查看全部
在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。
1.“舞台”上的动画关联
本节视频教程请点击此处。
“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。
1.“舞台”上的动画关联
本节视频教程请点击此处。
“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台”添加一个矩形素材，设置其由左移到右的动画效果。动画时间为第1帧到第100帧。
图2.8-1
新建图层1，在图层1第1帧位置上点击添加一个矩形在“舞台”上，在矩形“属性”面板内改变其“拖动/旋转”属性为“水平拖动”；
图2.8-2
在“属性”面板下为新添加的矩形命名为“遥控器”；
图2.8-3
鼠标点击“舞台”空白地方，在“舞台”的“属性”面板内找到“动画关联”选项，选择“启用”，点击右边弹出的“关联”按钮；
图2.8-4
在弹出的下拉菜单中填写关联属性：
关联对象：“遥控器”（即之前命名为“遥控器”的小矩形）
关联属性：“左”（即“遥控器”小矩形的最左值离舞台左端的距离值）
开始值：“0”
结束值：“100”
播放模式：“切换”
即设置好了当“遥控器”小矩形的最左端离舞台左端的距离值为0-100时，动画启动播放，当距离值大于100时，动画停止播放。
图2.8-5
如下图，为方便观察，我们在“舞台”上添加一个宽度为100的紫色矩形，点击“预览”，观察到当“遥控器”小矩形的最左端在紫色矩形（其左值0-100）之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在紫色矩形（其左值100以上）之外时，上方的矩形停止播放动画。
图2.8-6
同理，将“舞台”上的关联属性设为开始值：“100”；结束值：“200”
图2.8-7
点击“预览”可观察到动画效果为当“遥控器”小矩形的最左端在离舞台左端值100-200之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在离舞台左端值0-100或200之外时，上方的矩形停止播放动画。
图2.8-8
同理，修改“舞台”上的关联属性中“播放模式”为“同步”，即可设置当“遥控器”小矩形的最左端在离舞台左端值100时，上方的矩形动画开始从第一帧播放；当“遥控器”小矩形的最左端在离舞台左端值0-200之间，上方的矩形动画同步播放；当“遥控器”小矩形的最左端在离舞台左端值200时，上方的矩形动画播放至最后一帧。
图2.8-9
可单击“预览”观察动画效果
图2.8-10
2.“元件”的动画关联
本节视频教程请点击此处。
“元件”的动画关联与“舞台”的动画关联相似，区别是将对象由“舞台”转变为“元件”。
如图，在“舞台”上添加一个矩形，选中矩形，右键→“转换为元件”，双击矩形进入元件编辑页面。
图2.8-11
如下图，为矩形元件设置一个从左向右移动的动画效果，动画区间为0-50帧
图2.8-12
点击页面左上角“舞台”字样回到“舞台”，在“舞台”上新建一个小矩形，为小矩形命名为“元件遥控器”
图2.8-13
在“元件遥控器”小矩形“属性”面板下找到“拖动/旋转”，选择“垂直拖动”，即设置了可垂直拖动“元件遥控器”
图2.8-14
选中矩形元件，在其“属性”面板下找到“动画关联”，选择“启动”，点击弹出的“关联”按钮
图2.8-15
在弹出的下拉菜单中填写关联属性：
关联对象：“元件遥控器”
关联属性：“上”（即“元件遥控器”小矩形的最上端离舞台上端的距离值）
开始值：“200”
结束值：“400”
播放模式：“切换”
即设置好了当“元件遥控器”小矩形的最上端离舞台上端的距离值为200-400之间时，元件动画启动播放，当距离值小于200或大于400时，元件动画停止播放。
图2.8-16
可点击“预览”，预览效果
图2.8-17
同理，在元件矩形的“属性”面板下设置关联属性的“播放模式”为“同步”，即可设置当“元件遥控器”小矩形的最上端在离舞台上端值200时，元件矩形动画开始从第一帧播放；当“元件遥控器”小矩形的最上端在离舞台上端值200-400之间，元件矩形动画同步播放；当“元件遥控器”小矩形的最上端在离舞台上端值400时，元件矩形动画播放至最后一帧。
图2.8-18
可点击“预览”，预览效果
图2.8-19
在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。
1.“舞台”上的动画关联
本节视频教程请点击此处。
“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台”添加一个矩形素材，设置其由左移到右的动画效果。动画时间为第1帧到第100帧。
图2.8-1
新建图层1，在图层1第1帧位置上点击添加一个矩形在“舞台”上，在矩形“属性”面板内改变其“拖动/旋转”属性为“水平拖动”；
图2.8-2
在“属性”面板下为新添加的矩形命名为“遥控器”；
图2.8-3
鼠标点击“舞台”空白地方，在“舞台”的“属性”面板内找到“动画关联”选项，选择“启用”，点击右边弹出的“关联”按钮；
图2.8-4
在弹出的下拉菜单中填写关联属性：
关联对象：“遥控器”（即之前命名为“遥控器”的小矩形）
关联属性：“左”（即“遥控器”小矩形的最左值离舞台左端的距离值）
开始值：“0”
结束值：“100”
播放模式：“切换”
即设置好了当“遥控器”小矩形的最左端离舞台左端的距离值为0-100时，动画启动播放，当距离值大于100时，动画停止播放。
图2.8-5
如下图，为方便观察，我们在“舞台”上添加一个宽度为100的紫色矩形，点击“预览”，观察到当“遥控器”小矩形的最左端在紫色矩形（其左值0-100）之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在紫色矩形（其左值100以上）之外时，上方的矩形停止播放动画。
图2.8-6
同理，将“舞台”上的关联属性设为开始值：“100”；结束值：“200”
图2.8-7
点击“预览”可观察到动画效果为当“遥控器”小矩形的最左端在离舞台左端值100-200之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在离舞台左端值0-100或200之外时，上方的矩形停止播放动画。
图2.8-8
同理，修改“舞台”上的关联属性中“播放模式”为“同步”，即可设置当“遥控器”小矩形的最左端在离舞台左端值100时，上方的矩形动画开始从第一帧播放；当“遥控器”小矩形的最左端在离舞台左端值0-200之间，上方的矩形动画同步播放；当“遥控器”小矩形的最左端在离舞台左端值200时，上方的矩形动画播放至最后一帧。
图2.8-9
可单击“预览”观察动画效果
图2.8-10
2.“元件”的动画关联
本节视频教程请点击此处。
“元件”的动画关联与“舞台”的动画关联相似，区别是将对象由“舞台”转变为“元件”。
如图，在“舞台”上添加一个矩形，选中矩形，右键→“转换为元件”，双击矩形进入元件编辑页面。
图2.8-11
如下图，为矩形元件设置一个从左向右移动的动画效果，动画区间为0-50帧
图2.8-12
点击页面左上角“舞台”字样回到“舞台”，在“舞台”上新建一个小矩形，为小矩形命名为“元件遥控器”
图2.8-13
在“元件遥控器”小矩形“属性”面板下找到“拖动/旋转”，选择“垂直拖动”，即设置了可垂直拖动“元件遥控器”
图2.8-14
选中矩形元件，在其“属性”面板下找到“动画关联”，选择“启动”，点击弹出的“关联”按钮
图2.8-15
在弹出的下拉菜单中填写关联属性：
关联对象：“元件遥控器”
关联属性：“上”（即“元件遥控器”小矩形的最上端离舞台上端的距离值）
开始值：“200”
结束值：“400”
播放模式：“切换”
即设置好了当“元件遥控器”小矩形的最上端离舞台上端的距离值为200-400之间时，元件动画启动播放，当距离值小于200或大于400时，元件动画停止播放。
图2.8-16
可点击“预览”，预览效果
图2.8-17
同理，在元件矩形的“属性”面板下设置关联属性的“播放模式”为“同步”，即可设置当“元件遥控器”小矩形的最上端在离舞台上端值200时，元件矩形动画开始从第一帧播放；当“元件遥控器”小矩形的最上端在离舞台上端值200-400之间，元件矩形动画同步播放；当“元件遥控器”小矩形的最上端在离舞台上端值400时，元件矩形动画播放至最后一帧。
图2.8-18
可点击“预览”，预览效果
图2.8-19
2.7.6 表单:默认表单／定制文字
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 10766 次浏览 • 2016-10-09 12:00
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
1.编辑表单
本节视频教程请点击此处。
如图，新建一个页面，在“表单”工具条下点击“表单”按钮
图2.7-26
如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提 查看全部
1.编辑表单
本节视频教程请点击此处。
如图，新建一个页面，在“表单”工具条下点击“表单”按钮
图2.7-26
如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
1.编辑表单
本节视频教程请点击此处。
如图，新建一个页面，在“表单”工具条下点击“表单”按钮
图2.7-26
如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-27
在弹出的“添加表单项”对话框中输入选项“名称”为“name”，“描述”为“姓名”，“类型”为“输入框”，“取值”为“张三”，点击“保存”，点击“确认”
图2.7-28
点击“预览”，在预览中输入姓名为“李四”，点击“确认”，即出现“定制成功”字样，点击“确认”，数据即提交至后台服务器中。
图2.7-29
图2.7-30
回到操作界面，点击“舞台”上的默认表单，在其“属性”面板内点击“编辑”按钮，进入“编辑表单”对话框
图2.7-31
选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-32
回到操作界面后，点击“预览”，在输入框内输入一个新名字，点击“确认”，刷新后H5页面即变成新输入的名字，这就是微信实时定制名字，它的数据不会被提交至后台。
图2.7-33
如下图，回到“编辑表单”对话框，点击“预置表单项（请选择）”按钮，在下拉菜单下可选择“手机号码”“电子邮件”等多种选项。
图2.7-34
如下图，点击选择“联系方式（手机号码）”，在弹出的注意对话框中点击“确定”
图2.7-35
回到操作界面，点击“预览”，发现会出现默认的“名称”和“手机号码”两个选项内容
图2.7-36
2.定制文字
本节视频教程请点击此处。
如下图，在新页面上添加三个文字素材，分别为文字命名为“to”“greetings”“from”
图2.7-37
图2.7-38
图2.7-39
选中“定制文字”按钮素材，在其“属性”面板下选择“动作”为“表单”，点击“定制文字”按钮素材的绿色“添加/编辑行为”按钮
图2.7-40
在弹出的“编辑表单”对话框中设置相关表单属性，填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-41
在弹出的“添加表单项”对话框中输入“名称”为“to”（连接到之前命名为“to”的文字框素材），“描述”为“收件人”，“类型”为“输入框”，“取值”为“亲爱的战友”，点击“保存”
图2.7-42
同理点击“添加表单项”按钮，再次添加“名称”为“greetings”（连接到之前命名为“greetings”的文字框素材），“描述”为“祝福语”，“类型”为“文本域”，“取值”可不填，点击“保存”
图2.7-43
同理点击“添加表单项”按钮，再次添加“名称”为“from”（连接到之前命名为“from”的文字框素材），“描述”为“发件人”，“类型”为“输入框”，“取值”为“你的朋友”，点击“保存”
图2.7-44
点击“预览”，如图，点击“定制文字”按钮，即可出现“定制文字”对话框，输入需定制的内容，点击“确认”，即可将定制的文字数据提交至后台。
图2.7-45
图2.7-46
如图，回到“舞台”，点击“舞台”上的“定制文字”按钮的“添加/编辑行为”
图2.7-47
在弹出的“编辑表单”对话框内容选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-48
回到“舞台”，点击“预览”，如图在文字定制框内输入需定制的文字，点击“确认”
图2.7-49
发现页面会刷新，文字内容变成定制的内容
图2.7-50
1.编辑表单
本节视频教程请点击此处。
如图，新建一个页面，在“表单”工具条下点击“表单”按钮
图2.7-26
如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-27
在弹出的“添加表单项”对话框中输入选项“名称”为“name”，“描述”为“姓名”，“类型”为“输入框”，“取值”为“张三”，点击“保存”，点击“确认”
图2.7-28
点击“预览”，在预览中输入姓名为“李四”，点击“确认”，即出现“定制成功”字样，点击“确认”，数据即提交至后台服务器中。
图2.7-29
图2.7-30
回到操作界面，点击“舞台”上的默认表单，在其“属性”面板内点击“编辑”按钮，进入“编辑表单”对话框
图2.7-31
选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-32
回到操作界面后，点击“预览”，在输入框内输入一个新名字，点击“确认”，刷新后H5页面即变成新输入的名字，这就是微信实时定制名字，它的数据不会被提交至后台。
图2.7-33
如下图，回到“编辑表单”对话框，点击“预置表单项（请选择）”按钮，在下拉菜单下可选择“手机号码”“电子邮件”等多种选项。
图2.7-34
如下图，点击选择“联系方式（手机号码）”，在弹出的注意对话框中点击“确定”
图2.7-35
回到操作界面，点击“预览”，发现会出现默认的“名称”和“手机号码”两个选项内容
图2.7-36
2.定制文字
本节视频教程请点击此处。
如下图，在新页面上添加三个文字素材，分别为文字命名为“to”“greetings”“from”
图2.7-37
图2.7-38
图2.7-39
选中“定制文字”按钮素材，在其“属性”面板下选择“动作”为“表单”，点击“定制文字”按钮素材的绿色“添加/编辑行为”按钮
图2.7-40
在弹出的“编辑表单”对话框中设置相关表单属性，填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-41
在弹出的“添加表单项”对话框中输入“名称”为“to”（连接到之前命名为“to”的文字框素材），“描述”为“收件人”，“类型”为“输入框”，“取值”为“亲爱的战友”，点击“保存”
图2.7-42
同理点击“添加表单项”按钮，再次添加“名称”为“greetings”（连接到之前命名为“greetings”的文字框素材），“描述”为“祝福语”，“类型”为“文本域”，“取值”可不填，点击“保存”
图2.7-43
同理点击“添加表单项”按钮，再次添加“名称”为“from”（连接到之前命名为“from”的文字框素材），“描述”为“发件人”，“类型”为“输入框”，“取值”为“你的朋友”，点击“保存”
图2.7-44
点击“预览”，如图，点击“定制文字”按钮，即可出现“定制文字”对话框，输入需定制的内容，点击“确认”，即可将定制的文字数据提交至后台。
图2.7-45
图2.7-46
如图，回到“舞台”，点击“舞台”上的“定制文字”按钮的“添加/编辑行为”
图2.7-47
在弹出的“编辑表单”对话框内容选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-48
回到“舞台”，点击“预览”，如图在文字定制框内输入需定制的文字，点击“确认”
图2.7-49
发现页面会刷新，文字内容变成定制的内容
图2.7-50
2.7.5 表单:表单提交
原创分享 • mingyueliu 发表了文章 • 18 个评论 • 13050 次浏览 • 2016-10-09 11:46
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；
图2.7-12
同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市” 查看全部
本节视频教程请点击此处。
提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；
图2.7-12
同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市” 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；
图2.7-12
同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市”；
图2.7-13
点击“舞台”上的“提交”按钮右边的“添加/编辑行为”按钮；
图2.7-14
在弹出的“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮；
图2.7-15
在“参数”对话框中选择“提交目标”为“默认数据服务”，勾选需提交的对象，并选择“操作成功后”和“操作失败后”都为“跳转到页”，点击“操作成功后”右边的“编辑”按钮；
图2.7-16
在新弹出的“参数”对话框中设置页号为“2”，点击“确认”；
图2.7-17
点击“操作失败后”右边的“编辑”按钮，在新弹出的“参数”对话框中设置页号为“3”，点击“确认”；
图2.7-18
回到操作界面，添加第2、3页面，在第2页面添加文字素材“提交成功”，在第3页面添加文字素材“提交失败”；
图2.7-19
点击“预览”效果；
图2.7-20
保存作品，回到Mugeda账号主页，找到新保存的该作品；
图2.7-21
点击作品右下角的三个竖点符号，在弹出的选框中点击选择“统计”；
图2.7-22
图2.7-23
进入数据统计页面，点击“表单数据”，进入表单数据统计页面，可观察到之前提交的信息。这就是提交表单和数据查询方法；
图2.7-24
点击“导出数据”，可导出一个Excel形式的数据统计表；
图2.7-25
本节视频教程请点击此处。
提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；
图2.7-12
同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市”；
图2.7-13
点击“舞台”上的“提交”按钮右边的“添加/编辑行为”按钮；
图2.7-14
在弹出的“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮；
图2.7-15
在“参数”对话框中选择“提交目标”为“默认数据服务”，勾选需提交的对象，并选择“操作成功后”和“操作失败后”都为“跳转到页”，点击“操作成功后”右边的“编辑”按钮；
图2.7-16
在新弹出的“参数”对话框中设置页号为“2”，点击“确认”；
图2.7-17
点击“操作失败后”右边的“编辑”按钮，在新弹出的“参数”对话框中设置页号为“3”，点击“确认”；
图2.7-18
回到操作界面，添加第2、3页面，在第2页面添加文字素材“提交成功”，在第3页面添加文字素材“提交失败”；
图2.7-19
点击“预览”效果；
图2.7-20
保存作品，回到Mugeda账号主页，找到新保存的该作品；
图2.7-21
点击作品右下角的三个竖点符号，在弹出的选框中点击选择“统计”；
图2.7-22
图2.7-23
进入数据统计页面，点击“表单数据”，进入表单数据统计页面，可观察到之前提交的信息。这就是提交表单和数据查询方法；
图2.7-24
点击“导出数据”，可导出一个Excel形式的数据统计表；
图2.7-25
2.7.4 表单:下拉菜单（列表框）
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 7428 次浏览 • 2016-10-09 11:40
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程）
本节视频教程请点击此处。
在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框
图2.7-9
在列表框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小 查看全部
本节视频教程请点击此处。
在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框
图2.7-9
在列表框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程）
本节视频教程请点击此处。
在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框
图2.7-9
在列表框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
输入“选项”内容为“北京（BJ）”“天津（TJ）”，
“必填项”选择“是”。
注意：设置“选项”内容时，观察选项内容输入框内的提示语“一行一个值，格式如：中国（CN）。其中（CN）是表单提交的值”
图2.7-10
点击“预览”，观察效果
图2.7-11
本节视频教程请点击此处。
在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框
图2.7-9
在列表框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
输入“选项”内容为“北京（BJ）”“天津（TJ）”，
“必填项”选择“是”。
注意：设置“选项”内容时，观察选项内容输入框内的提示语“一行一个值，格式如：中国（CN）。其中（CN）是表单提交的值”
图2.7-10
点击“预览”，观察效果
图2.7-11
2.7.3 表单:多选框
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 7660 次浏览 • 2016-10-09 11:34
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到“多选框”按钮，点击在“舞台”上“爱好”右边位置添加一个多选框
图2.7-7
在多选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小 查看全部
本节视频教程请点击此处。
在工具条下找到“多选框”按钮，点击在“舞台”上“爱好”右边位置添加一个多选框
图2.7-7
在多选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到“多选框”按钮，点击在“舞台”上“爱好”右边位置添加一个多选框
图2.7-7
在多选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“足球”“篮球”“乒乓球”三个（每行为一个标签），
“外观”选择为“标准”，
并调节“边框颜色”和“标记颜色”，
选择“变形”工具，调节“舞台”上多选框的位置、大小等。
图2.7-8
本节视频教程请点击此处。
在工具条下找到“多选框”按钮，点击在“舞台”上“爱好”右边位置添加一个多选框
图2.7-7
在多选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“足球”“篮球”“乒乓球”三个（每行为一个标签），
“外观”选择为“标准”，
并调节“边框颜色”和“标记颜色”，
选择“变形”工具，调节“舞台”上多选框的位置、大小等。
图2.7-8
2.7.2 表单:单选框
原创分享 • mingyueliu 发表了文章 • 3 个评论 • 8375 次浏览 • 2016-10-09 11:18
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到“单选框”按钮，点击在“舞台”上“性别”右边位置添加一个单选框
图2.7-4
在单选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小 查看全部
本节视频教程请点击此处。
在工具条下找到“单选框”按钮，点击在“舞台”上“性别”右边位置添加一个单选框
图2.7-4
在单选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到“单选框”按钮，点击在“舞台”上“性别”右边位置添加一个单选框
图2.7-4
在单选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“男”“女”两个（每行为一个标签）。
选择“变形”工具，调节“舞台”上单选框的位置、大小等。
图2.7-5
另外，在“属性”面板内，如果将“外观”选为“定制”，还可自定义选择上传“未选中图片”以及“选中图片”的素材，此处不多做详述。
图2.7-6
本节视频教程请点击此处。
在工具条下找到“单选框”按钮，点击在“舞台”上“性别”右边位置添加一个单选框
图2.7-4
在单选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“男”“女”两个（每行为一个标签）。
选择“变形”工具，调节“舞台”上单选框的位置、大小等。
图2.7-5
另外，在“属性”面板内，如果将“外观”选为“定制”，还可自定义选择上传“未选中图片”以及“选中图片”的素材，此处不多做详述。
图2.7-6
我做了一个动画，预览的时候有图像，发布之后就没有图像了是怎么回事？
回复问题答疑 • xiaozhuzhu1 发起了问题 • 1 人关注 • 0 个回复 • 6010 次浏览 • 2016-10-09 10:13
2.7.1 表单:输入文字（输入框）
原创分享 • mingyueliu 发表了文章 • 3 个评论 • 13651 次浏览 • 2016-10-08 18:18
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到表单工具，表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。
图2.7-1
输入文字（输入框）
如图，在工具条下找到“输入框”按钮，点击在“ 查看全部
本节视频教程请点击此处。
在工具条下找到表单工具，表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。
图2.7-1
输入文字（输入框）
如图，在工具条下找到“输入框”按钮，点击在“ 查看全部
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到表单工具，表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。
图2.7-1
输入文字（输入框）
如图，在工具条下找到“输入框”按钮，点击在“舞台”上“姓名”右边位置添加一个输入框
图2.7-2
在输入框“属性”面板下调整相关属性，例如：
改变其字体为“黑体”，大小为“20”，
“提示文字”默认为“请输入”，
“类型”默认为“普通文本”，
“必填项”为“是”。
并用“变形”工具调整输入框在“舞台”上的大小与位置。
图2.7-3
本节视频教程请点击此处。
在工具条下找到表单工具，表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。
图2.7-1
输入文字（输入框）
如图，在工具条下找到“输入框”按钮，点击在“舞台”上“姓名”右边位置添加一个输入框
图2.7-2
在输入框“属性”面板下调整相关属性，例如：
改变其字体为“黑体”，大小为“20”，
“提示文字”默认为“请输入”，
“类型”默认为“普通文本”，
“必填项”为“是”。
并用“变形”工具调整输入框在“舞台”上的大小与位置。
图2.7-3
如何用双指控制图片大小，左右滑动看放大的图片
问题答疑 • ddbackhome 回复了问题 • 3 人关注 • 1 个回复 • 5509 次浏览 • 2016-10-08 11:29
希望增加跳转链接指定某一个app打开！
新功能需求 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 6362 次浏览 • 2016-10-08 11:23
求助：点击元件，播放声音（背景音乐暂停），再次点击元件或等元件声音播完（背景音乐继续播放）
问题答疑 • ddbackhome 回复了问题 • 3 人关注 • 1 个回复 • 8167 次浏览 • 2016-10-08 11:15
案例中，神射手（足球）的游戏，手指滑动，足球按照手指滑动方向飞出去，，守门员也扑向相同的方向，，这个制作的思路大概是怎样的？
问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 6491 次浏览 • 2016-10-08 11:12
发布后的H5，重新进入编辑页面里面的所有页面内容一片空白，加载不出来，点关键帧也没用
问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 5488 次浏览 • 2016-10-08 11:11
教程素材不知道哪里找
培训教程 • mingyueliu 回复了问题 • 2 人关注 • 1 个回复 • 5763 次浏览 • 2016-10-08 10:05
格式为天/时/分/秒的倒计时动画怎么做？
问题答疑 • qqbc8b5 回复了问题 • 2 人关注 • 1 个回复 • 4390 次浏览 • 2016-10-05 20:56
发布后的作品是可以一直修改的吗？
问题答疑 • totalacg 回复了问题 • 2 人关注 • 1 个回复 • 5416 次浏览 • 2016-10-05 20:30
把时间线窗口拖出来后，无法下拉！
BUG反馈 • qqbc8b5 回复了问题 • 2 人关注 • 1 个回复 • 4192 次浏览 • 2016-10-02 10:56
我想问怎么可以得到别人的H5素材啊，或者抠的很好的图啊
培训教程 • totalacg 回复了问题 • 2 人关注 • 1 个回复 • 5180 次浏览 • 2016-09-30 09:24
请问，我导出的gif动图为什么会连播两遍才会停下来？
问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 4504 次浏览 • 2016-09-29 18:40
请问h5可以导出成gif吗
问题答疑 • totalacg 回复了问题 • 2 人关注 • 1 个回复 • 5787 次浏览 • 2016-09-29 15:03
H5隔一段时间播放不了，手机播放不了、网页播放不了、工作台预览播放不了
BUG反馈 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 3960 次浏览 • 2016-09-28 18:11