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

[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

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

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. 网页动画

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

效果预览地址:

http://t.cn/8F7X3VW

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

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

2. 移动广告

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

预览地址（由于内容版权，恕不提供编辑地址）：

http://t.cn/8F7apj4

3. 移动贺卡

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

预览地址：

http://t.cn/8F7S2ZN

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

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

4. 移动小游戏

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

预览地址（由于内容版权，恕不提供编辑地址）：

http://t.cn/zRG6o9W

5. 移动课件

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

预览地址:

http://t.cn/8F7lJjR

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

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

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

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