互動媒體設(shè)計(一)

1、 南昌大學(xué) 自考實踐報告 互動媒體設(shè)計（一） 姓名：黃慧 專業(yè)：動畫設(shè)計 2015.10.16 FLASH互動媒體設(shè)計與研究Flash在網(wǎng)絡(luò)中的地位如日中天，其以文件小、制作簡單、畫面流暢、播放方便等特性獲得了各種硬件平臺包括互聯(lián)網(wǎng)、手機(jī)和新一代的高清電視的青睞和支持。隨著Flash技術(shù)的發(fā)展和完善，除傳統(tǒng)的大量應(yīng)用Flash制作廣告和Flash MTV之外，現(xiàn)正廣泛地應(yīng)用于娛樂（如Flash游戲）和商業(yè)用途（如Flash網(wǎng)站）之中，F(xiàn)lash方便的界面制作和豐富的Action Script控制為大家制作Flash互動設(shè)計提供了更多的空間。本實踐報告共分為若干個，其中第一節(jié)到第四節(jié)是輕松入門部

2、分，包括互動媒體設(shè)計體驗、Flash動作腳本基本知識，F(xiàn)lash跳轉(zhuǎn)函數(shù)控制播放器、Flash影片屬性應(yīng)用；第五章到第十章為拾級進(jìn)階部分，包括鼠標(biāo)跟隨效果、日期、時問顯示和設(shè)置、數(shù)據(jù)的交互應(yīng)用、進(jìn)度條、聲音和背景音樂的控制、碰撞檢測與定時器、過渡效果和行為；第十一節(jié)到第十八節(jié)為攀緣而上部分，包括使用外部文件、Flash的常用類、視頻應(yīng)用、Flash與麥克風(fēng)的互動、使用組件、Flash動態(tài)數(shù)據(jù)處理、繪圖函數(shù)、綜合實例。本實踐報告中包含了大量的較為實用的案例，對比較復(fù)雜的案例，除了給出制作步驟之外，還對案例進(jìn)行了分析和擴(kuò)展，讓我們不僅能掌握互動設(shè)計制作的基本技巧，而且能開闊視野，達(dá)到舉一反三的效果

3、，同時還能提高讀者對互動項目策劃的能力。其中所涉及的案例都可以在Flash8版本下正常編譯運(yùn)行。在學(xué)習(xí)互動媒體設(shè)計之前，如果有程序設(shè)計的基礎(chǔ)，將能更加順利地完成flash互動媒體設(shè)計的學(xué)習(xí)。在學(xué)習(xí)第十六節(jié)實例制作Flash留言板之前，應(yīng)熟悉ASP的相關(guān)技術(shù)。如果沒有ASP基礎(chǔ)，可以跳過本節(jié)內(nèi)容，不會影響到后續(xù)其他內(nèi)容的學(xué)習(xí)。目錄第1節(jié) 緒論.11.1 引言.1.1.2 研究的背景以及意義.3第二節(jié) 互動媒體設(shè)計體驗.62.1 互動設(shè)計規(guī)劃.72.2 互動設(shè)計實例.9第三節(jié) Flash動作腳本基本知識.113.1 Flash動作腳本功能.123.2 認(rèn)識Flash動作腳本窗口.133.3 使用變

4、量. 14 第一節(jié) 緒論1. 1引言 2009年11月，英國倫敦V&A博物館"數(shù)字設(shè)計感官展"展出了大量由計算機(jī)程序生成的互動藝術(shù)作品，展覽打破了作品靜態(tài)呈現(xiàn)的傳統(tǒng)展示方式，顛覆了觀眾靜觀作品的觀看慣性。計算機(jī)程序?qū)λ囆g(shù)的介入引發(fā)了藝術(shù)家創(chuàng)作工具和思維方式的轉(zhuǎn)變。研究如何編寫程序、創(chuàng)造聲音或圖像的界面以實現(xiàn)代碼與觀眾之間的交流互動，成為設(shè)計藝術(shù)界新的課題。美國排名前列的羅德島設(shè)計學(xué)院聘請麻省理工媒體實驗室ACG小組主任約翰·梅達(dá)擔(dān)任校長，傳統(tǒng)的藝術(shù)設(shè)計行業(yè)正面臨著一場革命。編寫程序不僅是程序員的專利，它也已成為數(shù)字藝術(shù)家的創(chuàng)作手段，以及藝術(shù)院校的必修課程。

