html5開發(fā)工具對比

1、Html5開發(fā)工具介紹 HTML5開發(fā)工具簡介 Adobe Edge Animate/Animatron/Tumult Hype/Mugeda/HTML5 Maker/Hippo Studios/Blysk/Radiapp/Lungo/Articulate Stroyline2/mobl/DevExtreme/DCloudHBuilder Adobe Edge工具介紹 Adobe Edge簡介/Abode Edge Animate界面功能模塊/數(shù)字媒體制作 Articulate Storyline2工具介紹 Articulate Storyline2簡介/Articulate Storylin

2、e2新增功能/數(shù)字媒體制作 Flash Professional CC 2014工具介紹 Flash Professional CC 2014簡介/ Flash Professional CC 2014功能介紹/數(shù)字媒體制作 相關(guān)軟件制作功能對比及適用范圍 HTML5開發(fā)工具簡介 Adobe Edge Adobe Edge的目的是幫助專業(yè)設(shè)計師制作 網(wǎng)頁動畫乃至簡單游戲。目前該工具的重點(diǎn) 放在動畫引擎上，但未來將增加更多HTML5 功能，比如Canvas、HTML5音頻/視頻標(biāo)簽 等。 Animatron是一款直觀的設(shè)計與發(fā)布編輯軟件。你可以 使用 Animatron 來設(shè)計內(nèi)容，如橫幅、信息

3、圖表和創(chuàng)意 動畫（針對桌面電腦、移動設(shè)備以及任何你可以選擇的設(shè) 備）。 Animatron（在線開發(fā)） Tumult Hype 你可以使用Tumult Hype來創(chuàng)建美麗的 HTML5 Web內(nèi)容。用其創(chuàng)建的內(nèi)容是交互的 并擁有偉大的動畫功能。你可以在桌面、智能 手機(jī)和iPad上使用這個框架，它不需要你有編 碼知識。 Mugeda（在線開發(fā)） Mugeda是許多創(chuàng)作工具包、廣告商和代理處的首選，來釋 放他們的創(chuàng)造力并創(chuàng)建最優(yōu)質(zhì)的媒體廣告單元。該工具最知 名的是它創(chuàng)建優(yōu)質(zhì)廣告單元、橫幅、插頁式廣告、可擴(kuò)展和 迷你游戲的能力。 HTML5 Maker （在線開發(fā)） 常用于構(gòu)建滑塊、橫幅以 及用最小

4、的努力創(chuàng)建令人 印象深刻的圖形。這個工 具是免費(fèi)的，它不要求你 有任何特別的編程知識。 HTML5開發(fā)工具簡介 Hippo Studios Hippo Studios是一個很好的平臺，可以創(chuàng) 建強(qiáng)大的動畫、游戲、演示文稿、應(yīng)用和多 媒體網(wǎng)站。使用Hippo Studios創(chuàng)建的項目 被大多數(shù)瀏覽器和設(shè)備支持。 Blysk（在線開發(fā)） blysk是一款非常有用的動 畫工具。它為動畫和Web 設(shè)計提供了一個很好的平 臺，可以為網(wǎng)站和其他互 聯(lián)網(wǎng)項目構(gòu)建直觀的動畫。 Radiapp Radiapp是一款強(qiáng)大的工具，常用于創(chuàng)建運(yùn) 行時的視頻和圖形。它為現(xiàn)代網(wǎng)站提供實(shí)時 的圖形編輯界面。 Articul

5、ate Stroyline2 Articulate Stroyline2 在原有 國際排名第一的課件工具 Articulat Storyline1的基礎(chǔ)上， 有了非常大的改進(jìn)與創(chuàng)新。 DCloudHBuilder 基于HTML5開發(fā)工具是當(dāng) 前最快的HTML開發(fā)工具。 DevExtreme DevExtreme是專為移動 準(zhǔn)備的，一個跨平臺開發(fā) 的HTML5/JS框架。 mobl 一個新的開源的編程語言。 Lungo 一款基于HTML5的開發(fā)框架，專為想要設(shè)計、構(gòu)建和共享跨 設(shè)備應(yīng)用的開發(fā)者而準(zhǔn)備。 Adobe Edge Animate 簡介 Adobe Edge是adobe公司的一款新型網(wǎng)頁

