當前位置:朝夕網 > 幫助中心 > 如何用DreamWeaver制作會移動的廣告條 >
     幫助導航

關于我們
版權聲明
閱讀服務條款
朝夕網贊助服務
聯系我們
友情鏈接
朝夕網發展歷史
關于QQ管家誤報朝夕網的
制作幫助
ie6下png站標制作的
如何查找自己需要的素材?
注冊朝夕圖片網的好處
如何使用朝夕banner
QQ郵箱如何使用本站生成
非IE瀏覽器如何保存圖片
廣告條制作基礎篇幫助信息
基礎知識
Banner在線制作有什
關于Aleo Flash
logo簡單介紹,一些關
制作工具Flash Ba
主頁Banner制作好幫
banner是什么意思?
banner常見尺寸,有
本站公告
新功能:部分圖片制作模板
朝夕banner在線制作
banner制作網密碼安
建議注冊會員使用廣告設計
本站暫未提供手工制作ba
歡迎淘寶客使用淘寶ban
設計教程
透明站標制作教程,如何制
適合菜鳥的初級banne
如何用DreamWeav
flash的as關于一個
老教材Fireworks
banner設計教程中的
如何制作吸引人的bann
網站banner橫幅設計

如何用DreamWeaver制作會移動的廣告條


標簽:DreamWeaver 廣告條 
你上很多網站會看見它頁面中有個飄來飄去的廣告條,鼠標移上去,還會變成另外的宣傳圖片。這個廣告條沒有占用頁面的空間,它獨立在頁面之上,的確是個發布廣告條的好方法。那么,這個會移動的廣告條到底是如何做成的呢?下面,請跟banner在線制作一步步學做,看完教材,你也就會自己做了。

做這個廣告條,要用到Macromedia DreamWeaver中的Layer(層)和Timeline(時間軸)功能,還得預備兩張大小基本相同的廣告圖片。我們已最新版本DreamWeaver4.0為例,制作移動的廣告條。

一、用DreamWeaver打開任意一個網頁,空缺頁也可。在菜單中選擇“插入Insert”->“層Layer”,即看到網頁中多了一個空缺Layer1,你也可以為他命名。再將光標點到空缺Layer1內,選擇“插入Insert”->“圖像Image”,插入你的廣告條的第一個圖片,調整層大小,使層盡可能與圖片大小相近,并設置圖片鏈接。然后把層移到動畫的起始位置。