5、英國皇家藝術(shù)學(xué)院、耶魯大學(xué)設(shè)計學(xué)院、加州大學(xué)媒體藝術(shù)專業(yè)、卡內(nèi)基梅隆大學(xué)等院校都把編程作為教學(xué)課題。大部分設(shè)計師都會使用商業(yè)軟件（如 Photoshop、Illustrator、Flash）來從事創(chuàng)作，這些軟件功能豐富、使用方便，可以實現(xiàn)預(yù)設(shè)的效果。但人們的創(chuàng)意和表現(xiàn)形式往往被企業(yè)所主導(dǎo)的制式化生產(chǎn)工具所限制。FLASH互動媒體設(shè)計的出現(xiàn)是藝術(shù)設(shè)計創(chuàng)作的一場革命，它是一種具有前瞻性的新興計算機(jī)語言，用戶主要面向計算機(jī)程序員和數(shù)字藝術(shù)家。藝術(shù)家可以運(yùn)用FLASH互動媒體設(shè)計生成唯美的圖形，為互動藝術(shù)作品編寫程序，將抽象的數(shù)據(jù)呈現(xiàn)為視覺形象。當(dāng)你進(jìn)入到互動編程藝術(shù)的世界，就會發(fā)現(xiàn)這一切都是讓人興奮

6、不已的。由于文化和語言的差異，國內(nèi)研究Processing的學(xué)術(shù)機(jī)構(gòu)并不多見，中文網(wǎng)站和學(xué)術(shù)論壇等學(xué)習(xí)資源有限，也沒有相關(guān)的中文版本的書籍。資料的缺乏在很大程度上降低了中國設(shè)計師學(xué)習(xí)Processing的積極性。鑒于以上現(xiàn)實，作者根據(jù)自身的教學(xué)實踐編寫了本書。本書可作為學(xué)習(xí)互動藝術(shù)編程的基礎(chǔ)書籍，主要面向藝術(shù)院校數(shù)字媒體設(shè)計專業(yè)、交互設(shè)計專業(yè)，以及業(yè)界的設(shè)計師，等等。本書前兩章主要介紹了Processing的背景、編程與互動藝術(shù)的關(guān)系，以及編程基礎(chǔ)知識。接下來的章節(jié)對繪畫、互動、動畫、函數(shù)與對象、數(shù)組、圖片與文字、視頻與音頻、3D與物理計算等方面進(jìn)行了較為全面的論述，并結(jié)合了大量的實例與作品分

7、析來啟發(fā)讀者的互動藝術(shù)思維。在國內(nèi)，互動藝術(shù)和編程藝術(shù)都是新的研究領(lǐng)域，本書是在一個全新的領(lǐng)域中進(jìn)行探索，在此過程中難免會存在不完善之處，希望得到相關(guān)專家和廣大讀者的批評指正！在創(chuàng)意產(chǎn)業(yè)迅速發(fā)展的中國，我們有理由相信新一代的藝術(shù)家和設(shè)計師們不會只停留在軟件應(yīng)用的層次，他們會運(yùn)用編程去創(chuàng)新、發(fā)展藝術(shù)與設(shè)計，并將民族文化與思想注入到作品中1.2研究的意義與背景Flash動畫是一門綜合的藝術(shù)，給我們帶來視覺、聽覺等方面的享受，大部分flash動畫往往會在角色、情節(jié)、語言、場景等方面加入幽默元素，給人以樂趣。Flash創(chuàng)作的動畫故事表現(xiàn)力極強(qiáng)，能深入挖掘人們內(nèi)心的矛盾，以詼諧幽默的手法展現(xiàn)作者對現(xiàn)實社

