發新話題

Flash製作實例 - 《網頁製作技巧》立體動感按鈕

Flash製作實例 - 《網頁製作技巧》立體動感按鈕

●預覽成品:

訪客無法瀏覽此圖片或連結,請先 註冊登入會員


●逐步說明:
  1)選擇菜單File->New,創建一個新電影。
  2)選擇菜單Insert->New Symbol,彈出圖符屬性對話框,輸入圖符名為helf,選擇Movie Clip,

設置完畢,點擊OK,進入圖符編輯模式。
  3)選擇菜單View->Grid和菜單View->Snap,

打開網格和捕捉功能。
  4)選擇工具欄中矩形工具,將其參數欄中的線框設置成無線框,填充顏色設置成淡紅色。

繪製一正方形為如圖所示:

  5)將矩形參數欄中的填充顏色設置得深一點,在正方形的上方繪出一長方形,

用箭頭工具拖動矩形上邊的兩個端點,使它變成平行四邊形。

  6)將矩形參數欄中的填充顏色設置得更深一點,用同樣的方法繪製出平行四邊形為如圖所示:

  7)在第15幀處插入一關鍵幀,選擇正方形圖片,調整其位置為如圖所示:將多餘部分刪除。

  8)用鼠標右鍵點擊第1幀,在彈出的菜單中選擇Properties項,彈出幀屬性對話框,切換到Tweening選項卡,選擇Shape選項,

設置完畢,點擊OK按鈕。
  9)設置第15幀的Actions為:Stop。
  10)點擊圖層名稱Layer1,將所有幀全部選中,用鼠標右鍵點擊被選中的任意一幀,從彈出的菜單中選擇Copy Frames,

將所有幀都複製到剪貼板中。
  11)選擇菜單Insert->New Symbol,彈出新建圖符對話框,輸入圖符名為helf1,選擇Movie Clip項,

設置完畢,點擊OK按鈕。
  12)用鼠標右鍵點擊第1幀,從彈出的菜單中選擇Paste Frames。

  13)點擊圖層名稱Layer1,選擇菜單Modify->Frames->Reverse,

將動畫倒過來。刪除第1幀的Actions:stop,設置最後一幀的Actions為:stop。

  14)選擇菜單Insert->New Symbol,在彈出的新建圖符對話框中輸入圖符名為btn,選擇Movie Clip項,設置完畢,點擊OK按鈕。進入按鈕編輯模式。
  15)製作按鈕為如圖所示:

  16)點擊等時線窗口左上方的按鈕,切換到場景1。
  17)從圖符資料庫中拉入圖符helf和helf1,按鍵盤上的Ctrl+K組合鍵,彈出對齊對話框,選擇上對齊和右對齊,

設置完畢,點擊OK按鈕。

分別設置它們的實體名稱為:helf和helf1。
  18)新建圖層Layer2,從圖符資料庫中拉入圖符按鈕btn,適當調整其位置。   

  19)雙擊Layer2的第1幀,設置其Actions為:
Set Property ("/helf1", Visibility) = "0"
Begin Tell Target ("/helf")
 Go to and Stop (1)
End Tell Target
Stop
  表示電影一開始播放時,Movie Clip:helf1不可見,並停留在Movie Clip:helf的第1幀。
  20)打開按鈕btn的Actions選項卡,輸入程序為:
On (Roll Over)
 Begin Tell Target ("/helf")
  Set Property ("/helf1", Visibility) = "0"
  Set Property ("/helf", Visibility) = "1"
  Go to and Play (1)
 End Tell Target
End On
On (Roll Out)
 Begin Tell Target ("/helf1")
  Set Property ("/helf", Visibility) = "0"
  Set Property ("/helf1", Visibility) = "1"
  Go to and Play (1)
 End Tell Target
End On
  表示當鼠標在按鈕上時,設置Movie Clip:helf1不可見,Movie Clip:helf可見,並從Movie Clip:helf的第1幀開始播放。 當鼠標不在按鈕上時,設置Movie Clip:helf不可見,Movie Clip:helf1可見,並從Movie Clip:helf1的第1幀開始播放。
  21)至此,立體動感製作完畢。

TOP

回個帖先 ...

感謝無私分享 ...

努力吸收中 ...

TOP

感謝大大的分享...
摸索...

TOP

我是新手,正在學習做網頁。先回覆再慢慢看,謝謝您的分享!

TOP

真利害.到程式區寫了...

TOP

= =看不懂....,板大可否用中文版?我用的是CS3中文(英文不好SORRY)

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。