1、教 案2015 2016 學年第 2學期課 程 名 稱互動媒體設計A 系(院、部)藝術學院教研室(實驗室)視覺及媒體藝術授 課 班 級藝視141、142主 講 教 師張青榮職 稱 副教授使 用 教 材中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計實用教程淮海工學院教務處制二一六 年三月 教 案（首頁）課 程名 稱 互動媒體設計A總計： 48 學時課 程類 別 基礎必修課學分3講課： 23 學時分析討論課: 1 學時大作業及設計：24學時任 課教 師張青榮職稱：副教授授課對 象專業班級：藝術121、122 共2個班基要本參教考材資和料主教材：中文版D

2、reamweaver CS6/Flash CS6/Photoshop CS6網頁設計實用教程，張志科編著，人民郵電出版社發行部出版，出版時間：2016-1-1主要參考書：1、flash mx實例及操作萬茂山等（著）北京希望電子出版社。2、Flash及動感網頁制作周全,劉進軍，電子工業出版社教和學要目求的教學目的:互動媒體設計是藝術設計專業的一門專業基礎必修課程。通過對互動媒體作品的藝術創作方法進行深入講解,使學生對互動媒體的藝術創作及應用有較全面的了解,掌握互動媒體藝術創作設計的流程, 培養學生應用計算機軟件進行互動媒體藝術作品基本創作及設計制作的能力，為后續的專業設計服務。教學要求:1、 掌

3、握互動媒體設計創作的基本原理及方法；2、 掌握軟件Flash的基本使用方法；3、 獨立完成一段互動網站的制作；教及學難重點點教學重點:互動媒體設計分類和特點、互動媒體的設計及創作方法、Flash的動畫編輯技巧、Flash及Dreamweaver的互動媒體設計知識。教學難點:互動媒體的設計及創作方法、Flash的動畫編輯技巧、互動媒體設計實踐。互動媒體設計A 課程教案課次1授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第一章、互動媒體設計概論教學目的、要求：認識互動媒體設計的基本概念；熟悉互動媒體設計的分類及設計方法；掌握網頁設計的基本元素、基本結構

4、形式以及設計制作程序，了解互動媒體設計基礎軟件。教學重點及難點：互動媒體設計的設計方法、互動媒體設計作品類型，網頁設計的基本元素、基本結構形式以及設計制作程序（教學重點）網頁設計的基本元素、基本結構形式以及設計制作程序，對互動媒體作品藝術創作思路的理解（教學難點）教 學 基 本 內 容方法及手段一、互動媒體設計概論：什么叫媒體？所謂媒體，是指傳播信息的介質，通俗的說就是宣傳平臺，能為信息的傳播提供平臺的就可以稱為媒體了，至于媒體的內容，應該根據國家現行的有關政策，結合廣告市場的實際需求不斷更新，確保其可行性、適宜性和有效性。此前，傳統的四大媒體分別為:1、電視；2、廣播；3、報紙；4、網站；此

5、外，還應有戶外媒體，如路牌燈箱的廣告位等。就其目前適宜性來講，媒體應按其形式劃分為平面、電波、網絡三大類，即：1、平面媒體：主要包括印刷類、非印刷類、光電類等。2、電波媒體：主要包括廣播、電視廣告（字幕、標版、影視）等。3、網絡媒體：主要包括網絡索引、平面、動畫、論壇等。什么叫多媒體？多媒體：它集合文字、圖形、圖像、動畫、視頻、錄像、聲音、音樂等 傳統表現媒體的優點，結合了計算機的交互功能，開發者針對客戶及項目 需求通過精心的策劃創意構思，結合各種表現方式，運用計算機對相關素材 進行編程集成，使其成為一有機的整體。舉例講解、多媒體講解、案例講解；使用板書及投影儀等。什么叫互動媒體？互動媒體來自

6、英文Multimedia , multi是指多重的，media即媒體，指我們用來表達信息的載體及形式。多媒體從字面上解釋是多種媒體（文字、圖像、動畫、視頻、聲音、音樂）集合的意思。二、網頁設計：（一）、網頁媒介信息分類1. 文 字2. 圖 像3. 聲 音4. 視 頻5. 動 畫（二）、網頁結構基本形式：1. 分欄結構形式2. 框架結構形式3. 開放結構形式4. 綜合式（三）、網頁banner廣告：放置在網站頁面上，是互聯網廣告中最基本的廣告形式, 一般使用GIF格式的圖像文件, 可以使用靜態圖形, 也可用動畫圖像) 。 Banner：可以是網站頁面的橫幅廣告，也可以是游行活動時用的旗幟，還可以

