當前計算機應用的Flash動畫設計
當前計算機應用的Flash動畫設計
Flash是美國的一家公司(MACROMEDIA公司)于1996年6月推出的優(yōu)秀網(wǎng)頁動畫設計軟件, 在中國經(jīng)歷了9年的發(fā)展時間。曾經(jīng)在中國風云一時,出現(xiàn)了FALSH熱。由于動漫也成為一種時尚的藝術,而且最直接簡單的動畫創(chuàng)作是就FLASH。我認為它可以自成體系,有它自己獨特的表現(xiàn)方法.手段和流通方式及“閃客”生活。甚至我認為它是現(xiàn)代文明的一種符號,新新藝術創(chuàng)作方式,是一種流行于網(wǎng)絡的網(wǎng)絡文化。電腦替代了傳統(tǒng)的筆墨,移動的圖象和聲音同樣表達了動畫藝術家的情感,所以我把FLASH作為獨立的動畫來談。我這種論述不論對和錯,但是他始終代表了我對FLASH熟悉的觀點和理解。今天讓我們共同來探索FLASH,我的觀點是FLASH不可否認已經(jīng)成為了一種新的藝術表現(xiàn)形式,作為新的事物它的應用非常廣泛,主要用于網(wǎng)絡,F(xiàn)LASH網(wǎng)站片頭,F(xiàn)LASH演示動畫,F(xiàn)LASH網(wǎng)站,F(xiàn)LASH商業(yè)廣告,電視,掌上電腦,游戲,MTV,手機屏保,手機彩信,家用電器等等!這些表示FLASH的確是一個非常好的傳播載體。它能夠引申出非常多的商業(yè)機會。能夠以多樣的效果和形式來充分體現(xiàn)產(chǎn)品或企業(yè)形象?,F(xiàn)在電腦,網(wǎng)絡,手機用戶等等都是在不斷的增加,網(wǎng)絡的發(fā)展壯大和完美,電腦更加普及,上網(wǎng)的人更多。正因為它有怎么多的用戶,喜好者,創(chuàng)作者和發(fā)展平臺,使用價值和欣賞價值。它現(xiàn)在雖然不能和我們的中國畫,油畫,版畫等藝術創(chuàng)作相提并論,但是它可以滿足社會藝術欣賞的需要和商業(yè)價值的需要,通過介紹論證FLASH是具有廣闊的天空,它是在不斷的發(fā)展和成熟中,我認為FLASH真正的價值是其未來!它是一種新新事物,是一種新的藝術創(chuàng)作和文化。本文從對Flash的發(fā)展及其技術上的操作,和一些動畫理念結合起來。大家了以共同學習學習,互補互助。1 緒論
1.1 flash概敘
Flash 由macromedia公司推出的交互式矢量圖和 Web 動畫的標準。網(wǎng)頁設計者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導航界面以及其他奇異的效果。
flash涉及到的領域摘要:動畫游戲制作,網(wǎng)絡構件,學習課件,網(wǎng)站廣告設計及全flash網(wǎng)站,工控界面等等。主要特征是制作簡單,通用性比較大,涉及的領域多,制作出的東西效果都可以做到非常精致。缺點在于有些效果需要別的軟件輔助制作等等,不是所有效果都能制作出來。(比如些3d效果,flash就很難制作,只能通過導入的方式或者針并針的方式)
FLASH有三重意義摘要:1) FLASH英文本意為“閃光”;2)它是全球流行的電腦動畫設計軟件;3)它代表用上述軟件制作的流行于網(wǎng)絡的動畫作品。Flash是一種交互式矢量多媒體技術,他的前身是Futureplash,早期網(wǎng)上流行的矢量動畫插件。后來由于Macromedia公司收購了Future Splash以后便將其改名為 Flash2,到現(xiàn)在最新的flashcs3?,F(xiàn)在網(wǎng)上已經(jīng)有成千上萬個Flash站點,聞名的如Macromedia專門ShockRave站點,全部采用了Shockwave Flash 和Director。可以說Flash已經(jīng)漸漸成為交互式知量的標準,未來網(wǎng)頁的一大主流。
Flash 最早期的版本稱為Future Splash Animator,當時Future Splash Animator最大的兩個用戶是微軟(Microsoft)和迪斯尼(Disney)。1996年11月,F(xiàn)uture Splash Animator賣給了MM(Macromedia.com),同時改名為Flash1.0 。 Macromedia 公司在1997年6月推出了 Flash 2.0 ,1998年5月推出了Flash3.0。但是這些早期版本的Flash所使用的都是Shockwave 播放器。自 Flash 進入4.0 版以后,原來所使用的 Shockwave 播放器便僅供 Director 使用。Flash 4.0開始有了自己專用的播放器,稱為“Flash Player”,但是為了保持向下相容性,F(xiàn)lash仍然沿用了原有的擴展名摘要:.SWF(Shockwave Flash)。 2000年8月Macromedia 推出了Flash5.0 ,它所支持的播放器為 Flash Player 5。Flash 5.0中的Actionscript已有了長足的進步,并且開始了對XML和Smart Clip(智能影片剪輯)的支持。Actionscript的語法已經(jīng)開始定位為發(fā)展成為一種完整的面向對象的語言,并且遵循ECMAscript的標準,就像javascript那樣。 2002年3月 Macromedia 推出了Flash MX支持的播放器為 Flash Player 6。Flash 6開始了對外部jpg和MP3調入的支持,同時也增加了更多的內建對象,提供了對HTML文本更精確的控制,并引如SetInterval 超頻幀的概念。同時也改進了swf文件的壓縮技術。之后Macromedia有相繼推出了Flash 8,F(xiàn)lash 9及現(xiàn)在的Flash CS3。相信Flash的軟件以后還會在不斷的更新,使其更加完美。
2 flash相關概念闡述
2.1 什么是flash動畫
動畫是將靜止的畫面變?yōu)閯討B(tài)的藝術.實現(xiàn)由靜止到動態(tài),主要是靠人眼的視覺殘留效應.利用人的這種視覺生理特性可制作出具有高度想象力和表現(xiàn)力的動畫影片。動畫以人類視覺的原理為基礎。 假如快速查看一系列相關的靜態(tài)圖像,那么我們會感覺到這是一個連續(xù)的運動。 每一個單獨圖像稱之為幀。幀是動畫電影中的單個圖像。
3 flash在當今社會中的應用
3.1 flash在動態(tài)網(wǎng)頁中的功能
Flash是MacroMedia公司專為網(wǎng)絡應用設計的一個交互性矢量動畫設計軟件。網(wǎng)站設計者可以使用Flash為網(wǎng)站設計各種動態(tài)Logo動畫、導航條以及全屏動畫,還可以加入動感音樂,完全具備多媒體的各項功能。Flash以其體積短小,流體播放的特征迅速打開市場,將WWW上的站點頁面設計帶上了一個全新的高度。實現(xiàn)Web數(shù)據(jù)庫的應用一般有兩種方法摘要:一種是Web服務器端提供中間件,連接Web服務器和數(shù)據(jù)庫服務器;另一種是把應用程序下載到客戶端直接訪問數(shù)據(jù)庫。最常用的中間件技術有通用網(wǎng)關接口(CGI)和應用程序編程接口(API)兩種。CGI程序存在效率低、速度慢等缺點;而API很大程度上克服了CGI的缺點,但其兼容性差,開發(fā)難度大也讓許多開發(fā)人員望而卻步。客戶端訪問數(shù)據(jù)庫主要包括Javascript和數(shù)據(jù)庫連接器(IDC)等。用Javascript和IDC開發(fā)Web數(shù)據(jù)庫雖然簡單,但也存在功能有限、不能完全控制其過程等缺點,所以它們也無法勝任較復雜的Web數(shù)據(jù)庫的開發(fā)。微軟推出的ASP方案很好地解決了這些難題。ASP(Active Server Page)是Microsoft公司推出的一種基于服務器端的腳本編程語言,它很輕易和數(shù)據(jù)庫連接。Flash和ASP的組合使網(wǎng)頁功能更加強大,可以通過它們和數(shù)據(jù)庫連接,能使我們的網(wǎng)站不僅具有強大的數(shù)據(jù)支持而且具有完美的交互界面。
3.2 flash中實現(xiàn)和數(shù)據(jù)庫連接
為了實現(xiàn)Flash和數(shù)據(jù)庫的連接,需要把Flash和ASP聯(lián)系起來。變量可以通過URL傳遞給Flash,這是一種GET方法,把變量傳遞給一個swf %26lt;PARAMNAME=movie UE="myMovie.swf?myVariable=Text+of+my+variable"%26gt;接著文本"Text of my variable"將會出現(xiàn)在Flash的動畫中指定的位置,我們只要把Flash所需要的數(shù)據(jù)預備好就可以實現(xiàn)和數(shù)據(jù)庫的連接,然后利用Flash中的動畫功能就可以做出既具有強大的數(shù)據(jù)處理能力又具有強大的交互能力的美觀網(wǎng)頁。ASP和數(shù)據(jù)庫的連接可用如下語句實現(xiàn)。 Set Connection = Server.CreateObject("ADODB.Connection")
Set Recordset = Server.CreateObject("ADODB.Recordset")
Connection.Open "people"
這樣數(shù)據(jù)庫就和ASP連接上,從而 Flash和數(shù)據(jù)庫連接上去了。在Flash中使用ASP必須滿足以下條件摘要:服務器端server必須支持Active Server Pages并且支持數(shù)據(jù)庫;客戶端必須安裝Flash插件。3.3 如何在flash中使用數(shù)據(jù)庫
第一步要做的是建立數(shù)據(jù)庫。我們使用Access數(shù)據(jù)庫為例,表名為Staff,有三個字段摘要:ID (自動編號), Known(Text) ,name (Text) 。這是一個用來示范用戶名的數(shù)據(jù)庫。
第二步就是建立一個Flash 5的動畫。步驟如下摘要:
(1)建立三個text field.它們是用來顯示數(shù)據(jù)用的。
(2)把第一個text field的name設置為Input,它是用來接收輸入數(shù)據(jù)的。
(3)另外兩個text field分別命名為KnownAs和Surname。
(4)其它設置先為默認。
(5)最后,從Flash的library中選擇增加一個按鈕 (應該是一個可重用的組件 ScrollBarButton ) 。這是很重要的一步,按鈕將把輸入的變量傳遞給ASP頁面。到按鈕的屬性(Properties)上單擊Action頁,單擊"+"號和On MouseEvent.勾上Release框。
(6)再次單擊"+"號和Load/Unload Movie.選擇"Load Variables Into Location"在URL輸入框內輸入你的ASP文件名(例如flash.asp). 選擇Target。
(7) 最后,選擇Variables中的Send using POST, 單擊"+"號來設置變量在Variable輸入框內輸入 "Input"(就是第一個text field的name) 。當上面的工作都完成后,可以在action box內看到如下內容摘要:
On (Release)
Load Variables ("flash.asp", "", vars=POST)
Set Variable摘要: "Input" = ""
End On
這樣當在動畫過程中這個按鈕被點擊并釋放后,Input輸入框中的內容將被傳遞給flash.asp文件。注重Form是使用的post方式傳遞變量的。
(8) 建立一個HTML頁面,在其中包含這個Flash動畫文件。
第三步摘要:ASP文件的代碼
%26lt;%
Set Connection = Server.CreateObject("ADODB.Connection")
Set Recordset = Server.CreateObject("ADODB.Recordset")
Connection.Open "people"
SQL = "SELECT * FROM Staff WHERE ID=" %26amp; Request.Form("Input") %26amp; ";"
Recordset.Open SQL,Connection,1,2
If Recordset.EOF Then
KnownAs = "Not"
Surname = "Found"
Else
KnownAs = Recordset ("Known")
Surname = Recordset ("name")
End If
Recordset.Close
Connection.Close
response.write("KnownAs="+Server.URLEncode(KnownAs))
response.write("%26amp;Surname="+Server.URLEncode(Surname)
%%26gt;
需要注重的是在把KnownAs和Surname傳遞回去的寫法,將是這樣的Known=Data1%26amp;Surname=Data2
使用Server.URLEncode(VariableName)來保證傳遞過去變量的是按照 URL格式編碼的。
4 flash動畫的概念
4.1 什么是動畫和動畫設計
動畫和動畫設計(即原畫)是不同的概念,原畫設計是動畫影片的基礎工作.原畫設計的每一鏡頭的角色、動作、表情,相當於影片中的演員.所不同的是設計者不是將演員的形體動作直接拍攝到膠片上,而是通過設計者的畫筆來塑造各類角色的形象并賦予他們生命、性格和感情。
4.2 什么是動畫片中的動畫
動畫片中的動畫一般也稱為"中間畫".這是指兩張原畫的中間過程而言的.動畫片動作的流暢、生動,關鍵要靠"中間畫"的完善.一般先由原畫設計者繪制出原畫,然后動畫設計者根據(jù)原畫規(guī)定的動作要求以及幀數(shù)繪制中間畫.原畫設計者和動畫設計者必須有良好的配合才能順利完成動畫片的制作。
4.3 動畫繪制時需要的一些工具
動畫繪制需要的工具一般有摘要:拷貝箱工作臺、定位器、鉛筆、橡皮、顏料、曲線尺等.方法是摘要:按原畫順序將前后兩張畫面套在定位器上,然后再覆蓋一張同樣規(guī)格的動畫紙,通過臺下拷貝箱的燈光,在兩張原畫動作之間先畫出第一張中間畫(稱為第一動畫),然后再將第一動畫和第一張原畫疊起來套在定位器上,覆蓋另一張空白動畫紙畫出第二動畫.依此方法,繪制出兩張原畫之間的全部動作。
4.4 flash動畫影片制作的步驟
1、由編導(可以是你自己)確定動畫劇本及分鏡頭腳本;
2、美術動畫設計人員設計出動畫人物形象;
3、美術動畫設計人員繪制、編排出分鏡頭畫面腳本;
4、動畫繪制人員進行繪制;
5、導入到flash進行制作;
6、剪輯配音。
在分鏡頭畫面腳本繪制過程中,應養(yǎng)成填表的好習慣,在表格中注明畫面的景別,畫面景別使用的專業(yè)術語有摘要:大特寫、特寫、近景、中景、全景、遠景、全遠景、縱深景等。畫面 鏡頭號 景別 秒數(shù) 內容摘要 對白 效果 音樂
5.1 時間和幀數(shù)
對動畫時間的基本考慮是放映速度摘要:電影和電視的放映速度是24幀/秒,而動畫片一般有12幀就可以了,然后錄制或拍攝時進行雙格處理。假如繪制動作較快的動畫最好進行單格處理,即每秒要繪制24個畫面。對於快速奔跑的動作,一般采用8幀單格畫面。對於物體發(fā)生震動用單格處理兩端的動作就可以了。
5.2動畫的間格距離表現(xiàn)
物體的靜止到移動到靜止都有類似的規(guī)律摘要:靜止開始時速度慢、運動中的速度快、運動停止時的速度慢.表現(xiàn)在幀數(shù)上則是摘要:從靜止到運動幀數(shù)逐漸減少,從運動到靜止幀數(shù)逐漸增加,中間運動過程的速度最快,幀數(shù)也最少。
5.3 flash動畫中循環(huán)動作的時間
動畫中經(jīng)常會有循環(huán)動作,但不同的情況需要的幀數(shù)也是不同的。如摘要:快速飄揚的旗需要6幀畫面循環(huán);又如火焰的循環(huán),大火的動作循環(huán)從底部燒到頂部可能需要幾秒,而小火的循環(huán)只需要幾幀;下雨的循環(huán)動作最好設置兩層,前層雨水穿過屏幕,一般需6幀畫面,后層雨水穿過屏幕的時間慢於前層,循環(huán)的幀數(shù)也相應多於前層;下雪的動畫則至少需要有3種大小不同的雪花,循序的時間約需要2秒;一個急速跑步動作需4幀畫面,快跑動作需8幀畫面,慢跑動作則需12幀,超過16 幀,畫面就失去沖刺感覺;大象需要1~1.5秒完成一個完整的步子;小動物如貓的一個動作只需0.5 秒或更少;鷹的翅膀一個循環(huán)需要8幀;小麻雀的翅膀循環(huán)動作有2幀畫面就可以了。
5.4 flash 背景透明和層次新問題
%26lt;PARAM NAME=wmode value=transparent%26gt;
#flash背景透明,在flash語句中加入這句或者摘要:
選中剛才已插入的flash動畫,右擊鼠標選擇參數(shù),在彈出的對話框中點擊+加號圖標,在左側的參數(shù)中鍵入wmode在右側的值框內鍵入transparent點擊ok,按f12進行預覽,ok!我們所要的透明效果就出現(xiàn)了!
在Mozilla,Firefox瀏覽器中起功能的是這個標簽 %26lt;embed%26gt;%26lt;/embed%26gt; 那這樣,在%26lt;embed%26gt;標簽內加入屬性 wmode="transparent" 就可以實現(xiàn)flash背景透明,如%26lt;embed src="your.swf" wmode="transparent" quality="high"%26gt;%26lt;/embed%26gt;
embed似乎不提倡使用(網(wǎng)景發(fā)明的),w3c推薦用object代替。
也可以嘗試加到object中讓flash不要漂到最高層摘要:
%26lt;param name="wmode" value="Opaque
6 flash動畫的相關概念和制作過程
6.1 外形補間動畫的概念
在Flash的時間幀面板上,在一個時間點(關鍵幀)繪制一個外形,然后在另一個時間點(關鍵幀)更改該外形或繪制另一個外形,F(xiàn)lash 根據(jù)二者之間的幀的值或外形來創(chuàng)建的動畫被稱為“外形補間動畫”。
6.2構成外形補間動畫的元素
外形補間動畫可以實現(xiàn)兩個圖形之間顏色、外形、大小、位置的相互變化,其變形的靈活性介于逐幀動畫和動作補間動畫二者之間,使用的元素多為用鼠標或壓感筆繪制出的外形,假如使用圖形元件、按鈕、文字,則必先“打散”再變形。
6.3 外形補間動畫在時間幀面板上的表現(xiàn)
外形補間動畫建好后,時間幀面板的背景色變?yōu)榈G色,在起始幀和結束幀之間有一個長長的箭頭,如圖所示
6.4 創(chuàng)建外形補間動畫的方法
在時間軸面板上動畫開始播放的地方創(chuàng)建或選擇一個關鍵幀并設置要開始變形的外形,一般一幀中以一個對象為好,在動畫結束處創(chuàng)建或選擇一個關鍵幀并設置要變成的外形,再單擊開始幀,在【屬性面板上單擊【補間旁邊的小三角,在彈出的菜單中選擇【外形,此時,時間軸上的變化如圖3-3-1所示,一個外形補間動畫就創(chuàng)建完畢。Flash的【屬性面板隨鼠標選定的對象不同而發(fā)生相應的變化。當我們建立了一個外形補間動畫后,點擊時間幀,【屬性面板如圖所示。
6.5 歌詞的制作
6.5.1 文字的遮罩效果
6.5.2 文字的淡入淡出效果
6.6 元件的制作和素材的引用
6.7 flash音樂導入和播放控制
7 flash中聲音和聲道平衡的控制
7.1 音樂的播放和停止
(1)首先從外部導入一個音樂,也就是用File%26gt;Import導入?;蛑苯訌腤indow%26gt;Common Libraie%26gt;Sounds中拖一個到舞臺上。
(2)然后選擇Window%26gt;Library。從中選中你剛導入的音樂,并按鼠標右鍵,選中其中的Linkage,如下圖摘要:
(3)在跳出的Symbol Linkage Properties對話框中,在Linkage中選Export this symbol,在identifier中輸入你想要取的音樂名字,如"likesound"。假如你用的是flash mx,則選擇Export for Actionscript。如下圖摘要:
(4)接著從庫中選擇兩個按鈕,并放在舞臺上,如下圖摘要:
(5)在第一個開始按鈕上捆綁如下代碼摘要:
on (release) {
s=new Sound();
s.attachSound("likesound");
s.start(0,6);
}
(6)在第二個停止按鈕上捆綁如下代碼摘要:
on (release) {
s.stop()
}
7.2 音量的控制
(1)從庫中選一個按鈕放在舞臺上,把這個按鈕轉換成MovieClip。這樣做的目的是能把這個按鈕既可以接受電影事件也能接受按鈕事件,如下圖摘要:
(2)在這個按鈕的電影剪輯上加入以下代碼摘要:
onClipEvent (load) {
top = _y;
left = _x;
right = _x;
bottom = _y+100;
}
onClipEvent (enterFrame) {
if (dragging=true) {
_root.s.setVolume(100-(_y-top));
}
}
(1)從庫中選一個按鈕放在舞臺上,把這個按鈕轉換成MovieClip。這樣做的目的是能把這個按鈕既可以接受電影事件也能接受按鈕事件。(此例是最下的那個按鈕,既橫向的那個)做好后如下圖摘要:
(10)在這個按鈕的電影剪輯上加入以下代碼
onClipEvent (load) {
top = _y;
bottom = _y;
left = _x-50;
right = _x+50;
center = _x;
}
onClipEvent (enterFrame) {
if (dragging=true) {
_root.s.setPan((_x-center)*2);
}
}
(11)通過雙擊這個電影剪輯,或通過選中這個電影后再選Edit%26gt;Edit Symbol,進入該電影剪輯地編輯狀態(tài),選中按鈕本身,在這個按鈕上捆綁以下代碼(和上次的操作完全相同)。
on (press) {
startDrag ("", false, left, top, right, bottom);
dragging = true;
}
on (release) {
stopDrag ();
dragging = false;
}
8 總結flash動畫的根本
Flash動畫說到底就是“遮罩+補間動畫+逐幀動畫”和元件(主要是影片剪輯)的混合物,通過這些元素的不同組合,從而可以創(chuàng)建千變萬化的效果。
三大基本功能之外的延伸Flash動畫的三大基本功能是一切Flash動畫應用的基礎。但現(xiàn)在Flash已經(jīng)是一個非常強大的平臺,他是一個富媒體環(huán)境。在Flash 4時他加入了MP3聲音的支持,F(xiàn)lash 3及以前的版本對音頻支持是很匱乏的,從那個時候起你可以設計多媒體的Flash動畫了。在Flash 6時他加入了視頻的支持,F(xiàn)lash 5及以前的版本不支持視頻(不包括鏈接的Quicktime),這時,你可以嵌入視頻,也可以播放外部的Flv格式的視頻。甚至,你還可以捕做到來自麥克風和攝像頭的實時音頻和視頻。雖然Flash 4以前的版本中也有簡潔的腳本代碼,但應該不算有嚴格意義上的Actionscript,充其量只能算是Action,因為他僅有簡單的幾條語句,連加減乘除運算符都沒有。增強的圖形處理功能目前Flash對位圖的處理功能還比較弱,因為它最初是從矢量處理起始的,加之矢量圖形是Flash GUI設計之基石,所以估計還會沿著矢量處理的道路繼續(xù)前進。
不過最近的濾鏡和圖像混合模式也向位圖處理領域邁出一大步。相信未來會有更多更好的這方面的功能加進來。
Flash的功能可能越來越復雜,如何系統(tǒng)地把握這項技術就顯得非常重要。系統(tǒng)地把握一門技術有兩個好處摘要:一個是對目前的功能有清楚的熟悉;第二,就是能夠從容應對更復雜的知識。
了解這些對于一個初入門的動畫設計者是非常有意義的,正是將這些功能邏輯的整理出來,有利于用戶建立正確的、邏輯的知識體系,而不是再在黑夜里徘徊了。