[Mugeda HTML5技術(shù)教程之2] Mugeda HTML5富媒體平臺(tái)簡(jiǎn)介

[Mugeda HTML5技術(shù)教程之2] Mugeda HTML5動(dòng)畫平臺(tái)簡(jiǎn)介

摘要：Mugeda提供基于云的平臺(tái)，供開(kāi)發(fā)人員和設(shè)計(jì)人員快速的開(kāi)發(fā)、發(fā)布和統(tǒng)計(jì)基于HTML5的，包含豐富動(dòng)畫和交互的移動(dòng)富媒體內(nèi)容。

在上一篇教程中，我們大致分析了HTML5的現(xiàn)狀以及今后的發(fā)展趨勢(shì)。在移動(dòng)瀏覽器（含瀏覽器控件）中渲染的HTML5應(yīng)用，將會(huì)和移動(dòng)原生應(yīng)用相輔相成，共同發(fā)展，在移動(dòng)互聯(lián)網(wǎng)大潮中扮ch來(lái)越重要的角色。另一方面，開(kāi)發(fā)HTML5應(yīng)用目前仍然存在成本高、效率低的諸多問(wèn)題，這也在一定程度上阻礙了HTML5的發(fā)展。現(xiàn)實(shí)中，很多企業(yè)和開(kāi)發(fā)人員已經(jīng)意識(shí)到并認(rèn)同了HTML5能為他們帶來(lái)的價(jià)值，但是開(kāi)發(fā)人員儲(chǔ)備不足、開(kāi)發(fā)周期長(zhǎng)、設(shè)備兼容性差等問(wèn)題，卻讓他們望而卻步。為了更好的支持HTML5的發(fā)展，需要相應(yīng)的開(kāi)發(fā)工具來(lái)支持，而這一塊尚處在行業(yè)發(fā)展的初期，市場(chǎng)上有若干相應(yīng)的軟件與服務(wù)試圖從各個(gè)角度來(lái)解決這些問(wèn)題。Mugeda是其中專注于解決富媒體內(nèi)容的一款產(chǎn)品。所謂富媒體內(nèi)容，是區(qū)別于諸如文字、圖片等傳統(tǒng)的靜態(tài)內(nèi)容，具有豐富的多媒體特性的內(nèi)容，例如：動(dòng)畫、視頻、聲音、交互、手機(jī)功能（例如打電話）等。這些富媒體內(nèi)容，可以極大的提升應(yīng)用的用戶體驗(yàn)，增加用戶參與度，是制作HTML5應(yīng)用必不可少的元素。

簡(jiǎn)單來(lái)說(shuō)，Mugeda提供一個(gè)基于云的平臺(tái)，供開(kāi)發(fā)人員和設(shè)計(jì)人員在云端快速的開(kāi)發(fā)、發(fā)布和統(tǒng)計(jì)基于HTML5的移動(dòng)富媒體內(nèi)容。采用Mugeda開(kāi)發(fā)HTML5富媒體內(nèi)容及應(yīng)用，可以顯著的提高設(shè)計(jì)和開(kāi)發(fā)的效率。所產(chǎn)生的內(nèi)容，具有廣泛的設(shè)備兼容性，可以在諸如PC、智能手機(jī)、平板電腦、 智能電視等HTML5設(shè)備中使用。

Mugeda云平臺(tái)中的核心產(chǎn)品，是Mugeda Studio，一個(gè)在線集成開(kāi)發(fā)環(huán)境(IDE), 他封裝了很多HTML5的實(shí)現(xiàn)細(xì)節(jié)，設(shè)計(jì)人員和開(kāi)發(fā)人員無(wú)需了解HTML5的技術(shù)細(xì)節(jié)就可以直接使用，快速高效的生成HTML5富媒體內(nèi)容，無(wú)需編碼就可以實(shí)現(xiàn)豐富的動(dòng)畫和交互特性。這樣，一個(gè)設(shè)計(jì)人員就可以以更短的周期完成之前好幾個(gè)HTML5開(kāi)發(fā)人員才能完成的任務(wù)。市場(chǎng)上廣大的Flash設(shè)計(jì)師，可以非常方便的轉(zhuǎn)移到Mugeda平臺(tái)上并快速掌握。

同時(shí)，對(duì)于帶有編碼需求的富媒體內(nèi)容（例如小游戲），Mugeda提供一整套JavaScript API供開(kāi)發(fā)人員使用，用于制作高級(jí)的動(dòng)畫和交互特性。Mugeda API可以細(xì)化到對(duì)每一個(gè)動(dòng)畫對(duì)象和每一個(gè)DOM元素的精確控制。這種設(shè)計(jì)+開(kāi)發(fā)的集成開(kāi)發(fā)模式，可以充分發(fā)揮可視化動(dòng)畫編輯和腳本編碼各自的優(yōu)勢(shì)，從而能夠極大的提升開(kāi)發(fā)效率，節(jié)省大量的編碼量。為了更好的理解這一點(diǎn)，大家可以參考下面這個(gè)采用Mugeda Studio實(shí)現(xiàn)的投籃游戲截圖。這個(gè)游戲是當(dāng)年谷歌在2012年奧運(yùn)會(huì)期間制作的一個(gè)Google Doodle，其代碼量為壓縮后43K左右，而采用Mugeda Studio制作同樣的動(dòng)畫，代碼量為壓縮后6K，少了一個(gè)量級(jí)。這充分說(shuō)明了這種可視化動(dòng)畫設(shè)計(jì)加API編寫代碼結(jié)合的強(qiáng)大之處。