7、是報紙雜志上的大標題。Bnner主要體現中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。（四）、網頁設計制作程序l 前期創作策劃、資料的收集整理、主題定位、欄目結構規劃、logo設計、整體視覺藝術創意設計、頁面排版布局設計、網站頁面排版及藝術設計稿繪制； l 中期制作排版布局細化、造型制作、動畫制作、背景繪制、按鈕制作、聲音添加等；l 后期處理動作語言的添加、交互鏈接、作品的輸出、測試、優化及發布等.三、互動媒體設計常用軟件：早期：Frontpage Adobe Golive JavaScript等目前：網頁三劍客：Flash、Dreamweaver、Fireworks 現在一般用PS代替

8、Fireworks 以JavaScript等專業級網站進行編程 舉例講解、多媒體講解、案例講解；使用板書及投影儀等。作業、討論題、思考題：1. 上網查詢互動媒體設計的有關資料，討論思考互動媒體設計的特點是什么? 2. 構想一個個人主題網站，思考其大致內容結構。課后小結：互動媒體設計A 課程教案課次2授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（一）教學目的、要求：認識Flash的基本界面及基礎圖形繪制方法，理解Flash幀的概念及編輯技巧，學習逐幀動畫.教學重點及難點：互動媒體設計的設計方法、Flash的基本操作方法

9、，Flash幀的概念及編輯技巧，學習逐幀動畫（教學重點）Flash幀的概念及編輯技巧，學習逐幀動畫（教學難點）教 學 基 本 內 容方法及手段第二章 Flash軟件基礎學習（一） 一、Flash操作界面認識二、Flash基本繪圖方法 1、基本幾何形的繪制2、基礎自然形的繪制3、場景的創建及選擇三、Flash幀的概念及編輯技巧，學習逐幀動畫1）、幀的基本概念及類型：電影就是把很多畫面串在一條塑料膠片上，每個畫面稱為一幀。Flash中幀是創建動畫的基礎，不同的幀代表著不同的時刻。Flash幀的類型：1關鍵幀。以實心圓表示，代表這個幀中含有對象。2普通幀。普通幀中的對象永遠和離它最近的關鍵幀中的對象

10、保持一致。3空白關鍵幀。以空心圓表示，代表這個關鍵幀中沒有任何對象，在空白關鍵幀中加入對象即可變成關鍵幀。舉例講解、多媒體講解、提問及討論式教學4一般空白幀。代表空白區域中沒有任何對象。5運動漸變幀。以底色為淺藍色的箭頭符號表示，代表這個區域存在運動補間動畫。 6形狀漸變幀。以底色為淺綠色的箭頭符號表示，代表這個區域存在形狀補間動畫。2）、逐幀動畫的制作方法教師演示逐幀動畫制作實例作業、討論題、思考題：1、課后繼續查詢“互動媒體設計”的相關資料；2、進一步完成個人網站的結構創意設計及標志設計；3、課后復習鞏固課堂所學技能。課后小結：互動媒體設計A 課程教案課次3授課方式（請打）理論課 討論課

11、實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（二）教學目的、要求：認識Flash的形狀及元件，掌握形狀及動作補間動畫的基本原理及制作方法.教學重點及難點：認識Flash的形狀及元件，掌握形狀及動作補間動畫的基本原理及制作方法（教學重點）形狀及動作補間動畫的基本原理及制作方法（教學難點）教 學 基 本 內 容方法及手段Flash軟件基礎學習（二） 1、形狀的概念、學習形狀補間動畫； 形狀補間動畫的制作程序及技巧2、元件的概念、學習動作補間動畫；l 元件的基本概念及類型：在Flash中，常常需要重復使用一些元素，用戶可以將這些元素裝入元件中，需要時再調

12、用，避免無謂操作，并可以大大減少文件大小，提高播放速度。元件也被稱作符號或圖符，是Flash動畫的重要組成部分，元件的主要特性是可以被重復利用，且不會影響影片的大小。 Flash中包括三種元件類型，分別為圖形元件、影片剪輯元件及按鈕元件，每一種元件都具有獨特的屬性 。Flash中的所有元件都被歸納在庫面板中，可以被隨時調用，十分方便。即使在場景中將所有元件全部刪除，也不會影響庫面板中的元件。l 動作補間動畫Flash提供了兩種創建動畫的方式，分別為逐幀動畫及補間動畫，其中補間動畫又可以分為形狀漸變動畫及運動漸變動畫兩種，用戶可以輕易的使對象在場景中來回的運動，在運動的過程中還可以伴隨有諸如放大