8、會的理解。所以，很多flash動畫作品深受人們的喜愛。而且flash動畫簡單易學(xué)，打破了專業(yè)動畫制作者的局限，愛好者同樣經(jīng)過學(xué)習(xí)能成為制作者。而且flash動畫制作成本低，制作時間比傳統(tǒng)動畫縮短很多。因此，flash動畫制作的愛好者在也在迅速增加。Flash制作的領(lǐng)域很廣泛。電視廣告、賀卡、MTV、動畫短片、交互游戲、網(wǎng)站廣告都flash的身影，甚至電子商務(wù)中也應(yīng)用了flash技術(shù)。出于對flash動畫作品的熱愛，很多愛好者開始學(xué)習(xí)動畫制作。由于學(xué)習(xí)flash的方法有誤，又沒有好的教程，很多人連基礎(chǔ)動畫都沒學(xué)會。最終我還是自己去買教材，買實例介紹的比較清晰，自學(xué)類型的教材。所以，flash動畫

9、制作的學(xué)習(xí)方法是我們需要重點(diǎn)考慮的問題，需要有新的教學(xué)方法改善這種“很多人學(xué)，很多人不會”的局面。經(jīng)過幾年的flash學(xué)習(xí)和教學(xué)過程，我總結(jié)了自己的教學(xué)經(jīng)驗，買實例詳盡的基礎(chǔ)較強(qiáng)的學(xué)習(xí)教材，從網(wǎng)上搜索視頻解說教程，讓學(xué)生自己動手，教師引導(dǎo)，學(xué)生學(xué)得較快。這種教學(xué)與學(xué)習(xí)的方法比以前的教學(xué)方法有所創(chuàng)新。主要工作分以下幾個方面：一加強(qiáng)理論學(xué)習(xí)）建構(gòu)主義學(xué)習(xí)理論建構(gòu)主義其學(xué)習(xí)理論的核心觀點(diǎn)是： 1）學(xué)習(xí)不應(yīng)看成是對于教師所授予的知識的被動接受，而是學(xué)習(xí)者以自身已有的知識和經(jīng)驗為基礎(chǔ)的主動的建構(gòu)活動，即學(xué)生能主動積極地構(gòu)造意義。所以，我在flash動畫教學(xué)過程中，先引導(dǎo)學(xué)生學(xué)習(xí)動畫基礎(chǔ)操作，先從簡單的容

10、易實現(xiàn)的制作實例開始學(xué)習(xí)，讓學(xué)生小有成就感，漸漸產(chǎn)生興趣，才能主動積極的學(xué)習(xí)后面的操作。2）學(xué)生學(xué)習(xí)活動主要是在學(xué)校環(huán)境中，在教師的直接指導(dǎo)下進(jìn)行的。因此，學(xué)習(xí)作為一種特殊的建構(gòu)活動有社會性質(zhì)。這說明學(xué)習(xí)不是一個封閉的過程，而是一個交流、反思、改進(jìn)、協(xié)調(diào)和創(chuàng)造的過程。所以，由學(xué)生、教師、媒體組成的學(xué)習(xí)環(huán)境是學(xué)生主動構(gòu)建活動所必要的。我堅持和學(xué)生一起制作動畫，通過投影儀屏幕展示的形式給學(xué)生引導(dǎo)，真正感受學(xué)生不會的操作，師生之間討論、改進(jìn)。 第二節(jié) 互動媒體設(shè)計體驗1.1互動設(shè)計規(guī)劃互動設(shè)計在任何的人工物的設(shè)計和制作過程里面都是不可以避免的，區(qū)別只在于顯意識和無意識。然而，隨著產(chǎn)品和用戶體驗日趨復(fù)

