推薦：Photoshop結(jié)合Flash制作瓢蟲變色交互動畫(1)
本文由中國教程網(wǎng)專家祁連山原創(chuàng)，轉(zhuǎn)載請保留此信息！友情提示：文章最后提供源文件下載大家好，好久沒有寫圖文教程啦，今天我們學(xué)一個綜合實例：瓢蟲變色交

下面我們打開Flash CS3，開始我們的編程探索之旅。按圖示建立一個新的Flash文件。

我們來試一下Flash CS3對PSD文件的支持功能。經(jīng)過我的測試，發(fā)現(xiàn)這個功能有時會有一些小BUG喲。在后面我們再說。

使用“文件”-“導(dǎo)入”-“導(dǎo)入到舞臺”這個方式，把剛才我們制作的瓢蟲導(dǎo)出文件導(dǎo)入到Flash。

可以看到，我們能把PSD中的層分為多個Flash層，并把它們放置整潔。我們還可以單獨導(dǎo)入這些層，在前面畫勾即可。

單擊確定，我們可以看到，這些圖層都被分層排放，層的上下次序和擺放位置都和原始圖片一樣。

不過這種導(dǎo)入方式有些問題，我們用移動工具，把它們分別移開，可以看到，蟲的外殼并沒有變成透明的，在邊緣處還有下層的痕跡。怎么辦呢？

我們把這些圖層分次導(dǎo)入到庫，使用“文件”-“導(dǎo)入”-“導(dǎo)入到庫”，每次只導(dǎo)入一個層�？梢钥吹�，導(dǎo)入時會提示有重復(fù)的庫項目，選擇不替換。

我們把分次導(dǎo)入到庫中的小元件，一個個手動的分層排放。這次透明的問題解決啦！

在Flash老的版本中，我們想實現(xiàn)這樣的效果，可以把PSD文件分別顯示各層，分別存為PNG文件導(dǎo)入進(jìn)來。PNG格式是支持透明的圖像格式，用于制作透明動畫，效果非常優(yōu)秀。在Flash中，圖像也可以分層排列，和Photoshop中的操作差不多。另外，F(xiàn)lash還支持動畫，因此它有時間線，我們在建立新層之后，在該層時間線的第一幀上單擊，把元件從庫里拉到舞臺就可以了。

要害字：
舞臺：就是圖像動畫的表演場，正中間的空白處即是。
庫：元件倉庫，我們可以把自己做的元件存在庫里，想用時把它拉到舞臺上就可以啦。元件可以在舞臺上無限復(fù)制，假如改變元件，舞臺上所有引用該元件的圖像都會相應(yīng)改變，有點像Photoshop中的智能對象。
幀：動畫是由一幅幅圖像連續(xù)播放形成的。每一幅圖像被稱為一幀。

窗口菜單中選擇“對齊”，打開對齊面板。用移動工具框選蟲蟲的各個部件，水平居中對齊。這樣它們就按中線對齊，比手工對齊又快又好。

我們用鼠標(biāo)選擇各個層，移動到合適位置，將它對齊，假如上層擋到下層，選擇不到的話，可以按圖示鎖定上層，就可以順利的選擇到下層啦。

選擇紅色色塊層，在其上點右鍵，轉(zhuǎn)化為元件，把它設(shè)置為影片剪輯類型，起個名稱叫“變色色塊”。此時在庫中就有了這個影片剪輯了。

在Flash中，有三種元件類型：影片剪輯、按鈕、圖形。

我們在這里必須用到影片剪輯的概念，影片剪輯可以用來在舞臺上表演動畫，影片內(nèi)可以嵌套影片。它可以自己一邊播放，一邊參與到別的節(jié)目中，成為一個演員。舉一個形象的例子：我們正在觀看電視，電視里演出的人正在看電視，那個電視里也正在播出動畫節(jié)目。那么，最后一級的電視機(jī)可以看成是一個電影剪輯，它一邊播放動畫，一邊還參與演出。它所參與的演出節(jié)目，本身也是一個動畫，被我們收看到了。這里就是一個形象的三級嵌套。影片剪輯可以被我們編的程序進(jìn)行控制，比如控制它是否播放，播放到哪個位置，自己的透明度是否被改變，自己的顏色是否被改變等。我們本例正是要用程序改變它的顏色。因此，我們先把這個色塊轉(zhuǎn)化為影片剪輯。

