Animate CC 按鈕元件
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件
】與【按鈕元件】，二者差別在於【按鈕元件】有預設內建的滑上動作，且滑上動作還可以加入影片片段元件動畫，讓按鈕更具動畫效果，是傳統網頁JavaScript較不好表現的，而使用Animate CC不但不需要全部自行撰寫相關程式，也更可以讓設計人員輕鬆做出包含動畫效果的互動。
1. 建立按鈕元件 Step1.
開啟網頁(HTML5 Canvas)的格式的空白檔案，執行 [插入 新增元件]，選擇類型為『按鈕』，進入按鈕元件編輯模式。
Step2.
時間軸上有按鈕元件的四個狀態，依序『插入關鍵影格』建立每個狀態的按鈕內容。 一般：正常按鈕顯示狀態。
滑入：滑鼠移至按鈕上方時顯示的狀態。
按下：滑鼠移至按鈕上方並按下時顯示的狀態。
感應區：感應有效範圍，建議需包含整個按鈕內容，並不顯示。
回到場景，將按鈕元件置入場景中，按下【CTRL】【ENTER】即可檢視按鈕元件，並檢測滑鼠滑上、按下、滑開等結果。
2.建立隱形按鈕 重新插入新增按鈕元件，直接在感應區影格插入關鍵影格，並繪製做為感應區的色塊，僅加入感應區內容的按鈕稱做為隱形按鈕，回到場景上置入隱形按鈕即可檢視到按鈕為淺藍色且預覽時為隱形的。
3.建立動態按鈕 可將要表現在滑上時的動畫效果安排在影片片段元件內，再進到按鈕元件內，新增圖層並於滑上插入關鍵影格，再將影片片段元件加入此滑上影格。
回到場景上即可檢視到按鈕滑上時的影片片段元件動畫內容。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
重新插入新增按鈕元件，直接在感應區影格插入關鍵影格，並繪製做為感應區的色塊，僅加入感應區內容的按鈕稱做為隱形按鈕，回到場景上置入隱形按鈕即可檢視到按鈕為淺藍色且預覽時為隱形的。
3.建立動態按鈕 可將要表現在滑上時的動畫效果安排在影片片段元件內，再進到按鈕元件內，新增圖層並於滑上插入關鍵影格，再將影片片段元件加入此滑上影格。
回到場景上即可檢視到按鈕滑上時的影片片段元件動畫內容。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
分享至
成為作者繼續創作的動力吧！
作者的相關文章
你可能也想看
- 「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！
- 11/20 NVDA財報前Preview, 財報前股價波動走勢觀察
- 維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比
- Animate 06
- Animate 05
- Animate 04
- Animate 03
- Animate 02
- Unity Component | Animator Play and Transition
- Unity Animation | 3D Character and Animation
- Unity Animation | 高階程式參數控制
- Unity Animation | 簡易程式控制
發表回應
成為會員 後即可發表留言
© 2024 vocus All rights reserved.