11、雜、功能增多，新的人工物不斷涌現(xiàn)，給用戶造成的認(rèn)知摩擦日益加劇的情況下，人們對互動設(shè)計的需求變得愈來愈顯性，從而觸發(fā)其作為單獨(dú)的設(shè)計學(xué)科在理論和實踐的呼聲變得愈發(fā)迫切。然而，由于互動設(shè)計的研究者和實踐者來自不同領(lǐng)域，而且這個領(lǐng)域本身尚在創(chuàng)建階段，因此人們往往對某些問題尚未達(dá)成共識，甚至對類似和相同的問題本身的理解以及解決方式也可能有不同方案，且相互矛盾。比如互動設(shè)計的基本元素包含什么，現(xiàn)在也還在討論中。但是人們依然形成了一些不相互否認(rèn)的共識，比如，互動設(shè)計是設(shè)計人和物的對話(dialog)，而互動設(shè)計研究和實踐的本質(zhì)可能是隱藏于這個對話中的?；釉O(shè)計的目的包括，有用性，易用性和吸引性的設(shè)計和改

12、善。特別是進(jìn)入數(shù)字時代，多媒體讓互動設(shè)計的研究顯得更加多元化，多學(xué)科各角度的剖析讓互動設(shè)計理論的顯得更加豐富?，F(xiàn)在基于互動設(shè)計的產(chǎn)品已經(jīng)越來越多的投入市場，而很多新的產(chǎn)品也大量的吸收了互動設(shè)計的理論2.2互動設(shè)計實例創(chuàng)意初始：力求講山清水潤，講江南溫婉，講氣質(zhì)，講在北方，講獨(dú)特人文園林，講互動在中國元素衍生，講時光流轉(zhuǎn)，四季切換，用網(wǎng)絡(luò)平臺展現(xiàn)平日無法企及的視覺效果。在VNOISE團(tuán)隊一致努力下，網(wǎng)站如期進(jìn)行項目地址顯示格式選取 1024*768 （占81%）的瀏覽用戶按慣例 我們開始進(jìn)行設(shè)計大綱：經(jīng)過創(chuàng)意部門的開會，起草了一個方向性的大綱。大體從導(dǎo)向入手，考慮一個初次訪問者的瀏覽層次如下圖去

13、粗取精，概括為：游園體驗！完全要摒棄那種條框?qū)⒅袊拍钕魅?。弱化網(wǎng)站結(jié)構(gòu)，體現(xiàn)方寸之間。天上人間的感受。在畫面表現(xiàn)規(guī)劃上：講究（虛實）（動靜 ）遠(yuǎn)虛-中實（項目主體實）-近虛 （近處水墨夸張，細(xì)節(jié)活色生香）同時抓一些色彩概括：我們不是在做SHOW ，而是要深刻體現(xiàn)項目特質(zhì)，這個項目適合什么手段來表現(xiàn)，用減法，去該概括，去將時間壓縮，去將歷史精華在那訪問網(wǎng)站的幾分鐘內(nèi)，從容展示：、畫面開始講溯源：我們從江南而來 帶來了園林 同時在北京找到了北方豪放大氣的寶地-13陵（可以看出水是南方的；山確是北方的。我們有意而為之。第一個景色我們特地選取冬 在家暖冬，泥爐煮雪，對影成叁。顯然冬是特殊的，至少在江

14、南沒有，在蘇州園林以前沒有，今天在北京有了，而且很具有特色，一種華麗的晚裝 外寒內(nèi)暖，斂聚天地的感受，不然總讓人莫名感到一些缺憾。在北京我們找到了抓蘇州元素；在內(nèi)容上 將又淺及深，在畫文結(jié)合的情況下，體現(xiàn)天倫隨園的整體高貴氣質(zhì)。當(dāng)然由于時間倉促客觀條件我們開發(fā)周期比較急促有些細(xì)節(jié)不盡人意，實在遺憾。另：有一些細(xì)節(jié)素材是從網(wǎng)絡(luò)搜索開源得來，例如一些 音樂，和一些 中國元素，在此表示感謝，我們會在今后始終 為體現(xiàn)視覺互動精神而努力正如我們公司的名字 VNOISE視覺互動。 第三節(jié) FLASH動作腳本基本知識3.1 FLASH動作腳本功能1實現(xiàn)動作的流暢完整3.2 認(rèn)識FLASH腳本窗口 在Flas