13、、縮小、旋轉、變色以及淡入淡出等豐富效果 。舉例講解、多媒體講解、提問及討論式教學作業、討論題、思考題：1、課后復習鞏固課堂所學技能。課后小結：互動媒體設計A 課程教案課次4授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（三）教學目的、要求：了解Flash中影片剪輯的基本概念及類型；熟悉Flash中影片剪輯動畫的制作方法、編輯及修改方法。教學重點及難點：了解Flash中影片剪輯的基本概念及類型；熟悉Flash中影片剪輯動畫的制作方法、編輯及修改方法（教學重點）Flash中影片剪輯動畫的原理特點、制作方法及修改方法（教學

14、難點）教 學 基 本 內 容方法及手段flash軟件基礎學習（三） Flash中影片剪輯的運用1、Flash中影片剪輯的特點及創建方法2、Flash中影片剪輯的編輯及修改方法3、Flash中影片剪輯所塑造的動畫特效案例分析舉例講解、多媒體講解、提問及討論式教學作業、討論題、思考題：做影片剪輯動畫實踐練習。課后小結：互動媒體設計A 課程教案課次5授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（四）教學目的、要求：認識Flash中引導層的特點及創建方法，掌握Flash中路徑動畫的編輯制作方法。教學重點及難點：Flash中引

15、導層的特點及創建方法， Flash中路徑動畫的編輯制作方法（教學重點）Flash中路徑動畫的編輯制作方法（教學難點）教 學 基 本 內 容方法及手段一、認識引導層：1普通引導層：用于繪制輔助圖形的圖層，獨立成為一層。2運動引導層：用于繪制運動路徑的圖層，至少引導一個圖層。3被引導的圖層：圖層中的對象按照運動引導層中的路徑運動。二、創建引導層動畫：普通引導層可以理解為除標尺、網格等輔助工具以外的另一種輔助制圖手段，例如在引導層上繪制圖形，然后將普通圖層上的對象及引導層中的圖形對齊，或者在引導層中繪制一個網頁的框架，接著在普通圖層中制作網頁內容。引導層除了起到引導的作用以外，同時具備普通圖層中的任

16、何屬性，也就是說，在普通圖層上能執行的操作在引導層上同樣可以，它們之間唯一的區別是在引導層上繪制的圖形及線條為引導線，在播放影片時，不會被顯示出來。l 創建普通引導層 l 創建運動引導層 l 同時引導多個圖層 實例操作：引導層動畫制作。舉例講解、教師示范講解、案例解析作業、討論題、思考題：做引導層動畫實踐練習。 課后小結：互動媒體設計A 課程教案課次6授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（五）教學目的、要求：認識Flash中遮罩層的特點及創建方法，掌握Flash中遮罩動畫的編輯制作方法。教學重點及難點：Fla

17、sh中遮罩層的特點及創建方法， Flash中遮罩動畫的編輯制作方法（教學重點）Flash中遮罩動畫的編輯制作方法（教學難點）教 學 基 本 內 容方法及手段一、認識遮罩層：1、遮罩層：圖層中的對象及下面的圖層建立遮罩的關系，至少遮罩一個圖層。2、被遮罩圖層：圖層中的對象及上面的圖層建立被遮罩的關系。二、創建遮罩層動畫：遮罩在flash中有著廣泛的應用，可以做出很多意想不到的效果。遮罩層的實現需要通過兩個以上的圖層，建立遮罩及被遮罩的關系，也就是說，遮罩層不僅可以及一個普通圖層之間建立遮罩關系，也可以同時及多個普通圖層之間建立遮罩關系 。 l 遮罩層的原理：理解遮罩層的原理關鍵要記住兩條：第一，

