Animate CC 頁面動畫切換效果

更新於 2020/02/15發佈於 2020/02/15閱讀時間約 1 分鐘

利用【前往影格並播放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動畫與互動效果

即將進入廣告，捲動後可繼續閱讀

為什麼會看到廣告

#javaScript互動

哩老師的沙龍Animate CC 網頁動畫與JS互動javaScript互動

哩老師的沙龍

29會員

129內容數

多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~

留言0

查看全部

發表第一個留言支持創作者！

哩老師的沙龍的其他內容

Animate CC 前往影格並播放切換動畫內容

利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放，若是有包含漸變動畫內容，則是使用【前往影格並播放gotoAndPlay();】，且可以在關鍵影格上設定影格標籤，用影格標籤來控制播放。 STE

#javaScript互動

Animate CC 按鈕與時間軸瀏覽控制

利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放。 STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件，並均加上實體名稱，依序為【stop_btn】【play_btn】【skip_bt

#javaScript互動

Animate CC 加上互動控制與程式碼片段

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素，其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API，就可以透過

#javaScript互動