1 / 32

21-4 設定影格標籤與註解

21-4 設定影格標籤與註解. 動畫屬性設定 圖層與動畫配置 設定影格標籤 設定影格註解. 動畫屬性設定. 本章範例共有 28 格影格 , 影格速率 設定為 6fps 。執行 『 修改 / 文件 』 命令可檢視的文件屬性設定：. 圖層與動畫配置. 完成最重要的動態按鈕元件後 , 再加入一小段動畫供接下來的 ActionScript 利用。 你可以繼續使用上例進行練習 , 或開啟練習檔 21-learn1.fla, 檔案中我們已完成按鈕及圖層安排的檔案 , 請繼續進行如下的動畫設計。. 設定蜜蜂動畫. 設定蜜蜂動畫.

torsten-markku
Download Presentation

21-4 設定影格標籤與註解

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 動畫屬性設定 • 本章範例共有 28 格影格, 影格速率設定為 6fps。執行『修改/文件』命令可檢視的文件屬性設定：

  3. 圖層與動畫配置 • 完成最重要的動態按鈕元件後, 再加入一小段動畫供接下來的 ActionScript 利用。 • 你可以繼續使用上例進行練習, 或開啟練習檔 21-learn1.fla, 檔案中我們已完成按鈕及圖層安排的檔案, 請繼續進行如下的動畫設計。

  4. 設定蜜蜂動畫

  5. 設定蜜蜂動畫 • 首先要製作蜜蜂 1的動畫。由於需要參考按鈕的位置, 請先按下按鈕圖層的 鈕, 並將該圖層鎖定, 使按鈕圖層只顯示外框, 且無法被更改。

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

  7. 設定蜜蜂動畫 • 接著重新選取影格 10, 在其上按右鈕選擇『建立補間動畫』命令, 此段動畫會使蜜蜂從蜂巢後方飛上來。 • 重複如上的步驟, 再參考右圖的位置, 分別製作蜜蜂 2、蜜蜂 3、蜜蜂 4 及蜜蜂 5圖層的移動補間動畫。

  8. 設定蜜蜂動畫

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

  10. 設定底圖動畫

  11. 設定底圖動畫

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

  13. 設定底圖動畫

  14. 設定影格標籤 • 我們要準備進入設定動作的階段了, 不過在介紹動作(Actions) 設定之前, 先來了解一下影格標籤(Frame Label) 與註解。 • 首先說明影格標籤, 在關鍵影格 (或空白關鍵影格) 上設定影格標籤的主要功用, 是讓你替關鍵影格取個容易辨識的名字, 這樣在設定動作時, 便能利用影格標籤來指定目標影格。

  15. 設定影格標籤 • 若是尚未做好按鈕元件及上述的動畫, 請開啟練習檔 21-learn2.fla 來設定影格標籤：

  16. 設定影格標籤

  17. 設定影格標籤

  18. 設定影格註解 • 利用雙斜線符號 "//" 再加上簡短說明文字, 可以設定影格的註解, 其目的是要每一個需要修改或維護此動畫的人都能一目瞭然, 清楚影格的作用何在, 以方便工作的進行。 • 影格註解的設定方式其實和設定影格標籤相同, 只是在說明文字前加上雙斜線 "//" 方便與一般的影格標籤做區別。請選取蜜蜂 2圖層的影格 10 , 我們要在影格10 加上影格註解︰

  19. 設定影格註解

  20. 21-5 加入ActionScript 與行為指令 • 本節要開始進行範例的 ActionScript 及行為指令設定, 請接續上一節的操作, 把 ActionScript 及行為指令設定完成。

  21. 設定說明 • 影格 10~24 是一段 5 隻蜜蜂飛出的動畫, 這段動畫過程是要按下按鈕才會播放。由此可分析出 2 個重點︰ • 動畫必須在一開始, 也就是影格 1 時停住, 等待使用者做按鈕的動作。 • 按鈕必須等到使用者按下後, 才開始播放動畫。

  22. 設定說明 • 針對上述第 1 點, 我們可以在整個動畫的影格 1 設置一個使動畫停住的 ActionScript ；第 2 點就要在按鈕上設置行為指令, 來控制按下按鈕後的動畫播放。

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

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

  25. 設定按鈕元件的行為指令 • 接著我們透過行為指令面板來加入滑鼠事件, 讓按下按鈕並放開滑鼠後, 會接續播放蜜蜂飛出的動畫。請選取動畫中的按鈕實體, 並開啟行為指令面板如下操作：

  26. 設定按鈕元件的行為指令

  27. 設定按鈕元件的行為指令

  28. 設定按鈕元件的行為指令 • 回到行為指令面板, 就會看到我們設定好的按鈕動作了：

  29. 設定按鈕元件的行為指令

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

  31. 設定按鈕元件的行為指令

  32. 設定按鈕元件的行為指令 • 在此範例中我們使用影格標籤來指定目標影格, 也可以利用影格數來指定目標影格, 其結果是相同的。但使用影格標籤的好處是當影格增減後, 影格標籤會跟著影格移動；若用影格數來指定目標影格, 一旦影格有了增減變化, 就得重新指定目標影格。所以我們建議使用影格標籤來指定目標影格。 • 到此為止, 本章範例就完成了。你可以按下 [Ctrl] + [Enter] 鍵, 測試動畫成果。

More Related