6、互動工具。允許設(shè)計師通過HTML5、CSS和JavaScript制作網(wǎng)頁動畫。無需Flash。 Adobe Edge的目的是幫助專業(yè)設(shè)計師制作網(wǎng)頁動畫乃至簡單游戲。該工具的重點(diǎn)放在動畫引擎上，但adobe承諾將增加更多HTML5功能， 比如Canvas、HTML5音頻/視頻標(biāo)簽等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各個平臺。Adobe 于2014年正式推出Adobe Edge AnimateCC集成了hml5、js、css的 開發(fā)工具。 人們也許會問，這一舉措是不是表明Adobe正在向蘋果等公司讓步？ 蘋果認(rèn)為Fl

7、ash是一種過時的技術(shù)，而HTML5才是未來。蘋果的iPad和 iPhone等產(chǎn)品中無法顯示Flash動畫。 其實(shí)，Adobe Edge并不會替代Flash。該軟件只是為網(wǎng)頁設(shè)計人員提供 了一種工具，幫助他們在不支持Flash的設(shè)備（比如蘋果iOS設(shè)備）上制 作網(wǎng)絡(luò)動畫。 Adobe Edge Animate CC 2014 數(shù)字媒體制作 創(chuàng)建一個Abode Edge Animate新文件： 鼠標(biāo)左鍵單擊 下圖按鈕，即 可成功創(chuàng)建一 個空白的 Abode Edge Animate文件 創(chuàng)建成功的軟件使用界面： Adobe Edge Animate CC 2014 界面功能模塊 界面功能介紹：

8、最上面為菜單欄 菜單欄下面為工具欄 左側(cè)為屬性欄空白區(qū)域?yàn)樵O(shè)計區(qū)域空白欄下面為動作欄 空白區(qū)域右邊為文件欄最右邊為介紹欄 數(shù)字媒體制作（1） 尺寸大小設(shè)置 輸入相應(yīng)數(shù)值建立所需新項目 添加元素 點(diǎn)擊文件導(dǎo)入 選擇導(dǎo)入元素 導(dǎo)入元素的文件格式必需是如圖所示的幾 種文件格式，否則無法導(dǎo)入 1、導(dǎo)入音頻 選擇導(dǎo)入的音頻格式后導(dǎo)入音頻 導(dǎo)入音頻“slide0101”后屬性欄 和動作欄內(nèi)均有顯示 控制播放條 動畫效果制作 1、動畫元素繪制 在工具欄中選擇所需要的元素如：文 字、圖形等,屬性欄可以編輯顏色等 數(shù)字媒體制作（2） 動畫效果制作 2、動畫制作 點(diǎn)擊按鈕（如上圖）后，拖拽時間軸到 想要動畫時長位

9、置（如下圖0.415處）拖拽元素到0.415秒后想到到達(dá)的位置， 松手后形成一組時間軸/幀動畫 同理也可實(shí)現(xiàn)顏色變化和消失漸變等簡易動 畫效果 保存及發(fā)布 點(diǎn)擊另存為輸入文件名稱 利用Adobe Edge AnimateCC 2014 制作的課程實(shí)例： 6:8880/test01/test01. html Articulate Storyline2簡介 Articulate Storyline是一個強(qiáng)大的獨(dú)是一個強(qiáng)大的獨(dú)立工具，具有無可比擬的交互功能，將幫助你建立動態(tài)的、引人入勝的內(nèi)容其中包含 模擬、屏幕錄制、拖放式交互、單擊顯示活動，以及測試和評估等等。 北

10、京時間2014年9月17日凌晨，Articulate發(fā)布了新一款軟件：Articulate Storyline2。 Articulate Stroyline2 在原有國際排名第一的課件工具Articulat Storyline1的基礎(chǔ)上，有了非常大的改進(jìn)與創(chuàng)新。其中最引人注目的 是，此款軟件同時推出了中文版。這對于啟盼之久的中國廣大用戶來 說，實(shí)在是一個大好消息。Storyline2不僅對操作界面進(jìn)行了漢化， 還正式支持雙字節(jié)字符，制作中文課件將會更加順利。 Articulate Stroyline2 還增加了滑塊、動作路徑、時間軸控制等 令人眼前一亮的新功能。發(fā)布成品方面，除了已有對iPad

