Animate CC 頁面動畫切換效果

閱讀時間約 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動畫與互動效果
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放,若是有包含漸變動畫內容,則是使用【前往影格並播放gotoAndPlay();】,且可以在關鍵影格上設定影格標籤,用影格標籤來控制播放。  STE
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放。 STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件,並均加上實體名稱,依序為【stop_btn】【play_btn】【skip_bt
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素,其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API,就可以透過
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成(非ActionScript),而可以接受JavaScript控制的元件有【影片片段元件 】與【按鈕元件】,二者差別在於【按鈕元件】有預設
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放,若是有包含漸變動畫內容,則是使用【前往影格並播放gotoAndPlay();】,且可以在關鍵影格上設定影格標籤,用影格標籤來控制播放。  STE
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放。 STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件,並均加上實體名稱,依序為【stop_btn】【play_btn】【skip_bt
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素,其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API,就可以透過
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成(非ActionScript),而可以接受JavaScript控制的元件有【影片片段元件 】與【按鈕元件】,二者差別在於【按鈕元件】有預設
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。