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

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

檢視範例】【下載範例

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

STEP1.
範例檔中已完成摩托車的動畫,是以多層影片片段元件安排各細節動畫,包括輪子轉動、搖晃與場景上的移動,藉由影片片段元件的實體名稱與左上角按鈕,達成動畫的切換控制。

raw-image

左上角四個按鈕實體名稱依序為stop1_btn~stop4_btn,場景上機車元件實體名稱為rock_mc(內時間軸安排晃動動畫),往內為mbike_mc(按二下進入內部編輯即可點取檢視),再往內輪子為w1_mc與w2_mc。

STEP2.
回到場景上影格1,點取【停止行走】按鈕,加上【滑鼠按鍵事件】,在動作面板上更改程式碼內容,任務代號stop1、執行內容【this.stop();】讓場景上時間軸停止,按下【CTRL】【ENTER】測試網頁動畫按下第一個按鈕即可停止行走。

raw-image

STEP3.
複製貼上完整stop1_btn的滑鼠按鍵事件程式碼內容成為stop2_btn的滑鼠按鍵事件程式碼,更改按鈕名稱stop2_btn、任務代號stop2、控制內容為【this.rock_mc.stop();】(場景上的rock_mc元件內時間軸停止,即是停止車子晃動動畫內容)。

raw-image

STEP4.
複製貼上完整stop2_btn的滑鼠按鍵事件程式碼內容成為stop3_btn的滑鼠按鍵事件程式碼,更改按鈕名稱stop3_btn、任務代號stop3、控制內容為:【this.rock_mc.mbike_mc.w1_mc.stop();】、【this.rock_mc.mbike_mc.w2_mc.stop();】
(場景上的rock_mc元件內-mbike_mc元件內-w1_mc與w2_mc元件內時間軸停止,即是停止輪子轉動動畫內容)。

raw-image

STEP5.
複製貼上完整stop3_btn的滑鼠按鍵事件程式碼內容成為stop4_btn的滑鼠按鍵事件程式碼,更改按鈕名稱stop4_btn、任務代號playAll、控制內容為前面三個按鈕控制內容改為play();播放動畫,即是全部啟動,完成此範例。

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
利用【前往影格並播放gotoAndPlay();】,配合包含動畫的頁面內容,即可完成動畫切換頁面的效果呈現網站頁面。 Step 1. 在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn~b5_btn,右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立
Thumbnail
2020/02/15
利用【前往影格並播放gotoAndPlay();】,配合包含動畫的頁面內容,即可完成動畫切換頁面的效果呈現網站頁面。 Step 1. 在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn~b5_btn,右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立
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
這件雕塑放置在台中市豐樂雕塑公園靠近向心路一側,最有趣之處在於:在靜態中表現動感。 將動態手勢和動作濃縮成靜態的作品,是需要高度技巧的。動感的雕塑往往能給觀賞者錯覺,讓人覺得作品中的人物即將開始動作。 動感的雕塑往往意在傳遞雕塑家的情感,好讓觀者產生共鳴。因而動作便是重點
Thumbnail
這件雕塑放置在台中市豐樂雕塑公園靠近向心路一側,最有趣之處在於:在靜態中表現動感。 將動態手勢和動作濃縮成靜態的作品,是需要高度技巧的。動感的雕塑往往能給觀賞者錯覺,讓人覺得作品中的人物即將開始動作。 動感的雕塑往往意在傳遞雕塑家的情感,好讓觀者產生共鳴。因而動作便是重點
Thumbnail
在 After Effects 中,彈跳效果(Bounce Expression)可以讓層看起來像是受到彈簧或重力的影響,常用於創建自然的運動效果。這些表達式可以應用於位置(Position)、比例(Scale)、透明度(Opacity)等屬性。
Thumbnail
在 After Effects 中,彈跳效果(Bounce Expression)可以讓層看起來像是受到彈簧或重力的影響,常用於創建自然的運動效果。這些表達式可以應用於位置(Position)、比例(Scale)、透明度(Opacity)等屬性。
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳
Thumbnail
在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳
Thumbnail
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
Thumbnail
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
Thumbnail
【檢視範例】【範例下載】 關於逐格動畫最常使用的時機,其實就是當無法以補間動畫方式來呈現的動畫,就得退而求其次的以逐格動畫呈現,即是逐一安排關鍵影格的動畫內容來呈現出動畫,當然就需要搭配適當的變形編輯與動畫內容的準備。 目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線,製作蝴蝶循移動軌跡飛
Thumbnail
【檢視範例】【範例下載】 關於逐格動畫最常使用的時機,其實就是當無法以補間動畫方式來呈現的動畫,就得退而求其次的以逐格動畫呈現,即是逐一安排關鍵影格的動畫內容來呈現出動畫,當然就需要搭配適當的變形編輯與動畫內容的準備。 目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線,製作蝴蝶循移動軌跡飛
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News