[Mugeda HTML5技术教程之8]添加行为
上一节我们已经在新建的作品中添加了元素和动画,如果我们想要作品能够和用户互动,就需要给元素添加动作行为。在舞台上选中一个要添加动作的元素,在属性栏的动作下拉列表中选择一个动作。可选类别有链接、表单、行为。链接可以导航到网页;表单可以被编辑并提交;行为是更高级的动作方式(包括播放控制、过渡、调用电话功能、回调函数等)。后面会有详细介绍。


链接是在广告动画中比较常用的方式。通过链接的方式,我们可以再作品中加入想要用户浏览的一些链接。在动作下拉列表中选择“链接”后在后面的输入框中输入网址。然后选择链接的打开方式,有外部打开、内部打开和扩展显示。

如果选择外部打开,该链接将在默认浏览器下一个新的窗口/标签中打开,通常是一个独立的浏览器(例如iPhone的Safari浏览器)。

如果选择内部打开,在支持MRAID(广告行业中的一种标准)的容器中,链接将以扩大的显示尺寸(例如,扩展至全屏幕视图)和作品在同一个网页窗口/标签中被打开。在一个不支持MRAID的容器中(例如,移动设备浏览器),它和外部打开方式相同。

如果选择扩展显示,在支持MRAID的容器中,链接将在内部Web View容器中打开,通常是由MRAID SDK或容器提供一个内置的Web View。在一个不支持MRAID的容器(例如,手机浏览器)中,该链接将和作品在同一网页窗口/标签被打开。

行为是更高级的动作形式,包括播放控制、过渡、调用电话功能、回调函数等。可以再一个动作中添加多个行为。选择动作下拉列表中的“行为”项后,点击编辑,弹出编辑行为对话框,
选择并编辑想要添加的行为。播放控制,可以通过舞台的帧控制舞台动画的播放,有跳转并播放、跳转并停止、暂停、播放、下一帧、上一帧。过渡,主要在支持MRAID标准的环境中使用,有展开和改变大小。电话功能,可以调用手机等移动设备的本地功能,有打电话、发短信、发邮件、保存图片、日历事件、地图、播放视频、播放声音。其他选项主要是回调函数,通过回调可以再脚本代码中加入想要的事件触发是完成的操作,关于脚本添加后面的章节会有专门介绍。


添加后的行为需要进一步进行编辑,选择事件触发方式,有点击和出现两种,点击就是通过鼠标或者手指点击触发,出现就是当动画播放到这一帧(添加行为的元素所在的那一帧)时就会自动触发。
对添加上的行为要可以进行组织操作,上移、下移和删除,来改变多个行为出现的顺序

事件类型
点击:对象被点击时触发行为
出现:对象出现在舞台上时会触发行为(即使它是无形的,透明度=0)。使用“出现”触发行为的一个很好的例子是在一定时间内通过给一个对象分配“暂停”行为来暂停动画播放。
注意:某些行为(如发出呼叫)只能通过点击触发。

行为参数
每种行为可能有一个或多个参数,这取决于行为的性质(例如,一个用于发出呼叫的电话号码)。
每一个行为有一个可选的参数,称为“事件名称”,它是用来定义一些语义的标识。事件名称显示在跟踪报告中,对于评估参与的活动是有帮助的。

行为类别有控制播放、过渡、电话功能、其他。

播放控制,可以通过舞台的帧控制舞台动画的播放,有跳转并播放、跳转并停止、暂停、播放、下一帧、上一帧。

过渡,主要在支持MRAID标准的环境中使用,有展开和改变大小。

电话功能,可以调用手机等移动设备的本地功能,有打电话、发短信、发邮件、保存图片、日历事件、地图、播放视频、播放声音。

其他选项主要是回调函数,通过回调可以再脚本代码中加入想要的事件触发是完成的操作,关于脚本添加后面的章节会有专门介绍。

播放视频:案例

播放视频:设置参数

播放视频

表单,可以通过表单让用户填写一些信息,提交到服务器,来收集一些想要得到的数据。
还可以通过表单触动回调函数,让用户填写的信息通过参数的形式传递到回调中,从而在动画中反映出来,比如可以通过这种方式做一个可定制的贺卡,能用表单改变祝福语和落款。

提交目标中可以选择后台提交和回调函数,如果选择后台提交,需要填入提交地址;如果选择回调函数,需要填入函数名字。可以点击添加表单项来添加表单的表单项

总结,通过添加动作,我们可以再作品中完成各种互动的功能,大大拓展了动画的表现形式。
下一节,我们将要讲到元件,元件是一个可以在舞台上实例化和再利用的预先生成的独立动画。一个元件有它自己的时间轴(层,单位等),可以独立的显示动画。元件可用于创建复杂的动画效果。元件提高的动画的可重用性和灵活性,是个强大的存在。
[Mugeda HTML5技术教程之8]添加行为的更多相关文章
- [Mugeda HTML5技术教程之7]添加动画
前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果.这节我们将要讲述怎么给元素添加动画.Mugeda动画是通过时间轴和帧来实现的.通过在时间轴上创建图层和 ...
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- [Mugeda HTML5技术教程之13]链接的添加方式
在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...
- [Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...
- [Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
- [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容
1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...
随机推荐
- IE10的bug?disabled button如何触发事件
最近碰到一个问题,IE10下的,貌似是个bug,求助! 问题表现为:在内部有dom元素的情况下,disabled状态的button会因为子元素的mouseover产生事件冒泡而触发,也就是说,disa ...
- 导出函数结构 EXPORT_DIRECTORY
typedef struct _IMAGE_EXPORT_DIRECTORY { DWORD Characteristics; DWORD TimeDateStamp; //输出表的创建时间 WORD ...
- PHP 中的数组
PHP中的数组是指一个键/值对的集合.PHP中的数组是使用哈系表构建的,这意味着访问每一个值都会有一个平均的O(1)复杂度. $arr=array([key=>]value,....); 在这里 ...
- IO 常用
1. read file from folder DirectoryInfo folder = new DirectoryInfo(@"C:\Users\keatkeat\Desktop\K ...
- angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...
- C++中基于Crt的内存泄漏检测(重载new和delete,记录在Map里)
尽管这个概念已经让人说滥了 ,还是想简单记录一下, 以备以后查询. #ifdef _DEBUG#define DEBUG_CLIENTBLOCK new( _CLIENT_BLOCK, __FIL ...
- Sublime Text 3配置记录
G++ /** * 工具->编译系统->新编译系统 */ { "cmd": ["g++", "${file}", "- ...
- 从此走上一条iOS程序猿不归路。。。
新的城市,新的生活!前不久刚刚结束了苦逼的面试找工作之旅,期间也小有收货,如今正处年底工作闲暇之余,将前一阵子陆陆续续的总结整理了一下,本人菜鸟程序猿一只,水平有限,本文总结的知识不算深入,比较浅显, ...
- iframe切换内容页仍然能自适应大小代码(含js)
function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.cont ...
- JavaScript 类私有方法的实现
一:将私有方法移出模块,因为模块内部的所有方法都是对外可见的. class Widget { foo (baz) { bar.call(this, baz); } // ... } function ...