18、遮罩層本身是不會被看見的。不管畫出什么圖形，簡單或復雜，只要它被用作遮罩層，在播放時就不會顯示出來，也就是說，不用管它是什么顏色，遮罩層只要求圖形的形狀，在遮罩層中，圖形的填充顏色，或是位圖里的圖形都會被忽略，得到的遮罩范圍只是這個圖形的剪影。第二，遮罩層中的對象覆蓋的部分，就是建立遮罩關系后顯示的部分。另外，線條不可以被用來制作遮罩層，要應用線條，必須要將它轉換為填充色。將多個圖層應用于同一個遮罩層時，只需將這個圖層拖拽置遮罩層之下，即可及遮罩層之間建立了遮罩和被遮罩的關系。 實例操作：引導層動畫制作。舉例講解、教師示范講解、案例解析作業、討論題、思考題：做引導層動畫實踐練習。 課后小結：互

19、動媒體設計A 課程教案課次7授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（六）教學目的、要求：認識Flash中按鈕的特點及創建方法、掌握 Flash中按鈕的編輯及修改方法， Flash中按鈕的動作指令添加方法。教學重點及難點：Flash中按鈕的特點及創建方法、Flash中按鈕的編輯及修改方法、按鈕的動作指令添加方法。（教學重點）Flash中按鈕的編輯及修改方法、按鈕的動作指令添加（教學難點）教 學 基 本 內 容方法及手段Flash軟件基礎學習（六） Flash中按鈕元件的制作及動作指令 ：一、按鈕元件的特點及創建：

20、通過繪制及鼠標事件相對應的對象，按鈕元件主要用于創建響應鼠標事件的交互式按鈕。鼠標事件包括鼠標觸及及單擊兩種。將繪制的圖形轉換為按鈕元件，在播放影片時，當鼠標靠近圖形時，光標就會變成小手狀態，為按鈕元件添加腳本語言，即可實現影片的控制。二、Flash中按鈕的編輯及修改方法三、Flash中按鈕的動作指令解析：交互式動畫就是允許觀眾對影片進行控制，而達到某種目的的動畫。交l 交互式動畫原理：交互式動畫是由觸發動作的事件、事件的目標和觸發事件的動作3個因素組成的，例如單擊按鈕后，影片開始播放這一事件。其中，單擊是觸發動作的事件，按鈕是事件的目標，影片開始播放是觸發事件的動作。換句話說，事件、目標和動

21、作構成了一個交互式動畫。 在Flash中，事件包括鼠標事件、鍵盤事件和幀事件三種。目標包括時間軸、按鈕元件和影片剪輯元件三種。而動作就是指控制影片的一系列腳本語言，所以說腳本語言的編寫也就是各種動作的編寫 。舉例講解、教師示范講解、案例解析在編寫腳本語言時，既可以通過直接在腳本編輯區中輸入字符進行編寫，又可以通過在動作工具欄中選擇項目進行編寫。單擊動作工具欄中的項目文件夾，可展開或收縮文件夾。在展開的項目文件夾中包含多個腳本項目，通過雙擊進行選擇。此外，還可以通過添加動作按鈕，將新項目添加到腳本中。 時間軸控制中包括了幾種最常用的動作，用于控制影片或影片剪輯元件中的時間軸。理解這些語言的意義，

22、掌握它們的編寫及操作，可以輕松實現交互式影片中最為常見的效果。實例如控制影片的播放，停止和重新播放等。時間軸控制命令位于全局函數的子文件夾中。四、Flash中部分按鈕特效案例解析五、教師做按鈕元件的制作及動作指令的操作的教學示范。作業、討論題、思考題：按鈕元件的制作及動作指令的操作實踐練習。 課后小結：互動媒體設計A 課程教案課次8授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：Flash按鈕元件及動作指令實驗教學目的、要求：通過實驗操作進一步認識Flash中按鈕的特點及創建方法、掌握 Flash中按鈕的編輯及修改方法， Flash中按鈕的動作指令添

23、加方法。教學重點及難點：Flash中按鈕的特點及創建方法、Flash中按鈕的編輯及修改方法、按鈕的動作指令添加實驗。（教學重點）Flash中按鈕的編輯及修改方法、按鈕的動作指令添加實驗（教學難點）教 學 基 本 內 容方法及手段學生進行按鈕元件的制作及動作指令的實驗操作練習。教師針對問題示范演練，巡回指導。學生實驗操作，教師針對問題演示指導作業、討論題、思考題：按鈕元件的制作及動作指令的操作實踐練習。 課后小結：互動媒體設計A 課程教案課次9授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：第二章 Flash軟件基礎學習（七）教學目的、要求：了解聲音及

