[Mugeda HTML5技术教程之8]添加行为

时间:2021-03-30 07:50:07

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

[Mugeda HTML5技术教程之8]添加行为

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

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

[Mugeda HTML5技术教程之8]添加行为

[Mugeda HTML5技术教程之8]添加行为

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

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

[Mugeda HTML5技术教程之8]添加行为

事件类型

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

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

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

[Mugeda HTML5技术教程之8]添加行为

行为参数

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

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

播放视频:案例

[Mugeda HTML5技术教程之8]添加行为

播放视频:设置参数

[Mugeda HTML5技术教程之8]添加行为

播放视频

[Mugeda HTML5技术教程之8]添加行为

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

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

[Mugeda HTML5技术教程之8]添加行为

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

[Mugeda HTML5技术教程之8]添加行为

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

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