二流設計師的小筆記

Flash / 感應區滑入滑出效果


利用感應區與影格標籤，製作出簡單的滑入滑出效果，變成可自由編輯效果的按鈕影片，
這邊做的方法不是絕對，但是可以當做一個簡單的概念，去自由變化，
以下為簡單的製作方式：


步驟一：首先先製作好兩張圖片，一個是未滑入效果，一個是滑入效果

步驟二：將製做好的兩張圖，放入Flash 裡面，並轉換成元件 

步驟三：將元件拖曳至舞台，並點選「 修改 」→ 「 轉換成元件 」
 

步驟四：轉換成元件選項，名稱可以命名一個人辨認喜好，類型選「 影片片段 」後按確定。

步驟五：在元件上點擊兩次，之後進入「 影片元件」內編輯。

步驟六：
在時間軸這邊再開啟一個新圖層，在時間軸這邊按下 Art 鍵，並用滑鼠 點選「 圖層1 」的第一格影格，
拖向「 圖層2 」影格，這樣就可以直接 複製影格。

步驟七：在「 圖層2 」的元件點選一下，再到「屬性 」這邊，選擇「替換 」 

步驟八：在跳出視窗中，選取要替換的元件，之後按確定。

步驟九：
按下 Shift 鍵，將「 圖層1、圖層2 」選取起來，再點選「 插入 」→「 時間軸 」→「 影格 」
增加影格。( 快速鍵為 F5 )

步驟十：
在圖層這邊，將名稱「 圖層2 」改為「 off 」，「 圖層1 」改為「 on 」 ，方便辨認元件在哪個圖層。

步驟十一：在圖層這邊，將「 on 」影格拖至影格15格。

步驟十二：
在圖層「 off 」影格15格這邊，增加關鍵影格，「 插入 」→「 時間軸 」→「 關鍵影格 」
( 快速鍵為 F6 )

步驟十三：在圖層「 off、on 」第30影格，插入關鍵影格。

步驟十四：在圖層「 off 」第30影格元件，屬性這邊，將 樣式設為「 Alpha 」。

步驟十五：樣式「 Alpha 」值，設訂為「 0 % 」。

步驟十六：在圖層「 on 」第15影格元件，屬性這邊，將 樣式設為「 Alpha 」。

步驟十七：樣式「 Alpha 」值，設訂為「 0 % 」。

步驟十八：在圖層「 on 」第15格關鍵影格，按滑鼠右鍵 ，點選「 建立傳統捕間動畫 」。

步驟十九：在圖層「 off 」第15格關鍵影格，按滑鼠右鍵 ，點選「 建立傳統捕間動畫 」。

步驟二十：之後再新增一個圖層，命名為「 txt 」。

步驟二十一：在圖層「 txt 」上，用文字工具打上需要 的按鈕名稱。

步驟二十二：將圖層「 off、on 」圖層15~30影格，同時選取，按Art 鍵拖移複製到第35影格。

步驟二十三：在影格上按下滑鼠左鍵，點選「 反轉影格 」。

步驟二十四：在圖層「 txt 」第50影格，按下「 F5 」，將影格補滿。

步驟二十五：這邊再新增一個圖層，命名為「 感應區 」。

步驟二十六：在圖層「 感應區 」這邊用矩形工具畫出一個 方塊，轉換成按鈕元件，之後按確定。

步驟二十七：
之後點擊按鈕元件兩下，進入編輯，將原本 在 「一般 」影格拖曳至「 感應區 」，之後 回場景。

步驟二十八：將「 感應區 」按鈕，調整到需要的大小。

步驟二十九：在時間軸再新增一個圖層，命名 「 as 」，這圖層 為下指令用。

步驟三十：
在「 as 」圖層這邊，分別於14、15、30、35影格 ，設定「 關鍵影格 」。
( 這沒有一定，可依製作狀況 調整 )

步驟三十一：在「 as 」圖層這邊，於14 影格，按下滑鼠右鍵， 點選「 動作 」。

步驟三十二：在「 動作 」視窗中，填入 stop(); 指令，之後關閉動作視窗。( 快速鍵 F 9 )

步驟三十三：在「 as 」圖層 14 影格，按下Art 鍵，用滑鼠左鍵點 選拖移影格，複製影格到 30 影格。

步驟三十四：到「 as 」圖層 15 影格，影格屬性名稱這項，給予個 名稱「 on 」。

步驟三十五：到「 as 」圖層 35 影格，影格屬性名稱這項，給予個 名稱「 off 」。

步驟三十六：點選舞台上的「 感應區按鈕 」。

步驟三十七：對著「 感應區按鈕 」按滑鼠右鍵，選擇 「 動作 」。( 快速鍵 F 9 )

步驟三十八：
在「 動作 」視窗中，Key入以下指令瑪 . . .

on (rollOver) {
gotoAndPlay("on");
}
on (rollOut) {
gotoAndPlay("off");
}

gotoAndPlay(”on”); 代表 滑鼠指標滑入時會到影格名稱「 on 」 

gotoAndPlay(”off”); 代表 滑鼠指標滑開時會到影格名稱「 off 」 

完成後，關閉視窗 ( 快速鍵 F 9 ) ，之後就可以輸出看效果了。