Dreamweaver製作網頁投影片效果的方法

來源:互聯網
上載者:User

作為一位不懂代碼的業餘網頁製作愛好者,常常羨慕專業程式人員在瀏覽器中編製出的效果超酷的一些多媒體作品。唉,無奈程式那東東,酶澀南學,非一日之功,需要良好的邏輯思維能力和足夠的磨練方可成就。是不是不會程式,就永遠就不能實現自己的創意和想法了呢?非也!現在我們要製作的就是在網頁中的一個投影片播放器。當使用者按下控制盤上的“PLAY”鍵時圖片將作投影片似的連續迴圈播放。按下“PAUSE”時,播放中的圖片就停留在當前位置。按下“RESTART”鍵時,投影片又從頭播放。而這一切,僅僅採用Dreamweaver3的內嵌的層(Layer)、時間鏈(Timeline)和行為(Behavior)技術,就可實現,所有的JavaScript代碼都會在Dreamweaver中自動產生。這裡不是鼓勵大家不要接觸程式碼,相反,若讀者掌握了一些編程技術的基礎,會在網頁製作中起到相當重要的作用。實際上,這已是當今專業WEB頁面製作人員的一項基本素質要求。

下面分步驟對這個播放器的製作加以說明。

步驟一:圖形元素的製作和準備。

製作投影片所用的圖片並將之放入Dreamweaver的層中。我們準備在每個投影片中實現7幅圖片的交替變換,因此我們需要製作7幅內容不同的圖片。注意圖片要在Photoshop中進行最佳化壓縮,並調整成相同的尺寸。建立一個層,插入初始圖片,該圖片就是投影片預設得頭一張圖片。將層命名為Layer_main,並把該層的Index值設為1。

步驟二:製作播放器的外觀和四個控制按鈕。

利用Photoshop製作一個金屬效果的播放器外觀。(具體效果就看你的喜好啦,也許你可從Winamp的skin中受點啟發)。作最佳最佳化後,輸出一個透明的GIF圖片。為了讓滑鼠移上後按鈕有些變化,你不得不每個按鈕製作2張圖片(共6個),兩個按鈕只需有顏色上的差異即可。先建三個層,調整好位置,並插入三個播放鍵的各自的二張翻滾圖片(Rollover Image)(Insert-Rollover Image)。通過調節層的Index-Z的值,確保播放器所在的層在Layer_main層的上面,在按鈕所在層的下面。排版好的各層如圖1所示。



步驟三:建立投影片播放時間鏈。

按Ctrl+F9鍵開啟時間鏈浮動工具面板。選取其中投影片所在層(Layer_main)中的初始圖片(確保選取的是映像,而不是層),用滑鼠拖至時間鏈浮動工具面板,在時間鏈起始處釋放滑鼠。設定畫面播放速率為Fps為5,並勾選Loop框。選擇時間鏈中的其中一幀,右擊滑鼠,選擇"Add Keyframe"(添加主要畫面格),選擇另一幅投影片圖片,以更換層(Layer_main)中的初始圖片。重複這個操作,將剩下的5幅圖片全部加到該時間鏈的不同主要畫面格上。最後適當調節各主要畫面格之間的距離。並將該時間鏈命名為TimeLine_main。建立好的時間鏈如圖2所示。



步驟四:為按鈕和其它添加行為(Behavior)。

點擊選擇PLAY按鈕所在的圖片,在行為浮動工具面板中,從+(添加)動作下拉式清單中選擇Timeline-Play Timeline(播放時間鏈),並在彈出的對話方塊中選擇時間鏈Timeline_main。單擊OK。預設下,就會為切換動作設定一個onClick事件。點擊選擇PAUSE所在的圖片。在行為浮動工具面板中,從+(添加)動作下拉式清單中選擇Timeline---Stop Timeline(停止播放時間鏈),並在彈出的對話方塊中選擇時間鏈Timeline_main。單擊OK。預設下,就會為切換動作設定一個onClick事件。

點擊選擇REPLAY所在的圖片。在行為浮動工具面板中,從+(添加)動作下拉式清單中選擇Timeline---Go to Timeline Frame(轉向放時間鏈幀),並在彈出的對話方塊中選擇時間鏈Timeline_main,在Frame文字框中輸入1。單擊OK。預設下,就會為切換動作設定一個onClick事件。再添加下一個動作。從+(添加)動作下拉式清單中選擇Timeline---Play Timeline(播放時間鏈),並在彈出的對話方塊中選擇時間鏈Timeline_main。單擊OK。預設下,就會為切換動作設定一個onClick事件。REPLAY的圖片添加好的行為如圖3所示。



本例中做好的播放器,可在下列地址瀏覽:http://webart.myrice.com/sample/index.htm。進一步,為了讓播放器更加生動,你可以同時給投影片的播放加上聲音。

若要把這個播放器放到網上,同時圖片總容量超過150K,可以給頁面作一個“Loading(載入)層”,待全部內容下載完畢後,才顯示出來。以免由於圖片未下載完而產生播放不暢的感覺。關於“Loading”層的製作方法,在很多地方有介紹,這裡就不再詳述了。

把這個例子變通一下,我們可以作一個相簿。你可以把你的家庭或女朋友的相片加在投影片所在的時間鏈上,並且加上Last(上一張)、 Next(下一張)等按鈕,便於瀏覽者逐張欣賞。若覺得相片太小不能看清楚細節,你還可以加一個Zoom In(放大)按鈕,連結到一個有單張放大相片的新視窗頁面。最後把它放到網上,相信一定會給你的家人或女朋友帶去一份驚喜。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。