|
Movie Clip影片剪輯符號(hào)和Graphic圖像符號(hào)的制作界面基本上與場(chǎng)景是相同的，讀者會(huì)在以后學(xué)習(xí)實(shí)例的制作中領(lǐng)略到它們的風(fēng)采，由于按鈕符號(hào)與其它動(dòng)畫形式不太相同，所以我們專門抽出來(lái)一節(jié)內(nèi)容來(lái)教會(huì)大家制作按鈕，但這并不代表按鈕就比其它符號(hào)重要。
1.5.1 按鈕符號(hào)的編輯區(qū)域
按鈕的編輯區(qū)域，在上一節(jié)我們說(shuō)過(guò)了，它不同于其它的符號(hào)，它一共擁有四個(gè)幀，而且只有這四個(gè)幀，每一個(gè)幀都有它不同的意義。但它也可以擁有很多的圖層。
◆Up區(qū)：為按鈕的正常狀態(tài)，也就是說(shuō)按鈕在平時(shí)的狀態(tài)。
◆Over區(qū)：是當(dāng)我們的鼠標(biāo)指向按鈕時(shí)它所顯現(xiàn)出來(lái)的狀態(tài)。
◆Down區(qū)：是當(dāng)我們的鼠標(biāo)按下按鈕時(shí)它所顯現(xiàn)出的狀態(tài)。
◆Hit區(qū)：是按鈕的感應(yīng)區(qū)，每一個(gè)按鈕都有一個(gè)感應(yīng)區(qū)，用來(lái)感應(yīng)鼠標(biāo)是否指向它，這個(gè)區(qū)域我們是看不到的，所以對(duì)它的設(shè)計(jì)不必在意外觀，只畫出一個(gè)區(qū)域就可以了。而且通�？梢灾苯佑闷渌鼛男螒B(tài)來(lái)代替，除非你需要把按鈕的感應(yīng)區(qū)域制作的與按鈕的大小不同那就另當(dāng)別論了。
圖1-12 按鈕編輯的區(qū)域
步驟一、選取Insert菜單中的New Symbol命令，打開(kāi)符號(hào)屬性對(duì)話框，選取Button按鈕符號(hào)，在Name欄內(nèi)填寫按鈕名稱為btn1，點(diǎn)擊OK鍵確認(rèn)。如圖1-13所示。
圖1-13 符號(hào)的設(shè)置框
步驟二、程序打開(kāi)的按鈕的制作界面，一切似乎與場(chǎng)景的樣子很相像，只是關(guān)鍵幀的樣式都與眾不同些，點(diǎn)擊Up關(guān)鍵幀，按F6鍵創(chuàng)建一個(gè)關(guān)鍵幀，在繪圖區(qū)內(nèi)選取方塊工具，然后注意觀察在工具欄的下方有一個(gè)Options欄，里面有一個(gè)彎角工具，點(diǎn)選它打開(kāi)了Rectangle Settings對(duì)話框，填入數(shù)值30。如圖1-14所示。這里的意思是繪制一個(gè)帶圓角的矩形。
圖1-14 Rectangle Settings對(duì)話框和矩形的圓角設(shè)置按鈕
步驟三、然后在編輯區(qū)里用鼠標(biāo)拖出一個(gè)圓角的矩形。如圖2-15所示。先不用在意圖形的邊框和填充色，因?yàn)槲覀儠?huì)在下面重新設(shè)置它的色彩。
圖1-15 繪制出的圓角矩形
步驟四、打開(kāi)主菜單Window|Panels|Fill命令，打開(kāi)填充面板。下拉菜單中選取Linear Gradient項(xiàng)，在面板上使用兩邊黃色中間黑色的色彩設(shè)置，間距大約如圖2-16所示。
步驟五、接下來(lái)點(diǎn)選油漆桶工具，對(duì)矩形進(jìn)行填充線性的漸變填充。然后點(diǎn)選工具面板中最下方的Transform Fill調(diào)整填充工具。選中Transform Fill工具后再點(diǎn)選矩形。如圖2-16所示。
步驟六、你會(huì)看到矩形出現(xiàn)了一個(gè)調(diào)節(jié)桿，拖住頂點(diǎn)旋轉(zhuǎn)它90度，然后點(diǎn)選中間的控制點(diǎn)，再拖到矩形的大小位置。使圖像成為橫向填充。如圖2-16所示。
圖1-16 圖像的填充
步驟七、在圖層里點(diǎn)選加號(hào)按鈕，為按鈕新建一個(gè)層。如圖1-17所示。
圖1-17 新建一層
步驟八、然后在Layer2的Up幀上點(diǎn)選文字工具，打開(kāi)主菜單Window|Panels|Character命令，打開(kāi)字符面板，選擇你所喜歡的字體和合適的字號(hào)，在矩形上打下文字"正常"。如圖2-18所示。
圖1-18 設(shè)置按鈕文字
步驟九、基本上Up的制作就完成了。那么，在兩個(gè)圖層的Over幀和Down幀的關(guān)鍵幀依次按F6鍵，在Layer1的Hit幀上也按F6，創(chuàng)建一個(gè)關(guān)鍵幀。如圖2-19所示。
步驟十、然后把Layer2的Over區(qū)和Down區(qū)的文字相應(yīng)的改成"經(jīng)過(guò)"和"按下"。方法是使用文字工具在字符上按下，就可以重新編輯文字了。
圖1-19 編輯按鈕上的文字
步驟十一、現(xiàn)在點(diǎn)選編輯區(qū)右上方的Scene回到場(chǎng)景，打開(kāi)主菜單Window|Library，打開(kāi)庫(kù)面板，可以看到這其中有一個(gè)名為btn1的按鈕，把它拖入場(chǎng)景的第一幀。然后選取主菜單Control|Enable Simple Buttons，使它變?yōu)檫x取狀態(tài)，這樣就可以測(cè)試按鈕了。（此實(shí)例收錄在光盤的源程序/Ch1/1-1.fla）
在這個(gè)實(shí)例中，我們學(xué)會(huì)了使用Transform Fill填充的調(diào)整工具，當(dāng)然有關(guān)Fill填充面板和Character字符面板的具體使用方法會(huì)在以后的內(nèi)容中詳細(xì)介紹。按鈕的外觀制作一般是離不開(kāi)Fill面板的填充的，如果你想要制作一個(gè)立體感很強(qiáng)的按鈕，還是學(xué)好Fill面板吧。還有一點(diǎn)要領(lǐng)會(huì)，按鈕不光只有這一種制作方式，它其實(shí)是用了三種不同狀態(tài)來(lái)顯示，我們可以用圖像來(lái)描述這三種形態(tài)，也可以用動(dòng)畫來(lái)描述。不一而足。
1.5.2 在按鈕符號(hào)中加入聲音
按鈕還可以有聲音？也許這就是交互式多媒體帶給我們的喜悅，想像以往網(wǎng)頁(yè)中呆板的按鈕，F(xiàn)lash則帶給我們?nèi)碌母杏X(jué)，而且按鈕的音效制作非常之簡(jiǎn)單，讓我們來(lái)看一看。
步驟一、接上例我們回到了按鈕的制作，然后新建一個(gè)Layer3圖層。在Layer3的Over區(qū)上按F6鍵，建立一個(gè)關(guān)鍵幀，選定Over幀使之成為當(dāng)前幀。
步驟二、為了方便制作，我們并沒(méi)有使用File（文件）面板中使用Import命令，導(dǎo)入一個(gè)聲音文件到影片中。而是直接引用了Window菜單下的Common Libraries共享庫(kù)面板中的音樂(lè)，打開(kāi)共享庫(kù)面板，然后選擇其中的Sounds項(xiàng)，從中選取一個(gè)聲音文件，然后拖到編輯區(qū)內(nèi)。如圖1-20所示。
圖1-20 為按鈕添置聲音
步驟三、然后回到場(chǎng)景測(cè)試按鈕。
1.5.3 制作動(dòng)態(tài)的按鈕
動(dòng)態(tài)按鈕自然也不是什么難事，當(dāng)然，還需要一點(diǎn)動(dòng)畫的制作。
步驟一、開(kāi)始制作一個(gè)MovieClip電影剪輯，使用主菜單Insert|New Symbol命令，然后在符號(hào)屬性框內(nèi)填寫電影剪輯的名稱為mov1。
步驟二、我們開(kāi)始制作這個(gè)電影剪輯符號(hào)，在第一幀使用圓形繪圖工具繪制一個(gè)正方形的圓，方法是按住Shift鍵繪制。填充色為黑色。
圖1-21 開(kāi)始制作Movie Clip電影剪輯
步驟三、在第二幀到第五幀依次建立四個(gè)關(guān)鍵幀，你會(huì)發(fā)現(xiàn)第一幀的圓形物體依次延續(xù)到了后面的關(guān)鍵幀。點(diǎn)擊第二幀，我們使時(shí)間軸的磁頭定位在第二幀上，然后點(diǎn)一下油漆桶工具。在下方的Colors字符下的油漆桶調(diào)色板選取色彩為黃色進(jìn)行填充。
圖1-22 對(duì)電影剪輯的第二幀進(jìn)行填充
步驟四、然后將油漆桶在物體上單擊。對(duì)物體色彩進(jìn)行填充。
步驟五、使用相同的方法對(duì)其它各幀進(jìn)行色彩填充，色彩方面各憑喜好。
步驟六、然后我們選取主菜單Insert|New Symbol命令，選Botton建立一個(gè)按鈕符號(hào)，給按鈕取名稱叫btn2。
步驟七、在按鈕的Over幀建立一個(gè)關(guān)鍵幀，然后打開(kāi)主菜單Window|Library命令打開(kāi)庫(kù)面板，將其中的mov1電影剪輯拖入Over幀。
步驟八、在Up幀和Down幀各繪制一個(gè)同樣大小的圓形。色彩憑你所好。如圖1-23所示。
圖1-23 Over幀的動(dòng)畫按鈕 步驟九、回到場(chǎng)景，將按鈕拖入場(chǎng)景進(jìn)行測(cè)試。
你會(huì)發(fā)現(xiàn)，當(dāng)你的鼠標(biāo)指向這個(gè)圓形按鈕時(shí)，它將會(huì)用極快的速度來(lái)顯示它的各種色彩狀態(tài)，這就是動(dòng)態(tài)按鈕的原理。當(dāng)然，這樣的按鈕似乎看起來(lái)并不那么美觀，我們可以深入探討一下按鈕的美工，但是，通過(guò)最簡(jiǎn)單的操作能讓你明白動(dòng)態(tài)按鈕的制作原理，我想，在下一章中你會(huì)有更深的收獲，包括美術(shù)設(shè)計(jì)的知識(shí)和動(dòng)畫制作知識(shí)。
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁(yè) 1.4 Flash5中的符號(hào) 下一頁(yè)
◎進(jìn)入論壇Flash專欄版塊參加討論
|
第 1 頁(yè) 
第 5 頁(yè) 1.5 制作按鈕符號(hào)
