用Dreamweaver實現(xiàn)飄浮光球特效_Dreamweaver教程
第一步:預(yù)備一張圖片作為背景圖,大小為240x180。
第二步:在頁面中建立層layer1,大小和所選的背景圖片一致,然后把背景圖插入這個層內(nèi)。
第三步:再建立一個層layer2,這個層將被制作成漂浮的光球。層的大小就是球的大小,位置重疊在層layer1上,其余的層屬性均采用默認(rèn)值。
第四步:讓層layer2動起來。將層layer2拖曳至?xí)r間軸,然后在該層的右鍵菜單中選擇“記錄路徑”,接著用鼠標(biāo)拖曳層畫出一條閉和路徑,這個路徑就是光球運動的軌跡。最后在時間軸中的“自動播放”和“循環(huán)”前打上勾,按F12鍵預(yù)覽一下,看看速度是否合適,如不滿足可以調(diào)節(jié)時間軸中幀的總數(shù)或者每秒播放的幀數(shù),直到符合要求為止。
第五步:控制動畫的播放。打開行為面板,選擇層layer1,選擇事件中的“停止時間軸”,再選擇動作中的“onMouseOver”,這樣就完成了一組動作事件,即鼠標(biāo)移至層layer1時動畫停止播放;然后再增加一組動作事件:事件為“播放時間軸”,動作為“onMouseOut”,即在鼠標(biāo)移出層layer1時,動畫接著播放。
第六步:使層可以拖動。打開行為面板,選擇事件中的“拖動層”,將可被拖動的層確定為layer2,這樣層layer2也就是光球就可以在網(wǎng)頁中任意拖動了。
第七步:制作光球。打開時間軸,選擇首幀,在其右鍵菜單中選擇“添加行為”,這時就打開了行為面板,選擇事件中的“改變屬性”,這時出現(xiàn)“改變屬性”對話框,在“對象類型”下拉菜單中選則“div”即層,“命名對象”選擇“l(fā)ayer2”,“屬性”選擇“style.filter”,在“新的值”框中輸入下列代碼:
mask(color=#ffffff) alpha(opacity=100,style=2)
這里用了兩個濾鏡,可以產(chǎn)生光球效果,最后“確定”。
第八步:使光球變色。在時間軸中找?guī)滋幰�,按照第七步的方法設(shè)置動作事件,注重將mask濾鏡的color值改成你喜歡的顏色就可以了。
好了,現(xiàn)在大功告成,趕緊存盤看看效果吧!
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Javascript 表單之間的數(shù)據(jù)傳遞
- Dreamweaver MX 2004從零開始
- Dreamweaver網(wǎng)頁制作技巧
- Dreamweaver開發(fā)ASP實例視頻教程準(zhǔn)備
- Dreamweaver MX進(jìn)階教程(十四)使用server-side include(服務(wù)器端包括)
- 網(wǎng)頁制作 用Dreamweaver制作細(xì)邊表格
- DW2004 中文亂碼解決方案 [1]
- Dreamweaver網(wǎng)頁制作超級技巧36則
- Dreamweaver網(wǎng)頁制作教程:定義站點
- 用Dreamweaver插入網(wǎng)頁背景音樂的方法
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver實現(xiàn)飄浮光球特效
。