1、Html5開發工具介紹HTML5開發工具簡介Adobe Edge Animate/Animatron/Tumult Hype/Mugeda/HTML5 Maker/Hippo Studios/Blysk/Radiapp/Lungo/Articulate Stroyline2/mobl/DevExtreme/DCloudHBuilderAdobe Edge工具介紹Adobe Edge簡介/Abode Edge Animate界面功能模塊/數字媒體制作Articulate Storyline2工具介紹Articulate Storyline2簡介/Articulate Storyline2新增功能

2、/數字媒體制作 Flash Professional CC 2014工具介紹 Flash Professional CC 2014簡介/ Flash Professional CC 2014功能介紹/數字媒體制作相關軟件制作功能對比及適用范圍HTML5開發工具簡介Adobe EdgeAdobe Edge的目的是幫助專業設計師制作網頁動畫乃至簡單游戲。目前該工具的重點放在動畫引擎上，但未來將增加更多HTML5功能，比如Canvas、HTML5音頻/視頻標簽等。Animatron是一款直觀的設計與發布編輯軟件。你可以使用 Animatron 來設計內容，如橫幅、信息圖表和創意動畫（針對桌面電腦、移

3、動設備以及任何你可以選擇的設備）。Animatron（在線開發）Tumult Hype你可以使用Tumult Hype來創建美麗的HTML5 Web內容。用其創建的內容是交互的并擁有偉大的動畫功能。你可以在桌面、智能手機和iPad上使用這個框架，它不需要你有編碼知識。Mugeda（在線開發）Mugeda是許多創作工具包、廣告商和代理處的首選，來釋放他們的創造力并創建最優質的媒體廣告單元。該工具最知名的是它創建優質廣告單元、橫幅、插頁式廣告、可擴展和迷你游戲的能力。HTML5 Maker（在線開發）常用于構建滑塊、橫幅以及用最小的努力創建令人印象深刻的圖形。這個工具是免費的，它不要求你有任何特別

4、的編程知識。HTML5開發工具簡介Hippo StudiosHippo Studios是一個很好的平臺，可以創建強大的動畫、游戲、演示文稿、應用和多媒體網站。使用Hippo Studios創建的項目被大多數瀏覽器和設備支持。Blysk（在線開發）blysk是一款非常有用的動畫工具。它為動畫和Web設計提供了一個很好的平臺，可以為網站和其他互聯網項目構建直觀的動畫。RadiappRadiapp是一款強大的工具，常用于創建運行時的視頻和圖形。它為現代網站提供實時的圖形編輯界面。Articulate Stroyline2 Articulate Stroyline2 在原有國際排名第一的課件工具Art

5、iculat Storyline1的基礎上，有了非常大的改進與創新。DCloudHBuilder基于HTML5開發工具是當前最快的HTML開發工具。DevExtremeDevExtreme是專為移動準備的，一個跨平臺開發的HTML5/JS框架。mobl一個新的開源的編程語言。Lungo一款基于HTML5的開發框架，專為想要設計、構建和共享跨設備應用的開發者而準備。Adobe Edge Animate 簡介 Adobe Edge是adobe公司的一款新型網頁互動工具。允許設計師通過HTML5、CSS和JavaScript制作網頁動畫。無需Flash。 Adobe Edge的目的是幫助專業設計師制

6、作網頁動畫乃至簡單游戲。該工具的重點放在動畫引擎上，但adobe承諾將增加更多HTML5功能，比如Canvas、HTML5音頻/視頻標簽等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各個平臺。Adobe于2014年正式推出Adobe Edge AnimateCC集成了hml5、js、css的開發工具。 人們也許會問，這一舉措是不是表明Adobe正在向蘋果等公司讓步？蘋果認為Flash是一種過時的技術，而HTML5才是未來。蘋果的iPad和iPhone等產品中無法顯示Flash動畫。 其實，Adobe Edge并不會替代Fl

7、ash。該軟件只是為網頁設計人員提供了一種工具，幫助他們在不支持Flash的設備（比如蘋果iOS設備）上制作網絡動畫。Adobe Edge Animate CC 2014 數字媒體制作創建一個Abode Edge Animate新文件：鼠標左鍵單擊下圖按鈕，即可成功創建一個空白的Abode Edge Animate文件創建成功的軟件使用界面：Adobe Edge Animate CC 2014 界面功能模塊界面功能介紹：最上面為菜單欄菜單欄下面為工具欄左側為屬性欄空白區域為設計區域空白欄下面為動作欄空白區域右邊為文件欄最右邊為介紹欄數字媒體制作（1）尺寸大小設置輸入相應數值建立所需新項目添加元