11、的支持，還 特別加強(qiáng)了對安卓系統(tǒng)平板的支持。 支持所有平板電腦 第一種是自適應(yīng)的決方案， 也是工具推薦用戶使用的 （缺省的）方案。 Articulate Storyline2新增功能（1） Storyline 2正式宣布除了完全支持iPad 以外， 也開始支持Android系統(tǒng)的平板電腦。這給移動 學(xué)習(xí)課件的開發(fā)者來說就顯得更加靈活和方便。 現(xiàn)在使用Articulate Storyline 2發(fā)布HTML 5格 式的課件可以在任何移動設(shè)備上運(yùn)行。 課件內(nèi)容展現(xiàn)更生動，吸引學(xué)員的眼球 互動滑塊 讓學(xué)習(xí)者來控制滑塊，改變數(shù)據(jù)、 探索因果關(guān)系并控制導(dǎo)航。 動作路徑 Storyline 2增加了頁面中

12、元素的動 作路徑，現(xiàn)在可以向在PPT中一樣設(shè)置頁 面內(nèi)容的動作路徑、并通過觸發(fā)器來控制 其運(yùn)動、為一個元素設(shè)置多個運(yùn)動軌跡等 等。 新的動畫和頁面切換效果 11種新的頁面切換效果和10中新的 元素進(jìn)出動畫效果，讓我們非常容易的 為文本、圖片、層和頁面添加精彩的動 畫效果。 新增觸發(fā)器功能 使用Storyline 2全新觸發(fā)器和觸發(fā) 事件來控制頁面中的動效，你可以輕而 易舉的根據(jù)時間、提示點(diǎn)、甚至是動畫 播放完畢作為條件來觸發(fā)頁面元素的動 作。 Articulate Storyline2新增功能（2） 創(chuàng)建更貼切的視圖，使用Storyline新工具個性化設(shè)置你的文字、顏色、字體等等 全新的文本編

13、輯器，給你極致的編輯文本風(fēng)格、段落、行距、 方向、項目符等功能。 新的文本編輯器 Storyline 2支持個性化的字體以及在同行中增加文字后字體形狀 的改變。Storyline 2對中文輸入和字體支持更是無以倫比。Storyline 1中中文字體輸入的問題完全解決。 增強(qiáng)的字體支持 現(xiàn)在你可以在插入的網(wǎng)頁中覆蓋層、圖形、人物、文字等其他媒 體元素，創(chuàng)建完美的主頁風(fēng)格。 增強(qiáng)的網(wǎng)頁Web對象 你可以從屏幕上任何元素上（甚至是非Storyline 2界面）吸取你 喜歡的顏色，并添加到頁面中的任何元素中去。 取色器 Articulate Storyline2新增功能（3） 創(chuàng)建理想的學(xué)習(xí)體驗(yàn)，并掌

14、握學(xué)習(xí)者以怎樣的路徑學(xué)習(xí)你的課件 播放器導(dǎo)航按鈕的狀態(tài) 通過方便的設(shè)置播放器中上一頁、下一頁提交的狀態(tài)（正常、失效 和隱藏等）來防止學(xué)員跳過學(xué)習(xí)內(nèi)容。 測試題的減分功能 Storyline 2支持在考試中的錯題減分功能。 視頻壓縮選擇 Storyline 2可以允許你去選擇是否壓縮課件中的視頻，以 控制視頻的清晰度和課件大小。 只讀的播放條 Storyline 2可以設(shè)置只能顯示而不能拖拉的播放條。相信 這是很多課件設(shè)計者希望的實(shí)用功能。 增加你的課件設(shè)計產(chǎn)量，大大提升你的開發(fā)效率和方便性 全新的界面設(shè)計，使用更方便。 觸發(fā)器和層的窗口可以拖動到 Storyline界面之外的桌面上。 動畫刷。

