Flash按鈕制作與應(yīng)用(一)

Flash按鈕制作與應(yīng)用復(fù)習(xí)&提高用戶名：0000Flash按鈕基礎(chǔ)知識(shí)按鈕的介紹1.按鈕簡介按鈕是人機(jī)進(jìn)行信息交互的基礎(chǔ)，它對(duì)鼠標(biāo)單擊事件進(jìn)行響應(yīng)。按鈕可對(duì)按鈕靜止、將鼠標(biāo)指針移到按鈕上、按下鼠標(biāo)左鍵3種事件作出響應(yīng)。這3種事件對(duì)應(yīng)著按鈕的4種狀態(tài)：彈起(按鈕靜止)、指針經(jīng)過(將鼠標(biāo)指針移動(dòng)到按鈕上)、按下(按下按鈕)、點(diǎn)擊(定義按鈕響應(yīng)區(qū)域)。這4種狀態(tài)定義了按鈕的4個(gè)關(guān)鍵幀。下面詳細(xì)介紹按鈕的這4種關(guān)鍵幀。(1)【彈起】幀：在【彈起】幀中定義按鈕的正常顯示效果，也就是按鈕未被鼠標(biāo)單擊時(shí)所顯示的效果。(2)【指針經(jīng)過】幀：定義當(dāng)鼠標(biāo)指針移到按鈕上但不單擊它時(shí)按鈕的效果。一般該幀相對(duì)于【彈起】幀應(yīng)有所改變。比如：可以定義當(dāng)鼠標(biāo)指針移到按鈕上時(shí)按鈕變色或放大、縮小等，對(duì)于文字按鈕，可以定義當(dāng)鼠標(biāo)指針移到按鈕上時(shí)文字變色或改變文字的字體等。(3)【按下】幀：定義按鈕時(shí)按下所出現(xiàn)的效果。對(duì)于圖形按鈕來說，按鈕被按下時(shí)一般會(huì)定義得比未被按下時(shí)要小一些，這樣，當(dāng)按下按鈕時(shí)，按鈕會(huì)自動(dòng)縮小，出現(xiàn)動(dòng)態(tài)效果。(4)【點(diǎn)擊】幀：定義按鈕的響應(yīng)區(qū)域。在響應(yīng)區(qū)域按下按鈕時(shí)，系統(tǒng)才能響應(yīng)按鈕按下的事件。該區(qū)域在工作區(qū)中是不可見的。如要定義該幀，必須保證此區(qū)域包括按鈕的彈起、指針經(jīng)過和按下3種狀態(tài)的區(qū)域；如不定義該幀，則系統(tǒng)會(huì)默認(rèn)【彈起】幀狀態(tài)為按鈕的區(qū)域響應(yīng)。按鈕基礎(chǔ)知識(shí)注意：按鈕雖然有4種狀態(tài)，但可根據(jù)需要定義這4種幀狀態(tài)，也可只定義一部分，但一些基本的幀必須定義，一般而言，【彈起】幀和【指針經(jīng)過】幀必須定義。2.按鈕的創(chuàng)建(1)創(chuàng)建圖形按鈕的步驟如下。①選擇[插入]→[新建元件]命令，彈出【創(chuàng)建新元件】對(duì)話框，按如圖5.1所示設(shè)置。圖5.1②單擊[確定]按鈕進(jìn)入按鈕編輯區(qū)，時(shí)間軸中將出現(xiàn)按鈕的4個(gè)狀態(tài)幀，如圖5.2所示。圖5.2按鈕基礎(chǔ)知識(shí)③定義按鈕的4個(gè)幀。在按鈕中可以使用影片剪輯元件、圖形元件或素材庫中的組件對(duì)象。在這里我們利用繪圖工具繪制按鈕的4個(gè)幀。定義【彈起】幀：利用前面所學(xué)知識(shí)在工作區(qū)域中繪制如圖5.3所示的圖形。定義【指針經(jīng)過】幀：用鼠標(biāo)在【指針經(jīng)過】幀處插入一個(gè)關(guān)鍵幀，此時(shí)【彈起】幀的圖形被復(fù)制到【指針經(jīng)過】幀的工作區(qū)。確保圖形被選中，在混色器面板中進(jìn)行色彩調(diào)整，得到如圖5.4所示的圖形。定義【按下】幀：用鼠標(biāo)在【按下】幀處插入一個(gè)關(guān)鍵幀，此時(shí)【指針經(jīng)過】幀幀的圖形被復(fù)制到“按下”的工作區(qū)。確保圖形被選中，在混色器面板中進(jìn)行色彩調(diào)整，得到如圖5.5所示的圖形。定義【點(diǎn)擊】幀：用鼠標(biāo)在【點(diǎn)擊】幀處插入一個(gè)關(guān)鍵幀，并進(jìn)行大小的調(diào)整，得到如圖5.6所示的圖形。該幀主要是定義按鈕的有效單擊范圍，在有效范圍里按下按鈕時(shí)，系統(tǒng)才認(rèn)為該事件已經(jīng)發(fā)生。如果不定義該幀，則系統(tǒng)默認(rèn)“彈起”幀為響應(yīng)區(qū)域。圖5.3圖5.4圖5.5圖5.6按鈕基礎(chǔ)知識(shí)④單擊圖層左上角的[場(chǎng)景1]按鈕，返回場(chǎng)景，按鈕制作完畢。(2)創(chuàng)建文字按鈕的步驟如下。①選擇[插入]→[新建元件]命令，彈出【創(chuàng)建新元件】對(duì)話框，設(shè)置如圖5.7所示。圖5.7②單擊[確定]按鈕進(jìn)入按鈕編輯區(qū)，時(shí)間軸中將出現(xiàn)按鈕的4個(gè)狀態(tài)幀，如圖5.8所示。圖5.8按鈕基礎(chǔ)知識(shí)③定義按鈕的4個(gè)幀。在按鈕中可以使用影片剪輯元件、圖形元件或素材庫中的組件對(duì)象。在這里我們利用繪圖工具繪制按鈕的4個(gè)幀。定義【彈起】幀：利用文字工具和前面所學(xué)知識(shí)在工作區(qū)域中輸入如圖5.9所示的圖形。定義【指針經(jīng)過】幀：用鼠標(biāo)在“指針經(jīng)過”幀處插入一個(gè)關(guān)鍵幀，此時(shí)【彈起】幀的文字被復(fù)制到【指針經(jīng)過】幀的工作區(qū)。確保文字被選中，在文字屬性面板中進(jìn)行色彩調(diào)整，得到如圖5.10所示的文字。定義【按下】幀：用鼠標(biāo)在【按下】幀處插入一個(gè)關(guān)鍵幀，此時(shí)【指針經(jīng)過幀】幀的文字被復(fù)制到“按下”的工作區(qū)。確保文字被選中，在文字屬性面板中進(jìn)行色彩調(diào)整，得到如圖5.11所示的文字。定義【點(diǎn)擊】幀：用鼠標(biāo)在【點(diǎn)擊】幀處插入一個(gè)關(guān)鍵幀，并進(jìn)行大小的調(diào)整，得到如圖5.12所示的文字。該幀主要是定義按鈕的有效單擊范圍，在有效范圍里按下按鈕時(shí)，系統(tǒng)才認(rèn)為該事件已經(jīng)發(fā)生。如果不定義該幀，則系統(tǒng)默認(rèn)【彈起】幀為響應(yīng)區(qū)域。圖5.9圖5.10圖5.11圖5.12按鈕基礎(chǔ)知識(shí)④單擊圖層左上角的[場(chǎng)景1]按鈕，返回場(chǎng)景，按鈕制作完畢。(3)將按鈕加入到場(chǎng)景中的方法：打開【庫】面板，在場(chǎng)景中選中要插入的層中的關(guān)鍵幀，將“庫”中的按鈕拖到場(chǎng)景中的舞臺(tái)中即可。(4)預(yù)覽按鈕的兩種方法：第一種，選擇[控制]→[測(cè)試影片]命令；第二種，在場(chǎng)景中瀏覽按鈕效果，選擇[控制]→[啟動(dòng)簡單按鈕]命令?；景粹o的制作為圖形按鈕添加文字通過給前面制作的圖形按鈕添加“瞬間藝術(shù)”文字，來講解怎樣為圖形按鈕添加文字，方法如下。(1)在場(chǎng)景中雙擊“圖形按鈕”，進(jìn)入按鈕編輯狀態(tài)，如圖5.13所示。(2)單擊圖層左下角的【插入圖層】按鈕，添加一個(gè)新的圖層，如圖5.14所示。圖5.13圖5.14按鈕基礎(chǔ)知識(shí)(3)單擊“圖層2”的【彈起】幀，此時(shí)選中【彈起】幀，利用文字工具和前面所學(xué)的知識(shí)在圖形上面輸入如圖5.15所示的文字。(4)在“圖層2”的【指針經(jīng)過】幀上單擊鼠標(biāo)右鍵，彈出快捷菜單，在快捷菜單中選擇[插入關(guān)鍵幀]命令，插入一個(gè)關(guān)鍵幀。此時(shí)，該幀將復(fù)制【彈起】幀的文字，將文字修改成如圖5.16所示的效果。圖5.15圖5.16按鈕基礎(chǔ)知識(shí)(5)在“圖層2”的【按下】幀上單擊鼠標(biāo)右鍵，彈出快捷菜單，在快捷菜單中選擇[插入關(guān)鍵幀]命令，插入一個(gè)關(guān)鍵幀，此時(shí)，它將復(fù)制【指針經(jīng)過】幀的文字，將該文字修改成如圖5.17所示的效果。圖5.17(6)單擊圖層左上角的[場(chǎng)景1]按鈕，返回場(chǎng)景，按鈕修改完畢。按鈕基礎(chǔ)知識(shí)(3)在“l(fā)oadMovie()”的“()”中輸入?yún)?shù)，如圖5.19所示。圖5.19“donghua”：是要加載的影片名稱，注意要加載的影片名稱一定要是英文或數(shù)字，不能用中文命名，影片名字要用雙引號(hào)?！?”：表示加載的動(dòng)畫所處的層的位置。代碼、函數(shù)、參數(shù)將在后面做詳細(xì)介紹。(4)關(guān)閉【動(dòng)作】面板，制作完畢。3.為按鈕添加電子郵件在工作和學(xué)習(xí)中，電子郵件的使用非常頻繁，在按鈕中加入電子郵件對(duì)我們?nèi)∮镁W(wǎng)上信息更為方便。其方法與按鈕加載方法相同，只是要在URL框中輸入E-mail地址，在添加地址前應(yīng)先加入“mailto”。在【動(dòng)作】面板中輸入的語句如圖5.20所示。圖5.20簡單控制按鈕的制作案例一：簡單按鈕制作一個(gè)簡單按鈕。本案例主要用到的工具或命令有：選擇工具、橢圓工具、元件、柔化填充邊緣、文字工具、填充浮動(dòng)面板的設(shè)置等。簡單控制按鈕的制作(1)運(yùn)行Flash8.0，新建一個(gè)名為“簡單按鈕”文件。(2)單擊[插入]→[新建元件]命令，彈出【創(chuàng)建新元件】對(duì)話框，設(shè)置如圖5.21所示。單擊按鈕，【圖層】面板如圖5.22所示。圖5.21圖5.22說明：

