Animate CC 控制動態網頁畫面切換

哩老師

2020/02/15閱讀時間約 1 分鐘

【檢視範例】【下載範例】

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。

Step 1.
場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~ b5_btn】。

進入所有頁面元件內，即可檢視由傳統補間依序完成每個頁面滑入動畫(5pic元件水平滑動至各單元畫面)，在頁面滑入影格處加上影格標籤【p1 - p5】，頁面內容處時間點均已加上【this.stop( );】

Step 2.
點取 HOME 按鈕元件，由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】將原來 alert 動作指令更改為 this.all_mc.gotoAndPlay("p1");

Step 3.
複製此一個按鈕設定的控制內容，更改按鈕元件名稱、任務代號、設定內容，完成另外 4 個按鈕控制內容，即完成此範例。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

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

為什麼會看到廣告

#javaScript互動

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

哩老師的沙龍

29會員

161內容數

藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!

留言0

查看全部

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

哩老師的沙龍的其他內容

Animate CC 控制影片片段元件內時間軸播放

除了控制場景上時間軸的影格播放外，更可以控制影片片段元件內時間軸的播放，因此只要影片片段元件安排得當，並正確加上元件實體名稱，就可以做出更有互動性的動畫內容控制安排，請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫

#javaScript互動

Animate CC 頁面動畫切換效果

利用【前往影格並播放gotoAndPlay();】，配合包含動畫的頁面內容，即可完成動畫切換頁面的效果呈現網站頁面。 Step 1. 在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn～b5_btn，右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立

#javaScript互動

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互動