基于：逆向反演的交互式網(wǎng)頁動畫設(shè)計方法研究

韋艷麗　趙韓　楊亞榮

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

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

中國分類號：J50

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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