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

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

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

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

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

行为是更高级的动作形式,包括播放控制、过渡、调用电话功能、回调函数等。可以再一个动作中添加多个行为。选择动作下拉列表中的“行为”项后,点击编辑,弹出编辑行为对话框,

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

添加后的行为需要进一步进行编辑,选择事件触发方式,有点击和出现两种,点击就是通过鼠标或者手指点击触发,出现就是当动画播放到这一帧(添加行为的元素所在的那一帧)时就会自动触发。

对添加上的行为要可以进行组织操作,上移、下移和删除,来改变多个行为出现的顺序

事件类型

点击:对象被点击时触发行为

出现:对象出现在舞台上时会触发行为(即使它是无形的,透明度=0)。使用“出现”触发行为的一个很好的例子是在一定时间内通过给一个对象分配“暂停”行为来暂停动画播放。

注意:某些行为(如发出呼叫)只能通过点击触发。

行为参数

每种行为可能有一个或多个参数,这取决于行为的性质(例如,一个用于发出呼叫的电话号码)。

每一个行为有一个可选的参数,称为“事件名称”,它是用来定义一些语义的标识。事件名称显示在跟踪报告中,对于评估参与的活动是有帮助的。

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

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

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

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

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

播放视频:案例

播放视频:设置参数

播放视频

表单,可以通过表单让用户填写一些信息,提交到服务器,来收集一些想要得到的数据。

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

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

总结,通过添加动作,我们可以再作品中完成各种互动的功能,大大拓展了动画的表现形式。

下一节,我们将要讲到元件,元件是一个可以在舞台上实例化和再利用的预先生成的独立动画。一个元件有它自己的时间轴(层,单位等),可以独立的显示动画。元件可用于创建复杂的动画效果。元件提高的动画的可重用性和灵活性,是个强大的存在。

[Mugeda HTML5技术教程之8]添加行为的更多相关文章

  1. [Mugeda HTML5技术教程之7]添加动画

    前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果.这节我们将要讲述怎么给元素添加动画.Mugeda动画是通过时间轴和帧来实现的.通过在时间轴上创建图层和 ...

  2. [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  3. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  4. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  5. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  6. [Mugeda HTML5技术教程之13]链接的添加方式

    在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...

  7. [Mugeda HTML5技术教程之11]Mugeda API简介

    一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...

  8. [Mugeda HTML5技术教程之4] Studio 概述

    Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...

  9. [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容

    1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...

随机推荐

  1. 转: pthread_detach()函数

    创建一个线程默认的状态是joinable. 如果一个线程结束运行但没有被join,则它的状态类似于进程中的Zombie Process,即还有一部分资源没有被回收(退出状态码). 所以创建线程者应该调 ...

  2. 当DOCKER遇上ESXI

    特别是你要为DOCKER窗口设置静态IP,且和公司局域网打成一片的时候, 苦逼的测试就会开始,我差不多前前后后测试了四五天,一百多个容器报废. NETNS,NSENTER,PIPWORK,各种镜像合下 ...

  3. mybatis mapper namespace

    http://www.mybatis.org/mybatis-3/zh/sqlmap-xml.html#insert_update_and_delete org.apache.ibatis.excep ...

  4. HDOJ(HDU) 1587 Flowers(水、、)

    Problem Description As you know, Gardon trid hard for his love-letter, and now he's spending too muc ...

  5. HDOJ 1334 Perfect Cubes(暴力)

    Problem Description For hundreds of years Fermat's Last Theorem, which stated simply that for n > ...

  6. 移动web app开发框架

    文章地址:http://www.cnblogs.com/soulaz/p/5586787.html jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mo ...

  7. BZOJ 3040 最短路 (堆优化dijkstra)

    这题不是裸的最短路么?但是一看数据范围就傻了.点数10^6,边数10^7.这个spfa就别想了(本来spfa就是相当不靠谱的玩意),看来是要用堆优化dijkstra了.但是,平时写dijkstra时为 ...

  8. eclipse 解决插件失效

    昨天系统崩溃,重装系统后eclipse突然对links方式加载插件失效.用尽了网上各种解决方法,始终不行.在%eclispe_dir%/configration/org.eclipse.update/ ...

  9. Android笔记(二):从savedIndstanceState发散

    savedIndstanceState savedIndstanceState位于ActivityonCreate(Bundle savedInstanceState)方法的参数中.对这个参数的理解要 ...

  10. css3 渐变linear-gradient

    background: -moz-linear-gradient(top, #FC641C, #FC761C); 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从 ...