用Dreamweaver實現漫天花雨效果_Dreamweaver教程

�牐燚reamweaver之所以能夠超過Frontpage而成為網頁設計師的首選設計工具，在于它對DHTML的強大設計功能，上面所說的效果，其實是DHTML的一種。但是使用Dreamweaver，你無須去編寫冗長的代碼，在DW的窗口里幾個拖放，就能輕松搞定。

�牐犑紫扔肍irework或Imageready一類的軟件制作出幾幅動態的GIF花瓣圖片來。以ImageReady3.0為例子。按Ctrl N 新建一個文件，大小100*100左右，背景色可根據網頁的背景自行設定。按Ctrl Shift N新建一層，取名Flower1，用勾畫工具（Polygonal Lasso Tool），勾畫出一個花瓣的外形，如圖1所示。然后將前景色設為粉紅色（顏色代碼為：FF99FF），按Edit / Fill 填充，然后在層面版的Flower1上按右鍵，選擇Layer Style / Stroke ，如圖2所示。在彈出的Stroke面板里的選擇色彩的地方選擇一個比剛才的粉紅略深的顏色，(顏色代碼為：C764B4)，Size選擇為1，這樣花瓣就被描邊，看上去更真實一些。這樣一個花瓣就制作完成了。

圖1

圖2

下面我們來讓花瓣動起來。將Flower1復制一層，在層上按右鍵，選擇Duplicate Layer。取名為Flower2。打開Imageready的動畫面板，操作方式為：Window / Show Animation，出現如圖3的動畫面板。按下最下面一排倒數第二個按紐，新建一個動畫影格。回到并選中第一影格的位置，在層面板上將Flower2層隱藏。操作方式為單擊層前的那個眼睛，如圖4所示。

圖3

圖4

�牐犎缓笤趧赢嬅姘迳希�選中第二影格的位置，回到層面板，顯示Flower2層，隱藏Flower層。然后選中Flower2層，按Ctel T，這時花瓣處于自由變換狀態，可以用鼠標左右上下移動來改變花瓣的外形。如圖5所示。

圖5

�牐爩⒌诙�影格所顯示的Flower2層的花瓣用自由變換做一點小的變化。然后再用上面所講述的方法，新建第三影格和Flower3層，再用自由變換做一些小的變化，依次可以做6層左右，注重最后一個影格與第一個影格的連續性。每一個影格里只能顯示相對的圖層，其余的圖層要隱藏起來。

�牐犠鐾旰螅�在動畫面板里，按住Ctrl鍵，將所有的影格全部選中，然后在0 sec的地方按右鍵選擇每一個影格之間的間隔時間，建議不要超過0.1秒。這樣一個花瓣的動畫就完成了。可以按動畫面板上的播放鍵（那個三角形）來觀看你做的動畫花瓣。花瓣不規則的在原地變換移動，按上述的方法做幾張大的，在100*100px，90*90px左右，用于近處的花瓣；也做幾張小的，在60*60px左右，用于遠處的花瓣。可以在Imageready里做好一個動畫，然后使用翻轉功能（EDIT / Transform /），讓圖片不同角度的翻轉，出現的就是不同角度的變化，這樣在做最后的效果的時候，就可以避免花瓣的單一性。

�牐牬蜷_Dreamweaver，按Ctrl N新建一個Html文檔。然后按Insert / Layer，插入一個圖層，取名為“flower1”，在圖層中按Insert Image，插入我們剛才所做的那幾幅圖片中的一幅，將圖層的大小變得和圖片的大小一樣，點擊選中該圖層（選中后一定要是圖6的樣子才是選中了圖層），確定選中圖層而不是圖片，然后選擇 Modify / Timeline / Add object to Timeline，此時該圖層會加入等時線，這時候等時線上會出現兩個空心的句號樣的圓圈，用直線連接起來，兩個圓圈表示是要害影格，確定了花瓣移動的軌跡。如圖7所示。