預(yù)覽地址：

http://t.cn/8F7B3HX

Mgeda Studio的界面截圖如下圖所示。這是一個(gè)兼顧專業(yè)性和易用性的開(kāi)發(fā)環(huán)境，具備時(shí)間線、圖層、元件、腳本等高級(jí)動(dòng)畫編輯工具，同時(shí)充分考慮了設(shè)計(jì)和開(kāi)發(fā)流程的無(wú)縫集成。我們將在后續(xù)的教程中，對(duì)其中的功能逐一進(jìn)行介紹。同時(shí)，Mugeda 還提供了方便的方式對(duì)開(kāi)發(fā)的內(nèi)容進(jìn)行共享、預(yù)覽、發(fā)布，快速的推送到移動(dòng)用戶。我們也會(huì)陸續(xù)介紹相關(guān)的功能。

Mugeda平臺(tái)支持的富媒體特性可以參考下面表格的總結(jié)：

Mugeda還提供一整套對(duì)富媒體內(nèi)容的在線管理操作。下面的表格進(jìn)行了一個(gè)簡(jiǎn)要的說(shuō)明。

下面我們通過(guò)一些實(shí)例，來(lái)介紹一下Mugeda制作的HTML5內(nèi)容，以及典型的應(yīng)用場(chǎng)景。注意下面提到的在Mugeda中查看源代碼的地址，需要先登錄自己的賬號(hào)才能查看。

1. 網(wǎng)頁(yè)動(dòng)畫

這是一個(gè)典型的在網(wǎng)頁(yè)中經(jīng)常采用的片頭動(dòng)畫。采用動(dòng)畫的形式，可以更加生動(dòng)的表現(xiàn)所要傳達(dá)的信息，可以給用戶留下更加深刻的印象。

效果預(yù)覽地址:

http://t.cn/8F7X3VW

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

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

2. 移動(dòng)廣告

這是紅牛制作的一款促銷廣告，采用Mugeda制作的飛濺水花的動(dòng)畫效果，生動(dòng)的表現(xiàn)了紅牛功能運(yùn)動(dòng)飲料的

預(yù)覽地址（由于內(nèi)容版權(quán)，恕不提供編輯地址）：

http://t.cn/8F7apj4

3. 移動(dòng)賀卡

這是一個(gè)可定制移動(dòng)賀卡的例子。用戶在觀看賀卡后，可以直接在賀卡中對(duì)賀卡進(jìn)行定制并轉(zhuǎn)發(fā)。

預(yù)覽地址：

http://t.cn/8F7S2ZN

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

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

4. 移動(dòng)小游戲

這是一個(gè)白象促銷脆小子食品制作的一個(gè)HTML5小游戲。用脆小子形象作為角色，進(jìn)行一個(gè)經(jīng)典的卷軸游戲。

預(yù)覽地址（由于內(nèi)容版權(quán)，恕不提供編輯地址）：

http://t.cn/zRG6o9W

5. 移動(dòng)課件

這是一個(gè)可以在移動(dòng)設(shè)備上使用的課件，描述了物理上的胡克定律的原理。這種帶交互的動(dòng)畫，可以更加準(zhǔn)確清晰的傳達(dá)信息。

預(yù)覽地址:

http://t.cn/8F7lJjR

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

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

另外，Mugeda API還可以制作跨屏互動(dòng)的HTML5應(yīng)用。移動(dòng)設(shè)備無(wú)需安裝任何應(yīng)用，就可以和PC等大屏幕進(jìn)行交互，實(shí)現(xiàn)十分生動(dòng)的跨屏互動(dòng)應(yīng)用。我們會(huì)在后續(xù)專門介紹相關(guān)的技術(shù)實(shí)現(xiàn)。

總的來(lái)說(shuō)，Mugeda專注于為制作HTML5富媒體內(nèi)容提供專業(yè)級(jí)別的平臺(tái)支持。設(shè)計(jì)人員和開(kāi)發(fā)人員都可以在Mugeda平臺(tái)上極大的提高自己的開(kāi)發(fā)效率。從下一講開(kāi)始，我們將從各個(gè)方面全面的介紹如何采用Mugeda制作移動(dòng)富媒體內(nèi)容。敬請(qǐng)關(guān)注