15、快速方便的將一個元 素的動畫效果刷到其他元素上。 方便的切換故事視圖和窗體視圖。 支持在不同頁面之間拷貝和復(fù)制 層。 自動恢復(fù)。Storyline 2遇到異常 關(guān)閉后再次打開將恢復(fù)你最后編 輯的頁面。 Articulate Storyline2新增功能（4） 快速的開始是成功的一半 豐富精美的頁面模板，你可以直接從Storyline 2中 導(dǎo)入。 Storyline 2支持導(dǎo)入Articulate其他軟件的文件了 如Studio 09, Studio 13, Storyline 1和PPT。 使用Storyline 2可以直接將測試題在Excel文件中 創(chuàng)建，并一鍵導(dǎo)入到Storyline 2

16、中。 Storyline 2支持中文界面！ 數(shù)字媒體制作（1） 設(shè)置項目頁面尺寸 設(shè)計 選項卡 單擊 文章大小 進(jìn)行設(shè)置 1、添加場景 單擊Home主頁選項卡，然后單擊New Scene新場景或 在故事視圖空白區(qū)域任何地方右擊，然后選擇新場景 新場景默認(rèn)包含一個單獨(dú)的空白幻燈片。你可以雙擊幻 燈片切換到普通視圖，從而向幻燈片添加內(nèi)容。 2、復(fù)制場景 3、重命名場景和幻燈片標(biāo)題 4、刪除場景 5、折疊或展開場景 6、放大和縮小場景 7、重新排列場景內(nèi)的幻燈片 8、多場景的播放控制 9、場景輔助功能 用Ctrl+鼠標(biāo)滾輪進(jìn)行縮放或右下角的縮放滑塊 觸發(fā)器跳到下一個幻燈片或鏈接幻燈 片的關(guān)系 場景的

17、使用方法 可以直接拖動幻燈片到想要的位置，注 意幻燈片名稱 在“ 查看 ” 菜單中，調(diào)整母板 ，以及顯示標(biāo)尺，網(wǎng)格，參 考線等。 數(shù)字媒體制作（2） 自定義播放器 播放器按鈕 打開“文本標(biāo)簽” 語言調(diào) 整成中文修改相映按鈕文字 點(diǎn)擊“更新預(yù)覽”保存 選擇以及添加在播放器上將 要顯示的選項卡以及功能 1、導(dǎo)入音頻 音頻的處理 2、右鍵單擊音頻層，選擇編輯命令 “導(dǎo)入”是在藍(lán)色指示線索在位置添加另 一音頻 “靜音”單擊，在彈出的對話框中選擇添 加靜音的時長； 選中一段音頻單擊“靜 音”使此段音頻變?yōu)殪o音狀態(tài)。 音頻導(dǎo)入后會自動默認(rèn)顯示在時間軸的第 一層。 插入圖片 導(dǎo)入圖片 當(dāng)導(dǎo)入圖片的時候，會有

18、一些圖片的處理功 能呈現(xiàn)。 可以直接對圖片進(jìn)行亮度，對比度，著色 等處理。 數(shù)字媒體制作（3） “測驗(yàn)”模板（1） 1、案例測試題 先選擇插入新建幻燈片模板“測驗(yàn)” 點(diǎn)選“插入”“轉(zhuǎn)換為自由形式” 此種方式適用于基礎(chǔ)頁面已擺放好的情況 2、案例添加互動 “測驗(yàn)”模板（2） 新幻燈片中點(diǎn)擊“控件”插入按鈕；然后插 入人物；為按鈕添加觸發(fā)器，設(shè)置各項參數(shù) 3、案例熱區(qū) “測驗(yàn)”模板（3） 在新幻燈片中點(diǎn)擊“控件”插入熱區(qū)；選擇 一個熱區(qū)的圖形樣式，畫出熱區(qū)范圍，添加 觸發(fā)器進(jìn)行設(shè)置 數(shù)字媒體制作（4） 課程中導(dǎo)入視頻 導(dǎo)入視頻后彈出下面的設(shè)置框 ： 可在時間軸上裁剪視頻的播放長 度，調(diào)整視頻的畫面

