Animate CC 頁面動畫切換效果

發佈於Animate CC 網頁動畫與JS互動

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

raw-image

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

利用【前往影格並播放gotoAndPlay();】，配合包含動畫的頁面內容，即可完成動畫切換頁面的效果呈現網站頁面。

Step 1.
在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn～b5_btn，右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立圖層，影格1-20為開場動畫，其餘五個內頁均於個別圖層上安排補間動畫作為頁面切換時表現，且每個內頁開始影格均加上影格標籤p1~p5供程式碼控制使用。

raw-image

STEP2.
移動播放磁頭至影格20處，即是首頁內容所在位置，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】，讓首頁動畫播放完自動停止，並自動新增Actions圖層與開啟動作面板(視窗>動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。

raw-image

並複製此關鍵影格至40、60、80、100、120等五個頁面內容完整出現時。

raw-image

STEP2.
再次移動播放磁頭至影格20處，點取場景上第一個按鈕元件，加上【滑鼠按鍵事件】，在動作面板上更改程式碼內容，任務代號page1、執行內容【this.gotoAndPlay("p1");】(前往影格標籤p1並播放)，按下【CTRL】【ENTER】測試網頁動畫按下第一個按鈕即可包含動畫換頁的效果。

raw-image

STEP3.
複製貼上完整b1_btn的滑鼠按鍵事件程式碼內容成為b2-b5的滑鼠按鍵事件程式碼，依序更改按鈕名稱、任務代號、前往影格標籤等。

raw-image

再複製貼上完整b5_btn的滑鼠按鍵事件程式碼內容成為home鍵的滑鼠按鍵事件程式碼，更改按鈕名稱home_btn、任務代號home、前往影格編號0，完成此範例。

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

#javaScript互動

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

留言

留言分享你的想法！

哩老師的沙龍

29會員

129內容數

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

哩老師的沙龍的其他內容

2020/02/15

Animate CC 動態產品介紹互動設計

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。 Step1. 點取介紹內容並設定實體名稱『all_mc』。進入到全部內容元件內，點取上方介紹內容設定實

2020/02/15

Animate CC 動態產品介紹互動設計

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。 Step1. 點取介紹內容並設定實體名稱『all_mc』。進入到全部內容元件內，點取上方介紹內容設定實

2020/02/15

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

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

2020/02/15

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

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

2020/02/15

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

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

2020/02/15

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

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

你可能也想看

Dr HI的眼科沙龍

光的選擇，就是視力的選擇— Philips 飛利浦 A5 軒博全光譜智能LED護眼檯燈

大家好，我是一名眼科醫師，也是一位孩子的媽身為眼科醫師的我，我知道視力發展對孩子來說有多關鍵。每到開學季時，診間便充斥著許多憂心忡忡的家屬。近年來看診中，兒童提早近視、眼睛疲勞的案例明顯增加，除了3C使用過度，最常被忽略的，就是照明品質。然而作為一位媽媽，孩子能在安全、舒適的環境

#momo購物網#Philips飛利浦#軒博

2025/04/30

Dr HI的眼科沙龍

光的選擇，就是視力的選擇— Philips 飛利浦 A5 軒博全光譜智能LED護眼檯燈

大家好，我是一名眼科醫師，也是一位孩子的媽身為眼科醫師的我，我知道視力發展對孩子來說有多關鍵。每到開學季時，診間便充斥著許多憂心忡忡的家屬。近年來看診中，兒童提早近視、眼睛疲勞的案例明顯增加，除了3C使用過度，最常被忽略的，就是照明品質。然而作為一位媽媽，孩子能在安全、舒適的環境

#momo購物網#Philips飛利浦#軒博

2025/04/30

逗點的沙龍

去日本自助旅行要帶多少日幣現金？最新經驗談

提供一條簡單公式、一套盤點思路，幫助你快速算出去日本自助旅遊需要準備多少日幣現金！

#日本#去日本旅遊要帶多少現金#日本自助旅行現金

2024/05/27

逗點的沙龍

去日本自助旅行要帶多少日幣現金？最新經驗談

提供一條簡單公式、一套盤點思路，幫助你快速算出去日本自助旅遊需要準備多少日幣現金！

#日本#去日本旅遊要帶多少現金#日本自助旅行現金

2024/05/27

哩老師的沙龍

Animate CC 動態產品介紹互動設計

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。 Step1. 點取介紹內容並設定實體名稱『all_mc』。進入到全部內容元件內，點取上方介紹內容設定實

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 動態產品介紹互動設計

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。 Step1. 點取介紹內容並設定實體名稱『all_mc』。進入到全部內容元件內，點取上方介紹內容設定實

#javaScript互動

2020/02/15

哩老師的沙龍

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

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

#javaScript互動

2020/02/15

哩老師的沙龍

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

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 頁面動畫切換效果

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

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 頁面動畫切換效果

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

#javaScript互動

2020/02/15

哩老師的沙龍

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

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

#javaScript互動

2020/02/15

哩老師的沙龍

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

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

#javaScript互動

2020/02/15

哩老師的沙龍

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

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

#javaScript互動

2020/02/15

哩老師的沙龍

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

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

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕元件

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件】與【按鈕元件】，二者差別在於【按鈕元件】有預設

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕元件

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件】與【按鈕元件】，二者差別在於【按鈕元件】有預設

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 書寫中文字動畫

【檢視範例】【下載範例】在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 書寫中文字動畫

【檢視範例】【下載範例】在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

#AnimateCC動畫類型#動畫基礎

2020/02/05

哩老師的沙龍

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

#AnimateCC動畫類型#動畫基礎

2020/02/05

哩老師的沙龍

Animate CC環境設定與開啟網頁動畫新檔

1.設定環境第一次開啟Animate cc新版本後，預設畫面為深色配色，對於深色介面，可以執行【編輯 > 偏好設定】，設定使用者介面。 2.開啟網頁動畫新檔開新檔案請由開始畫面上選取【網頁】分類，所製作出來的動畫格式才是HTML5 Canvas+javascript的網頁格式，也可以執行[ 檔

2020/02/04

哩老師的沙龍

Animate CC環境設定與開啟網頁動畫新檔

1.設定環境第一次開啟Animate cc新版本後，預設畫面為深色配色，對於深色介面，可以執行【編輯 > 偏好設定】，設定使用者介面。 2.開啟網頁動畫新檔開新檔案請由開始畫面上選取【網頁】分類，所製作出來的動畫格式才是HTML5 Canvas+javascript的網頁格式，也可以執行[ 檔

2020/02/04

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News