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

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

HTML5 在过去三年快速增长,已经成为 Web
开发人员最喜欢的编程语言之一。强大的编程语言拥有开发更好的网页应用的能力。 HTML5 中引入的新技术都非常好,像
Chrome、Firefox、Safari
等许多现代浏览器都已经支持。今天,我们列出了10个优秀的
HTML5 动画制作工具,可以帮助你的工作。

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

如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具。HTML5是设计师用来打造时尚网站的最流行的编程语言之一。在过去三年内,这种编程语言的使用人数急剧增长。开发人员可以使用这种语言来创建各种改进的内容并放到万维网上。随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占据了制高点。

1.Createjs

Createjs是与HTML5
canvas元素工作的JavaScript库。该工具是最出名的是创造游戏,生成艺术和其它图形工具。它提供了巨大的图形体验。

澳门新浦京电子游戏 1

在线预览

 

HTML5使用起来非常方便,并且能够提供多种功能,例如内置的视觉元素,指定的结构标记,互动的拖放功能,等等,开发人员可以利用这些功能来创建充满吸引力的网站。此外,它还拥有现代浏览器,如Chrome,IE和Firefox的支持。使用HTML5创建的动画可以使得网站更吸引用户的眼球,从而达成更多的业务。但是,创建动画是一个耗时且繁琐的过程。为了简化这个过程,现在的市场上有许多可用的HTML5动画工具。既有付费的,也有免费的,都可以帮助你为你的网站创造惊艳的动画。这里我们将列出其中一些必要的HTML5动画工具。

2.Animatron

Animatron是一个直观的设计和出版编辑软件。您可以使用Animatron设计如横幅广告,信息图表,动画创意台式电脑,移动设备和您选择的任何内容。

澳门新浦京电子游戏 2

在线预览

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

1.Animatron

使用直观的Animatron编辑器来设计和发布动画和交互内容,这些动画和交互内容可应用于从台式机到移动设备的每个地方。

澳门新浦京电子游戏 3

官方网站:

3.Tumult Hype

您可以使用骚动炒作来创造美丽的HTML5网页内容。使用骚动创建的内容是互动的,具有很大的动画功能。您可以使用从台式,智能手机和iPad这个框架。它不&rsquo的;吨需要有编码的知识。

澳门新浦京电子游戏 4

在线预览

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

2.blysk

使用你曾经在其他动画工具上的经验,只要一秒钟就可以开始使用Blysk工作——我们都不希望重新发明轮子,这是一个内置于浏览器的优秀工具。

澳门新浦京电子游戏 5

官方网站:

4.Mugeda

Mugeda是首选的许多创作工具,广告商和代理商,以发挥他们的创造力,并创造最优质的媒体广告单元。该工具是最出名的是它的能力创造伟大的品质的广告单元,横幅,插播,可扩展和迷你游戏。

澳门新浦京电子游戏 6

在线预览

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

3.Createjs

澳门新浦京电子游戏,这是一个可以使得工作于HTML5
Canvas元素变得容易的JavaScript库。对于创建游戏、生成艺术和其他高度图形化的体验非常有用。

澳门新浦京电子游戏 7

官方网站:

5.HTML5 Maker

HTML5
Maker是用于建筑滑块,横幅和令人印象深刻的图形以最小的努力流行的工具。该工具是免费提供的。它不&rsquo的;吨需要你有任何特殊的编程知识。

澳门新浦京电子游戏 8

在线预览

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

4.Hippo Studios

Hippani
Animator是一款流行的HTML动画工作室。它可以很容易制作可扩展的交互式动画,复杂的游戏,视频,演示,app和多媒体网站。比其他任何HTML5动画制作软件能发布更多在网页浏览器和设备上。

澳门新浦京电子游戏 9

官方网站:

6.Hippo Studios

河马工作室是一个用于创建强大的动画,游戏,演示,应用程序和多媒体网站的一个很好的平台。使用河马创建的项目是支持大多数浏览器和设备。

澳门新浦京电子游戏 10

在线预览

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

5.HTML5 Maker

HTML5MAKER Online
Editor支持所有流行的文本过滤器,所以你不需要用Photoshop创建看起来酷的文本。这里为你提供了大量的图像集合,既可以用于你的项目,也可以改变属性并创建一种惊艳的类似于照片分享的效果。你可以创造出令人吃惊的转换和缓冲的动画,当然还有时间轴,它允许你完全控制你动画。

澳门新浦京电子游戏 11

官方网站:

7.Sencha

煎茶空间是基于HTML和JavaScript应用程序安全的应用环境。该工具可帮助在组织简化应用开发,安全性,维护和部署到桌面,平板电脑和智能手机。该工具最出名的是它的安全功能。

澳门新浦京电子游戏 12

在线预览

预览地址:

6.Mixeek

澳门新浦京电子游戏 13

官方网站:

8.blysk

blysk是非常有用的动画工具。它提供了动画和网页设计师的绝佳平台构建直观的动画网站和其他互联网项目。

澳门新浦京电子游戏 14

在线预览

7.Mugeda

Mugeda致力于为富媒体内容提供基于云的解决方案。Mugeda平台,一种在线的基于HTML5的技术,可用来打造专业的HTML5富媒体创意,这些创意可以被部署到如计算机,智能手机,平板电脑和智能电视这样的智能设备。

澳门新浦京电子游戏 15

官方网站:

9.Radiapp

Radiapp是一个强大的工具,动画。它是最常用的,用于创建运行时的视频和图形。它提供实时的图形编辑界面现代的网站。

澳门新浦京电子游戏 16

在线预览

澳门新浦京电子游戏 17

8.Radiapp

澳门新浦京电子游戏 18

官方网站:

10.Mixeek

Mixeek是一个免费的软件工具,它可用于设计和交互式Web动画。该工具是基于JavaScript,CSS3和HTML5。
Mixeek的开发是为了使对支付动画工具重量轻且易于使用的替代方案。

澳门新浦京电子游戏 19

在线预览

本文固定链接: 

澳门新浦京电子游戏 20

9.Sencha

澳门新浦京电子游戏 21

官方网站:

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

10.Tumult Hype

澳门新浦京电子游戏 22

官方网站:

以上就是10个设计师必看的HTML5动画工具。

澳门新浦京电子游戏 23

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

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

澳门新浦京电子游戏 24

效果预览地址:

澳门新浦京电子游戏 25

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

  1. 移动广告

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

澳门新浦京电子游戏 26

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

澳门新浦京电子游戏 27

  1. 移动贺卡

澳门新浦京电子游戏 28

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

预览地址:

澳门新浦京电子游戏 29

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

  1. 移动小游戏

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

澳门新浦京电子游戏 30

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

澳门新浦京电子游戏 31

  1. 移动课件

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

澳门新浦京电子游戏 32

预览地址:

澳门新浦京电子游戏 33

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

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

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

 

HTML5技术教程之2] Mugeda
HTML5动画平台简介
摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发、发布和统计基于HTML5的,…

发表评论

电子邮件地址不会被公开。 必填项已用*标注