韋艷麗　趙韓　楊亞榮

摘要：文章通過對(duì)動(dòng)畫運(yùn)動(dòng)原理的剖析，根據(jù)交互式網(wǎng)頁動(dòng)畫的特點(diǎn)，提出由靜至動(dòng)逆向思維的方法創(chuàng)意動(dòng)畫，運(yùn)用逆向運(yùn)動(dòng)反向演示的方法設(shè)計(jì)制作動(dòng)畫，拘建了交互式網(wǎng)頁動(dòng)畫創(chuàng)意設(shè)計(jì)的新模式，為設(shè)計(jì)提供參考，并在實(shí)踐中加以應(yīng)用。

關(guān)鍵詞：動(dòng)畫設(shè)計(jì)；數(shù)字化設(shè)計(jì)；新媒體藝術(shù)；交互設(shè)計(jì)；交互式網(wǎng)頁動(dòng)畫；反向演示

中國分類號(hào)：J50

文獻(xiàn)標(biāo)識(shí)碼：A

動(dòng)畫是靜態(tài)視覺圖像的連續(xù)運(yùn)動(dòng)，是通過播放一系列連續(xù)畫面而形成的視覺映像，因其直觀、信息含量大且藝術(shù)感染力強(qiáng)，被廣泛應(yīng)用于互聯(lián)網(wǎng)，成為網(wǎng)站頁面構(gòu)成的重要組成部分，使頁面生動(dòng)有活力，達(dá)到引起關(guān)注、引導(dǎo)瀏覽和實(shí)現(xiàn)交互的目的。網(wǎng)頁動(dòng)畫與傳統(tǒng)動(dòng)畫最大的區(qū)別在于其交互性，交互式網(wǎng)頁動(dòng)畫具有數(shù)據(jù)量小、表現(xiàn)力強(qiáng)、形式多樣和交互性等特點(diǎn)，其運(yùn)動(dòng)的原理來自于動(dòng)畫的運(yùn)動(dòng)原理，在藝術(shù)呈現(xiàn)上不拘于技術(shù)的前衛(wèi)與否，而是視覺、聽覺和情境的營建，設(shè)計(jì)過程是將形態(tài)、色彩和聲音等媒體信息進(jìn)行整合的過程。通過由靜至動(dòng)逆向思維的方法創(chuàng)意動(dòng)畫和逆向運(yùn)動(dòng)反向演示的方法制作動(dòng)畫，從而完成交互式網(wǎng)頁動(dòng)畫的設(shè)計(jì)，充分發(fā)揮動(dòng)畫在網(wǎng)絡(luò)世界的互動(dòng)傳播的力量。

一、由靜至動(dòng)逆向思維的方法創(chuàng)意動(dòng)畫

交互式網(wǎng)頁動(dòng)畫作為網(wǎng)頁的構(gòu)成部分，在網(wǎng)頁中的應(yīng)用主要有Banner動(dòng)畫、片頭動(dòng)畫和酋頁動(dòng)畫等，在網(wǎng)頁上的應(yīng)用不同，而其合成設(shè)計(jì)的方法和流程都是相同的，在設(shè)計(jì)表達(dá)形式上與平面設(shè)計(jì)有很大的相似性，不同的是媒介的不同和網(wǎng)頁是動(dòng)態(tài)的并具有交互性。

（一）逆向思維創(chuàng)意構(gòu)思。在創(chuàng)意設(shè)計(jì)上，采用逆向思維的方法能為創(chuàng)意帶來新的視角，特別是在視覺效果表達(dá)上，經(jīng)常會(huì)遇到設(shè)計(jì)瓶頸，運(yùn)用方向逆向、置換逆向和狀態(tài)逆向的方法進(jìn)行創(chuàng)意設(shè)計(jì)，由設(shè)計(jì)達(dá)到的最終效果反推出滿足的必要條件，輕而易舉的完成創(chuàng)意，準(zhǔn)確地把握創(chuàng)新點(diǎn)，將設(shè)計(jì)開發(fā)過程中的問題簡單化，提高設(shè)計(jì)效率和效果。

1.方向逆向。交互式網(wǎng)頁動(dòng)畫設(shè)計(jì)的過程是在靜態(tài)視覺的基礎(chǔ)上加上動(dòng)態(tài)元素和交互功能，將一個(gè)靜態(tài)的視覺畫面變成一個(gè)動(dòng)態(tài)的影像，以達(dá)到吸引眼球引起注意和產(chǎn)生交互的目的。動(dòng)畫的播放是按照“從前向后”的順序播放的，從第1幀開始播放，一直播放到最后一幀，而在動(dòng)畫創(chuàng)意設(shè)計(jì)時(shí)，要用方向逆向的方法，從相反方向進(jìn)行，遵循“從后向前”的原則。首先確定一個(gè)動(dòng)作最后一幀的靜態(tài)視覺效果，再逆向完成動(dòng)畫的運(yùn)動(dòng)過程。