[彈起]是指鼠標(biāo)指針沒有移到按鈕上時(shí)顯示的狀態(tài)。

[指針經(jīng)過]是指鼠標(biāo)指針移到按鈕上時(shí)顯示的狀態(tài)。

[按下]是指在按鈕上按下鼠標(biāo)左鍵時(shí)顯示的狀態(tài)。

[點(diǎn)擊]是指鼠標(biāo)指針觸發(fā)按鈕的范圍。簡單控制按鈕的制作(3)單擊并選中圖層的[彈起]幀。(4)單擊工具箱中的[橢圓]工具。將筆觸顏色設(shè)置為，橢圓漸變填充浮動(dòng)面板的設(shè)置如圖5.23所示。在工作區(qū)繪制一個(gè)圓，如圖5.24所示。圖5.23圖5.24(5)選擇剛繪制的橢圓，選擇[修改]→[形狀]→[柔化填充邊緣]命令，彈出【柔化填充邊緣】對(duì)話框，設(shè)置如圖5.25所示。單擊按鈕，得到如圖5.26所示的橢圓。圖5.25圖5.26簡單控制按鈕的制作(6)單擊[文字]工具。在工作區(qū)中輸入文字，大小、位置如圖5.27所示。(7)在[指針經(jīng)過]幀上單擊鼠標(biāo)右鍵，彈出快捷菜單，在快捷菜單中選擇[插入關(guān)鍵幀]命令，此時(shí)，在[指針經(jīng)過]幀處插入一個(gè)關(guān)鍵幀。(8)單擊[選擇]工具，選中如圖5.28所示的部分，設(shè)置填充浮動(dòng)面板如圖5.29所示。此時(shí)，圖形效果如圖5.30所示。圖5.27圖5.28圖5.29圖5.30(9)單擊【文字】工具，將文字改為如圖5.31所示。將文字改為紅色，如圖5.32所示。(10)在[按下]幀上單擊鼠標(biāo)右鍵，彈出快捷菜單，在快捷菜單中選擇[插入關(guān)鍵幀]命令，此時(shí)，在[按下]幀處插入一個(gè)關(guān)鍵幀。(11)單擊[選擇]工具，選中如圖5.33所示的部分，設(shè)置填充浮動(dòng)面板如圖5.34所示。此時(shí)，圖形效果如圖5.35所示。簡單控制按鈕的制作圖5.31圖5.32圖5.33圖5.34圖5.35(12)單擊[文字]工具，將文字改為如圖5.36所示。將文字改為深紅色，如圖

5.37所示。(13)在[點(diǎn)擊]幀上單擊鼠標(biāo)右鍵，彈出快捷菜單，在快捷菜單中選擇[插入關(guān)鍵幀]命令，此時(shí)，在[點(diǎn)擊]幀處插入一個(gè)關(guān)鍵幀。(14)單擊時(shí)間軸左上角的[場(chǎng)景1]按鈕，返回場(chǎng)景。(15)將“庫”中的“簡單按鈕”拖到舞臺(tái)中并測(cè)試效果，如圖5.38所示。將鼠標(biāo)指針移到按鈕上時(shí)的效果如圖5.39所示。(16)按下鼠標(biāo)指針時(shí)的效果如圖5.40所示。圖5.36圖5.37圖5.38圖5.39圖5.40簡單控制按鈕的制作本案例制作了一簡單的按鈕，主要講解了按鈕的制