Photoshop結(jié)合Flash制作瓢蟲變色交互動(dòng)畫(3)_Flash教程

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

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

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

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

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

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

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

我們把這些圖層分次導(dǎo)入到庫，使用“文件”-“導(dǎo)入”-“導(dǎo)入到庫”，每次只導(dǎo)入一個(gè)層。可以看到，導(dǎo)入時(shí)會(huì)提示有重復(fù)的庫項(xiàng)目，選擇不替換。

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

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

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

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

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

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

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

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

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

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

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

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è)置在色塊上

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

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

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

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

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

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

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

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

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

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

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

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

前面做的一切，就是在做一個(gè)嵌套的電影剪輯，也就是電影內(nèi)部套著電影。因?yàn)殡娪凹糨嬁梢员挥贸绦蛸x予顏色，設(shè)置大小，設(shè)置運(yùn)動(dòng)動(dòng)畫等，所以使用頻率非常高。我們?yōu)槭裁匆�做嵌套電影呢？這是因?yàn)槲覀兒竺婢幊虝r(shí)，假如設(shè)置按鈕坐標(biāo)時(shí)，我們可以以電影剪輯內(nèi)的坐標(biāo)為準(zhǔn)，而不是以舞臺(tái)的坐標(biāo)為準(zhǔn)，防止按鈕擠成一堆。

好，回到舞臺(tái)中，修改第一幀的程序：

_root.onEnterFrame=function(){ //只要一開始動(dòng)畫，就執(zhí)行大括號(hào)里的程序
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”電影實(shí)體可以被鼠標(biāo)拖動(dòng)，范圍是縱向255像素
}
onMouseUp=function(){
_root.rr.stopDrag(); //假如鼠標(biāo)松開，停止拖動(dòng)
}
}

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

只要測試成功一個(gè)，其他的就好辦，復(fù)制部分代碼，一改就OK了。看一下最終的代碼吧。

_root.onEnterFrame=function(){ //只要一開始動(dòng)畫，就執(zhí)行大括號(hào)里的程序
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)入到舞臺(tái)的方法，把背景層導(dǎo)入進(jìn)來并對(duì)齊。可以看到，蟲蟲就融合在背景中啦。

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

Flash源文件下載：點(diǎn)擊這里下載源文件

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