2020-02-15|閱讀時間 ‧ 約 2 分鐘

Animate CC 頁面動畫切換效果

利用【前往影格並播放gotoAndPlay();】,配合包含動畫的頁面內容,即可完成動畫切換頁面的效果呈現網站頁面。
Step 1. 在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn~b5_btn,右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立圖層,影格1-20為開場動畫,其餘五個內頁均於個別圖層上安排補間動畫作為頁面切換時表現,且每個內頁開始影格均加上影格標籤p1~p5供程式碼控制使用。
STEP2. 移動播放磁頭至影格20處,即是首頁內容所在位置,由程式碼片段 HTML5 Canvas 時間軸瀏覽 【在此影格停止】,讓首頁動畫播放完自動停止,並自動新增Actions圖層與開啟動作面板(視窗動作),按下【CTRL】【ENTER】測試網頁動畫即自動停止。
並複製此關鍵影格至40、60、80、100、120等五個頁面內容完整出現時。
STEP2. 再次移動播放磁頭至影格20處,點取場景上第一個按鈕元件,加上【滑鼠按鍵事件】,在動作面板上更改程式碼內容,任務代號page1、執行內容【this.gotoAndPlay("p1");】(前往影格標籤p1並播放),按下【CTRL】【ENTER】測試網頁動畫按下第一個按鈕即可包含動畫換頁的效果。
STEP3. 複製貼上完整b1_btn的滑鼠按鍵事件程式碼內容成為b2-b5的滑鼠按鍵事件程式碼,依序更改按鈕名稱、任務代號、前往影格標籤等。
再複製貼上完整b5_btn的滑鼠按鍵事件程式碼內容成為home鍵的滑鼠按鍵事件程式碼,更改按鈕名稱home_btn、任務代號home、前往影格編號0,完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.