|
4.2.1 按鈕的制作
◆ 動(dòng)態(tài)按鈕的制作
按鈕的四種形態(tài)，以及普通按鈕的制作已經(jīng)在第二章中介紹過(guò)了。在這里，主要還是講解一下動(dòng)態(tài)按鈕的制作。動(dòng)態(tài)按鈕是在Flash動(dòng)畫(huà)中已經(jīng)比較常見(jiàn)了。由于Flash設(shè)計(jì)的多樣性，所以不太可能介紹所有的動(dòng)態(tài)按鈕制作。這里將主要講解幾種比較常見(jiàn)的動(dòng)態(tài)按鈕的制作過(guò)程。
4.2.1.1 按鈕閃爍
按鈕的閃爍動(dòng)態(tài)在很多的多媒體網(wǎng)站上都能找到，相信經(jīng)常瀏覽多媒體網(wǎng)站的朋友一定不會(huì)陌生。它的動(dòng)態(tài)表現(xiàn)為當(dāng)鼠標(biāo)指向按鈕時(shí)，按鈕開(kāi)始閃爍，當(dāng)然有一些閃爍的按鈕不只是進(jìn)行閃爍，但是基本的制作都相仿，即通過(guò)Movie Clip電影剪輯來(lái)制作按鈕的動(dòng)感。(此實(shí)例光盤(pán)范例\ch4\4-4.fla)
步驟一、打開(kāi)Flash，選擇Insert|New Symbol命令，在打開(kāi)的Symbol Properties對(duì)話(huà)框中選擇Botton，Name欄輸入按鈕的名稱(chēng)為newbtn。如圖4-20所示。
圖4-20 新建一個(gè)按鈕
步驟二、在按鈕的編輯區(qū)你可以看到按鈕的幀與時(shí)間軸不太相同，它是由Up、Over、Down、Hit四個(gè)幀組成，意思分別是，正常狀態(tài)、鼠標(biāo)指向時(shí)的狀態(tài)、鼠標(biāo)按下時(shí)的狀態(tài)和鼠標(biāo)的感應(yīng)區(qū)。
步驟三、按鈕的繪制工作還是有一些門(mén)道的，為了使按鈕更加的形象，我們一般使用漸變色來(lái)增加按鈕的立體感。
步驟四、點(diǎn)擊繪圖工具欄中的方形繪圖工具，然后點(diǎn)擊繪圖工具欄下方的Round Rectangle Radius按鈕，在隨后出現(xiàn)的Rectangle Settings對(duì)話(huà)框中輸入數(shù)值20。如圖4-21和4-22所示。此舉的意思是給矩形加上20的角度，使之成為一個(gè)圓角矩形。
圖4-21 Round Rectangle Radius按鈕
圖4-22 Rectangle Settings對(duì)話(huà)框
步驟五、點(diǎn)擊Colors區(qū)的筆觸按鈕，選無(wú)邊緣狀態(tài)。在按鈕編輯區(qū)繪制一個(gè)圓角的矩形。
步驟六、打開(kāi)Fill面板選擇Linear Gradient線(xiàn)性漸變填充，然后在色彩編輯區(qū)加入成三個(gè)色塊，其中的分布如圖4-23所示。
圖4-23 Fill面板的線(xiàn)性填充
步驟七、三個(gè)色塊的色彩值分別是0000FF，Alpha透明度為30%；第二個(gè)0000FF，Alpha值為100%；第三個(gè)33CCFF，Alpha值為%80。
步驟八、也許你不記得如何調(diào)整透明度了，沒(méi)關(guān)系，打開(kāi)Mixer面板，然后在Fill面板上點(diǎn)擊相應(yīng)的色塊，Mixer面板上就會(huì)顯示這個(gè)色塊的具體值，你也可以通過(guò)偏好進(jìn)行調(diào)整。如圖4-24所示。
圖4-24 Mixer面板中對(duì)漸變色的調(diào)整
步驟九、使用油漆桶工具對(duì)圓角矩形進(jìn)行填充。然后在繪圖工具面板的最下方找到Transform Fill按鈕，選取后點(diǎn)擊填充區(qū)域，你可以看到會(huì)出現(xiàn)一個(gè)手柄，用鼠標(biāo)拖動(dòng)可以改變填充方向。
圖4-25 Transform Fill按鈕
步驟十、最終填充的改動(dòng)如圖4-26所示。最上方為漸黑色，最下方最亮。在美工角度這表示光源是從下方照射上來(lái)的，因?yàn)槲覀兿氚寻粹o最終制作在場(chǎng)景的上方，所以如果在按鈕的下方制作一個(gè)酷眩的動(dòng)畫(huà)，哪么從美術(shù)角度這樣制作更加符合。
圖4-26 對(duì)圓角矩形的漸變色填充進(jìn)行調(diào)整
步驟十一、在圖層編輯區(qū)上按加號(hào)新增一個(gè)圖層，然后點(diǎn)選文字工具，同時(shí)打開(kāi)Character字符面板，選擇字體為隸書(shū)，字號(hào)為64，（視你的矩形大小而定）黑色和字體加粗。然后在按鈕上打下網(wǎng)站首頁(yè)四個(gè)字。完成如圖4-27模式。
圖4-27 為按鈕加上字符
步驟十二、然后用鼠標(biāo)拖出一個(gè)大的選擇框，把文字和矩形全部選取，執(zhí)行Ctrl+C命令將其復(fù)制。
步驟十三、執(zhí)行Insert|New Symbol命令，選擇Movie Clip電影剪輯，新建一個(gè)電影剪輯符號(hào)，在電影剪輯的編輯區(qū)內(nèi)執(zhí)行Ctrl+V命令進(jìn)行粘貼。
步驟十四、在電影剪輯的時(shí)間軸上用F6按鍵第2、3、4、5、6幀各建立一個(gè)關(guān)鍵幀，然后用鼠標(biāo)拖拽，使其成圖4-28模式。這樣做的用意是讓動(dòng)畫(huà)出現(xiàn)空幀。用空幀來(lái)實(shí)現(xiàn)閃爍效果。
圖4-28 圖形的閃爍效果
步驟十五、打開(kāi)Library庫(kù)面板，然后雙擊newbtn按鈕符號(hào)重新回到按鈕的編輯區(qū)。在Over幀處按F6鍵插入一個(gè)關(guān)鍵幀，刪除Over幀處的圖像，從Library庫(kù)面板中將剛才制作的電影剪輯拖到按鈕的編輯區(qū)，如果Over幀的按鈕和Up幀的按鈕位置不相同的話(huà)，可以用Info面板進(jìn)行調(diào)整。
步驟十六、Down幀和Hit幀的按鈕圖形就可以用Up幀的按鈕來(lái)替代。因?yàn)槲覀冎饕窍氘?dāng)鼠標(biāo)指向按鈕時(shí)，此按鈕出向閃爍效果。
步驟十七、回到場(chǎng)景編輯區(qū)，從Library庫(kù)面板中把按鈕拖入，按Crtl+Enter測(cè)試。
知識(shí)要點(diǎn)：
此例制作的按鈕會(huì)以閃爍的動(dòng)態(tài)來(lái)顯示鼠標(biāo)指向時(shí)的效果，主要的制作還是以Movie Clip符號(hào)嵌套在按鈕的幀中來(lái)實(shí)現(xiàn)的。利用這種嵌套還可以制作出多種多樣的按鈕效果。如：可以在Up幀處制作效果，正常時(shí)按鈕會(huì)有動(dòng)畫(huà)，當(dāng)鼠標(biāo)指向時(shí)停止。這些效果基本上都是使用嵌套動(dòng)畫(huà)按鈕來(lái)完成的。
◆ 為按鈕加入音效
按鈕僅僅是有動(dòng)畫(huà)當(dāng)然還是不夠的，如果沒(méi)有音效哪么多媒體的價(jià)值又何在呢？好在為按鈕添加音效其實(shí)是一件非常簡(jiǎn)單的事。接上例我們開(kāi)始為按鈕添加音效。(此實(shí)例光盤(pán)范例\ch4\4-5.fla)
步驟一、打開(kāi)剛才制作的按鈕，點(diǎn)擊Window|Library命令，打開(kāi)Library庫(kù)面板。雙擊newbtn進(jìn)入按鈕的編輯區(qū)，
步驟二、在圖層編輯區(qū)上點(diǎn)擊加號(hào)按鈕添置一個(gè)新層。
步驟三、然后點(diǎn)擊Flie|Import命令打開(kāi)Import導(dǎo)入對(duì)話(huà)框，從中選擇你想要加入的音效文件。
步驟四、導(dǎo)入的音效文件并不會(huì)直接體現(xiàn)出來(lái)，不過(guò)你可以從Library庫(kù)面板中觀察到音效文件的存在。
步驟五、在按鈕編輯區(qū)的Layer3層上，選定Over幀按F6鍵使之成為關(guān)鍵幀。
步驟六、從Library庫(kù)面板中把音效拖入到按鈕編輯區(qū)。你不會(huì)看到編輯區(qū)有什么狀況發(fā)生，最多只是有一個(gè)小十字，對(duì)了，這就代表的是聲音文件。在Over幀上會(huì)用頻譜的方式體現(xiàn)出聲音文件。如圖4-29所示。
圖4-29 為按鈕加入音效
步驟七、按Ctrl+Enter鍵測(cè)試。為配合動(dòng)態(tài)效果，我使用的是一種鈴聲，這樣會(huì)更加符合多媒體按鈕的制作方法。
4.2.2 按鈕的action指令
按鈕到底是做什么用的呢？當(dāng)然，這并不是什么新鮮事。如果按鈕沒(méi)有了指令，哪么它就不是按鈕了。比方說(shuō)我們想在動(dòng)畫(huà)的開(kāi)始制作一個(gè)預(yù)載，但并不是預(yù)載結(jié)束就直接開(kāi)始播放，而是想通過(guò)按鈕讓動(dòng)畫(huà)播放。也可能我們想在動(dòng)畫(huà)的結(jié)束幀制作一個(gè)按鈕，利用按鈕的點(diǎn)擊進(jìn)行動(dòng)畫(huà)的回放，哪么你就得在按鈕中加入指令了。
將按鈕拖入編輯區(qū)，然后在按鈕上點(diǎn)擊鼠標(biāo)右鍵，選擇Action后，可以進(jìn)入按鈕的Action面板。與幀的Action面板不同的是，按鈕的Action面板里，不管你選用什么指令都會(huì)出現(xiàn)一行：
on(release){
}
圖4-30 按鈕中的Action面板
這到底是什么意思呢？這表示當(dāng)鼠標(biāo)在按鈕上按下并且松開(kāi)時(shí)會(huì)觸發(fā)此事件的發(fā)生。也就是說(shuō)按鈕中的腳本指令在平時(shí)是不會(huì)發(fā)生的，只有當(dāng)有了按鈕事件后才會(huì)被執(zhí)行。點(diǎn)選on(release)行后，在Action面板的下方會(huì)出現(xiàn)按鈕事件的選單。如圖4-31所示。
圖4-31 按鈕的鼠標(biāo)事件
Flash會(huì)為按鈕加入默認(rèn)的Release事件，但這些事件都是干什么用的呢？
◆ Press：當(dāng)鼠標(biāo)單擊按鈕時(shí)發(fā)生。
◆ Release當(dāng)鼠標(biāo)單擊按鈕并且松開(kāi)時(shí)發(fā)生。
◆ Release Outside當(dāng)鼠標(biāo)在按鈕外單擊然后拖至按鈕上時(shí)發(fā)生。
◆ Key Press當(dāng)某個(gè)按鍵被按下時(shí)發(fā)生。
◆ Roll Over當(dāng)鼠標(biāo)指向按鈕時(shí)發(fā)生。
◆ Roll Out當(dāng)鼠標(biāo)指向按鈕并且離開(kāi)時(shí)發(fā)生。
◆ Drag Over當(dāng)鼠標(biāo)在按鈕上單擊后拖至按鈕以外，然后再拖回到按內(nèi)上時(shí)發(fā)生。
◆ Drag Out當(dāng)鼠標(biāo)在按鈕上單擊拖至按鈕以外會(huì)發(fā)生。
所有這些可以看出僅僅是在一個(gè)按鈕的事件中ActionScript腳本編程就做的是如何的細(xì)致了�？梢詮�(fù)選多個(gè)單選框，這樣一來(lái)就可以為按鈕制作兩個(gè)鼠標(biāo)事件來(lái)觸發(fā)一個(gè)行為。比方說(shuō)下例將是一個(gè)動(dòng)畫(huà)的回放實(shí)例。
步驟一、在動(dòng)畫(huà)的最后一幀打開(kāi)Action面板，選擇Basic Action指令集中的Stop()指令。表示動(dòng)畫(huà)在最后一幀停止播放。
步驟二、在此幀的按鈕上單擊鼠標(biāo)右鍵打開(kāi)按鈕的Action面板。雙擊Basic Actions指令集中的goto指令，你可以在編輯區(qū)內(nèi)看到系統(tǒng)自動(dòng)為goto語(yǔ)句加入了on(release)事件。這樣當(dāng)觀眾單擊此按鈕時(shí)，動(dòng)畫(huà)將回放。回放的按鈕就是這樣制作的。
4.3場(chǎng)景的應(yīng)用
場(chǎng)景是Flash中最大的舞臺(tái)，你可以把它看作是一個(gè)電影實(shí)場(chǎng)面。一個(gè)電影可以有一個(gè)也可以有多個(gè)場(chǎng)景，能過(guò)場(chǎng)景我們可以把動(dòng)畫(huà)制作成幾個(gè)重要的部份，利用按鈕在場(chǎng)景中實(shí)現(xiàn)跳轉(zhuǎn)也是Flash制作的多媒體網(wǎng)站的重要組成部份。利用場(chǎng)景面板可以實(shí)現(xiàn)對(duì)場(chǎng)景的增和刪。
圖4-32 Scene面板
場(chǎng)景面板中也有三個(gè)按鈕，分別是復(fù)制、增加和刪除按鈕。通過(guò)鼠標(biāo)拖拽可以改變場(chǎng)景的播放順序，雙擊場(chǎng)景的名稱(chēng)可以為場(chǎng)景改名。
利用Flash界面上的場(chǎng)景按鈕可以實(shí)現(xiàn)編輯區(qū)的跳轉(zhuǎn)。場(chǎng)景跳轉(zhuǎn)按鈕旁邊的是符號(hào)跳轉(zhuǎn)按鈕。
圖4-33 場(chǎng)景跳轉(zhuǎn)按鈕
通常在制作多媒體網(wǎng)站中，我們會(huì)把每一個(gè)實(shí)場(chǎng)面動(dòng)畫(huà)制作成幾個(gè)場(chǎng)景，場(chǎng)景1就好象是網(wǎng)站的首頁(yè)，通過(guò)其中的按鈕實(shí)現(xiàn)場(chǎng)景之間的跳轉(zhuǎn)，也就是實(shí)場(chǎng)面的跳轉(zhuǎn)，你也可以把它理解成網(wǎng)頁(yè)的跳轉(zhuǎn)。這樣的工作會(huì)使動(dòng)畫(huà)的結(jié)構(gòu)一目了然。
實(shí)現(xiàn)場(chǎng)景跳轉(zhuǎn)的按鈕制作也很簡(jiǎn)單，你可以在按鈕的Action面板中找到代表場(chǎng)景的名稱(chēng)。
圖4-34 實(shí)現(xiàn)場(chǎng)景的跳轉(zhuǎn)
在goto指令的參數(shù)輸入?yún)^(qū)里，Scene下拉框表示的就是場(chǎng)景，其中current scene表示當(dāng)前場(chǎng)景，next scene表示下一場(chǎng)景，previous scene表示上一場(chǎng)景，所有場(chǎng)景都會(huì)出現(xiàn)在下拉框內(nèi)，還可以直接在輸入框內(nèi)填寫(xiě)場(chǎng)景的名稱(chēng)。
NextScene和PrevScene這兩個(gè)指令是用來(lái)直接在幀當(dāng)中實(shí)現(xiàn)場(chǎng)景跳轉(zhuǎn)的命令，也有朋友喜歡把Loading預(yù)載動(dòng)畫(huà)制作成一個(gè)單獨(dú)的場(chǎng)景，然后通過(guò)Next scene命令來(lái)實(shí)現(xiàn)場(chǎng)景跳轉(zhuǎn)，開(kāi)始播放動(dòng)畫(huà)，這也不失為一個(gè)好辦法。
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁(yè) 4.1.3 - 趣味Loading設(shè)計(jì) 下一頁(yè)
◎進(jìn)入論壇Flash專(zhuān)欄版塊參加討論
|
第 1 頁(yè) 
第 3 頁(yè) 4.2.1 按鈕的制作