在屬性面板中，對這個電影剪輯命名為“sk”，意為色塊。我們可以手動測試一下，在屬性面板右側(cè)，設(shè)置這個影片剪輯的色調(diào)，可以看到，我們可以手動把它變色啦。手動的變色并不是目的，我們的目的是用程序來控制它。后面我們用簡單的編程試一試。

在最上層建立一個新層，命名為“as”，這是一個程序?qū)Ｓ脤�，�?dāng)然你也可以起別的名字，名字是為了方便我們識別該層。其實我們可以把程序?qū)懺谌魏我粋�層上，但是為了便于治理，我們用一個專層放程序。假如我們在動作面板里寫入程序的話，在該幀就會出現(xiàn)一個“α”符號，表示這一幀有我們編制的程序，我在動作面板里輸入一些字符，大家可以看到該幀就有了這樣的變化。

進(jìn)入動作面板，我們輸入下面的字符：

r=0; //設(shè)置紅色值
g=0; //設(shè)置綠色值
b=255; //設(shè)置藍(lán)色值

colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16|g<<8|b); //將顏色值設(shè)置在色塊上

其中每行中的//符號后面的文件，被稱為注釋，它是方便我們后面調(diào)程序時，對語句的自我解釋。我們可以通過寫注釋，記住自己編程到此時的一些想法。

其中的_root，是指的舞臺，_root.sk就是我們剛才做的那個叫sk的色塊電影剪輯。這種語法就象在點名，指定某實體變顏色。后半部分語句，讓我們把變量r，g，b做為顏色值應(yīng)用在這個電影剪輯上。這些語句大家不用完全明白意思，先做出一個實例，后面再慢慢學(xué)。

按下Ctrl 回車，我們測試一下吧。

我們設(shè)置的是一個藍(lán)色，為什么蟲蟲變成黑了啦？莫不是我編的程序有問題？

不要緊，我們來解決這個問題。用鼠標(biāo)縱向選擇各層第二幀，右鍵，插入幀，我們讓這個動畫擁有兩幀，這樣在測試的時候，它會反復(fù)播放第一幀和第二幀，新的顏色值就會被賦予電影剪輯啦。

Ctrl 回車，再次測試，這下蟲蟲變色啦。這一步我們學(xué)習(xí)了如何使用編程的方式為蟲蟲變色，下一步，我們制作交互的動畫，讓朋友們可以通過拉動拉桿為它自動變色。

我們來制作一個拉鈕，建立一個新層，用橢圓工具，按Shift鍵，畫一個小圓形，設(shè)置這個層的名字為“拉桿”。

還是用剛才的方法，框選這個圓，點右鍵，轉(zhuǎn)換為一個電影剪輯。命名為“拉桿”，我們可以按著Alt鍵，用移動工具復(fù)制兩個�，F(xiàn)在一共有三個拉鈕啦。

我們還使用剛才手動改變蟲蟲顏色的方法，改變這三個按鈕，把它們的顏色改為紅，綠，藍(lán)三色。并分別按顏色命名為：rr，gg，bb。這樣，我們就在舞臺上放了三個具有名字的實體了，我們可以用程序控制這三個實體來改變RGB值，從而實時的反映到蟲蟲身上。

下面我們?yōu)檫@三個拉鈕引用的共同目標(biāo)進(jìn)行編輯，這樣三個拉鈕就會同步更新。這也是Flash強(qiáng)大之處，所有引用同一個元件的實體，都會因為改變這個元件而被同步更新。雙擊庫中的“拉桿”電影剪輯，進(jìn)入這個元件進(jìn)行更改。從圖示標(biāo)注來看，我們現(xiàn)在已經(jīng)離開舞臺，進(jìn)入這個元件，單獨編輯它啦。