二、在菜單欄選擇“修改Modify”->“時間軸Timeline”->“添加對象到時間軸Add object to Timeline”。點擊后,彈出對話框,告訴你只有圖象和層才能添加到時間軸。對話框按確定后,我們選中Layer(單擊層標記或層邊界,或用層面板選擇一層,當一個層被選中時,層邊界會顯示出調整大小手柄,按住鼠標左鍵不放,拖進時間軸動畫欄的第一頻道,即面板上豎寫1,2,3等等的“1”那行,時間軸里面馬上增加了一個默認的15幀動畫。如圖1所示:

  然后,單擊動畫欄最后關鍵幀標記,再選中頁面中的層Layer1,將它拖動到動畫的結束點,或者在“層的屬性面板”改變層的“左L”屬性大小來確定結束幀層的位置。此時,頁面中顯示了從動畫起始位置到結束位置有一線條,這就是層的運動軌跡。要想讓頁面打開時候它就開始運動,就在“時間軸TimeLine”面板上的“自動播放Autoplay”前打勾,如圖2所示:按在時間軸上中部的“->”箭頭不放,就可以直接預覽這直線動畫了,或者按下F12鍵預覽。


  接下來,我們要進行一系列美化工作,由于這個簡單的直線運動效果并不美觀,而且廣告圖片也沒有產生變化。三、改變時間欄的屬性產生移動變化

(1)在動畫移動間隔不變的情況下,改名動畫移動速度。由于我們拉層進時間軸面板起始時候的幀數是默認的15幀,在上面預覽時候就感到速度有點快。要改變速度,我們就得改變動畫總共幀數。鼠標左擊選中“時間軸面板”中的“第一頻道”結束幀不放,向右拖動至你所想要的結束幀,例如75幀處,放開鼠標。此時,結束幀的空缺小圓也移至到了第75幀處。按F12預覽一下,動畫的移動速度明顯變慢。但是要留意的是我們只是在保持動畫運動軌跡的長度不變的情況下,改變了動畫移動的速度,即時間軸上的幀數。假如在同時改變改變起始和結束幀層的位置,就會產生各種不同速度效果,讀者可以自己試著嘗試。

(2)產生曲線的運動。上面做的動畫只是簡單的直線運動,假如改變成曲線的運動,美觀程度就大大的加強了。曲線運動中最主要的就是關鍵幀的設置。

a.在“時間軸面板動畫欄”上添加一個關鍵幀: 選擇動畫欄的第一頻道中你想要添加關鍵幀處, 按住Control鍵單擊,即刻在插入點位置添加一個關鍵幀。或者鼠標右擊選擇動畫欄的第一頻道中你想要添加關鍵幀處,在彈出的快捷菜單里面選擇“添加關鍵幀Add Keyframe”,也可以加入關鍵幀。

b.在添加的關鍵幀處移動層:在保證選中了后來添加的關鍵幀下,選擇頁面中的層,移動層至你所想要的地方。此時直線變化成了曲線。你可以多添加幾個關鍵幀,再移動層,使產生的曲線移動更加光滑。按F12鍵預覽,曲線效果是不是比以前的直線效果好多了?

c.直接通過拖動層,天生路徑,產生動畫。從最初的插入一個層后->選中該層,并一直保持該層被選中狀態->移動層到動畫起始位置->打開菜單“修改Modify”->“時間軸Timeline”->“錄制層移動路徑Record Path of Layer”->在頁面上拖動層,創建想要的運動路徑->在動畫結束處松開鼠標,時間軸內自動天生了一個動畫欄,并且定義了一定數目的關鍵幀。


四、添加鼠標觸發屬性,產生廣告圖片的交替變化

  鼠標觸發的各種屬性,能產生各種變化。這里我們要用到的是onMouseout和onMouseover兩個屬性。
打開菜單“窗口Windows” ->選擇“行為Behaviors”->彈出“行為”窗口->選中層中的廣告圖片->點擊“行為”窗口中的“+”->在彈出的菜單里面選擇“對調圖象”

  在“對調圖象”對話框里面瀏覽選擇你的廣告圖片所在路徑->在“對調圖象”對話框里系統默認中有個“onMouseout復原圖象”前是打勾的->直接按“確定”按鈕

  “行為”狀態窗中多了我們前面說到的onMouseout和onMouseover兩個鼠標觸發事件。按F12預覽,移動鼠標到圖片上,看看是不是圖片變化了?再移開鼠標,又恢復到原來的圖片。這樣簡單的圖片交替行為就完成了。

五、最后思考的細節

  1. 關于路徑長度。假設動畫是從上之下的,網頁高度超過一屏,假如路徑沒有足夠長,那么網頁被快速瀏覽到下一屏的時候就看不到上面的層動畫。應該最好將路徑畫到網頁底部,然后設置時間軸動畫欄,使層能夠慢慢沿著下來的路徑往上動。
  2. 如何設置循環播放。DreamWeaver4.0默認是不斷循環,而在DreamWeaver3.0中則可以在“時間軸”狀態欄中打勾選擇。假如只想循環若干次,則要編輯該行為的參數來設定循環的次數:雙擊行為頻道中的你想加入行為的幀,彈出行為窗口;在行為窗口中點擊“+”,在彈出菜單中選擇“時間軸Timeline”,再選擇“前往時間軸幀Go To Timeline Frame”,彈出對話框;在“循環次數Loop times”輸入域中輸入想要的循環次數(默認留空表示不斷循環)。假如希望循環播放不是從第一幀開始,可以在“跳轉第幾幀Go to Frame”輸入域中輸入幀號(默認是第1幀)。

  看到這里,你應該能夠制作出會移動的廣告條了吧。多加實踐,你還會找到更多有關時間軸、行為和層的精細之處。

相關信息

▪ 廣告條制作基礎篇幫助信息 ▪ 如何制作吸引人的banner廣告條?(怎樣制作網頁banner)
▪ 如何用DreamWeaver制作會移動的廣告條
如果您對本信息有什么建議,請【直接留言給我們】
微信版极速牛牛