2，置換逆向。交互網(wǎng)頁動(dòng)畫的設(shè)計(jì)是由靜態(tài)圖到動(dòng)態(tài)圖轉(zhuǎn)化的過程，靜態(tài)圖的創(chuàng)意在動(dòng)畫表現(xiàn)中起著關(guān)鍵作用，根據(jù)動(dòng)畫表達(dá)的主題，采用置換逆向的方法，從新的視角進(jìn)行思考，將看似不相關(guān)的事物組合在一起來表達(dá)，從而使“圖”產(chǎn)生新穎獨(dú)特的藝術(shù)效果，并賦予其豐富的內(nèi)涵。引發(fā)人們的聯(lián)想和情感的共鳴。

3狀態(tài)逆向。交互式網(wǎng)頁動(dòng)畫往往在交互過程中呈現(xiàn)。對(duì)于這種過程動(dòng)畫，可以采用狀態(tài)逆向的方法，利用動(dòng)畫中事物的不同狀態(tài)，甚至利用其缺點(diǎn)來表達(dá)，從而使看似普通的事物有了新意。例如在動(dòng)畫中，用花骨朵做按鈕，通常是當(dāng)用鼠標(biāo)點(diǎn)擊時(shí)花骨朵是打開的，而當(dāng)點(diǎn)擊后花朵卻凋謝散落一地時(shí)，人們的心情是不一樣的。

（二）由靜至動(dòng)完成創(chuàng)意。交互式網(wǎng)頁動(dòng)畫的設(shè)計(jì)過程是由靜至動(dòng)逆向設(shè)計(jì)的過程，首先確定最后一幀的靜態(tài)視覺效果，然后再讓這張靜態(tài)的“圖”動(dòng)起來，在“圖”的創(chuàng)意設(shè)計(jì)上采用一些能表達(dá)動(dòng)畫內(nèi)涵，具有一定視覺沖擊力的形態(tài)、色彩、空間和聲音等視聽元素來表現(xiàn)，吸引用戶的注意，并用一些動(dòng)畫形式使這些元素運(yùn)動(dòng)出現(xiàn)，弓I導(dǎo)人們的視覺流程，從而達(dá)到有效傳達(dá)信息的目的。在視覺表現(xiàn)上可以采用單鏡頭和多鏡頭的形式表現(xiàn)。單鏡頭的表現(xiàn)形式，是動(dòng)畫的運(yùn)動(dòng)過程基于一張“圖”，將圖中的視覺元素進(jìn)行解剖，再以不同的動(dòng)畫形式依序出現(xiàn)，最后定格，從而生動(dòng)的表達(dá)設(shè)計(jì)主題。多鏡頭的表現(xiàn)形式，是動(dòng)畫的運(yùn)動(dòng)過程是基于多張“圖”，如盛唐卷煙網(wǎng)站的片頭動(dòng)畫設(shè)計(jì)，從文化角度表現(xiàn)“唐韻”，采用六個(gè)鏡頭也就是六張圖片來表達(dá)，從“唐”字到搖晃出現(xiàn)的馬車到系列化的唐元素，最后點(diǎn)題“盛唐”網(wǎng)站主題，用多鏡頭視覺豐富的表達(dá)了網(wǎng)站的內(nèi)涵和韻味，再配以音樂，使動(dòng)畫表現(xiàn)更具動(dòng)感。

二、逆向運(yùn)動(dòng)反向演示的方法制作動(dòng)畫

通過由靜至動(dòng)逆向方法完成了動(dòng)畫的靜態(tài)視覺效果以后，再用逆向運(yùn)動(dòng)反向演示的方法讓這些靜態(tài)圖片動(dòng)起來形成動(dòng)畫。

1.靜態(tài)視覺元素分解。首先將最后幀靜態(tài)視覺畫面中需要運(yùn)動(dòng)的元素進(jìn)行分解，如背景、圖形、圖像和文字等元素，在FLASH軟件中將其分解到不同的圖層中，使其成為能在舞臺(tái)上獨(dú)立運(yùn)動(dòng)的元素。

2，動(dòng)態(tài)視覺生成。將圖層中需要運(yùn)動(dòng)和交互的視覺元素轉(zhuǎn)換為圖形、按鈕或影片剪輯元件，再把這些運(yùn)動(dòng)元件用動(dòng)畫表現(xiàn)形式生成動(dòng)態(tài)視覺讓其動(dòng)起來。交互式網(wǎng)頁動(dòng)畫的形式多種多樣，從設(shè)計(jì)原理上有四種類型。關(guān)鍵幀動(dòng)畫，動(dòng)畫形式為逐幀動(dòng)畫；時(shí)間軸動(dòng)畫，動(dòng)畫形式有形狀補(bǔ)問、動(dòng)作補(bǔ)間、運(yùn)動(dòng)引導(dǎo)和遮罩動(dòng)畫；程序語言動(dòng)畫，是用ActionScfipt腳本語言開發(fā)的腳本動(dòng)畫；還有一種是用Flash第三方輔助設(shè)計(jì)軟件開發(fā)的插件動(dòng)畫。每種動(dòng)畫形式能產(chǎn)生不同的動(dòng)畫效果，在設(shè)汁中靈活應(yīng)用。

