作者:胡凱元老師

20120214pic00024.jpg    

     FLASH中的元件應用不只是單單用一個元件來完成一段小動畫,在元件中加入不同屬性的元件也可以讓元件更有變化,在使用者互動的方面也是如此。FLASH中的按鈕元件是最常用來放在動畫中達到使用者互動的物件之一,但在製作按鈕元件的時候,除了單純的文字、顏色的變換之外,也可以在按鈕元件中再加入圖像元件或影片片段元件讓按鈕有更豐富的變化。以下範例是使用元件置入元件,一層一層不同元件中使用不同效果,堆疊出單一元件無法達到的變化。

使用工具
§選取工具
§基本橢圓工具
§基本矩形工具
§自由變形工具
使用面板
§顏色面板
§對齊面板
§元件庫面板
§屬性面板
§時間軸面板
使用功能
§插入 > 傳統補間動畫
§插入 > 時間軸 > 影格 ( F5 )
§插入 > 時間軸 > 關鍵影格 ( F6 )
§插入 > 時間軸 > 空白關鍵影格 ( F7 )

1.檔案 > 開新檔案 > FLASH檔案 ( ACTIONSCRIPT 3.0 )。

20120214pic0000.jpg  
2. 元件庫面板 > 新增元件。名稱:FLAWER_PIC,類型:圖像。

20120214pic0001.jpg  
3.工具箱 > 基本橢圓工具 ; 顏色面板 > 填色:FF0000紅色,畫一個窄長的橢圓。
20120214pic0002.jpg  

> > 對齊面板 > 對齊舞台 > 水平置中
20120214pic0003.jpg  
4.工具箱 > 自由變形工具,改變變形中心點側舞台中心。

20120214pic0004.jpg  

變形面板 > 旋轉:45度 重製選取範圍並變形,製作八片花瓣。

20120214pic0005.jpg  
20120214pic0006.jpg  

5. 顏色面版 > 填色:FFFF00黃色。SHIFT繪製一個正圓並對齊至舞台中心央

20120214pic0007.jpg  

20120214pic0008.jpg

6. 元件庫面板 > 新增元件 ,名稱:FLAWER_MC,類型:影片片段。20120214pic0009.jpg

  
7. 時間軸 > 圖層1 > 影格1  ,置入元件FLOWER_PIC並對齊至舞台中央。
20120214pic00010.jpg  

8. 影格24
F6( 插入關鍵影格 ) 右鍵 > 建立移動補間動畫。

2012-2-14 下午 01-39-1400.jpg   2012-2-14 下午 01-39-3301.jpg  

屬性面板 > 旋轉 > 旋轉:1次、方向:順時針。

20120214pic00012.jpg

9. 元件庫面板 > 新增元件,名稱:FLAWER_BTN,類型:按鈕。

20120214pic00013.jpg      

  
10. 工具箱 > 基本矩形工具,顏色面板 > 筆畫:不填色、填色:339900綠色。

20120214pic00014.jpg  

繪製一個窄長矩形作葉梗,對齊面板 > 對齊舞台 > 水平置中、垂直齊上。

20120214pic00015.jpg  
11. 工具箱 > 基本橢圓工具,繪製二個窄長橢圓,任意旋轉。

20120214pic00016.jpg  

放在矩形兩邊作葉片。

20120214pic00017.jpg  
12. 時間軸 > 新增圖層 ;時間軸 > 圖層2 > 「一般」影格
置入FLOWER_PIC圖像元件,對齊至舞中央。

20120214pic00018.jpg  
13. 時間軸 > 新增圖層;時間軸 > 圖層3 > 「滑入」影格
置入FLOWER_MC影片片段元件,對齊至舞中央。

20120214pic00019.jpg  
14. 時間軸 > 圖層1 > 「感應區」影格,F7 ( 空白關鍵影格 )
20120214pic00020.jpg  
工具箱 > 基本矩形工具;顏色面板 > 填色:66FF00綠色。
( 感應區在輸出動畫時看不到圖像,所以用亮的顏色來提醒自己 )

20120214pic00021.jpg  
繪製一個跟圖像一樣大的矩形作感應區。

20120214pic00022.jpg  
15. 回到場景,將FLOWER_BTN按鈕元件置入舞台。

20120214pic00023.jpg
16. CTRL + ENTER 測試影片。

20120214pic00024.jpg 

2011-12-13-3.gif  

, , , ,

lccnetvip 發表在 痞客邦 PIXNET 留言(6) 人氣()


留言列表 (6)

發表留言
  • 旋轉吧!小花
  • 好詳細的教學喔,老師~你真內行!!
  • 感恩~~你人真棒XDD多來參觀喔

    lccnetvip 於 2012/02/16 08:59 回覆

  • 正義使者
  • 老師的教學真的很詳細~讓小弟能很容易上手~~讚讚讚
  • ^^對你有收穫有幫助那真讓人開心~~歡迎多來參觀^^

    lccnetvip 於 2012/02/20 13:44 回覆

  • 雅娜
  • 無痛上手!
    簡單易學!
    (= ̄ω ̄=) b
  • 哈ㄚ~~簡單易學~~謝謝你的留言

    lccnetvip 於 2012/02/20 13:41 回覆

  • 歐克歐克
  • *0* !很簡單明瞭的教學文內! 等等在來試試看~3q
  • 不客氣^^

    lccnetvip 於 2012/02/20 13:39 回覆

  • 你是我的花朵
  • 淺顯易懂~不錯的教學文耶
  • 感謝支持^^歡迎多來參觀

    lccnetvip 於 2012/02/20 13:37 回覆

  • 小菊花
  • 老師講解的真是棒,讓初學者可以快速上手,
    不管怎樣~真的需要天天練習,才有辦法越來越上手!
    勉勵自己囉 加油!
  • 加油~~~希望你能保持恆心~^^

    lccnetvip 於 2012/02/20 13:36 回覆