《互動媒體設計A》教案

1、互動媒體設計隧教案ii海工學貨教案20152016學年第2學期課程名稱互動媒體設計A系（院、部）藝術學院教研室（實驗室）視覺與媒體藝術授課班級藝視141、142主講教師張青榮職稱副教授中文版DreamweaverCS6/Flash使用教材CS6/PhotoshopCS6網頁設計實用教程淮海工學院教務處制二。一六年三月0教案（首頁）課程名稱互動媒體設計A總計：48學時課程類別基礎必修課學分3講課：23學時分析討論課：1學時大作業(yè)及設計二絲學時任課教師張青榮職稱：副教授授課對象專業(yè)班級：藝術121、122共2個班基要教材：中文版DreamweaverCS6/FlashCS6/PhotoshopCS

2、6網貝設計實本參教考材資和料主用教程，張志科編著，人民郵電出版社發(fā)行部出版，出版時間：2016-1-1主要參考書：1、flashmx實例與操作萬茂山等（著）北京希望電子出版社。2、Flash與動感網頁制作周全，劉進軍，電子工業(yè)出版社教和學要目求的教學目的：互動媒體設計是藝術設計專業(yè)的一門專業(yè)基礎必修課程。通過對互動媒體作品的藝術創(chuàng)作方法進行深入講解，使學生對互動媒體的藝術創(chuàng)作與應用有較全面的了解，掌握互動媒體藝術創(chuàng)作設計的流程，培養(yǎng)學生應用計算機軟件進行互動媒體藝術作品基本創(chuàng)作與設計制作的能力，為后續(xù)的專業(yè)設計服務。教學要求：1、掌握互動媒體設計創(chuàng)作的基本原理與方法；2、掌握軟件Flash的基

3、本使用方法；3、獨立完成一段互動網站的制作；教學重點：互動媒體設計分類和特點、互動媒體的設計與創(chuàng)作方法、Flash的動畫編輯技巧、Flash與Dreamweaver的互動媒體設計知識。教及 學難 重點 點教學難點：Flash的動畫編輯技巧、互動媒體設計互動媒體的設計與創(chuàng)作方法、實踐?；用襟w設計A課程教案課次1授課方式（請打，）理論課V討論課口實驗課口習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第一章、互動媒體設計概論教學目的、要求：認識互動媒體設計的基本概念；熟悉互動媒體設計的分類與設計方法；掌握網頁設計的基本元素、基本結構形式以及設計制作程序，了解互動媒體設計基礎軟件。教學重點及

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

5、按其形式劃分為平面、電波、網絡三大類，即：1、平面媒體：主要包括印刷類、非印刷類、光電類等。2、電波媒體：主要包括廣播、電視廣告（字幕、標版、影視）等。3、網絡媒體：主要包括網絡索引、平面、動畫、論壇等。什么叫多媒體？多媒體:它集合文字、圖形、圖像、動畫、視頻、錄像、聲音、音樂等傳統(tǒng)表現(xiàn)媒體的優(yōu)點，結合了計算機的交互功能，開發(fā)者針對客戶及項目需舉例 講解、 多媒體講 解、案 例講 解；使用 板書 及投 影儀求通過精心的策劃創(chuàng)意構思，結合各種表現(xiàn)方式，運用計算機對相關素材進行編程集成，使其成為一有機的整體。0什么叫互動媒體？舉例互動媒體來自英文Multimedia,multi是指多重的，medi

6、a即媒體，指我們用來表達信息的載體與形式。多媒體從字面上解釋是多種媒體（文講解、字、圖像、動畫、視頻、聲音、音樂）集合的意思。多媒二、網頁設計：（一）、網頁媒介信息分類體講解 例 解 使 板 及 影1 .文字2 .圖像3 .聲音4 .視頻5 .動畫（二）、網頁結構基本形式：1 .分欄結構形式2 .框架結構形式3 .開放結構形式4 .綜合式（三）、網頁banner廣告：放置在網站頁面上，是互聯(lián)網廣告中最基本的廣告形式，一般使用GIF格式的圖像文件，可以使用靜態(tài)圖形，也可用動畫圖像）。Banner:可以是網站頁面的橫幅廣告，也可以是游行活動時用的旗幟，還可以是報紙雜志上的大標題。Bnner主要體現(xiàn)

