Animate CC 按鈕元件

更新 發佈閱讀 2 分鐘
vocus|新世代的創作平台

檢視範例】【下載範例

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成(非ActionScript),而可以接受JavaScript控制的元件有【影片片段元件

】與【按鈕元件】,二者差別在於【按鈕元件】有預設內建的滑上動作,且滑上動作還可以加入影片片段元件動畫,讓按鈕更具動畫效果,是傳統網頁JavaScript較不好表現的,而使用Animate CC不但不需要全部自行撰寫相關程式,也更可以讓設計人員輕鬆做出包含動畫效果的互動。

1. 建立按鈕元件

Step1.
開啟網頁(HTML5 Canvas)的格式的空白檔案,執行 [插入 > 新增元件],選擇類型為『按鈕』,進入按鈕元件編輯模式。

vocus|新世代的創作平台

Step2.
時間軸上有按鈕元件的四個狀態,依序『插入關鍵影格』建立每個狀態的按鈕內容。

vocus|新世代的創作平台

回到場景,將按鈕元件置入場景中,按下【CTRL】【ENTER】即可檢視按鈕元件,並檢測滑鼠滑上、按下、滑開等結果。

vocus|新世代的創作平台

2.建立隱形按鈕

重新插入新增按鈕元件,直接在感應區影格插入關鍵影格,並繪製做為感應區的色塊,僅加入感應區內容的按鈕稱做為隱形按鈕,回到場景上置入隱形按鈕即可檢視到按鈕為淺藍色且預覽時為隱形的。

vocus|新世代的創作平台

3.建立動態按鈕

可將要表現在滑上時的動畫效果安排在影片片段元件內,再進到按鈕元件內,新增圖層並於滑上插入關鍵影格,再將影片片段元件加入此滑上影格。

vocus|新世代的創作平台

回到場景上即可檢視到按鈕滑上時的影片片段元件動畫內容。

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



留言
avatar-img
哩老師的沙龍
30會員
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
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放,若是有包含漸變動畫內容,則是使用【前往影格並播放gotoAndPlay();】,且可以在關鍵影格上設定影格標籤,用影格標籤來控制播放。  STE
Thumbnail
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放,若是有包含漸變動畫內容,則是使用【前往影格並播放gotoAndPlay();】,且可以在關鍵影格上設定影格標籤,用影格標籤來控制播放。  STE
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素,其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API,就可以透過
Thumbnail
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素,其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API,就可以透過
Thumbnail
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
利用【前往影格並播放gotoAndPlay();】,配合包含動畫的頁面內容,即可完成動畫切換頁面的效果呈現網站頁面。 Step 1. 在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn~b5_btn,右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立
Thumbnail
利用【前往影格並播放gotoAndPlay();】,配合包含動畫的頁面內容,即可完成動畫切換頁面的效果呈現網站頁面。 Step 1. 在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn~b5_btn,右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成(非ActionScript),而可以接受JavaScript控制的元件有【影片片段元件 】與【按鈕元件】,二者差別在於【按鈕元件】有預設
Thumbnail
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時,其中互動控制是以JavaScript架構來達成(非ActionScript),而可以接受JavaScript控制的元件有【影片片段元件 】與【按鈕元件】,二者差別在於【按鈕元件】有預設
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
Thumbnail
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News