《多媒體交互設(shè)計(jì)H5》課程教學(xué)實(shí)施方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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