2.6.4 微信定制:录制用户声音
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6593 次浏览 • 2016-09-27 16:13
本节视频教程请点击此处。
在“微信”工具栏下点击“录音”按钮,在“舞台”上会出现两个图标。
图2.6-18
如下图,第1个图标的自带编辑行为为“录制声音”,触发条件为“点击”
图2.6-19 查看全部
本节视频教程请点击此处。
在“微信”工具栏下点击“录音”按钮,在“舞台”上会出现两个图标。
图2.6-18
如下图,第1个图标的自带编辑行为为“录制声音”,触发条件为“点击”
图2.6-19
第2个图标的功能为播放声音。
图2.6-20
点击“保存”
图2.6-21
点击“通过二维码共享”,用手机扫描生成的二维码,试验提取微信头像、昵称、定制图片、录制声音和播放声音的功能。
图2.6-22
用行为方式制作“录音”功能:如下图,在“舞台”上添加一个录音按钮素材,点击其“添加/编辑行为”按钮
图2.6-23
在“编辑行为”对话框中选择“微信定制”→“录制声音” →触发条件:点击,关闭对话框。
图2.6-24
如图,需上传一个音频文件:点击“声音”按钮,在弹出的“导入声音”对话框中点击“选择文件”,在弹出的本地文件库中选择音频文件,点击“上传”按钮上传文件,最后点击“添加”。
图2.6-25
为新添加进“舞台”的音频文件命名为“录音功能”。上传此音频的目的是用录制的声音替换现有的声音。
图2.6-26
重回录音按钮元素的“编辑行为”对话框,点击“编辑”进入“参数”对话框。
图2.6-27
设置“目标元素”为“录音功能”,点击“确认”。
图2.6-28
2.6.3 微信定制:定制图片
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 8904 次浏览 • 2016-09-27 16:06
本节视频教程请点击此处。
在“微信”工具栏下点击“定制图片”按钮,在“舞台”上会出现一个圆形区域。
图2.6-12
我们观察到,该圆形区域也同样自带编辑行为,点击“添加/编辑行为”按钮,进入“编辑行为” 查看全部
本节视频教程请点击此处。
在“微信”工具栏下点击“定制图片”按钮,在“舞台”上会出现一个圆形区域。
图2.6-12
我们观察到,该圆形区域也同样自带编辑行为,点击“添加/编辑行为”按钮,进入“编辑行为”对话框,发现自带的行为为“定制图片”,触发条件为“点击”
图2.6-13
用行为方式制作“定制图片”功能:如下图,在“舞台”上添加一个圆角矩形,点击其“添加/编辑行为”按钮
图2.6-14
在“编辑行为”对话框中选择“微信定制”→“定制图片” →触发条件:点击
图2.6-15
回到“舞台”,为圆角矩形命名为“定制图片”
图2.6-16
重新返回圆角矩形“编辑行为”对话框,点击“编辑”按钮,进入“参数”对话框,设置“目标元素”为“定制图片”,点击“确认”,即设置了定制图片功能。
图2.6-17
2.6.2 微信功能:微信昵称
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 6462 次浏览 • 2016-09-27 16:03
本节视频教程请点击此处。
在“微信”工具栏下点击“微信昵称”按钮,在“舞台”上会出现一个内容为“微信昵称”的文字框。
图2.6-7
我们发现,该文字框也自带编辑行为,点击“添加/编辑行为”按钮,进入“编 查看全部
本节视频教程请点击此处。
在“微信”工具栏下点击“微信昵称”按钮,在“舞台”上会出现一个内容为“微信昵称”的文字框。
图2.6-7
我们发现,该文字框也自带编辑行为,点击“添加/编辑行为”按钮,进入“编辑行为”对话框。行为为“显示微信昵称”,触发条件为“出现”
图2.6-8
用行为方式提取微信昵称:如下图,在“舞台”上添加一个文本框,命名为“微信昵称”
图2.6-9
点击文本框的“添加/编辑行为”按钮,在“编辑行为”对话框中选择“微信定制”→“显示微信昵称” →触发条件:出现,点击“编辑”按钮
图2.6-10
在“参数”对话框中选择“目标元素”为“微信昵称”,即设置了微信昵称功能。
图2.6-11
2.6.1 微信功能:微信头像
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 8162 次浏览 • 2016-09-27 15:57
本节视频教程请点击此处。
如下图,在“微信”工具栏下点击“微信头像”按钮,在“舞台”上会出现一个圆形的微信头像区域
图2.6-1
我们发现,该微信头像的“添加/编辑行为”按钮已是绿色,点击进入“编辑行为 查看全部
本节视频教程请点击此处。
如下图,在“微信”工具栏下点击“微信头像”按钮,在“舞台”上会出现一个圆形的微信头像区域
图2.6-1
我们发现,该微信头像的“添加/编辑行为”按钮已是绿色,点击进入“编辑行为”对话框,发现其已自带编辑行为,即行为为“显示微信头像”,触发条件为“出现”。
图2.6-2
图2.6-3
用行为方式提取微信头像:如下图,在“舞台”上添加一个矩形(圆形等各种形式),命名为“微信头像”
图2.6-4
点击矩形的“添加/编辑行为”按钮,在“编辑行为”对话框中选择“微信定制”→“显示微信头像” →触发条件:出现,点击“编辑”按钮
图2.6-5
在“参数”对话框中选择“目标元素”为“微信头像”,即设置了微信头像功能。
图2.6-6
2.5.6 行为:点赞
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 7996 次浏览 • 2016-09-27 15:39
点赞功能为系统默认累加,每个用户只能允许点赞一次。如下图,在“控件”栏下找到“点赞”按钮,点击选中,在“舞台”上拖拉出一个点赞控件。
图2.4-36
点击预览,发现点1次,点赞上方数由0变成1,再次点 查看全部
点赞功能为系统默认累加,每个用户只能允许点赞一次。如下图,在“控件”栏下找到“点赞”按钮,点击选中,在“舞台”上拖拉出一个点赞控件。
图2.4-36
点击预览,发现点1次,点赞上方数由0变成1,再次点击“取消点赞”,“1变成0”。
图2.4-37
选中“点赞”控件,在其“属性”面板下可修改各种属性,例如调整其文字颜色、位置、大小等。
图2.4-38
在每个人物下面添加一个“点赞”,即可设置成投票的形式。
图2.4-39
注:点赞的文字默认是白色,所以如果背景色是默认色,可以通过右侧属性栏来调整颜色,方便查看,如下图:
2.5.4 行为:擦玻璃
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 14239 次浏览 • 2016-09-27 15:06
本节视频教程请点击此处。
在“控件”工具栏下找到“擦玻璃”按钮,点击选中,在“舞台”上以拖拉的方式生成一个擦玻璃控件
图2.4-28
选中“舞台”上的擦玻璃控件,在其“属性”面板下可设置其各种属性,例如 查看全部
本节视频教程请点击此处。
在“控件”工具栏下找到“擦玻璃”按钮,点击选中,在“舞台”上以拖拉的方式生成一个擦玻璃控件
图2.4-28
选中“舞台”上的擦玻璃控件,在其“属性”面板下可设置其各种属性,例如为其命名,改变背景图片(擦除后的图片)、前景图片(擦除前的图片)等。如下图,点击“背景图片”右边的“+”符号
图2.4-29
在弹出的“媒体库”对话框中选择一张图片素材。点击“添加”。
图2.4-30
同理,添加好前景图片
图2.4-31
点击“预览”,发现擦除了前景图片后,背景图片即出现。
图2.4-32
另外,我们还可以设置橡皮擦大小和剩余比例(即:擦除图片的大小和擦出剩余多少显示背景图片)
擦玻璃控件特有的触发条件:如下图,点击“舞台”上擦玻璃控件的“添加/编辑行为”按钮
图2.4-33
在弹出的“编辑行为”对话框下选择“下一页”,点击“触发条件”的下拉菜单,选择触发条件为:“擦玻璃完成”。
图2.4-34
点击添加新页面,点击预览观察效果,发现当我们将玻璃擦完后,自动跳转至下一页
图2.4-35
恢复擦玻璃初始状态:我们还可以通过选中元素,点击“添加/编辑行为”按钮——“动画播放控制”来设置,如下图:
2.5.3 行为:随机数
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 8939 次浏览 • 2016-09-27 15:01
在“控件”工具栏下找到“随机数”按钮,点击选中,在“舞台”上生成一个随机数。
图2.4-21
在其“属性”面板下可设置各种属性,例如为其命名为“随机数”,修改随机数固有属性:最小值为“0”、最大值为“5 查看全部
在“控件”工具栏下找到“随机数”按钮,点击选中,在“舞台”上生成一个随机数。
图2.4-21
在其“属性”面板下可设置各种属性,例如为其命名为“随机数”,修改随机数固有属性:最小值为“0”、最大值为“500”、更新间隔为“0.1秒”,可点击预览效果。
图2.4-22
随机数的关联动画:以一个随机数关联图片的左坐标为案例进行讲解。
如下图,添加一张图片素材至“舞台”,随之点击添加随机数至“舞台”,在随机数的“属性”面板下改变其填充色为白色方便观察。
图2.4-23
设置随机数的固有属性:最大值为“500”、更新间隔为“1秒”
图2.4-24
选中“舞台”上的图片,在图片“属性”面板下点击图片“左”数值右边的“关联”按钮
图2.4-25
在“左”的关联下拉菜单下设置关联属性:
关联对象:“随机数”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“0”时被控量=“0”
当主控量=“500”时被控量=“-500”
图2.4-26
点击“预览”,发现每1秒钟图片都会随着随机数的数值变化位置
图2.4-27
2.5.2 行为:定时器
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 8307 次浏览 • 2016-09-27 14:44
图2.4-10
可在其“属性”栏下设置调整定时器各项属性,例如为定时器命名为“A”、改变其颜色、文本、精度、计时方向、是否循环等。
图2.4-11
1.定时器的关联动画
定时器的功能应用:以 查看全部
在“控件”工具栏下找到“定时器”按钮,点击选中,在“舞台”上生成一个定时器。
图2.4-10
可在其“属性”栏下设置调整定时器各项属性,例如为定时器命名为“A”、改变其颜色、文本、精度、计时方向、是否循环等。
图2.4-11
1.定时器的关联动画
定时器的功能应用:以一个定时器关联火箭上坐标的案例进行讲解
如下图,新建一个图层1,选中图层1第1帧,点击“素材库”,在“舞台”上添加一个火箭图像素材,使用“变形”工具调整火箭大小、位置等。
图2.4-12
选中火箭素材,在其“属性”面板下点击其“上”数值右边的“关联”按钮
图2.4-13
在“上”的关联下拉菜单下设置关联属性:
关联对象:“A”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“30”时被控量=“408”
当主控量=“0”时被控量=“0”
图2.4-14
点击“预览”,发现火箭随着定时器数值的减少而往上移动
图2.4-15
同时,若将定时器的“精度”调整为“秒”时,观察动画效果,会发现火箭的移动出现卡顿效果。因此在用定时器制作动画时,为保证物体移动顺畅,最好将“精度”调整为“毫秒”。
图2.4-16
2.定时器的独有触发条件
如下图,点击定时器的“添加/编辑行为”按钮
图2.4-17
在弹出的“编辑行为”对话框下选择“下一页”,点击“触发条件”的下拉菜单,发现会多出两个触发条件:“定时器时间到”“定时器开始计时”,选择“定时器时间到”。
图2.4-18
在定时器的“属性”面板下将定时器长度(时间)改为“3秒”,并点击添加一个新页面
图2.4-19
点击“预览”,发现定时器时间到后会自动跳转至第2页面。
图2.4-20
太不稳定了
问题答疑 • mingyueliu 回复了问题 • 2 人关注 • 1 个回复 • 2550 次浏览 • 2016-09-27 14:39
2.5.1 行为:陀螺仪
原创分享 • mingyueliu 发表了文章 • 7 个评论 • 9840 次浏览 • 2016-09-27 14:39
在工具栏内的“控件”工具栏下找到“陀螺仪”按钮,点击选中,在“舞台”上生成一个陀螺仪。
图2.4-1
可在其“属性”面板下调整陀螺仪的各个属性,例如为其命名为“陀螺仪”,改变其颜色、文本内容、陀螺仪类型(绕X轴旋转角、绕Y轴旋转角、绕Z轴旋转角)
查看全部
在工具栏内的“控件”工具栏下找到“陀螺仪”按钮,点击选中,在“舞台”上生成一个陀螺仪。
图2.4-1
可在其“属性”面板下调整陀螺仪的各个属性,例如为其命名为“陀螺仪”,改变其颜色、文本内容、陀螺仪类型(绕X轴旋转角、绕Y轴旋转角、绕Z轴旋转角)
图2.4-2
因为陀螺仪功能只限定于手机,PC端无法演示,因此可先保存作品,将其命名为“陀螺仪”
图2.4-3
通过“通过二维码共享”功能生成二维码,用手机扫描进行查看
图2.4-4
陀螺仪的数值关联:陀螺仪的数值可以关联到任何物体的任何数值性元素,接下来我们以一个陀螺仪关联图片左坐标的案例来解释陀螺仪数值的提取方法。
如下图,添加一张图片至“舞台”,点击“陀螺仪”按钮添加一个陀螺仪至“舞台”,为方便清楚观看,改变陀螺仪填充色为白色。
图2.4-5
在“属性”面板下改变陀螺仪的类型为“绕Y轴旋转角”
图2.4-6
点击选中“舞台”的图片,在图片“属性”面板下找到“左”数值右边的“关联”按钮,点击。
图2.4-7
在“左”的关联下拉菜单下设置关联属性:
关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-50”时被控量=“0”
当主控量=“50”时被控量=“649.8”(图像的极左值)
图2.4-8
点击“保存”,通过扫描二维码查看我们的作品,晃动手机即可看到图片与陀螺仪数值变化的关联情况。
图2.4-9
H5中的视频总是跳到QQ浏览器中播放,怎么解决?
问题答疑 • ddbackhome 回复了问题 • 3 人关注 • 2 个回复 • 4060 次浏览 • 2016-09-26 18:34
希望其它行为的对象列表中也能增加“自身”选项!
新功能需求 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 3869 次浏览 • 2016-09-26 18:29
2.4.17 行为:跳转链接
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 8203 次浏览 • 2016-09-26 17:39
1.添加链接方法一
点击“舞台”上的“跳转链接”按钮元素的“添加/编辑行为”,在弹出的“编辑行为”对话框中选择:“属性控制”→“跳转链接”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-102
图2.4-103
在“参数” 查看全部
1.添加链接方法一
点击“舞台”上的“跳转链接”按钮元素的“添加/编辑行为”,在弹出的“编辑行为”对话框中选择:“属性控制”→“跳转链接”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-102
图2.4-103
在“参数”对话框内输入需跳转页面的链接,选择“打开位置”为“当前页面”(在当前H5页面打开)或“新窗口”(打开一个新窗口)等,点击“确认”。即设置了点击“跳转链接”按钮便会跳转到目的页面。
图2.4-104
删除编辑行为:如下图,点击“舞台”上“跳转链接”按钮的“添加/编辑行为”按钮进入“编辑行为”对话框,点击原先添加的“跳转链接”行为右边的“×”符号,点击弹出的“确认删除”,删除“跳转链接”行为。
图2.4-105
2.添加链接方法二
在“跳转链接”按钮元素右侧的“属性”面板下的“动作”下拉菜单中选择“链接”
图2.4-106
在弹出的链接选框中输入相应链接,选择相应“打开位置”
图2.4-107
注:链接前面一定要加“http://”
2.4.14 行为:提交表单
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 5803 次浏览 • 2016-09-26 17:33
2.4.10 行为:声音控制
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 6571 次浏览 • 2016-09-26 17:23
参考内容:素材与媒体(声音)
2.4.9 行为:视频控制
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6509 次浏览 • 2016-09-26 17:22
参考内容:素材与媒体(视频)
2.4.8 行为:手机事件
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6882 次浏览 • 2016-09-26 17:01
本节视频教程请点击此处。
1.打电话
点击“舞台”上的“打电话”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“手机功能”→“打电话”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-89
查看全部
本节视频教程请点击此处。
1.打电话
点击“舞台”上的“打电话”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“手机功能”→“打电话”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-89
图2.4-90
在“参数”对话框内输入电话号码,点击“确认”。即设置了点击“打电话”按钮便会询问是否拨出之前输入的电话号码的行为(在手机端)。
图2.4-91
2.发短信
点击“舞台”上的“发短信”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“手机功能”→“发短信”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-92
图2.4-93
在“参数”对话框内输入电话号码与消息内容,点击“确认”。即设置了点击“发短信”按钮便会询问是否发出短信内容至之前输入的电话号码的行为(在手机端)。
图2.4-94
3.发送邮件
点击“舞台”上的“发送邮件”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“手机功能”→“发送邮件”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-95
图2.4-96
在“参数”对话框内输入邮箱地址、邮件标题、邮件内容,点击“确认”。即设置了点击“发送邮件”按钮便会询问是否发出邮件内容至之前输入的邮箱地址的行为(在手机端)。
图2.4-97
4.地图
点击“舞台”上的“地图”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“手机功能”→“地图”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-98
图2.4-99
在“参数”对话框内输入地址、关键字,选择地图类型等,点击“确认”。即设置了点击“地图”按钮便会出现所指示地点的地图行为。
图2.4-100
如下图,点击“预览”观察行为效果
图2.4-101
2.4.7 行为:设置定时器
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 8668 次浏览 • 2016-09-26 16:29
本节视频教程请点击此处。
设置定时器行为有暂停定时器、继续定时器、重置定时器。
1.添加定时器
在操作页面左边工具栏的“控件”栏下,找到“定时器”按钮,点击添加一个定时器在“舞台”上。
图2.4-76 查看全部
本节视频教程请点击此处。
设置定时器行为有暂停定时器、继续定时器、重置定时器。
1.添加定时器
在操作页面左边工具栏的“控件”栏下,找到“定时器”按钮,点击添加一个定时器在“舞台”上。
图2.4-76
在其“属性”面板内将其命名为“定时器”
图2.4-77
2.暂停定时器
点击“舞台”上的“暂停”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“属性控制”→“设置定时器”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-78
图2.4-79
在“参数”对话框内设置参数:
定时器名称:“定时器”;
设置状态:“暂停定时器”;
点击“确认”,即设置好了点击“暂停”按钮,即暂停“舞台”上定时器
图2.4-80
3.继续定时器
点击“舞台”上的“继续”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“属性控制”→“设置定时器”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-81
图2.4-82
在“参数”对话框内设置参数:
定时器名称:“定时器”;
设置状态:“继续定时器”;
点击“确认”,即设置好了点击“继续”按钮,即继续“舞台”上定时器
图2.4-83
4.重置定时器
点击“舞台”上的“重置”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“属性控制”→“设置定时器”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-84
图2.4-85
在“参数”对话框内设置参数:
定时器名称:“定时器”;
设置状态:“重置定时器”;
点击“确认”,即设置好了点击“重置”按钮,即重置“舞台”上定时器
图2.4-86
选中“舞台”上的定时器,在其“属性”面板内改变相关属性,例如,将“是否循环”选项改为“循环”
图2.4-87
点击预览效果
图2.4-88
2.4.6 行为:改变图片
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 9799 次浏览 • 2016-09-26 16:09
本节视频教程请点击此处。
改变图片即当点击或触发改变图片行为时,图片即会被改变。
如下图,分别将两张上传至“舞台”上的图片取名为“A”“B”
图2.4-70
图2.4-71
点击“改变图片”按 查看全部
本节视频教程请点击此处。
改变图片即当点击或触发改变图片行为时,图片即会被改变。
如下图,分别将两张上传至“舞台”上的图片取名为“A”“B”
图2.4-70
图2.4-71
点击“改变图片”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“属性控制”→“改变图片”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-72
在“参数”对话框内设置参数:
目标元素:“A”;
源元素名称:“B”;
点击“确认”,即设置好了点击“改变图片”按钮,即将图片A变成图片B的行为。
图2.4-73
点击“预览”
图2.4-74
同时,我们也可将需被改变的图片放置“舞台”中心,将用于替换的图片放置“舞台”之外不被用户看见,以此形成点击改变图片的效果。
图2.4-75
2.4.5 行为:改变元素属性
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 11014 次浏览 • 2016-09-26 16:00
本节视频教程请点击此处。
本小节内容,如下图,观察元素的“属性”面板,在“属性”面板下无论是宽、高、左、上、透明度等可提取到的数值都可作为改变元素属性的属性。
图2.4-59
如下图,命名图像为“Mug 查看全部
本节视频教程请点击此处。
本小节内容,如下图,观察元素的“属性”面板,在“属性”面板下无论是宽、高、左、上、透明度等可提取到的数值都可作为改变元素属性的属性。
图2.4-59
如下图,命名图像为“Mugeda”
图2.4-60
在“改变元素属性”按钮元素上添加改变元素属性行为。点击“舞台”上“改变元素属性”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“属性控制”→“改变元素属性”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-61
在“参数”对话框内设置参数:
元素名称:“Mugeda”;
元素属性:“透明度”;
赋值方式:“用设置的值替换现有值”;
取值:“20”。
点击“确认”。即设置好了点击“改变元素属性”按钮,图像(Mugeda)的透明度值即从100变成20。
图2.4-62
点击预览效果
图2.4-63
同理,点击“改变元素属性”按钮元素的“添加/编辑行为”按钮,点击“编辑”按钮,在“参数”对话框内改变“元素属性”为“左”,其他参数不变。即设置好了点击“改变元素属性”按钮,图像(Mugeda)“左”的取值由原来数值(此案例为89.5)变成20(即图像与舞台左边的距离变成20,图像位置由右向左移动)的行为。
图2.4-64
图2.4-65
点击预览效果,发现点击“改变元素属性”按钮时图像位置由右向左移动至离“舞台”左20个值的距离。
图2.4-66
同理,点击“改变元素属性”按钮元素的“添加/编辑行为”按钮,点击“编辑”按钮,在“参数”对话框内改变“赋值方式”为“在现有值基础上增加”,其他参数不变,点击“确认”。即设置好了点击“改变元素属性”按钮,图像(Mugeda)“左”的取值在原来数值(此案例为89.5)基础上增加20(即图像与舞台左边的距离增加20,图像位置由左向右移动)的行为。
图2.4-67
点击预览,发现每点击“改变元素属性”按钮元素,图像会向右移动20个值(即图像离“舞台”左的距离增加20个值)
图2.4-68
同理,在“参数”对话框内,在“取值”输入框输入“-20”,即可设置图像距离往反方向改变的行为
图2.4-69
2.4.4 行为:播放元件片段
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 10560 次浏览 • 2016-09-26 15:47
本节视频教程请点击此处。
本小节以案例的形式讲解。
本案例在讲解播放元件片段的各种行为之前,已做好一些基础铺垫:设置元件1动画如下图:
第1帧设置一个“暂停”行为
图2.4-48
第1至20帧设置 查看全部
本节视频教程请点击此处。
本小节以案例的形式讲解。
本案例在讲解播放元件片段的各种行为之前,已做好一些基础铺垫:设置元件1动画如下图:
第1帧设置一个“暂停”行为
图2.4-48
第1至20帧设置火箭从下往上飞的动画行为
图2.4-49
第21-40帧设置火箭从上往下飞的动画行为
图2.4-50
将元件1拖至“舞台”,设置播放元件片段行为。点击“向上”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“播放元件片段”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-51
图2.4-52
在“参数”对话框内设置参数:
元件示例名称:“火箭”;
是否循环:“循环”;
起始帧号:“2”;
结束帧号:“20”。
点击“确认”。即设置好了点击“向上”按钮,播放元件1(火箭)第2至20帧动画(即向上飞的动画效果)
图2.4-53
点击“向下”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“播放元件片段”→触发条件:点击。点击“编辑”按钮进入“参数”对话框
图2.4-54
图2.4-55
在“参数”对话框内设置参数:
元件示例名称:“火箭”;
是否循环:“循环”;
起始帧号:“21”;
结束帧号:“40”。
点击“确认”。即设置好了点击“向下”按钮,播放元件1(火箭)第21至40帧动画(即向下飞的动画效果)
图2.4-56
需要注意的是在添加元件之前,要提前在元件“属性”面板中给元件命名,如下图,我们提前为元件1命名为“火箭”。
图2.4-57
点击预览效果
图2.4-58
2.4.3 行为:页的行为
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 9057 次浏览 • 2016-09-26 15:42
本节视频教程请点击此处。
页的行为包括“上一页”“下一页”“跳转到页”“禁止翻页”以及“恢复翻页”等行为。
1.跳转至下一页
如下图,点击“下一页”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选 查看全部
本节视频教程请点击此处。
页的行为包括“上一页”“下一页”“跳转到页”“禁止翻页”以及“恢复翻页”等行为。
1.跳转至下一页
如下图,点击“下一页”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“下一页”→触发条件:点击。即设置好点击即跳转到下一页的行为。
图2.4-35
图2.4-36
2.跳转到页
如下图,点击“跳转到页”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“跳转到页”→触发条件:点击。点击“编辑”按钮,进入“参数”对话框
图2.4-37
图2.4-38
在“参数”对话框内,选择页号为“2”,“翻页方式”为“淡入”,点击“确认”
图2.4-39
3.跳转至上一页
如下图,点击来到第2页,点击“上一页”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“上一页”→触发条件:点击。即设置好点击即跳转到上一页的行为。
图2.4-40
图2.4-41
如下图,可在右边“翻页”面板内设置“翻页效果””翻页方向”等属性
图2.4-42
4.禁止翻页
如下图,点击“禁止翻页”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“禁止翻页”→触发条件:点击。即设置好点击即禁止上下翻页的行为。
图2.4-43
图2.4-44
5.恢复翻页
同理,点击“恢复翻页”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“恢复翻页”→触发条件:点击。即设置好点击即恢复上下翻页的行为
图2.4-45
图2.4-46
点击预览效果。值得注意的是,“禁止翻页”“恢复翻页”行为效果只针对系统默认的翻页效果,对前面设置的各种翻页按钮不起作用。
图2.4-47
2.4.2 行为:帧的行为
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6739 次浏览 • 2016-09-26 15:29
本节视频教程请点击此处。
帧的行为有“播放”“暂停”“下一帧”“上一帧”“跳转并播放”“跳转并停止”
本案例在讲解帧的各种行为之前,已做好一些基础铺垫:
1)新建好图层0、图层1、图层2;
2)如图,在图层0第1 查看全部
本节视频教程请点击此处。
帧的行为有“播放”“暂停”“下一帧”“上一帧”“跳转并播放”“跳转并停止”
本案例在讲解帧的各种行为之前,已做好一些基础铺垫:
1)新建好图层0、图层1、图层2;
2)如图,在图层0第1帧时,在“舞台”上添加“第一帧”文字元素;
图2.4-9
3)同理,在图层0的第2帧放置“第二帧”文字元素,第3帧放置“第三帧”文字元素,第4帧放置“第四帧”文字元素;
图2.4-10
图2.4-11
图2.4-12
4)在图层0第5至第18帧的位置,制作了一个矩形在舞台上由左向右移动的关键帧动画。
图2.4-13
5)在图层1上添加一个矩形,设置其编辑行为为“暂停”,触发条件为“出现”,并在第1至5帧都有该“暂停”行为。
图2.4-14
现在,我们以该案例来解释帧的行为。
1.播放
如图,点击回到时间轴上的第1帧,点击舞台上“播放”按钮元素的“添加/编辑行为”按钮,为其添加编辑行为
图2.4-15
在弹出的“编辑行为”对话框中选择:“动画播放控制”→“播放”→触发条件:点击。即设置好点击即播放的行为。
图2.4-16
2.暂停
同理,点击“暂停”按钮元素的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择:“动画播放控制”→“暂停”→触发条件:点击。即设置好点击即暂停的行为。
图2.4-17
图2.4-18
3.跳转至下一帧
同理,为“舞台”上的“下一帧”按钮元素添加编辑行为:“动画播放控制”→“下一帧”→触发条件:点击。即设置好点击即跳转下一帧的行为。
图2.4-19
图2.4-20
4.跳转至上一帧
同理,为“舞台”上的“上一帧”按钮元素添加编辑行为:“动画播放控制”→“上一帧”→触发条件:点击。即设置好点击即跳转上一帧的行为。
图2.4-21
图2.4-22
5.跳转并播放
同理,为“舞台”上的“跳转并播放”按钮元素添加编辑行为:“动画播放控制”→“跳转到帧并播放”→触发条件:点击。点击“编辑”按钮,进入“参数”对话框
图2.4-23
图2.4-24
在“参数”对话框内填写“帧号”为“6”,点击“确认”。即设置了点击“舞台”上的“跳转并播放”按钮,即可跳转到第6帧并播放动画
图2.4-25
6.跳转并停止
同理,为“舞台”上的“跳转并停止”按钮元素添加编辑行为:“动画播放控制”→“跳转到帧并停止”→触发条件:点击。点击“编辑”按钮,进入“参数”对话框
图2.4-26
图2.4-27
在“参数”对话框内填写“帧号”为“6”,点击“确认”。即设置了点击“舞台”上的“跳转并停止”按钮,即可跳转到第6帧并停止动画
图2.4-28
点击“预览”效果
图2.4-29
我们还可通过关键帧命名的形式添加设置帧的行为。如图,点击选中时间轴上的第4帧,在“关键帧名”输入框内输入关键帧名为“第四帧”
图2.4-30
点击“跳转并停止”按钮元素的“添加/编辑行为”按钮
图2.4-31
在“编辑行为”对话框内点击“编辑”按钮,进入“参数”对话框内,改变参数属性:删除帧号“6”,选择“帧名称”为“第四帧”,点击“确认”。
图2.4-32
图2.4-33
点击“预览”,发现当点击“跳转并停止”按钮时,动画跳转至第4帧并停止。
图2.4-34
2.4.1 行为:行为添加以及触发事件
原创分享 • mingyueliu 发表了文章 • 6 个评论 • 13783 次浏览 • 2016-09-26 15:16
本节视频教程请点击此处。
1. 行为
如图,点击物体右边的“添加/编辑行为”按钮,弹出“编辑行为”对话框。
图2.4-1
行为包括“动画播放控制”“媒体播放控制”“属性控制”“微信定制”“手机功能”五 查看全部
本节视频教程请点击此处。
1. 行为
如图,点击物体右边的“添加/编辑行为”按钮,弹出“编辑行为”对话框。
图2.4-1
行为包括“动画播放控制”“媒体播放控制”“属性控制”“微信定制”“手机功能”五大部分。
图2.4-2
其中,“动画播放控制”包括“暂停”“播放”“下一帧”“上一帧”等行为功能
图2.4-3
“媒体播放控制”包括“播放声音”“停止所有声音”“控制声音”“播放视频”等行为功能。
图2.4-4
“属性控制”包括“改变元素属性”“设置定时器”“跳转链接”“提交表单”等行为功能。
图2.4-5
“微信定制”包括“定制图片”“录制声音”“显示微信头像”“显示微信昵称”“定义分享信息”等行为功能。
图2.4-6
“手机功能”包括“打电话”“发短信”“发送邮件”“日历事件”“地图”等行为功能。
图2.4-7
2. 触发条件
如下图,选中左边任意行为例如“播放”行为,在右边“触发条件”下拉菜单中有“点击”“出现”“手指按下”“手指抬起”等多种触发行为的条件选项。通过选择不同的“触发条件”组合不同的行为可以形成无数种逻辑表达。
图2.4-8