製作網頁動畫

時間軸動畫

前言

:Dreamweaver 的時間軸動畫,告訴大家如何利用圖層和時間軸,來讓物件在網頁畫面中移動,而不需要編寫複雜的程式語言。

時間軸動畫:

時間軸面板的介紹:
(1). 每一物件的動畫都有一條動畫的時間軸 (上圖紫色條狀部分),動畫時間軸由影格 (Frame) 所組成,影格愈多格代表動畫播放時間愈長。物件要組成一個動畫,時間軸上至少要有兩個關鍵影格 (Keyframe),物件的動畫狀態就在關鍵影格中設定。
(2). Fps 為每秒鐘動畫播放的格數。Fps 值愈大,播放速度愈快。


時間軸動畫製作:
我們以物件在畫面中移動為範例,來說明時間軸動畫的製作步驟:
Step1
點選選項列Window→Others→Timelines,開啟時間軸的面板。
Step2
新增一個圖層,在圖層中插入圖片。
Step3
將圖層拖曳至時間軸面板的動畫區的 Channel 1的位置,如圖:
Step4
點選動畫時間軸的最後一格,即第15格的關鍵影格,然後將圖層移動至我們想要的終點位置,可以看見畫面出現一條圖層的移動路徑。
Step5
若想要要讓移動路徑呈現曲線變化,可以在動畫時間軸中按 Ctrl+滑鼠左鍵 來新增關鍵影格。如圖:我們在第 5 格處新增一關鍵影格。
Step6
此時畫面中的圖層會自動移至第 5 格影格的位置 (約在路徑的前三分之一處),我們再將圖層移至其他的位置,可以看到移動後的路徑改變了:
Step7
同樣的方法,在第 10 格新增一關鍵影格,並將圖層移動至別處,可以看見動畫的路徑變成曲線狀:
Step8
接下來要設定動畫在網頁載入後自動及重覆播放。
首先將時間軸面板的 Autoplay 打勾,會出現一對話框,告訴我們網頁會自動加入 "Play Timeline" 的指令,使網頁載入後自動播放動畫。

按 OK 確定。
Step9
再將 Loop 打勾,此時的對話框告訴我們,Dreamweaver 會自動在第 16 格的 Behaviors 設定區加上 "Go To Timeline Frame" 的指令。

按 OK 確定。
Step10

存檔後用瀏覽器預覽,就可以看到動畫了。

如果要加長動畫長度,可將時間軸的最後一格往右拉至想要的影格數,Behavior 的設定也要同時往右移動。這時可以看到時間軸中所有的關鍵影格都跟著往右移,播放的時候,動畫會因為影格增加而變慢速度。

(如範列 sample01.htm)



改變時間軸動畫的物件:
我們也可以將圖層中的圖片換成 Flash 動畫,讓動畫效果更具變化。
要改變動畫的物件不需重新製作動畫,只要在物件的時間軸上按滑鼠右鍵,點選選單中的 Change Object (如右圖),出現下圖對話框,選擇所要置換的圖層名稱就可以了。

結果如範列 sample02.htm 所示。
回課程目錄》《下一課》