在這個元件里，有我們前面畫的黑色圓形，我們框選它，用右鍵，使用轉(zhuǎn)換為元件的方法，把它轉(zhuǎn)換為一個電影剪輯，起名為“按鈕”，并在屬性欄里為它起一個實體名“an”，意思是按鈕。這樣我們就讓紅綠藍(lán)三色拉鈕中，都增加了一個實體，名叫“an”。

這部分理解起來會很難，但是一旦理解了它，后面我們就可以制作出非常強(qiáng)大的交互動畫。

前面做的一切，就是在做一個嵌套的電影剪輯，也就是電影內(nèi)部套著電影。因為電影剪輯可以被用程序賦予顏色，設(shè)置大小，設(shè)置運(yùn)動動畫等，所以使用頻率非常高。我們?yōu)槭裁匆�做嵌套電影��？這是因為我們后面編程時，假如設(shè)置按鈕坐標(biāo)時，我們可以以電影剪輯內(nèi)的坐標(biāo)為準(zhǔn)，而不是以舞臺的坐標(biāo)為準(zhǔn)，防止按鈕擠成一堆。

好，回到舞臺中，修改第一幀的程序：

_root.onEnterFrame=function(){ //只要一開始動畫，就執(zhí)行大括號里的程序
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16|g<<8|b); //設(shè)置色塊電影的顏色
r=_root.rr.an._y; //設(shè)置按鈕的坐標(biāo)與紅色值相交互


_root.rr.onPress=function(){ //假如在紅色按鈕上按下鼠標(biāo)左鍵
_root.rr.an.startDrag(true,0,0,0,255); //紅色按鈕中嵌套的“an”電影實體可以被鼠標(biāo)拖動，范圍是縱向255像素
}
onMouseUp=function(){
_root.rr.stopDrag(); //假如鼠標(biāo)松開，停止拖動
}
}

按Ctrl 回車試一下吧，哈哈，紅色按鈕可以向下拖動啦。并且蟲蟲隨之變色。

只要測試成功一個，其他的就好辦，復(fù)制部分代碼，一改就OK了�？匆幌伦罱K的代碼吧。

_root.onEnterFrame=function(){ //只要一開始動畫，就執(zhí)行大括號里的程序
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16|g<<8|b); //設(shè)置色塊電影的顏色
r=_root.rr.an._y; //設(shè)置按鈕的坐標(biāo)與紅色值相交互
g=_root.gg.an._y;
b=_root.bb.an._y;
_root.rr.onPress=function(){
_root.rr.an.startDrag(true,0,0,0,255);
}

_root.gg.onPress=function(){
_root.gg.an.startDrag(true,0,0,0,255);
}

_root.bb.onPress=function(){
_root.bb.an.startDrag(true,0,0,0,255);
}



onMouseUp=function(){
_root.rr.stopDrag();
_root.gg.stopDrag();
_root.bb.stopDrag();
}
}

我就不寫那么多注釋啦，看懂前面的，后面的一看就明白。

這是測試結(jié)果，可以自已設(shè)置RGB的值。

這里我提供大家我做好的一張背景圖，大家也可以自己找找素材，做出更漂亮的背景放在底部。

在最底層，使用導(dǎo)入到舞臺的方法，把背景層導(dǎo)入進(jìn)來并對齊。可以看到，蟲蟲就融合在背景中啦。

最后導(dǎo)出來SWF文件,使用“文件”－“導(dǎo)出”－“導(dǎo)出影片”，將這個文件導(dǎo)出為最終作品。

Flash源文件下載：點擊這里下載源文件

分享：Flash常見動畫效果：爆炸效果的制作
爆炸是突發(fā)性的狀態(tài)，動作猛烈，速度極快．動畫影片中表現(xiàn)爆炸場面主要從三個方面進(jìn)行描繪．1、強(qiáng)烈的散光．2、被炸飛的各種物體．3、爆炸時產(chǎn)生的煙霧．強(qiáng)