無論是網(wǎng)頁還是動畫，按鈕是經(jīng)常用到的一種交互方式。如果按鈕具有一定的特色，它可以吸引人們的眼球，使網(wǎng)頁或者動畫更加引人注目。那么如何制作一個令人過目不忘的3D按鈕呢？今天小編將與大家分享制作3D按鈕的

無論是網(wǎng)頁還是動畫，按鈕是經(jīng)常用到的一種交互方式。如果按鈕具有一定的特色，它可以吸引人們的眼球，使網(wǎng)頁或者動畫更加引人注目。那么如何制作一個令人過目不忘的3D按鈕呢？今天小編將與大家分享制作3D按鈕的過程，僅供參考使用。

步驟一：啟動Flash CS5，新建一個Flash文檔

在Flash CS5中點擊"Actionscript 2.0"，然后新建一個大小為550*400，幀頻為15fps，背景色為黑色的Flash文檔。

步驟二：導(dǎo)入按鈕所需的圖片

執(zhí)行"文件-導(dǎo)入-導(dǎo)入到庫"命令，將事先準(zhǔn)備好的圖片導(dǎo)入到庫中進行查看。

步驟三：創(chuàng)建按鈕的圖形元件

執(zhí)行"插入-新建元件"命令，新建一個名稱為"01"的圖形元件。選擇工具箱里的矩形工具，在編輯區(qū)域繪制一個填充顏色為00ffcc、筆觸顏色為00ffcc、筆觸大小為1的長方形。

步驟四：復(fù)制和粘貼圖形元件

選中該矩形，并按下Ctrl C組合鍵進行復(fù)制，然后按下Ctrl Shift V組合鍵進行原位置粘貼，并向左上方移動。改變填充顏色為33cc66。

步驟五：創(chuàng)建按鈕的影片剪輯元件

新建圖層2，選擇工具箱里的文本工具，在編輯區(qū)域輸入"圖1"。執(zhí)行"插入-新建元件"命令，新建一個名稱為"2"的影片剪輯元件。將圖形元件"01"連續(xù)拖入到編輯區(qū)域四次，并調(diào)整其位置。

步驟六：插入關(guān)鍵幀并刪除圖形元件

在時間軸面板中選擇前四幀，依次插入關(guān)鍵幀。選擇第二幀，刪除一個"01"元件。選擇第三幀，刪除兩個"01"元件。選擇第四幀，刪除三個"01"元件。

步驟七：創(chuàng)建圖片的圖形元件

執(zhí)行"插入-新建元件"命令，新建一個名稱為"pic1"的圖形元件。在庫中選擇一張圖片，拖拽到編輯區(qū)域，并設(shè)置全居中。然后按下Ctrl B組合鍵將圖片打散。

步驟八：重復(fù)步驟七創(chuàng)建其他圖片的圖形元件

重復(fù)步驟七，采用相同的方法新建圖形元件"pic2"和"pic3"，分別將庫中的另外兩張圖片拖拽到編輯區(qū)域進行打散。

步驟九：創(chuàng)建圖片的影片剪輯

執(zhí)行"插入-新建元件"命令，新建一個名稱為"picture"的影片剪輯。將元件"pic1"拖拽到編輯區(qū)域，設(shè)置全居中。在屬性面板中設(shè)置alpha為0。在第15幀處插入關(guān)鍵幀，將alpha值設(shè)置為100%，并在1-15幀中創(chuàng)建補間動畫。

步驟十：創(chuàng)建按鈕元件

執(zhí)行"插入-新建元件"命令，新建一個名稱為"按鈕"的按鈕元件。在"點擊"中插入關(guān)鍵幀，選擇工具箱里的矩形工具，在編輯區(qū)域繪制一個矩形。

步驟十一：將按鈕元件添加到舞臺

返回主場景，將影片剪輯元件"2"拖拽到舞臺中，連續(xù)3次，并調(diào)整它們的位置和大小。分別修改實例名稱為"up1"、"up2"、"up3"，并為每個按鈕添加投影濾鏡效果。

步驟十二：為按鈕添加動作

點擊時間軸下面的"新建圖層"按鈕，新建圖層2。將按鈕元件"按鈕"拖拽到舞臺三次，并調(diào)整它們的大小和位置。

步驟十三：制作圖片的傳統(tǒng)補間動畫

選擇第一"按鈕"元件，并打開其動作面板，輸入代碼"stop();"。同樣地，選擇第二和第三個"按鈕"元件，并分別添加相同的代碼。

步驟十四：將影片剪輯添加到舞臺

新建圖層3，將庫中的影片剪輯"picture"拖拽到舞臺，并設(shè)置大小為500*300，并調(diào)整其位置。修改實例名稱為"ss"。

步驟十五：保存并測試按鈕

執(zhí)行Ctrl S進行保存，保存名稱為"3D按鈕"。然后按下Ctrl Enter進行測試，查看按鈕的效果。