Dreamweaver實現(xiàn)漫天花雨效果

本文格式為Word版，下載可任意編輯——Dreamweaver實現(xiàn)漫天花雨效果

淡藍(lán)色的天空下，一朵朵花瓣隨風(fēng)飄下，逐漸的在屏幕中飄蕩。你一定要說這種效果用FLASH可以實現(xiàn)。其實用DREAMWEAVER也可以很輕松的實現(xiàn)！

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

首先用Firework或Imageready一類的軟件制作出幾幅動態(tài)的GIF花瓣圖片來。以ImageReady3.0為例子。按Ctrl+N新建一個文件，大小100*100左右，背風(fēng)景可根據(jù)網(wǎng)頁的背景自行設(shè)定。按Ctrl+Shift+N新建一層，取名Flower1，用勾畫工具（PolygonalLassoTool），勾畫出一個花瓣的形狀，如圖1所示。然后將前風(fēng)景設(shè)為粉紅色（顏色代碼為：FF99FF），按Edit/Fill填充，然后在層面版的Flower1上按右鍵，選擇LayerStyle/Stroke，如圖2所示。在彈出的Stroke面板里的選擇色調(diào)的地方選擇一個比方才的粉紅略深的顏色，(顏色代碼為：C764B4)，Size選擇為1，這樣花瓣就被描邊，看上去更真實一些。這樣一個花瓣就制作完成了。

下面我們來讓花瓣動起來。將Flower1復(fù)制一層，在層上按右鍵，選擇DuplicateLayer。取名為Flower2。開啟Imageready的動畫面板，操作方式為：Window/ShowAnimation，出現(xiàn)如圖3的動畫面板。按下最下面一排倒數(shù)其次個按紐，新建一個動畫影格?；氐讲⑦x中第一影格的位置，在層面板上將Flower2層隱蔽。操作方式為單擊層前的那個眼睛，如圖4所示。

然后在動畫面板上，選中其次影格的位置，回到層面板，顯示Flower2層，隱蔽Flower層。然后選中Flower2層，按Ctel+T，這時花瓣處于自由變換狀態(tài)，可以用鼠標(biāo)左右上下移動來改變花瓣的外形。如圖5所示。

將其次影格所顯示的Flower2層的花瓣用自由變換做一點小的變化。然后再用上面所陳述的方法，新建第三影格和Flower3層，再用自由變換做一些小的變化，依次可以做6層左右，注意最終一個影格與第一個影格的連續(xù)性。每一個影格里只能顯示相對的圖層，其余的圖層要隱蔽起來。

做完后，在動畫面板里，按住Ctrl鍵，將所有的影格全部選中，然后在0sec的地方按右鍵選擇每一個影格之間的間隔時間，建議不要超過0.1秒。這樣一個花瓣的動畫就完成了?？梢园磩赢嬅姘迳系牟シ沛I（那個三角形）來觀看你做的動畫花瓣?；ò瓴灰?guī)矩的在原地變換移動，按上述的方法做幾張大的，在100*100px，90*90px左右，用于近處的花瓣；也做幾張小的，在60*60px左右，用于遠(yuǎn)處的花瓣?？梢栽贗mageready里做好一個動畫，然后使用翻轉(zhuǎn)功能（EDIT/Transform/），讓圖片不同角度的翻轉(zhuǎn)，出現(xiàn)的就是不同角度的變化，這樣在做最終的效果的時候，就可以避免花瓣的單一性。

開啟Dreamweaver，按Ctrl+N新建一個Html文檔。然后按Insert/Layer，插入一個圖層，取名為"flower1'，在圖層中按InsertImage，插入我們方才所做的那幾幅圖片中的一幅，將圖層的大小變得和圖片的大小一樣，點擊選中該圖層（選中后一定要是圖6的樣子才是選中了圖層），確定選中圖層而不是圖片，然后選擇Modify/Timeline/AddobjecttoTimeline，此時該圖層會參與等時線，這時候等時線上會出現(xiàn)兩個空心的句號樣的圓圈，用直線連接起來，兩個圓圈表示是關(guān)鍵影格，確定了花瓣移動的軌跡。如圖7所示。

確定等時線里紅線在第一格的位置，然后在Dreamweaver的主面板里拖動圖層到右上角，這一步是確認(rèn)花瓣飄落的起點。再將等時線里的flower1層的最終一格拉到第60格的位置，然后確定那條紅線在第60格的位置，回到DW面板將flower1圖層拉到屏幕的左下角，這一步驟是確定圖片飄落的終點。注意確定起點和終點的時候，一定要看清紅線的位置，紅線的位置代表了你當(dāng)前再做第幾影格的操作。開始影格和終點影格一定要是關(guān)鍵影格。然后選中上方的Autoplay和Loop，如圖8所示，意思是自動運行和循環(huán)運行。這時候你可以按F12預(yù)覽一下，你已經(jīng)可以看到花瓣沿一條直線在運動了。

下面我們讓花瓣的運動顯得溫和一點，無規(guī)矩一點。在等時線面板里，在第15影格的地方單擊一下，確認(rèn)等時線里的紅線在第15格的位置，按右鍵，選擇addkeyfreme，如圖9所示，這時主面板的圖層會自動移到第15格應(yīng)當(dāng)走到的位置，拖動圖層到其他的地方（可以任意的拖動，取決于你想讓這個花瓣如何運動），這一步是確認(rèn)該圖層移動到第15影格的時候應(yīng)當(dāng)在什么地方。然后將紅線移到第30格、第45格的位置重復(fù)上面的動作，再按F12預(yù)覽一下，此時花瓣就呈不規(guī)矩的移動了。再次提醒，插入等時線的一定要是圖層而不是圖片，否則花瓣將不會移動。

依照上面的做法，我們再