[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制作移动富媒体内容。敬请关注。

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

[Mugeda HTML5技术教程之11]Mugeda API简介
一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...
[Mugeda HTML5技术教程之14]案例分析：制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
[Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
[Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
[Mugeda HTML5技术教程之10]发布内容
动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...
[Mugeda HTML5技术教程之4] Studio 概述
Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画.HTML5动画相对于传统的 ...
[Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...
[Mugeda HTML5技术教程之17] 理解Mugeda访问统计结果
1. 功能简介 Mugeda提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况. 目前统计功能主要展示动画内容和广告工程的统计数据.在动画被发布或导 ...
[Mugeda HTML5技术教程之13]链接的添加方式
在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...

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

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

最新文章

热门文章