3，添加交互語句。交互式網(wǎng)頁動(dòng)畫的設(shè)計(jì)制作，要實(shí)現(xiàn)畫面的運(yùn)動(dòng)播放，同時(shí)要能產(chǎn)生交互，通過在圖形元件、按鈕元件或影片剪輯元件上添加stop、goto、getURL、loadMovie或qmt等交互語句實(shí)現(xiàn)交互。stop語句是一個(gè)停止播放命令，用于控制動(dòng)畫的停止播放goto語句是一個(gè)跳轉(zhuǎn)命令，用于控制動(dòng)畫的跳轉(zhuǎn)；getURL語句用于建立網(wǎng)頁的鏈接，調(diào)用JavaS-cnpt腳本等；loadMovie語句用于載入外部圖像與動(dòng)畫影片，實(shí)現(xiàn)不同動(dòng)畫之間的鏈接；quit語句是一個(gè)命令用于退出動(dòng)畫影片，不同的語句執(zhí)行不同的指令。

4.添加音效。為了增強(qiáng)效果，除了追求視覺上的表現(xiàn)，還需通過音效來渲染氣氛，音效的添加要根據(jù)動(dòng)畫表現(xiàn)的主題來選擇。一般在網(wǎng)站片頭動(dòng)畫和首頁動(dòng)畫中應(yīng)用的比較多，可以通過音效豐富網(wǎng)站的表現(xiàn)效果，更好的表現(xiàn)設(shè)計(jì)的主題，網(wǎng)頁動(dòng)畫中的音效文件不可太大。否則會(huì)影響動(dòng)畫的播放。不是所有的交互式網(wǎng)頁動(dòng)畫都適合添加音效。

5，輸出。動(dòng)畫設(shè)計(jì)完成后，通過測試和調(diào)整，將其發(fā)布輸出成FLASH的文件格式，再上傳到網(wǎng)站上，完成整個(gè)動(dòng)畫的設(shè)計(jì)制作過程。最終輸出的動(dòng)畫效果應(yīng)該是與開始設(shè)計(jì)的最后幀的視覺畫面效果是一致的。

三、設(shè)計(jì)案例分析

以“FLASH一網(wǎng)頁動(dòng)畫創(chuàng)意大賽”Banner廣告動(dòng)畫設(shè)計(jì)為例，設(shè)計(jì)制作的過程是由靜態(tài)視覺到動(dòng)態(tài)生成再到實(shí)現(xiàn)交互的過程，如圖1所示。將最后幀的靜態(tài)視覺畫面中的運(yùn)動(dòng)元素，不同顏色的“圈圈”圖形、“人物頭飾”圖像、“FLASH一”、“網(wǎng)頁動(dòng)畫創(chuàng)意大賽”文字和絳紅色的背景在FLASH軟件中分解，放置到不同的層中；把不同顏色的“圈圈”圖形分別轉(zhuǎn)化為圖形元件，“人物頭飾”圖像轉(zhuǎn)化為影片剪輯元件，“FLASH一”和“網(wǎng)頁動(dòng)畫創(chuàng)意大賽”文字分別轉(zhuǎn)化為按鈕元件：再設(shè)計(jì)畫面的運(yùn)動(dòng)，不同顏色的“圈圈”圖形元件運(yùn)用逐幀動(dòng)畫，使其分別在畫面中逐漸出現(xiàn)，“人物頭飾”圖像影片剪輯元件運(yùn)用運(yùn)動(dòng)引導(dǎo)動(dòng)畫，使其頭飾如同發(fā)光般一直在循環(huán)運(yùn)動(dòng)，“FLASH一”和“網(wǎng)頁動(dòng)畫創(chuàng)意大賽”文字按鈕元件，以運(yùn)動(dòng)補(bǔ)間的形式由鏡頭外逐漸出現(xiàn)，在動(dòng)作設(shè)計(jì)時(shí)要注意對(duì)時(shí)間的控制和調(diào)整；然后在“FLASH一”和“網(wǎng)頁動(dòng)廁創(chuàng)意大賽”文字按鈕添加上添加getURL交互語句，使單擊其按鈕能跳轉(zhuǎn)到鏈接的頁面；最后輸出動(dòng)畫，輸出動(dòng)畫的效果與最后幀的靜態(tài)視覺畫面效果一致。

動(dòng)畫是靜態(tài)視覺圖像的連續(xù)運(yùn)動(dòng)，交互式網(wǎng)頁動(dòng)畫的設(shè)計(jì)過程是將一個(gè)靜態(tài)視覺畫面轉(zhuǎn)化為動(dòng)態(tài)影像的過程，由靜至動(dòng)逆向思維的方法創(chuàng)意動(dòng)畫，逆向運(yùn)動(dòng)反向演示的方法設(shè)計(jì)制作動(dòng)畫，通過網(wǎng)頁動(dòng)畫的表現(xiàn)形式產(chǎn)生畫面運(yùn)動(dòng)，再添加交互語句和音效，從而創(chuàng)建基于網(wǎng)絡(luò)的交互式動(dòng)畫。