7、中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。（四）、網頁設計制作程序前期創(chuàng)作策劃、資料的收集整理、主題定位、欄目結構規(guī)劃、10go設計、整體視覺藝術創(chuàng)意設計、頁面排版布局設計、網站頁面排版與藝術設計稿繪制；中期制作排版布局細化、造型制作、動畫制作、背景繪制、按鈕制作、聲音添加等；后期處理動作語言的添加、交互鏈接、作品的輸出、測試、優(yōu)化與發(fā)布等.三、互動媒體設計常用軟件：早期：FrontpageAdobeGoliveJavaScript等目前：網頁三僉?。篎lash、DreamweaverFireworks現(xiàn)在一般用PS代替Fireworks以JavaScript等專業(yè)級網站進行編程作業(yè)、

8、討論題、思考題:1 .上網查詢互動媒體設計的有關資料，討論思考互動媒體設計的特點是什么2 .構想一個個人主題網站，思考其大致內容結構課后小結:O課次授課方式（請打，）互動媒體設計A課程教案理論課V討論課口實驗課，習題課口其他口課時安排授課題目（教學章、節(jié)或主題）：第二章Flash軟件基礎學習（一）教學目的、要求：認識Flash的基本界面與基礎圖形繪制方法，理解Flash幀的概念與編輯技巧，學習逐幀動畫.教學重點及難點：互動媒體設計的設計方法、Flash的基本操作方法，F(xiàn)lash幀的概念與編輯技巧，學習逐幀動畫（教學重點）方法及手段Flash幀的概念與編輯技巧，學習逐幀動畫（教學難點）教學基本內

9、容第二章Flash軟件基礎學習（一）一、Flash操作界面認識二、Flash基本繪圖方法1、基本幾何形的繪制舉例講解、多媒體講解、提問與討論式教學2、基礎自然形的繪制3、場景的創(chuàng)建與選擇三、Flash幀的概念與編輯技巧，學習逐幀動畫1）、幀的基本概念與類型：電影就是把很多畫面用在一條塑料膠片上，每個畫面稱為一幀。Flash中幀是創(chuàng)建動畫的基礎，不同的幀代表著不同的時刻。Flash幀的類型：1 .關鍵幀。以實心圓表示，代表這個幀中含有對象。2 .普通幀。普通幀中的對象永遠和離它最近的關鍵幀中的對象保持一致。3 .空白關鍵幀。以空心圓表示，代表這個關鍵幀中沒有任何對象,在空白關鍵幀中加入對象即可變

10、成關鍵幀。4 .一般空白幀。代表空白區(qū)域中沒有任何對象。5 .運動漸變幀。以底色為淺藍色的箭頭符號表示，代表這個區(qū)域存在運動補問動畫。6 .形狀漸變幀。以底色為淺綠色的箭頭符號表示，代表這個區(qū)域存在形狀補問動畫。2）、逐幀動畫的制作方法教師演示逐幀動畫制作實例作業(yè)、討論題、思考題：1、課后繼續(xù)查詢“互動媒體設計”的相關資料;2、進一步完成個人網站的結構創(chuàng)意設計與標志設計；3、課后復習鞏固課堂所學技能。課后小結:0互動媒體設計A課程教案課次3授課方式（請打，）理論課V討論課口實驗課，習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第三章Flash軟件基礎學習（二）教學目的、要求：認識Fla

11、sh的形狀與元件，掌握形狀與動作補問動畫的基本原理與制作方法.教學重點及難點：認識Flash的形狀與元件，掌握形狀與動作補問動畫的基本原理與制作方法（教學重點）形狀與動作補問動畫的基本原理與制作方法（教學難點）方法及手段舉例講 解、多媒 體講解、 提問與 討論式 教學教學基本內容Flash軟件基礎學習（二）1、形狀的概念、學習形狀補問動畫；形狀補問動畫的制作程序與技巧2、元件的概念、學習動作補問動畫；元件的基本概念與類型：在Flash中，常常需要重復使用一些元素，用戶可以將這些元素裝入元件中，需要時再調用，避免無謂操作，并可以大大減少文件大小，提高播放速度。元件也被稱作符號或圖符，是Flash

12、動畫的重要組成部分，元件的主要特性是可以被重復利用，且不會影響影片的大小。Flash中包括三種元件類型，分別為圖形元件、影片剪輯元件與按鈕元件，每一種元件都具有獨特的屬性Flash中的所有元件都被歸納在庫面板中，可以被隨時調用，十分方便。即使在場景中將所有元件全部刪除，也不會影響庫面板中的元件。動作補問動畫Flash提供了兩種創(chuàng)建動畫的方式，分別為逐幀動畫與補問動畫，其中補間動畫又可以分為形狀漸變動畫與運動漸變動畫兩種，用戶可以輕易的使對象在場景中來回的運動，在運動的過程中還可以伴隨有諸如放大、縮小、旋轉、變色以及淡入淡出等豐富效果作業(yè)、討論題、思考題:1、課后復習鞏固課堂所學技能。課后小結:

