《多媒體交互設計H5》課程教學實施方案

1、武漢軟件工程職業(yè)學院課程教學實施方案2018-2019學年度第 一 學期開課院部藝術與傳媒學院課程名稱多媒體交互設計H5授課班級任課教師填表日期：2018年8月31 日填寫說明1本方案由任課教師填寫， 教研室主任、 院（部） 負責人審核同意后， 于每學期第二周交各院 （部） 教務科存檔。2本方案一式二份：開課院（部）一份，教師本人一份。3所有欄目應填寫完整，“理論教學進度安排”表和“實踐教學進度安排” 表的空格內可以按照教學內容分章、分節(jié)、分項的要求自行加畫子欄目，并可加頁或適當調整表格。4理論課程（ A 類）填寫“理論教學進度安排”表，理實一體化課程（ B 類）填寫“理論教學進度安排” 表和

2、“實踐教學進度安排” 表，實踐課程（ C 類）填寫“實踐教學進度安排” 表。5. 理論課程（ A 類）一般按 2 學時為一個條目填寫，理實一體化課程（ B 類）中的 “實踐教學進 度安排” 表和實踐課程（ C 類）填寫“實踐教學進度安排”表一般按半天為一個條目填寫。課程類別：B類（必修），開課時間：第9周至第12周，周課時16；本學期課時數(shù)（學分）64（4）?？己艘螅嚎己祟愋停荚?/考查） 考試，考核方式：隨堂設計作品考核。成績分配：期末考試成績占總分比例60 %;平時成績占總分比例40 %，其中：書面作業(yè)占10%，實踐性環(huán)節(jié)占 20 %，考勤占10 %。本課程 授課已宀 完本學期理論時教

3、學數(shù)實踐教學 時數(shù)復習機動授課總時數(shù) （總學分）成 學時數(shù)總學時數(shù)講授其它單項技能 訓練綜合技能 訓練課程設計640642401822000教學目的:本課程是數(shù)字媒體藝術設計專業(yè)學習領域的核心課程。通過學習運用Mugeda這個專業(yè)級 H5交互動畫制作云-平臺，使學生掌握H5動效及其應用、熟練掌握關鍵幀動畫、路徑動畫、進度動畫、曲線變形動畫、預置動畫、兀件動畫等多種動畫形式，并利課程教學用行為添加與關聯(lián)控制物體的交互行為，在基本無代碼情況下，在線就可以直接創(chuàng)建有豐富表現(xiàn)力的互動動畫、移動廣告、H5小游戲、目的和要求移動教育等應用，咼效率低成本的完成開發(fā)和制作。（分述）教學要求:本課程面向 H5設