19、亮度等。 同時也可以選擇是否壓縮視頻文 件，可設(shè)置是否可以拖動進(jìn)度條。 在菜單的右下角顯示這相關(guān)的結(jié) 果信息。 插入Flash 在界面中可以設(shè)置文件的寬高，并設(shè)置播放 位置，觸發(fā)方式等設(shè)置 動畫效果 先選擇要添加動畫的文件，然后點(diǎn)擊動畫按 鈕，為文件添加進(jìn)入，退出等的效果以及持 續(xù)時間 我們制作了一個動畫效果的整體演示演示。 特殊效果 畫面區(qū)域放大 縮小效果： 點(diǎn)選“縮放區(qū)域”按鈕，在畫面上選擇出一 塊區(qū)域，并在時間軸上調(diào)整好位置。 數(shù)字媒體制作（5） 錄制操作屏幕 選擇“錄制屏幕”會在屏幕上彈出虛框， 可通過拉伸調(diào)節(jié)錄制內(nèi)容范圍。錄制結(jié) 束后選擇相應(yīng)的設(shè)置 變量的使用 在Storyline中

20、可以很方便的使用變量， 使用觸發(fā)器向?qū)杆俳⑽锛淖兞慷鵁o 需編寫代碼。 使用變量的一種方式是記錄一些信息， 諸如學(xué)習(xí)者的名字及其輸入的數(shù)字；及基于 該信息而激活的內(nèi)容。當(dāng)然使用變量最多的 用處就是在課程中建立一些條件式的交互內(nèi) 容。 變量一次只能記錄一段內(nèi)容，一個比較 典型的例子是：在一個輸入學(xué)習(xí)者的界面中， 基于文本輸入框的變量可以接收到任何文本 輸入內(nèi)容，但是一次只能記錄一名學(xué)習(xí)者的 名字，每次學(xué)習(xí)者輸入新的名字時，變量將 變?yōu)樽詈笠淮屋斎氲膬?nèi)容 變量的類型 1、文本 （Text） 2、數(shù)字 （number） 3、真/假 （True/False） 使用變量的三個步驟 1、給變量重命名

21、 2、選擇使用變量的類型 3、選擇變量的數(shù)值（初始數(shù)值） 變量與狀態(tài)的區(qū)別 實(shí)例 右圖為具體畫面以及相應(yīng)的參數(shù)設(shè)置 變量同（物件的不同）狀態(tài)是不同：（物件的不 同）狀態(tài)僅適用于當(dāng)前的幻燈片，在其他幻燈片 激活時（物件的不同）狀態(tài)將不復(fù)存在。而變量 將在整組幻燈片中、或者整個場景中、有時甚至 整個課程中起作用。 數(shù)字媒體制作（6） 發(fā)布 默認(rèn)情況下，會發(fā)布為Flash.但我們可 以使用HTML5和ipad選項去為移動設(shè) 備發(fā)布。選擇如下： 當(dāng)這些選項都選擇后，當(dāng)我們從網(wǎng) 站上運(yùn)行一個課程時，Storyline的 工作過程是： 首先它會尋找Flash player.如 果你的設(shè)備不能用Flash播

22、放，它將 載入html5版本的課程。 增加背景音樂 添加下面代碼到發(fā)布的story.html里 在根目錄下創(chuàng)建一個bgsound文件夾（這個 名稱自己可 以編寫，但 要與連接地 址一樣）， 然后把我原 有的一個swf 文件考入到 bgsound文 件夾里。 把已提前找到的背景音樂以song1.MP3的命 名及格式放入bgsound文件里，與song1.swf 文件同級目錄。 song1.swf里已做好了降低原音量的10%的設(shè) 定，因此，你把任何原音頻文件考入放進(jìn)文件 夾里，播放出來的聲音都會自動降低到原來音 量的10%。 Flash Professional CC 2014簡介 Adobe Flash Professional CC 提供了強(qiáng)大的動畫和多媒體內(nèi)容的創(chuàng)建工具與環(huán)境，并讓視覺效果設(shè)計師可以創(chuàng)建在桌面電腦和移動設(shè)備上 都能一致呈現(xiàn)的互動體驗(yàn)。主要包括全新優(yōu)化的“移動編輯器”、創(chuàng)建并發(fā)布 WebGL 內(nèi)容、導(dǎo)出為 SVG 格式、使用可變寬度工具加深筆畫、 Kuler 面板、創(chuàng)建適用于 Flash Professional CC 的 HTML5 擴(kuò)展功能、同步工作區(qū)與 Adobe Creative Clo