15、h中，動作腳本的編寫，都是在“動作”面板的編輯環(huán)境中進(jìn)行，熟悉“動作”面板是十分必要的。按【F9】鍵調(diào)出“動作”面板，可以看到“動作”面板的編輯環(huán)境由左右兩部分組成。左側(cè)部分又分為上下兩個窗口。左側(cè)的上方是一個“動作”工具箱，單擊前面的圖標(biāo)展開每一個條目，可以顯示出對應(yīng)條目下的動作腳本語句元素，雙擊選中的語句即可將其添加到編輯窗口。下方是一個“腳本”導(dǎo)航器。里面列出了FLA文件中具有關(guān)聯(lián)動作腳本的幀位置和對象；單擊腳本導(dǎo)航器中的某一項目，與該項目相關(guān)聯(lián)的腳本則會出現(xiàn)在“腳本”窗口中，并且場景上的播放頭也將移到時間軸上的對應(yīng)位置上。雙擊腳本導(dǎo)航器中的某一項，則該腳本會被固定。右側(cè)部分是“腳本”編

16、輯窗口，這是添加代碼的區(qū)域?？梢灾苯釉凇澳_本”窗口中編輯動作、輸入動作參數(shù)或刪除動作。也可以雙擊“動作”工具箱中的某一項或“腳本編輯”窗口上方的【添加腳本】工具 ，向“腳本”窗口添加動作。在“腳本”編輯窗口的上面，有一排工具圖標(biāo)，在編輯腳本的時候，可以方便適時的使用它們的功能。 3.3 在使用“動作”面板的時候，可以隨時點(diǎn)擊“腳本”編輯窗口左側(cè)的箭頭按鈕，以隱藏或展開左邊的窗口。將左面的窗口隱藏可以使“動作”面板更加簡潔，方便腳本的編輯。好了，動作面板就介紹這些，有個印象，不要求記住，工具欄上每個工具的作用和功能將在以后的課程中邊用邊熟悉3.3使用變量比較運(yùn)算符 用于比較表達(dá)式的值，然后返回一

17、個布爾值（true 或 false）。這些運(yùn)算符最常用于循環(huán)語句 和條件語句中。Flash中的算術(shù)運(yùn)算符及簡單的用法如表 比較返回值 在舞臺上繪制四個動態(tài)文本框,變量名分別為: m_txt1、m_txt2、m_txt3、m_txt4。再放入兩 個按鈕。 按鈕 1 上的 AS： on (release) m1_txt = 1 = 2; m2_txt = 1>2; m3_txt = 1<2; m4_txt = 1 != 2; 按鈕 2 上的 AS: on (release) m1_txt="" m2_txt="" m3_txt="&qu

18、ot; m4_txt = "" 條件運(yùn)算符 ?:（條件） 格式：表達(dá)式式 1? 表達(dá)式 2：表達(dá)式 3 參數(shù)： 表達(dá)式 1計算結(jié)果為布爾值的表達(dá)式， 通常為像 x < 5 這樣的比較表達(dá)式。表達(dá)式 2表達(dá)式 3 任何類型的值。 說明：指示 Flash 計算表達(dá)式 1，如果表達(dá)式 1 的值為 true，則它返回表達(dá)式 2 的值；否則，它返回表達(dá)式 3 的值。條件運(yùn)算符原理在舞臺上繪制兩個輸入文本， 一個動態(tài)文本。變量名分別為 “x_txt”、“y_txt”、“z_txt”。 在放入一個“計算”按鈕、一個“清空”按鈕。 運(yùn)算按鈕上的 AS 代碼： on (press) x = Number(x_txt); y = Number(y_txt); z = (x<y) ? x : y; z_txt = z; 清空按鈕上的 AS 代碼 ： on (press) x_txt="