8、素點擊文件導入 選擇導入元素導入元素的文件格式必需是如圖所示的幾種文件格式，否則無法導入1、導入音頻選擇導入的音頻格式后導入音頻導入音頻“slide0101”后屬性欄和動作欄內均有顯示控制播放條動畫效果制作1、動畫元素繪制在工具欄中選擇所需要的元素如：文字、圖形等,屬性欄可以編輯顏色等數字媒體制作（2）動畫效果制作2、動畫制作點擊按鈕（如上圖）后，拖拽時間軸到想要動畫時長位置（如下圖0.415處）拖拽元素到0.415秒后想到到達的位置，松手后形成一組時間軸/幀動畫同理也可實現顏色變化和消失漸變等簡易動畫效果保存及發布點擊另存為輸入文件名稱利用Adobe Edge AnimateCC 2014

9、制作的課程實例：6:8880/test01/test01.html Articulate Storyline2簡介 Articulate Storyline是一個強大的獨是一個強大的獨立工具，具有無可比擬的交互功能，將幫助你建立動態的、引人入勝的內容其中包含模擬、屏幕錄制、拖放式交互、單擊顯示活動，以及測試和評估等等。 北京時間2014年9月17日凌晨，Articulate發布了新一款軟件：Articulate Storyline2。Articulate Stroyline2 在原有國際排名第一的課件工具Articulat Storyline1的基礎上，有了非

10、常大的改進與創新。其中最引人注目的是，此款軟件同時推出了中文版。這對于啟盼之久的中國廣大用戶來說，實在是一個大好消息。Storyline2不僅對操作界面進行了漢化，還正式支持雙字節字符，制作中文課件將會更加順利。Articulate Stroyline2 還增加了滑塊、動作路徑、時間軸控制等令人眼前一亮的新功能。發布成品方面，除了已有對iPad的支持，還特別加強了對安卓系統平板的支持。支持所有平板電腦第一種是自適應的決方案，也是工具推薦用戶使用的（缺省的）方案。Articulate Storyline2新增功能（1） Storyline 2正式宣布除了完全支持iPad 以外，也開始支持Andr

11、oid系統的平板電腦。這給移動學習課件的開發者來說就顯得更加靈活和方便。現在使用Articulate Storyline 2發布HTML 5格式的課件可以在任何移動設備上運行。課件內容展現更生動，吸引學員的眼球互動滑塊 讓學習者來控制滑塊，改變數據、探索因果關系并控制導航。動作路徑 Storyline 2增加了頁面中元素的動作路徑，現在可以向在PPT中一樣設置頁面內容的動作路徑、并通過觸發器來控制其運動、為一個元素設置多個運動軌跡等等。新的動畫和頁面切換效果 11種新的頁面切換效果和10中新的元素進出動畫效果，讓我們非常容易的為文本、圖片、層和頁面添加精彩的動畫效果。新增觸發器功能 使用Sto

12、ryline 2全新觸發器和觸發事件來控制頁面中的動效，你可以輕而易舉的根據時間、提示點、甚至是動畫播放完畢作為條件來觸發頁面元素的動作。Articulate Storyline2新增功能（2）創建更貼切的視圖，使用Storyline新工具個性化設置你的文字、顏色、字體等等 全新的文本編輯器，給你極致的編輯文本風格、段落、行距、方向、項目符等功能。新的文本編輯器 Storyline 2支持個性化的字體以及在同行中增加文字后字體形狀的改變。Storyline 2對中文輸入和字體支持更是無以倫比。Storyline 1中中文字體輸入的問題完全解決。增強的字體支持 現在你可以在插入的網頁中覆蓋層、圖

13、形、人物、文字等其他媒體元素，創建完美的主頁風格。增強的網頁Web對象 你可以從屏幕上任何元素上（甚至是非Storyline 2界面）吸取你喜歡的顏色，并添加到頁面中的任何元素中去。取色器Articulate Storyline2新增功能（3）創建理想的學習體驗，并掌握學習者以怎樣的路徑學習你的課件播放器導航按鈕的狀態 通過方便的設置播放器中上一頁、下一頁提交的狀態（正常、失效和隱藏等）來防止學員跳過學習內容。測試題的減分功能 Storyline 2支持在考試中的錯題減分功能。視頻壓縮選擇 Storyline 2可以允許你去選擇是否壓縮課件中的視頻，以控制視頻的清晰度和課件大小。只讀的播放條

14、Storyline 2可以設置只能顯示而不能拖拉的播放條。相信這是很多課件設計者希望的實用功能。增加你的課件設計產量，大大提升你的開發效率和方便性全新的界面設計，使用更方便。觸發器和層的窗口可以拖動到Storyline界面之外的桌面上。動畫刷。快速方便的將一個元素的動畫效果刷到其他元素上。方便的切換故事視圖和窗體視圖。支持在不同頁面之間拷貝和復制層。自動恢復。Storyline 2遇到異常關閉后再次打開將恢復你最后編輯的頁面。Articulate Storyline2新增功能（4）快速的開始是成功的一半豐富精美的頁面模板，你可以直接從Storyline 2中導入。Storyline 2支持導入