13、9II互動媒體設計A課程教案課次4授課方式（請打，）理論課V討論課口實驗課，習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第三章Flash軟件基礎學習（三）教學目的、要求：了解Flash中影片剪輯的基本概念與類型；熟悉Flash中影片剪輯動畫的制作方法、編輯與修改方法。教學重點及難點：了解Flash中影片剪輯的基本概念與類型；熟悉Flash中影片剪輯動畫的制作方法、編輯與修改方法（教學重點）Flash中影片剪輯動畫的原理特點、制作方法與修改方法（教學難點）教學基本內容方法及手段flash軟件基礎學習（三）Flash中影片剪輯的運用舉例講解、多媒1、Flash中影片剪輯的特點及創(chuàng)建方法體

14、講斛、提問與2、Flash中影片剪輯的編輯與修改方法3、Flash中影片剪輯所塑造的動畫特效案例分析討論式教學作業(yè)、討論題、思考題：做影片剪輯動畫實踐練習。課后小結：互動媒體設計A課程教案課次5授課方式（請打，）理論課V討論課口實驗課，習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第一章Flash軟件基礎學習（四）教學目的、要求：認識Flash中引導層的特點及創(chuàng)建方法，掌握Flash中路徑動畫的編輯制作方法。教學重點及難點：Flash中引導層的特點及創(chuàng)建方法，F(xiàn)lash中路徑動畫的編輯制作方法（教學重點）Flash中路徑動畫的編輯制作方法（教學難點）I通段例、師范、例析共手舉講解教示講

15、解案解容內本基學教引為 通等如的層中用也導引放 格例上導層作，引在播 網層引圖的也在是在 、段圖在通導屬作別， 火手通者普引何操區(qū)線 W圖普或在到任的的導 蟀制將，著起的行一引 為助后齊接了中執(zhí)唯為然對除層能間條來1:動：兩種，形架層圖上之線出 戀運畫IU一形圖框導通層們與示 轉徑動<另圖的的引普圖它形顯層層圖導導個路層點的制中頁。備通囹被胡加杉 的導導外繪層網容具普以的會拊川因 中引引以上導個內時在可制不衛(wèi)頁同樣繪建建時層層層建通/ 一 rn7 ZUX/ / -Z 一 一 一 I 1 一/ 4 5IMUIMU 至33導創(chuàng)普工導與制網同上時倉倉 ，引、助引象繪作外是上層片二輔在對中制以就

16、層導影作業(yè)、討論題、思考題:做引導層動畫實踐練習。課后小結:互動媒體設計A課程教案課次6授課方式（請打，）理論課V討論課口實驗課，習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第二章Flash軟件基礎學習（五）教學目的、要求：認識Flash中遮罩層的特點及創(chuàng)建方法，掌握Flash中遮罩動回的編輯制作方法。教學重點及難點：Flash中遮罩層的特點及創(chuàng)建方法，F(xiàn)lash中遮罩動圓的編輯制作方法（教學重點）Flash中遮罩動畫的編輯制作方法（教學難點）教學基本內容方野手段舉例教師案例解析互動媒體設計 A課程教案一、認識遮罩層：1、遮罩層：圖層中的對象與下面的圖層建立遮罩的關系，至少遮罩一個圖

17、層。2、被遮罩圖層：圖層中的對象與上面的圖層建立被遮罩的關系。二、創(chuàng)建遮罩層動畫：遮罩在flash中有著廣泛的應用，可以做出很多意想不到的效果。罩層的實現(xiàn)需要通過兩個以上的圖層，建立遮罩與被遮罩的關系，也就是說，遮罩層不僅可以與一個普通圖層之間建立遮罩關系，也可以同時與多個普通圖層之間建立遮罩關系遮罩層的原理：理解遮罩層的原理關鍵要記住兩條：第一，遮罩層本身是不會被看見的。不管畫出什么圖形，簡單或復雜，只要它被用作遮罩層，在播放時就不會顯示出來，也就是說，不用管它是什么顏色，遮罩層只要求圖形的形狀，在遮罩層中，圖形的填充顏色，或是位圖里的圖形都會被忽略，得到的遮罩范圍只是這個圖形的剪影。第二，

