Animate CC 頁面動畫切換效果
閱讀時間約 1 分鐘
利用【前往影格並播放gotoAndPlay();】，配合包含動畫的頁面內容，即可完成動畫切換頁面的效果呈現網站頁面。
Step 1.
在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn～b5_btn，右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立圖層，影格1-20為開場動畫，其餘五個內頁均於個別圖層上安排補間動畫作為頁面切換時表現，且每個內頁開始影格均加上影格標籤p1~p5供程式碼控制使用。
在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn～b5_btn，右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立圖層，影格1-20為開場動畫，其餘五個內頁均於個別圖層上安排補間動畫作為頁面切換時表現，且每個內頁開始影格均加上影格標籤p1~p5供程式碼控制使用。
STEP2.
移動播放磁頭至影格20處，即是首頁內容所在位置，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】，讓首頁動畫播放完自動停止，並自動新增Actions圖層與開啟動作面板(視窗>動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。
移動播放磁頭至影格20處，即是首頁內容所在位置，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】，讓首頁動畫播放完自動停止，並自動新增Actions圖層與開啟動作面板(視窗>動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。
並複製此關鍵影格至40、60、80、100、120等五個頁面內容完整出現時。
STEP2.
再次移動播放磁頭至影格20處，點取場景上第一個按鈕元件，加上【滑鼠按鍵事件】，在動作面板上更改程式碼內容，任務代號page1、執行內容【this.gotoAndPlay("p1");】(前往影格標籤p1並播放)，按下【CTRL】【ENTER】測試網頁動畫按下第一個按鈕即可包含動畫換頁的效果。
再次移動播放磁頭至影格20處，點取場景上第一個按鈕元件，加上【滑鼠按鍵事件】，在動作面板上更改程式碼內容，任務代號page1、執行內容【this.gotoAndPlay("p1");】(前往影格標籤p1並播放)，按下【CTRL】【ENTER】測試網頁動畫按下第一個按鈕即可包含動畫換頁的效果。
STEP3.
複製貼上完整b1_btn的滑鼠按鍵事件程式碼內容成為b2-b5的滑鼠按鍵事件程式碼，依序更改按鈕名稱、任務代號、前往影格標籤等。
複製貼上完整b1_btn的滑鼠按鍵事件程式碼內容成為b2-b5的滑鼠按鍵事件程式碼，依序更改按鈕名稱、任務代號、前往影格標籤等。
再複製貼上完整b5_btn的滑鼠按鍵事件程式碼內容成為home鍵的滑鼠按鍵事件程式碼，更改按鈕名稱home_btn、任務代號home、前往影格編號0，完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。