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

韋艷麗　趙韓　楊亞榮

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

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

中國(guó)分類(lèi)號(hào)：J50

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

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

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

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

（一）逆向思維創(chuàng)意構(gòu)思。在創(chuàng)意設(shè)計(jì)上，采用逆向思維的方法能為創(chuàng)意帶來(lái)新的視角，特別是在視覺(jué)效果表達(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ì)開(kāi)發(fā)過(guò)程中的問(wèn)題簡(jiǎn)單化，提高設(shè)計(jì)效率和效果。

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

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

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

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

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

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

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

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

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

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

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

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

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

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