18、遮罩層中的對象覆蓋的部分，就是建立遮罩關系后顯示的部分。另外，線條不可以被用來制作遮罩層，要應用線條，必須要將它轉換為填充色。將多個圖層應用于同一個遮罩層時，只需將這個圖層拖拽置遮罩層之下，即可與遮罩層之間建立了遮罩和被遮罩的關系。實例操作：引導層動畫制作。作業(yè)、討論題、思考題:做引導層動畫實踐練習。課后小結:課次7授課方式（請打，）理論課V討論課口實驗課口習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第三章Flash軟件基礎學習（六）教學目的、要求：認識Flash中按鈕的特點及創(chuàng)建方法、掌握Flash中按鈕的編輯與修改方法Flash中按鈕的動作指令添加方法。教學重點及難點：Flash

19、中按鈕的特點及創(chuàng)建方法、Flash中按鈕的編輯與修改方法、按鈕的動作指令添加方法。（教學重點）Flash中按鈕的編輯與修改方法、按鈕的動作指令添加（教學難點）教學基本內容方法及手段Flash軟件基礎學習（六）Flash中按鈕兀件的制作及動作指令：一、按鈕元件的特點與創(chuàng)建：通過繪制與鼠標事件相對應的對象，按鈕元件主要用于創(chuàng)建響應鼠標事件的交互式按鈕。鼠標事件包括鼠標觸及與單擊兩種。將繪制的圖形轉換為按鈕元件，在播放影片時，當鼠標靠近圖形時，光標就會變成小手狀態(tài)，為按鈕元件添加腳本語言，即可實現(xiàn)影片的控制。二、Flash中按鈕的編輯與修改方法三、Flash中按鈕的動作指令解析：交互式動畫就是允許觀

20、眾對影片進行控制，而達到某種目的的動畫。交交互式動畫原理：交互式動回是由觸發(fā)動作的事件、事件的目標和觸發(fā)事件的動作3個因素組成的，例如單擊按鈕后，影片開始播放這一事件。其中，單擊是觸發(fā)動作的事件，按鈕是事件的目標，影片開始播放是觸發(fā)事件的動作。換句話說，事件、目標和動作構成了一個交互式動畫。在Flash中，事件包括網標事件、鍵盤事件和幀事件二種。目標包括時間軸、按鈕元件和影片剪輯元件三種。而動作就是指控制影片的一系列腳本語言，所以說腳本語言的編寫也就是各種動作的編寫。舉例講解、教師示范講解、案例解析在編寫腳本語言時，既可以通過直接在腳本編輯區(qū)中輸入字符進行編寫，又可以通過在動作工具欄中選擇項目

21、進行編寫。單擊動作工具欄中的項目文件夾，可展開或收縮文件夾。在展開的項目文件夾中包含多個腳本項目，通過雙擊進行選擇。止匕外，還可以通過添加動作按鈕，將新項目添加到腳本中。時間軸控制中包括了幾種最常用的動作，用于控制影片或影片剪輯元件中的時間軸。理解這些語言的意義，掌握它們的編寫與操作，可以輕松實現(xiàn)交互式影片中最為常見的效果。實例如控制影片的播放，停止和重新播放等。時間軸控制命令位于全局函數(shù)的子文件夾中。四、Flash中部分按鈕特效案例解析五、教師做按鈕元件的制作及動作指令的操作的教學示范。作業(yè)、討論題、思考題：按鈕元件的制作及動作指令的操作實踐練習課后小結:0互動媒體設計A課程教案課次8授課方

22、式（請打，）理論課口討論課口實驗課，習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：Flash按鈕元件及動作指令實驗教學目的、要求：通過頭驗操作進步認識Flash中按鈕的特點及創(chuàng)建方法、掌握Flash中按鈕的編輯與修改方法，F(xiàn)lash中按鈕的動作指令添加方法。教學重點及難點：Flash中按鈕的特點及創(chuàng)建方法、Flash中按鈕的編輯與修改方法、按鈕的動作指令添加實驗。（教學重點）Flash中按鈕的編輯與修改方法、按鈕的動作指令添加實驗（教學難點）教學基本內容方曾手段O0學生進行按鈕元件的制作及動作指令的實驗操作練習。學生教師針對問題示范演練，巡回指導。實驗作，教師針對指導作業(yè)、討論題、思考

23、題：按鈕元件的制作及動作指令的操作實踐練習。課后小結:互動媒體設計 A課程教案課次方法及手段舉例 講 解、 教師 示范講 解、 案例 解析授課方式（請打，）理論課V討論課口實驗課”習題課口其他口課時安排3授課題目（教學章、節(jié)或主題）：第二章Flash軟件基礎學習（七）教學目的、要求:了解聲音及其它媒體的導入程序；熟悉多場景動畫的鏈接設置方法；掌握影片的測試、優(yōu)化、發(fā)布與導出方法。教學重點及難點：導入聲音及其它媒體的操作方法（教學重點）多場景動畫的鏈接設置方法（教學難點）教學基本內容Flash軟件基礎學習（七）Flash中導入聲音及其它媒體，多場景動畫一、聲音的導入：聲音是的影片的重要組成部分，

