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

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

檢視範例】【下載範例

利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放。

STEP1.
在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件,並均加上實體名稱,依序為【stop_btn】【play_btn】【skip_btn】。

raw-image

至按鈕圖層影格180處,按下右鍵選擇執行【插入空白關鍵影格】,並置入元件庫內的replay按鈕元件,加入實體名稱為【replay_btn】。

raw-image

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

raw-image

STEP3.
繼續在影格1,點取場景上play按鈕並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】,即自動加入按鈕控制程式碼片段,請修改任務代號【playMV】與執行內容【this.play();】

raw-image

STEP4.
繼續在影格1,點取場景上stop按鈕並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】,即自動加入按鈕控制程式碼片段,請修改任務代號【stopMV】與執行內容【this.stop();】

raw-image

按下【CTRL】【ENTER】測試網頁動畫,即可測試play與stop二按鈕控制。

raw-image

STEP5.
複製貼上一份停止按鈕的完整程式碼片段,依序更改按鈕名稱【skip_btn】、任務代號【skipMV】、前往影格停止【this.gotoAndStop(179);】(動畫最後影格數為180,程式碼內容影格編號從 0 開始而非1,因此前往影格編號需減1為179)。

STEP6.
移動撥放磁頭至影格180處,由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】讓動畫撥放至此自動停止。

再點取replay按鈕,並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】,即自動加入按鈕控制程式碼片段,請修改任務代號【replayMV】與執行內容【this.gotoAndplay(1);】(至影格2播放)。

raw-image

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

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/15
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
2020/02/15
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
2020/02/15
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
Thumbnail
2020/02/15
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
Thumbnail
2020/02/15
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
2020/02/15
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
這篇內容,將會講解什麼是「do until」,以及與「do until」相關的知識。包括do until的簡介、break、continue。
Thumbnail
這篇內容,將會講解什麼是「do until」,以及與「do until」相關的知識。包括do until的簡介、break、continue。
Thumbnail
今天想分享一下我最近的UI設計練習,這次的練習主題是原型動態效果,雖然自己目前對動效很熟練了,但有一些效果實際上很少被使用,所以借此機會來試試看,也能維持自己的熟練度。
Thumbnail
今天想分享一下我最近的UI設計練習,這次的練習主題是原型動態效果,雖然自己目前對動效很熟練了,但有一些效果實際上很少被使用,所以借此機會來試試看,也能維持自己的熟練度。
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
在youtube上找尋前端的小專案來練習,就發現了這個不是很難,又可以讓我練習怎麼把javascript用在網頁裡的專案,於是就跟者影片做了一遍。當然,比起前一個寫遊戲的影片來說,可以說是輕鬆很多。
Thumbnail
在youtube上找尋前端的小專案來練習,就發現了這個不是很難,又可以讓我練習怎麼把javascript用在網頁裡的專案,於是就跟者影片做了一遍。當然,比起前一個寫遊戲的影片來說,可以說是輕鬆很多。
Thumbnail
有了這個插件,任何人都可以在不了解 JavaScript 的情況下,輕鬆製作點擊和觸碰遊戲。
Thumbnail
有了這個插件,任何人都可以在不了解 JavaScript 的情況下,輕鬆製作點擊和觸碰遊戲。
Thumbnail
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放。 STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件,並均加上實體名稱,依序為【stop_btn】【play_btn】【skip_bt
Thumbnail
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放。 STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件,並均加上實體名稱,依序為【stop_btn】【play_btn】【skip_bt
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News