html5開(kāi)發(fā)工具對(duì)比

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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