24、有聲影片會使動畫更加生動自然，給人身臨其境之感。在Flash中，既可以為整部影片添加聲音，也可以單獨為影片中的某個元件添加聲音。在一部影片中，同一個聲音文件可以被反復利用。用戶還可以自行設定聲音與影片的同步方式。而Flash在聲音資源的使用上也有著其它軟件無法媲美的高壓縮率，所以制作的影片極為輕巧，便于流傳?？梢詫胗捌穆曇舾袷接校篧AVMP琳口AIFF（僅限蘋果機）格式。以上格式中，最常用的為WAV&式，它既可以應用于PC機，又可以應用于蘋果機。聲音導入的程序：1 .新建文檔，執(zhí)行“文件”一“導入”一“導入到庫”命令，彈出“導入到庫”的對話框，在文件類型中選擇WAV?音格式，接著選

25、中要導入的聲音文件，單擊“確定”按鈕。2 .返回場景編輯模式，按下Ctrl+L快捷鍵打開庫面板，在庫面板中可以看到剛剛選擇的聲音文件。聲音不但可以應用于整部影片中，還可以應用于某個元件中，和元件的原理相同，聲音可以被反復利用及制作各種聲音效果，均以庫面板中聲音為基礎。二、其它媒體的導入與聲音的導入方法相似；三、多場景動畫鏈接。1、為每一個場景最后一幀設置停止動作語言關鍵幀；2、在每一個場景添加好相應的鏈接按鈕；3、為每一個鏈接按鈕正確添加動作語言。*注意：輸入動作語言是全角與半角輸入法的精準切換！四、影片的測試、優(yōu)化、發(fā)布與導出：1 .可以在兩種環(huán)境下測試影片，一種為影片編輯環(huán)境，另一種為影片

26、測試環(huán)境。在影片編輯環(huán)境下，按Enter鍵可以對影片進行簡單的測試，但影片中的影片剪輯元件、按鈕元件以及腳本語言也就是影片的交互式效果均不能得到測試。要在影片編輯環(huán)境下測試簡單的幀動作（play、stop、gotoplay和gotoandstop）,需要執(zhí)行“控制”一“啟用簡單幀動作”命令。2 .優(yōu)化影片的最終目的是減少文件的大小，確保它的播放流暢。因為無論影片如何出色，如果在播放的過程中發(fā)生多次間斷，都會影響它的效果。所以對影片進行必要的優(yōu)化是影片制作的最后步驟，下面將講述如何對影片的各種對象進行優(yōu)化以及優(yōu)化的一些技巧。3 .可以將Flash影片發(fā)布成多種格式，而在發(fā)布之前需進行必要的發(fā)布設

27、置，定義發(fā)布的格式以及相應的設置，達到最佳效果。在“發(fā)布設置”對話框中，可以一次性發(fā)布多個格式，且每種格式均保存為指定的發(fā)布設置，可以擁有不同的名字。4 .導出影片不像發(fā)布那樣可以對影片的各方面進行設置，它可以把當前影片全部導出為Flash支持的格式。而影片的導出分為兩種，分別是導出圖片與導出影片。五、教師做聲音及其它媒體導入、多場景動畫鏈接設置、影片的測試、優(yōu)化與導出教學示范。作業(yè)、討論題、思考題：做聲音及其它媒體導入、多場景動畫設置及影片的測試、優(yōu)化與導出實踐操作練習。課后小結：互動媒體設計A課程教案課次10授課方式理論課V討論課口實驗課時Q（請打，）課”習題課口其他口安排3授課題目（教學章、節(jié)或主題）：Flash中導入聲音及其它媒體、多場景鏈接實驗教學目的、要求：通過實驗操作進一步了解聲音及其它媒體的導入程序；熟悉多場景動畫的鏈接設置方法；掌握影片的測試、優(yōu)化、發(fā)布與導出方法。教學重點及難點：導入聲音及其它媒體的操作實驗（教學重點）多場景動畫的鏈接設置實驗（教學難點）教學基本內容方法及手段學生進行按鈕元件的制作及動作指令的實驗操作練習。教師針對問題示范演練，巡回指導。學生實驗操作，教師針對問題演示指導作業(yè)、討論題、思考題：做聲音及其它媒體導入、多場景動畫設置及影片的測試、優(yōu)化與導出實踐操作練習。0課后小結:互動媒體設計A課程教案課次11授課方式（請打，）理論課V討論課