24、其它媒體的導入程序；熟悉多場景動畫的鏈接設置方法；掌握影片的測試、優化、發布及導出方法。教學重點及難點：導入聲音及其它媒體的操作方法（教學重點）多場景動畫的鏈接設置方法（教學難點）教 學 基 本 內 容方法及手段Flash軟件基礎學習（七）Flash中導入聲音及其它媒體， 多場景動畫一、聲音的導入：聲音是的影片的重要組成部分，有聲影片會使動畫更加生動自然，給人身臨其境之感。 在Flash中，既可以為整部影片添加聲音，也可以單獨為影片中的某個元件添加聲音 。 在一部影片中，同一個聲音文件可以被反復利用。用戶還可以自行設定聲音及影片的同步方式。而Flash在聲音資源的使用上也有著其它軟件無法媲美的

25、高壓縮率，所以制作的影片極為輕巧，便于流傳。可以導入影片的聲音格式有：WAV、MP3和 AIFF（僅限蘋果機）格式。 以上格式中，最常用的為WAV格式，它既可以應用于PC機，又可以應用于蘋果機 。l 聲音導入的程序：1.新建文檔，執行“文件”“導入”“導入到庫”命令，彈出“導入到庫”的對話框，在文件類型中選擇WAV聲音格式，接著選中要導入的聲音文件，單擊“確定”按鈕。 2.返回場景編輯模式，按下Ctrl+L快捷鍵打開庫面板，在庫面板中可以看到剛剛選擇的聲音文件。 聲音不但可以應用于整部影片中，還可以應用于某個元件中，和元件的原理相同，聲音可以被反復利用及制作各種聲音效果，均以庫面板中聲音為基礎

26、 。舉例講解、教師示范講解、案例解析二、其它媒體的導入及聲音的導入方法相似；三、多場景動畫鏈接。1、為每一個場景最后一幀設置停止動作語言關鍵幀；2、在每一個場景添加好相應的鏈接按鈕；3、為每一個鏈接按鈕正確添加動作語言。* 注意：輸入動作語言是全角及半角輸入法的精準切換！四、影片的測試、優化、發布及導出：1. 可以在兩種環境下測試影片，一種為影片編輯環境，另一種為影片測試環境。在影片編輯環境下，按Enter鍵可以對影片進行簡單的測試，但影片中的影片剪輯元件、按鈕元件以及腳本語言也就是影片的交互式效果均不能得到測試。要在影片編輯環境下測試簡單的幀動作（play、stop、gotoplay和got

27、oandstop），需要執行“控制”“啟用簡單幀動作”命令 。2. 優化影片的最終目的是減少文件的大小，確保它的播放流暢。因為無論影片如何出色，如果在播放的過程中發生多次間斷，都會影響它的效果。所以對影片進行必要的優化是影片制作的最后步驟，下面將講述如何對影片的各種對象進行優化以及優化的一些技巧 。3. 可以將Flash影片發布成多種格式，而在發布之前需進行必要的發布設置，定義發布的格式以及相應的設置，達到最佳效果。在“發布設置”對話框中，可以一次性發布多個格式，且每種格式均保存為指定的發布設置，可以擁有不同的名字。4. 導出影片不像發布那樣可以對影片的各方面進行設置，它可以把當前影片全部導出

28、為Flash支持的格式。而影片的導出分為兩種，分別是導出圖片及導出影片。五、教師做聲音及其它媒體導入、多場景動畫鏈接設置、影片的測試、優化及導出教學示范。作業、討論題、思考題：做聲音及其它媒體導入、多場景動畫設置及影片的測試、優化及導出實踐操作練習。課后小結：互動媒體設計A 課程教案課次10授課方式（請打）理論課 討論課 實驗課 習題課 其他課時安排3授課題目（教學章、節或主題）：Flash中導入聲音及其它媒體、多場景鏈接實驗教學目的、要求：通過實驗操作進一步了解聲音及其它媒體的導入程序；熟悉多場景動畫的鏈接設置方法；掌握影片的測試、優化、發布及導出方法。教學重點及難點：導入聲音及其它媒體的操作實驗（教學重點）多場景動畫的鏈接設置實驗（教學難點）教 學 基 本 內 容方法及手段學生進行按鈕元件的制作及動作指令的實驗操作練習。教師針對問題示范演練，巡回指導。學生實驗操作，教師針對問題演示指導作業、討論題、思考題：做聲音及其它媒體導入、多場景動畫設置及影片的測試、優化及導出實踐操作練習。課后小結：互動媒體設計A 課程教案課次11授課方式（請打）理論課 討論課 實驗課