4、計師設計崗位能力,以培養(yǎng)H5設計人才為目標，培養(yǎng)學生制作H5宣傳頁面的制作，視頻商業(yè)廣告、一鏡到底特效、長圖拖動、表單及照片合成、全景虛擬、遮罩、H5商業(yè)展示類廣告、微信小游戲設計等設計和制作能力，具有扎實的操作技能，具有團隊協(xié)作、自主創(chuàng)新的職業(yè)素養(yǎng)，滿足H5設計師的崗位任職要求。教材：新媒體運營實戰(zhàn)技能張向南主編人民郵電出版社2017-5;教材和參考書參考書：零代碼 html5交互動畫設計陳志主編高等教育出版社2017-9;HTML5基礎知識劉歡主編人民郵電出版社2016-1;移動互聯(lián)網(wǎng)之路李曉斌主編清華大學出版社2016-1;教研室院責 負 立口 z(審查意見人審查意見年月日年月日理論教學

5、進度安排周次章、節(jié)及內容重、難點（重難點分別說明）教學類型（講授或其 它教學形式）學 時 數(shù)使用教學設備 及軟（課）件作業(yè)第9周一、HTML5的概述（一）H5的技術簡介（二）移動端的特點（三）H5內容的創(chuàng)新（四）H5行業(yè)應用（五）木疙瘩簡介重點：使學生了解 H5的技 術特點及內容創(chuàng)新運用行業(yè)范 圍。難點：H5的行業(yè)應用及未來 趨勢。講授1配有網(wǎng)絡的多媒體教室、Mugeda在線軟件市場調 研H5的應用， 了解各類H5 的展示形式 和表現(xiàn)方法。一、Mugeda界面與舞臺（一）界面組成及功能介紹（二）時間線的簡單介紹（三）H5簡單制作流程重點：掌握木疙瘩界面的組 成。難點：熟練掌握時間線的涵 義及H

6、5的簡易制作流程。講授1配有網(wǎng)絡的多媒體教室、Mugeda在線軟件設計一款 搖一搖隨機 出現(xiàn)畫面游 戲三、圖片與聲音導入（一）圖片的導入及控制瀏覽方式（二）音頻的導入及控制方式重點：掌握圖片類文件的導 入及控制編輯。難點：掌握音頻導入及控制講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件帶音頻 的H5宣傳頁 面的制作四、視頻的導入與控制（一）視頻的導入（二）視頻的控制播放方式（三）跳轉網(wǎng)頁鏈接重點：不同文字與頁面圖形 處理及其特點。難點：了解不同頁面頭部及 菜單制作的知識。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件帶視頻 的H5汽車廣 告宣傳頁面 的制作五、媒體的導入與編輯及素材的繪制（

7、一）文字、段落文字（二）網(wǎng)頁（三）幻燈片（四）圖表（五）常用編輯與操作（六）繪制素材重點：掌握視頻文件導入。 難點：視頻文件播放控制。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件編組操 作的卡通類 型長圖拖動理論教學進度安排周次章、節(jié)及內容重、難點（重難點分別說明）教學類型（講授或其 它教學形式）學 時 數(shù)使用教學設備 及軟（課）件作業(yè)第10周六、動畫的幾種類型（一）進度動畫（二）變形動畫（三）關鍵幀動畫（四）路徑變形動畫（五）元件動畫重點：使學生掌握不冋類型 動畫效果的區(qū)別，熟練掌握關鍵 幀動畫的涵義及制作技巧。難點：熟練掌握路徑變形對 關鍵幀動畫的應用，元件動畫的 建立及序列幀的導入。

8、講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件動畫類 型較豐富的 一個完整H5 頁面制作七、行為的添加及觸發(fā)事件的交互（一）動畫播放控制（二）媒體播放控制（三）屬性控制（四）手機功能（五）微信定制（六）觸發(fā)事件的交互重點：掌握動畫及媒體播放 控制方式及觸發(fā)條件；熟練掌握 屬性控制對于交互的作用。難點：熟練掌握手機功能及 微信行為行為添加；掌握不同方 式的觸發(fā)條件。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件H5 一鏡到底動畫制 作八、關聯(lián)與邏輯判斷（一）舞臺關聯(lián)（二）屬性關聯(lián)（三）元件動畫關聯(lián)（四）自動關聯(lián)、公式關聯(lián)（五）條件判斷、邏輯表達式判斷、多 種表達式的寫法重點：熟練掌握關聯(lián)中控

9、制 關系，掌握不同類型關聯(lián)的區(qū) 另熟練掌握屬性關聯(lián)涵義。難點：熟練掌握元件關聯(lián)、 自動關聯(lián)、公式關聯(lián)，關聯(lián)中條 件的判斷及邏輯表達式的寫法。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件長圖拖 動效果制作； 利用拖動滑 塊控制手機 展示動畫第11周九、表單的制作（一）表單的幾種輸入框的形式（二）表單的數(shù)據(jù)收集與分析（三）行為中屬性控制的舞臺截圖重點：熟練掌握不同表單輸 入的區(qū)別及數(shù)據(jù)收集與分析。難點：表單輸入與文字關 聯(lián)，舞臺截圖的使用。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件H5表單問卷制作理論教學進度安排周次章、節(jié)及內容重、難點（重難點分別說明）教學類型（講授或其 它教學形式）學

10、 時 數(shù)使用教學設備 及軟（課）件作業(yè)第11周十、全景虛擬動畫制作（一）全景虛擬空間（二）自定義場景重點：掌握全景虛擬空間創(chuàng) 建，熟練掌握熱點創(chuàng)建及行為。難點：熟練掌握自定義場景 的制作方式。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件全景虛 擬空間及自 定義場景制 作十一、遮罩動畫效果制作（一）遮罩動畫原理（二）遮罩動畫制作步驟重點：掌握遮罩制作過程。難點：熟練掌握遮罩動畫的 制作技巧及與元件動畫和關鍵 幀動畫配合使用。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件利用遮 罩制作一個 完整的畫面 對比H5動畫第12周十二、控件的使用及與行為配合（一）擦玻璃和點贊（二）搖一搖（三）陀螺儀

11、（四）定時器和隨機數(shù)（五）投票和計數(shù)（六）畫板（七）連線（八）拖放容器（九）抽獎（十）排行榜重點：掌握不同控件使用。難點：熟練掌握不同控件與 其相對應行為的配合使用。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件完整的 H5商業(yè)展示 類廣告或樓 書廣告十三、H5游戲制作（一）游戲環(huán)節(jié)與交互設計；（二）游戲發(fā)布與測試重點：掌握游戲制作中各類 行為與關聯(lián)的技巧；難點：熟練掌握游戲中邏輯 的建立。講授2配有網(wǎng)絡的多媒體教室、Mugeda在線軟件行為判 斷類的H5手 機游戲實踐教學進度安排周次項目名稱目的和要求主要內容設施和條件檢驗形式學時數(shù)支撐項目的知識點第9周單項技能訓練' .設計一款搖

12、一 搖游戲。目的：通過任務的實踐，掌 握木疙瘩界面的組成。要求：熟練掌握時間線的涵 義及H5的簡易制作流程。搖一搖游戲配有網(wǎng)絡的多媒體教 室、Mugeda在線軟件作品考核2時間線、行為中 的跳轉到頁、觸發(fā)行 為、預置動畫、運動、 元件動畫等單項技能訓練帶音頻的H5宣傳頁面的制作目的：通過任務的實踐，掌 握了解UI圖標或按鈕設計規(guī)范 及原則。要求：熟練掌握 UI界面設 計圖標或按鈕技巧。美麗中國公益宣傳配有網(wǎng)絡的多媒體教 室、Mugeda在線軟件作品考核2圖片導入、音頻 導入、預置動畫綜合技能訓練' .為某汽車品牌 制作H5廣告目的：熟悉媒體素材的導入 及視頻文件的播放與控制；要求：能利

13、用跳轉鏈接方式 到實體網(wǎng)站。帶視頻的H5汽 車廣告制作配有網(wǎng)絡的多媒體教室、Mugeda在線軟件作品考核2圖片導入、視導 入、視頻的控制及播 放方式、物體行為屬 性中跳轉鏈接等。單項技能訓練編組操作的卡 通長圖拖動目的：通過任務的實踐，掌 握媒體文件的導入。要求：熟練掌握對象的編組 及應用，掌握圖形的繪制技巧。編組操作的卡 通類型長圖拖動配有網(wǎng)絡的多媒體教室、Mugeda在線軟件作品考核2媒體文件的導 入；對象的編組及應 用；素材的繪制。第10周單項技能訓練四：動畫類型較豐 富的一個完整 H5頁面制作目的：通過任務的實踐，使 學生掌握不冋類型動畫效果的 區(qū)別，熟練掌握關鍵幀動畫的涵 義及制作技

14、巧。要求：熟練掌握路徑變形對 關鍵幀動畫的應用，元件動畫的 建立及序列幀的導入。開車小游戲制 作配有網(wǎng)絡的多媒體教 室、Mugeda在線軟件作品考核6進度動畫、變形 動畫、關鍵幀動畫、 路徑變形動畫、元件 動畫實踐教學進度安排周次項目名稱目的和要求主要內容設施和條件檢驗形式學時數(shù)支撐項目的知識點第10周單項技能訓練五：H5 一鏡到底 動畫制作目的：通過任務的實踐，掌 握動畫及媒體播放控制方式及 觸發(fā)條件；熟練掌握屬性控制對 于交互的作用。要求：熟練掌握手機功能及 微信行為行為添加；掌握不同方 式的觸發(fā)條件。一鏡到底動畫 制作（2016網(wǎng)易娛 樂畫傳）配有網(wǎng)絡的多媒體教 室、Mugeda在線軟件

15、作品考核2關鍵幀動畫、屬 性控制、觸發(fā)事件的 交互第10周第11周綜合技能訓練長圖拖動效果 制作目的：熟練掌握關聯(lián)中控制 與被控制對象之間的關系、 掌握 不冋類型關聯(lián)效果的區(qū)別、 熟練 掌握屬性關聯(lián)的涵義及屬性的 種類、元件關聯(lián)的應用、自動關 聯(lián)中控制量的使用以及公式關 聯(lián)中的公式的運用。要求：掌握關聯(lián)中條件的判 斷及邏輯表達式的寫法。H5長圖拖動效 果制作配有網(wǎng)絡的多媒體教室、Mugeda在線軟件作品考核6關鍵幀動畫制 作、路徑變化動畫制 作、舞臺關聯(lián)、屬性 關聯(lián)、元件動畫關聯(lián)、 自動關聯(lián)、公式關聯(lián)、 條件判斷、邏輯表達 式判斷、多種表達式 的寫法等。單項技能訓練六：H5表單問卷 制作目的：

16、通過任務的實踐，掌 握熟練掌握不同表單輸入的區(qū) 另掌握表單的數(shù)據(jù)收集與分 析。要求：表單輸入與文子關 聯(lián)，舞臺截圖的使用。1. H5表單問卷 制作。2. 輸入文字與 圖片合成效果制作（舞臺截圖）。配有網(wǎng)絡的多媒體教室、Mugeda在線軟件作品考核2表單的幾種輸入 框的形式、表單的數(shù) 據(jù)收集與分析、行為 中屬性控制的舞臺截 圖實踐教學進度安排周次項目名稱目的和要求主要內容設施和條件檢驗形式學時數(shù)支撐項目的知識點第11周單項技能訓練七:全景虛擬空間 及自定義場景 制作目的：通過任務的實踐，掌 握全景虛擬空間的創(chuàng)建，熟練掌 握熱點的創(chuàng)建及行為。要求：熟練掌握自定義場景 的制作方式。全景虛擬空間 及自

17、定義場景制 作。配有網(wǎng)絡的多媒體教 室、Mugeda在線軟件作品考核2全景虛擬空間、自定義場景綜合技能訓練H5遮罩動畫制 作目的：掌握遮罩動畫原理及 遮罩動畫制作步驟。要求：熟練掌握遮罩動畫的 制作技巧及與元件動畫和關鍵 幀動畫配合使用。利用H5遮罩動 畫制作圖片切換對 比配有網(wǎng)絡的多媒體教 室、Mugeda在線軟件作品考核2遮罩動畫原理、 遮罩圖形制作、遮罩 與兀件動畫和關鍵幀 動畫配合使用技巧 等。第12周綜合技能訓練四：商業(yè)展示類H5廣告目的：掌握商業(yè)類案例制作 流程。要求：熟悉h5制作中各類 動畫特效的制作技巧以及交互 與關聯(lián)類按鈕的制作方法。商業(yè)展示類H5 廣告配有網(wǎng)絡的多媒體教 室、