21-4 設定影格標籤與註解• 動畫屬性設定• 圖層與動畫配置• 設定影格標籤• 設定影格註解

動畫屬性設定• 本章範例共有

28 格影格 , 影格速率設定為 6fps 。執行『修改 / 文件』命令可檢視的文件屬性設定：

圖層與動畫配置• 完成最重要的動態按鈕元件後 , 再加入一

小段動畫供接下來的 ActionScript 利用。• 你可以繼續使用上例進行練習 , 或開啟練

習檔 21-learn1.fla, 檔案中我們已完成按鈕及圖層安排的檔案 , 請繼續進行如下的動畫設計。

設定蜜蜂動畫

設定蜜蜂動畫1. 首先要製作蜜蜂 1 的動畫。由於需要參

考按鈕的位置 , 請先按下按鈕圖層的 鈕 , 並將該圖層鎖定 , 使按鈕圖層只顯示外框 , 且無法被更改。

設定蜜蜂動畫2. 在蜜蜂 1 圖層的影格 10 新增關鍵影格 ,

並從元件庫中將蜜蜂圖像元件拉曳至舞台上 , 與蜂巢重疊的位置；在相同圖層的影格 25 新增關鍵影格 , 再將蜜蜂元件拉曳至蜂巢的上方。

設定蜜蜂動畫3. 接著重新選取影格 10, 在其上按右鈕選

擇『建立補間動畫』命令 , 此段動畫會使蜜蜂從蜂巢後方飛上來。

4. 重複如上的步驟 , 再參考右圖的位置 , 分別製作蜜蜂 2 、蜜蜂 3 、蜜蜂 4 及蜜蜂 5 圖層的移動補間動畫。

設定蜜蜂動畫

設定底圖動畫• 再來要設定底圖圖層的動畫。請在底圖圖

層的影格 24 新增關鍵影格 , 然後將底圖從元件庫拉曳至舞台上 , 位置則與舞台完全吻合。接著利用屬性面板使底圖元件顯示為完全透明。

設定底圖動畫

設定底圖動畫

設定底圖動畫• 同樣在底圖圖層的影格 28 新增關鍵影格 ,

由屬性面板將顏色設定為無 , 並選取影格 24 在其上按右鈕 , 選擇『建立移動補間動畫』命令 , 表示此段動畫將會由影格 24 的完全透明 , 漸變至影格 28 的完全不透明。

設定底圖動畫

設定影格標籤• 我們要準備進入設定動作的階段了 , 不過

在介紹動作 (Actions) 設定之前 , 先來了解一下影格標籤 (Frame Label) 與註解。

• 首先說明影格標籤 , 在關鍵影格 ( 或空白關鍵影格 ) 上設定影格標籤的主要功用 , 是讓你替關鍵影格取個容易辨識的名字 , 這樣在設定動作時 , 便能利用影格標籤來指定目標影格。

設定影格標籤• 若是尚未做好按鈕元件及上述的動畫 , 請

開啟練習檔 21-learn2.fla 來設定影格標籤：

設定影格標籤

設定影格標籤

設定影格註解• 利用雙斜線符號 "//" 再加上簡短說明文字 ,

可以設定影格的註解 , 其目的是要每一個需要修改或維護此動畫的人都能一目瞭然 , 清楚影格的作用何在 , 以方便工作的進行。

• 影格註解的設定方式其實和設定影格標籤相同 , 只是在說明文字前加上雙斜線 "//" 方便與一般的影格標籤做區別。請選取蜜蜂 2 圖層的影格 10 , 我們要在影格 10 加上影格註解︰

設定影格註解

21-5 加入 ActionScript 與行為指令

• 本節要開始進行範例的 ActionScript 及行為指令設定 , 請接續上一節的操作 , 把 ActionScript 及行為指令設定完成。

設定說明• 影格 10~24 是一段 5 隻蜜蜂飛出的動畫 ,

這段動畫過程是要按下按鈕才會播放。由此可分析出 2 個重點︰– 動畫必須在一開始 , 也就是影格 1 時停住 ,

等待使用者做按鈕的動作。– 按鈕必須等到使用者按下後 , 才開始播放動畫。

設定說明• 針對上述第 1 點 , 我們可以在整個動畫的

影格 1 設置一個使動畫停住的 ActionScript ；第 2 點就要在按鈕上設置行為指令 , 來控制按下按鈕後的動畫播放。

設定讓動畫停在第 1 格的 ActionScript

• 我們先設置讓動畫停在影格 1 的 ActionScript 。請選取 Actions 圖層的影格 1, 然後開啟動作面板︰

設定讓動畫停在第 1 格的 ActionScript

設定按鈕元件的行為指令• 接著我們透過行為指令面板來加入滑鼠事

件 , 讓按下按鈕並放開滑鼠後 , 會接續播放蜜蜂飛出的動畫。請選取動畫中的按鈕實體 , 並開啟行為指令面板如下操作：

設定按鈕元件的行為指令

設定按鈕元件的行為指令

設定按鈕元件的行為指令• 回到行為指令面板 , 就會看到我們設定好

的按鈕動作了：

設定按鈕元件的行為指令

設定按鈕元件的行為指令• 設定完成後若打開動作面板 , 會發現其實剛才的設定已經轉換成 ActionScript 了 , 完全不用我們動手撰寫指令 , 這就是使用行為指令面板最大的好處。

設定按鈕元件的行為指令

設定按鈕元件的行為指令• 在此範例中我們使用影格標籤來指定目標影

格 , 也可以利用影格數來指定目標影格 , 其結果是相同的。但使用影格標籤的好處是當影格增減後 , 影格標籤會跟著影格移動；若用影格數來指定目標影格 , 一旦影格有了增減變化 , 就得重新指定目標影格。所以我們建議使用影格標籤來指定目標影格。

• 到此為止 , 本章範例就完成了。你可以按下 [Ctrl] + [Enter] 鍵 , 測試動畫成果。