Flash基礎教程：如何掌握基本按鈕知識.docx

Flash基礎教程：如何掌握基本按鈕知識直線網(wǎng) 摘要: 本例介紹Flash如何掌握基本按鈕知識，教程主要講解了制作基本按鈕、隱形按鈕、發(fā)聲按鈕以及如何在按鈕中嵌套影片剪輯，希望能給朋友們帶來幫助問題1:如何制作按鈕?為什么我制作的文字按鈕,很不容易點擊到?解決思路在按鈕編輯區(qū)的時間軸上只有四個幀,第4幀的”點擊”是按鈕的反應區(qū),這個區(qū)域在舞臺中是看不到的,但是他卻起到了按鈕反應的作用。我們擴大按鈕的反應區(qū),既可以輕易的用鼠標點擊到這個按鈕了。具體步驟1、運行FlashMX2004，文檔屬性默認。2、新建一個元件，命名為“按鈕”，類型設定為按鈕元件。3，進入按鈕編輯區(qū)，時間軸上面一共有四個幀。這四個幀的作用已經(jīng)在第一章中向大家介紹過了。如圖所示。圖2.1.34 按鈕元件的時間軸4、在第1幀中單擊工具欄里面的矩形工具繪制一個藍色的矩形。5、返回到場景1，從“庫”中把這個按鈕拖動到舞臺中。6、發(fā)布測試效果，我們看到當鼠標放到這個按鈕上面的時候，鼠標變?yōu)樾∈中螤?，說明制作的這個按鈕成功。7、在實際的創(chuàng)作中，因為舞臺中的元件很多，為了區(qū)分元件的種類，需要在按鈕上面寫上說明，那么我們就來實際制作一下。8、雙擊“庫”中按鈕元件，進入按鈕編輯區(qū)。9、在圖層面板中新建圖層2，單擊文本工具鍵入“button”，調整位置。如圖所示。圖2.1.35 加入文字圖層10、返回到場景1測試，按鈕上面已經(jīng)有了一個標志名字，按鈕的功能沒有受到影響。如圖所示。圖2.1.36按鈕效果11、這種按鈕的制作方法是最為簡單的，它不涉及到反應區(qū)的問題。因為藍色的矩形部分已經(jīng)在舞臺中顯露出來，只要點擊藍色區(qū)域都可以執(zhí)行按鈕的作用。在一些Flash作品中由于整體視覺效果的要求，往往出現(xiàn)一些只有文字，沒有背景的按鈕。這樣就涉及到了問題中所提到的反應區(qū)的問題。12、進入按鈕元件編輯區(qū)，在第1幀中鍵入文字“PLAY”，制作一個播放按鈕。如圖所示。圖2.1.37 鍵入文字13、返回到場景1發(fā)布測試按鈕效果，發(fā)現(xiàn)鼠標不是很輕易的就會點擊到按鈕。其原因是按鈕的反應只限制在文字的線條上面。14、解決這個問題，可以采用兩種方法。第一種方法，進入按鈕元件編輯區(qū)，在第4幀中利用矩形工具畫一個矩形，放在“PLAY”的下方，以擴大它的反應區(qū)。因為第4幀“點擊”中的內容在發(fā)布作品的時候是看不見的，所以我們可以使用任意顏色。如圖所示。圖2.1.38 在“點擊”幀插入矩形14、發(fā)布測試效果，因為按鈕反應區(qū)的擴大，就很輕易的點擊到按鈕了。請參考源文件點擊這里下載源文件。15、另外一種方法是新建一個圖層，在按鈕元件編輯區(qū)的第1幀畫一個透明的矩形，因為矩形雖然是透明的，在舞臺中是看不見的，但是它還會起到一個形狀的作用，這樣在第1幀擴大了按鈕的反應區(qū)域。如圖所示。圖2.1.39 插入透明矩形16、這種制作方法也可以制作出非常好用的文字按鈕。請參考源文件點擊這里下載源文件注意對按鈕的測試，我們用【控制】菜單里面的【播放】命令或者使用快捷鍵“Enter”是無法測試的。我們要單擊【文件】菜單下的【發(fā)布】命令或者使用組合快捷鍵“Ctrl+Enter”來進行發(fā)布測試。提示朋友們普遍對按鈕的四個幀里面的最后一個幀的作用不是很理解，這個幀就是按鈕的反應區(qū)，在場景中是看不到的，制作隱形按鈕就要利用這個幀。技巧按鈕是一部作品中不可或缺的重要組成部分，制作按鈕時，應考慮到整體作品的風格。試一試我們向大家介紹了文字按鈕的制作方法，大家不妨試一試，因為這種按鈕在每個作品中都要使用的。分析出現(xiàn)這個問題的根本原因有兩個：第一，朋友們對按鈕制作的不重視性，認為按鈕只是一個附屬的東西，對于作品整體的主體表現(xiàn)沒有太多的作用，所以也忽視了按鈕的細節(jié)制作；第二，朋友們對第4幀“點擊”的知識的不了解。特別提示按鈕作為一個Flash動畫作品中實現(xiàn)交互作用的媒介，起到了非常重要的作用。因為本文所附源文件中并沒有涉及到按鈕的控制問題，所以只能利用鼠標放置到按鈕上顯現(xiàn)的小手形狀來測試按鈕。特別說明通過對這個問題的解釋，我們了解了基本按鈕的制作方法和怎樣制作文字按鈕。我在欣賞閃吧承辦的“衡雅杯”環(huán)保FLASH比賽的時候，發(fā)現(xiàn)許多朋友制作的文字按鈕都沒有采取擴大反映區(qū)的手段。以至考驗欣賞者使用鼠標的靈活程度，對作品的欣賞帶來第一印象的厭煩感。next一部Flash作品需要使用那些必要的按鈕？由于按鈕的應用十分廣泛，所以在Flash作品中可以用按鈕制作非常有趣的效果。對于控制一部完整得FLASH動畫作品而言，一般需要兩個按鈕：播放（PLAY）和返回（REPLAY）。以用于影片的播放和重放?？梢允褂脠D形來作為按鈕嗎？因為按鈕中的幀在操作上與其他元件的幀沒有什么大的區(qū)別，所以我們可以利用圖形來作為按鈕，還可以采用其他的形式來制作按鈕。在下面的問題中我們將向大家詳細地介紹。如何用按鈕來控制影片？剛才我們說到了一部完整的作品需要兩個按鈕,一個播放按鈕一個返回按鈕.那么這兩個按鈕是怎樣實現(xiàn)對影片的控制的呢?這就涉及到了Flash 的 ActionScript。按鈕與Flash腳本語言（ActionScript）的聯(lián)系是非常緊密的。下面我們就制作一個影片控制按鈕。我們新建一個 Flash MX 2004文檔，在舞臺的時間軸上制作出一段簡單的動畫效果。如圖2.1.40所示。圖2.1.40 制作一段漸變動畫要禁止動畫一開始就自動播放，這樣播放按鈕才會起到作用 。單擊時間軸上的第1幀，打開舞臺下面的“動作”面板，雙擊“影片控制”下的“stop”命令，是動畫在第一幀就停止。在最后一幀同樣加入“stop”。如圖2.1.41 所示。圖2.1.41 添加“stopa();”然后新建立一個按鈕元件，按照我們剛才做的方法制作出兩個按鈕，分別是“play”和“relplay”。在時間軸中新建一圖層，把“play”按鈕從控制拖動到第1幀的合適位置，“replay”拖動到第30幀的合適位置。分別單擊兩個按鈕，打開動作面板，在“play”和“replay”按鈕上面加如控制命令：“play”按鈕上面的命令：on(release)play();如圖所示。圖2.1.42 “play”按鈕的ActionScript“replay”按鈕上面的命令，on (release) gotoAndPlay(1);如圖2.1.43所示。圖2.1.43 “replay”按鈕的ActionScript請參考源文件點擊這里下載源文件這是我們第一次接觸 Flash MX 2004的ActionScript，本書第三部分中會作詳細地介紹。之所以在此節(jié)中介紹ActionScript，一是按鈕與ActionScript的聯(lián)系非常密切 ；二是給大家一個初步的印象。next問題2：何制作隱形按鈕？隱形按鈕的作用是什么？解決思路隱形按鈕是按鈕功能的引申，一些超乎想象的效果就是通過隱形按鈕來完成的。我們從上一個問題中知道了，按鈕的第4幀“點擊”幀里面的內容在舞臺中是看不到的，我們就用這個特點來制作簡單的隱形按鈕。具體步驟1、運行Flash MX 2004 ，文檔屬性默認。2、新建一個元件，名稱為“button”，類型為按鈕。3、進入按鈕元件編輯區(qū)，在第4幀里面我們利用矩形工具繪制一個矩形，顏色隨意。4、返回場景1，【文件】|【導入】|【導入到舞臺】命令，導入一幅圖片，調整其在舞臺的位置。5、在時間軸上新建一個圖層，命名為按鈕層，把剛剛制作的按鈕從“庫”中拖動到舞臺中的合適位置。如圖2.1.44所示。圖2.1.44 設置隱形按鈕6、這個按鈕在舞臺中顯現(xiàn)的是透明的綠顏色。因為按鈕在第4幀“點擊”幀里面的內容是看不到的，F(xiàn)lash 考慮到需要編輯的方便，統(tǒng)一設置了相同的綠顏色，而無論原來的“點擊”幀里面的顏色是什么。7、發(fā)布測試，可以看到當鼠標移動到隱形按鈕區(qū)域就會變成小手狀，我們的隱形按鈕制作成功，保存。請參考源文件點擊這里下載源文件8、利用按鈕與Flash的ActionScript我們可以制作出非常優(yōu)秀的效果，這方面的內容我們將在第三部分ActionScript中向大家詳細介紹。注意在制作隱形按鈕的時候，不要在按鈕編輯區(qū)的第1幀做按鈕，因為第一幀在場景中是可見的，達不到我們制作的效果。我們直接在第4幀中插入一個空白關鍵幀，然后在編輯區(qū)中繪制反映區(qū)的大小就可以提示按鈕編輯區(qū)中的第4幀“點擊”幀在場景中是不可見的，編輯的時候，在主場景中顯示的是綠色半透明狀態(tài)。技巧在舞臺中的隱形按鈕與其他按鈕沒有什么區(qū)別，我們都可以利用工具進行編輯。試一試在上一個問題解釋中我們向大家介紹了另外一種制作隱形按鈕的方法，朋友們不妨利用第二種制作方法試一試，看看有沒有區(qū)別？分析按鈕的作用是觸發(fā)行為，隱形按鈕可以達到欣賞者在非刻意的情況下觸發(fā)事件，達到互動效果。特別提示在本例的源文件中，沒有設置按鈕的觸發(fā)事件，因為觸發(fā)事件是要用Flash的ActionScript控制的，我們會在第三部分中向大家詳細介紹。特別說明按鈕的重要作用我們已經(jīng)在上一個問題中向大家強調了，隱形按鈕的是按鈕中的重中之重。掌握了此項技術，我們就可以利用隱形按鈕的特點，發(fā)揮其獨到的作用，制作出許多交互性動作。相關問題如何使用公用庫中的按鈕？在FlashMX2004中的公用庫中向我們提供了許多制作精美的按鈕范例，我們可以直接使用。單擊【窗口】|【其他面板】|【公用庫】|【按鈕】命令，打開【庫按鈕】面板。如圖2.1.45所示。圖2.1.45 打開“庫按鈕”面板可以看到有許多已經(jīng)制作完成的按鈕，分門歸類地保存在按鈕公用庫里面。我們可以直接拖放到按鈕編輯區(qū)里面使用。在按鈕公用庫里面的按鈕大多是動態(tài)效果的，就是按鈕的四個幀里面都有動作。這方面的知識我們在下一個問題中向大家介紹。next問題3：何制作發(fā)聲按鈕？如何在按鈕中嵌套影片剪輯？解決思路從上兩個問題的解答中，我們知道了按鈕中的四個幀與其他元件是不相同的，但是在操作和理解上卻沒有大的差別。在第一部分中我們詳細地介紹了按鈕編輯區(qū)的四個幀的作用，我們就可以利用這些幀來解決問題。具體步驟1、運行Flash MX 2004，文檔屬性默認。2、新建元件，命名為“button”，類型為按鈕。3、進入“button”按鈕編輯區(qū)，我們可以看到按鈕編輯區(qū)的四個幀。4、單擊第1幀，在編輯區(qū)中利用橢圓形工具繪制一個紅色的橢圓。5、在時間軸上新建一個圖層，鍵入“button”靜態(tài)文本。并同時延長第一層和第二層的幀數(shù)。如圖2.1.46所示。圖2.1.46 創(chuàng)建按鈕6、再新建圖層3，命名為音樂層。7、因為我們想要制作的效果是，當鼠標經(jīng)過按鈕的時候，按鈕發(fā)出聲音，所以我們就在按鈕時間軸的第2幀“指針經(jīng)過”中插入一個空白關鍵幀。8、單擊【文件】|【導入】|【導入到庫】命令，導入一段我們選擇的音樂效果。9、導入的音樂會保存在我們的庫面板中。如圖2.1.47所示。圖2.1.47 庫中的聲音文件10、把這個聲音文件拖動到音樂層的“指針經(jīng)過”幀對應的舞臺中。11、在音樂層里面的“指針經(jīng)過”幀里面會有一個音樂的波形，這說明我們已經(jīng)把音樂加到了這個幀里面了。如圖2.1.48所示。圖2.1.48 時間軸上面的聲音文件12、返回場景1，從庫面板中把這個按鈕拖放到舞臺中。13、發(fā)布測試。當鼠標經(jīng)過按鈕的時候，按鈕發(fā)出了聲音，我們制作的發(fā)生按鈕成功，保存。請參考源文件點擊這里下載源文件14、如何在按鈕中嵌套影片剪輯呢？其實與插入音樂都是同樣的道理。15、按照上面的步驟制作一個常規(guī)按鈕。16、新建一個影片剪輯，在這個影片剪輯里面制作一小段簡單的旋轉動畫效果。17、雙擊進入按鈕編輯區(qū)，新建一個圖層。18、在這個圖層的第2幀“指針經(jīng)過”插入一個空白關鍵幀。19、把“庫”面板中的影片剪輯拖動到這個幀對應的舞臺里面。如圖2.1.49所示。圖2.1.49 插入影片剪輯20、返回到場景1，發(fā)布測試。當鼠標移動到按鈕的時候，就會播放影片剪輯。保存。請參考源文件點擊這里下載源文件注意導入mp3格式音樂的時候，有的時候flash會提示導入不成功。這個問題是非常普遍的，我們將在后面的Flashmv章節(jié)中向大家詳細介紹解決方法制作發(fā)音按鈕所用的音效，應該選擇比較短的聲音文件。提示制作發(fā)音按鈕的時候，盡量把音效，文字放在不同的層里面，這樣便于我們編輯修改。技巧除了在“指針經(jīng)過”幀里面放置音效以外，我們還可以在其他幀里面放置音效，制作方法與上例相同。試一試朋友們試一試制作一個發(fā)音按鈕。分析在制作此例過程中，把音效、文字、矩形分別放置在不同的圖層里面。原因是當我們修改它的時候非常方便。因為無論在按鈕編輯區(qū)用多少層，在主場景中我們只導入了一個按鈕元件，對動畫作品的整體沒有改變。特別說明我這一節(jié)中我們學習了制作聲音按鈕，以及嵌套影片剪輯的方法。還接觸了一個重要的知識就是導入外部聲音文件。導入外部聲音文件與導入圖片的方法是相同的。至于在導入中出現(xiàn)的錯誤我們將在以后的學習中詳細講述。相關問題如何制作