15、Articulate其他軟件的文件了如Studio 09, Studio 13, Storyline 1和PPT。使用Storyline 2可以直接將測試題在Excel文件中創建，并一鍵導入到Storyline 2中。Storyline 2支持中文界面！數字媒體制作（1）設置項目頁面尺寸設計 選項卡 單擊 文章大小 進行設置1、添加場景單擊Home主頁選項卡，然后單擊New Scene新場景或在故事視圖空白區域任何地方右擊，然后選擇新場景新場景默認包含一個單獨的空白幻燈片。你可以雙擊幻燈片切換到普通視圖，從而向幻燈片添加內容。2、復制場景3、重命名場景和幻燈片標題4、刪除場景5、折疊或展開場景

16、6、放大和縮小場景7、重新排列場景內的幻燈片8、多場景的播放控制9、場景輔助功能用Ctrl+鼠標滾輪進行縮放或右下角的縮放滑塊觸發器跳到下一個幻燈片或鏈接幻燈片的關系場景的使用方法可以直接拖動幻燈片到想要的位置，注意幻燈片名稱在“ 查看 ” 菜單中，調整母板 ，以及顯示標尺，網格，參考線等。數字媒體制作（2）自定義播放器播放器按鈕打開“文本標簽” 語言調整成中文修改相映按鈕文字 點擊“更新預覽”保存 選擇以及添加在播放器上將要顯示的選項卡以及功能1、導入音頻音頻的處理2、右鍵單擊音頻層，選擇編輯命令“導入”是在藍色指示線索在位置添加另一音頻“靜音”單擊，在彈出的對話框中選擇添加靜音的時長； 選

17、中一段音頻單擊“靜音”使此段音頻變為靜音狀態。音頻導入后會自動默認顯示在時間軸的第一層。插入圖片導入圖片當導入圖片的時候，會有一些圖片的處理功能呈現。可以直接對圖片進行亮度，對比度，著色等處理。數字媒體制作（3）“測驗”模板（1）1、案例測試題先選擇插入新建幻燈片模板“測驗”點選“插入”“轉換為自由形式”此種方式適用于基礎頁面已擺放好的情況2、案例添加互動“測驗”模板（2）新幻燈片中點擊“控件”插入按鈕；然后插入人物；為按鈕添加觸發器，設置各項參數3、案例熱區“測驗”模板（3）在新幻燈片中點擊“控件”插入熱區；選擇一個熱區的圖形樣式，畫出熱區范圍，添加觸發器進行設置數字媒體制作（4）課程中導入

18、視頻導入視頻后彈出下面的設置框 ： 可在時間軸上裁剪視頻的播放長度，調整視頻的畫面亮度等。 同時也可以選擇是否壓縮視頻文件，可設置是否可以拖動進度條。 在菜單的右下角顯示這相關的結果信息。插入Flash 在界面中可以設置文件的寬高，并設置播放位置，觸發方式等設置動畫效果先選擇要添加動畫的文件，然后點擊動畫按鈕，為文件添加進入，退出等的效果以及持續時間我們制作了一個動畫效果的整體演示演示。特殊效果畫面區域放大 縮小效果：點選“縮放區域”按鈕，在畫面上選擇出一塊區域，并在時間軸上調整好位置。 數字媒體制作（5）錄制操作屏幕選擇“錄制屏幕”會在屏幕上彈出虛框，可通過拉伸調節錄制內容范圍。錄制結束后選

19、擇相應的設置變量的使用 在Storyline中可以很方便的使用變量，使用觸發器向導會迅速建立物件的變量而無需編寫代碼。 使用變量的一種方式是記錄一些信息，諸如學習者的名字及其輸入的數字；及基于該信息而激活的內容。當然使用變量最多的用處就是在課程中建立一些條件式的交互內容。 變量一次只能記錄一段內容，一個比較典型的例子是：在一個輸入學習者的界面中，基于文本輸入框的變量可以接收到任何文本輸入內容，但是一次只能記錄一名學習者的名字，每次學習者輸入新的名字時，變量將變為最后一次輸入的內容變量的類型1、文本（Text）2、數字（number）3、真/假（True/False）使用變量的三個步驟1、給變量

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

21、。增加背景音樂添加下面代碼到發布的story.html里在根目錄下創建一個bgsound文件夾（這個名稱自己可以編寫，但要與連接地址一樣），然后把我原有的一個swf文件考入到bgsound文件夾里。把已提前找到的背景音樂以song1.MP3的命名及格式放入bgsound文件里，與song1.swf文件同級目錄。song1.swf里已做好了降低原音量的10%的設定，因此，你把任何原音頻文件考入放進文件夾里，播放出來的聲音都會自動降低到原來音量的10%。Flash Professional CC 2014簡介 Adobe Flash Professional CC 提供了強大的動畫和多媒體內容的創建工具與環境，并讓視覺效果設計師可以創建在桌面電腦和移動設備上都能一致呈現的互動體驗。主要包括全新優化的“移動編輯器”、創建并發布 WebGL 內容、導出為 SVG 格式、使用可變寬度工具加深筆畫、Kuler 面板、創建適用于 Flash Professional CC 的 HTML5 擴展