[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介

摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发、发布和统计基于HTML5的,包含丰富动画和交互的移动富媒体内容。

在上一篇教程中,我们大致分析了HTML5的现状以及今后的发展趋势。在移动浏览器(含浏览器控件)中渲染的HTML5应用,将会和移动原生应用相辅相成,共同发展,在移动互联网大潮中扮ch来越重要的角色。另一方面,开发HTML5应用目前仍然存在成本高、效率低的诸多问题,这也在一定程度上阻碍了HTML5的发展。现实中,很多企业和开发人员已经意识到并认同了HTML5能为他们带来的价值,但是开发人员储备不足、开发周期长、设备兼容性差等问题,却让他们望而却步。为了更好的支持HTML5的发展,需要相应的开发工具来支持,而这一块尚处在行业发展的初期,市场上有若干相应的软件与服务试图从各个角度来解决这些问题。Mugeda是其中专注于解决富媒体内容的一款产品。所谓富媒体内容,是区别于诸如文字、图片等传统的静态内容,具有丰富的多媒体特性的内容,例如:动画、视频、声音、交互、手机功能(例如打电话)等。这些富媒体内容,可以极大的提升应用的用户体验,增加用户参与度,是制作HTML5应用必不可少的元素。

简单来说,Mugeda提供一个基于云的平台,供开发人员和设计人员在云端快速的开发、发布和统计基于HTML5的移动富媒体内容。采用Mugeda开发HTML5富媒体内容及应用,可以显著的提高设计和开发的效率。所产生的内容,具有广泛的设备兼容性,可以在诸如PC、智能手机、平板电脑、 智能电视等HTML5设备中使用。

Mugeda云平台中的核心产品,是Mugeda Studio,一个在线集成开发环境(IDE), 他封装了很多HTML5的实现细节,设计人员和开发人员无需了解HTML5的技术细节就可以直接使用,快速高效的生成HTML5富媒体内容,无需编码就可以实现丰富的动画和交互特性。这样,一个设计人员就可以以更短的周期完成之前好几个HTML5开发人员才能完成的任务。市场上广大的Flash设计师,可以非常方便的转移到Mugeda平台上并快速掌握。

同时,对于带有编码需求的富媒体内容(例如小游戏),Mugeda提供一整套JavaScript API供开发人员使用,用于制作高级的动画和交互特性。Mugeda API可以细化到对每一个动画对象和每一个DOM元素的精确控制。这种设计+开发的集成开发模式,可以充分发挥可视化动画编辑和脚本编码各自的优势,从而能够极大的提升开发效率,节省大量的编码量。为了更好的理解这一点,大家可以参考下面这个采用Mugeda Studio实现的投篮游戏截图。这个游戏是当年谷歌在2012年奥运会期间制作的一个Google Doodle,其代码量为压缩后43K左右,而采用Mugeda Studio制作同样的动画,代码量为压缩后6K,少了一个量级。这充分说明了这种可视化动画设计加API编写代码结合的强大之处。

预览地址:

http://t.cn/8F7B3HX

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

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

Mgeda Studio的界面截图如下图所示。这是一个兼顾专业性和易用性的开发环境,具备时间线、图层、元件、脚本等高级动画编辑工具,同时充分考虑了设计和开发流程的无缝集成。我们将在后续的教程中,对其中的功能逐一进行介绍。同时,Mugeda 还提供了方便的方式对开发的内容进行共享、预览、发布,快速的推送到移动用户。我们也会陆续介绍相关的功能。

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

Mugeda平台支持的富媒体特性可以参考下面表格的总结:

类型

说明

适合应用

动画

除了支持基本的位置、旋转、透明度、缩放的动画,还支持分层、时间线、路径、洋葱皮、遮罩、过程等高级动画特性。

设计人员在没有开发人员介入的情况下制作专业HTML5动画

多媒体

文字、图片、贝塞尔曲线、视频、音频、图片走廊、360°视图

快速实现预置的富媒体效果

行为

表单、链接、动画播放控制、扩展显示、回调函数、拨打电话、发送短信、显示地图、保存图片、保存日程、相应传感器事件

调用移动设备的原生功能实现丰富的交互特性

脚本

JavaScript脚本用于动态生成动画、控制动画元素行为、访问DOM元素等复杂的交互

制作高级交互应用,例如游戏

导入

支持导入分层ai文件,支持导入视频转换为动态gif或者css动画,支持导入外部脚本

采用外部媒体扩展Mugeda应用

富媒体广告

符合MRAID 2.0规范的移动富媒体广告

制作移动富媒体广告

Mugeda还提供一整套对富媒体内容的在线管理操作。下面的表格进行了一个简要的说明。

类型

说明

素材管理

Mugeda支持图片上传,或者是通过URL获取图片。这些图片会存储在用户的在线素材库中,可以按照目录进行整理,并在后续制作中重复使用而不用再次上传。

共享

Mugeda提供方便的方式,通过二维码、共享地址等方式,快速的共享产生的内容

发布

用户可以选择直接将内容发布到Mugeda的内容分发网络(CDN),也可以选择将制作的内容导出成内容然后自行部署。

统计

所有Mugeda制作的内容,均内置完整的统计功能,不但可以统计常用的访问次数和点击次数,还可以统计高级的交互特性,了解用户的停留时间、交互操作等。

脚本

JavaScript脚本用于动态生成动画、控制动画元素行为、访问DOM元素等复杂的交互

导入

支持导入分层ai文件,支持导入视频转换为动态gif或者css动画,支持导入外部脚本

下面我们通过一些实例,来介绍一下Mugeda制作的HTML5内容,以及典型的应用场景。注意下面提到的在Mugeda中查看源代码的地址,需要先登录自己的账号才能查看。

1. 网页动画

这是一个典型的在网页中经常采用的片头动画。采用动画的形式,可以更加生动的表现所要传达的信息,可以给用户留下更加深刻的印象。

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

效果预览地址:

http://t.cn/8F7X3VW

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

在Mugeda Studio中查看源代码的地址:

https://www.mugeda.com/animation/edit/7bf12cad

2. 移动广告

这是红牛制作的一款促销广告,采用Mugeda制作的飞溅水花的动画效果,生动的表现了红牛功能运动饮料的

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

预览地址(由于内容版权,恕不提供编辑地址):

http://t.cn/8F7apj4

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

3. 移动贺卡

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

这是一个可定制移动贺卡的例子。用户在观看贺卡后,可以直接在贺卡中对贺卡进行定制并转发。

预览地址:

http://t.cn/8F7S2ZN

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

在Mugeda Studio中查看源代码的地址:

https://cn.mugeda.com/animation/edit/104cdc1f

4. 移动小游戏

这是一个白象促销脆小子食品制作的一个HTML5小游戏。用脆小子形象作为角色,进行一个经典的卷轴游戏。

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

预览地址(由于内容版权,恕不提供编辑地址):

http://t.cn/zRG6o9W

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

5. 移动课件

这是一个可以在移动设备上使用的课件,描述了物理上的胡克定律的原理。这种带交互的动画,可以更加准确清晰的传达信息。

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

预览地址:

http://t.cn/8F7lJjR

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

在Mugeda Studio中查看源代码的地址:

https://cn.mugeda.com/animation/edit/104cdc1f

另外,Mugeda API还可以制作跨屏互动的HTML5应用。移动设备无需安装任何应用,就可以和PC等大屏幕进行交互,实现十分生动的跨屏互动应用。我们会在后续专门介绍相关的技术实现。

总的来说,Mugeda专注于为制作HTML5富媒体内容提供专业级别的平台支持。设计人员和开发人员都可以在Mugeda平台上极大的提高自己的开发效率。从下一讲开始,我们将从各个方面全面的介绍如何采用Mugeda制作移动富媒体内容。敬请关注。

04-13 10:54