第六章時間軸的行為特效

1、第六章時間軸的行為特效目錄1.本章目的：22.製作動畫效果網(wǎng)頁方法的總整理23.時間軸24.製作圖層位移動畫效果65.製作圖片影像變換效果121. 本章目的：Dreamweaver 時間軸的功能，可以讓使用者建立出具有動態(tài)效果的網(wǎng)頁本章節(jié)將介紹兩種建立時間軸動畫的方法，分別是圖層位移動畫、圖片影像的變換Dreamweaver 時間軸的功能如果配合 圖層與行為控制等技術(shù)，則可以將時間軸動畫的效果發(fā)揮到淋漓盡致，做出美輪美奐的動態(tài)網(wǎng)頁來2. 製作動畫效果網(wǎng)頁方法的總整理一般而言，製作動畫效果網(wǎng)頁的方法有以下幾種：A. 外插 Flash 動畫播放檔案 (*.swf)B. 外插 GIF 動畫檔案C.使

2、用時間軸製作動畫網(wǎng)頁D.插入 JavaApplet 、JavaScript 元件E. 使用 DHTML語法F. 使用 XHML、及 CSS語法G.使用建立 WEB3D的外掛元件，例如VRML、CULT3D等在本章內(nèi)，將會介紹外插 Flash 動畫播放檔案、外插 GIF 動畫檔案、使用時間軸製作動畫網(wǎng)頁、插入 JavaApplet 、 JavaScript 元件等方法至於 DHTML語法、使用 XHML、及 CSS語法、使用建立WEB3D的外掛元件則不在本章介紹的範(fàn)圍內(nèi)3. 時間軸(2). 何謂時間軸A. 時間軸是經(jīng)由一格一格的動作畫面設(shè)定 ，成為一連串的連續(xù)動作，類似電影中的影格方式，這個使用

3、方法與 Flash 使用影格很類似。(3). 時間軸動畫分為兩種A. 圖層位移動畫： 依時間的不同，改變在網(wǎng)頁中的位置B. 影像變換動畫： 依時間的不同，改切換顯示不同影像(4). 如何叫出時間軸面板A. 。選擇視窗其他時間軸 ，開啟時間軸面板。(5). 時間軸的面板簡介A. 時間軸彈出式選單 指定目前顯示在 時間軸面板中的文件時間軸。B. 播放頭 指示目前顯示在文件視窗中的時間軸影格。C.影格編號 表示影格的順序號碼。後退和播放按鈕之間的數(shù)字就是目前的影格編號 。您可以設(shè)定影格總數(shù)和每秒的影格數(shù) (fps) ，控制動畫的持續(xù)時間。注意：較快的速率不一定能增進(jìn)效能。即使影格無法獲得指定的影格速

4、率，瀏覽器還是會播放動畫的每一個影格。如果影格速率比瀏覽器所能處理的要高，則影格速率會被忽略。D.快顯選單 包含各種時間軸相關(guān)命令。E. 行為控制板 是時間軸中特定影格上應(yīng)執(zhí)行的行為的控制板。F. 動畫列 顯示每個物件的動畫持續(xù)時間 。單獨(dú)一列可以包含多個代表不同物件的控制列 。不同控制列不能控制相同影格中的相同物件。G.關(guān)鍵影格 是控制列中的影格 ，您在控制列中已經(jīng)指定物件的屬性 ( 例如位置 ) 。Dreamweaver 會替關(guān)鍵影格之間的影格計(jì)算中間值。關(guān)鍵影格由小圓圈標(biāo)示。H.動畫控制板 顯示動畫圖層和影像的控制列。4. 製作圖層位移動畫效果(6). 範(fàn)例練習(xí)目的：現(xiàn)在要練習(xí)在網(wǎng)頁中加

5、入圖層位移動畫目標(biāo)：將一個擁有圖片的圖層使它從左邊移動到右邊，造成動態(tài)網(wǎng)頁的效果(7). 開啟新檔，並先選擇網(wǎng)頁格式檔案名稱命名為： prodcut.htm設(shè)定網(wǎng)頁為基本網(wǎng)頁格式為 HTML網(wǎng)頁標(biāo)籤商品目錄與搜尋(8). 範(fàn)例練習(xí)步驟A. 建立一個有圖片的圖層按主功能表 上的插入圖層再按主功能表 上的插入影像圖片檔案名稱： image/product.gifB. 建立時間軸的動畫列(a). 建立動畫列選擇圖層將圖層拉曳到下方的時間軸時間軸則會出現(xiàn)Layer1 的動畫列(b). 設(shè)定動畫最後一格的位置先將播放頭移到第15 格再移動圖層。選擇圖層，按住左鍵拉曳即可完成。C.如何設(shè)定一開啟網(wǎng)頁就開始

6、播放你可以勾選自動播放，此時就會出現(xiàn)提示對話框D.如何將移動路徑改變?yōu)榍€方式選取動畫列將播放頭移到第五格按右鍵選擇增加關(guān)鍵影格再將圖層向下拉曳E. 測試瀏覽動畫的結(jié)果方法： F125. 製作圖片影像變換效果(9). 範(fàn)例練習(xí)目的：現(xiàn)在要練習(xí)在網(wǎng)頁中加入應(yīng)用影像的變換效果動畫，這種動畫常常用來作為廣告的展示，大家應(yīng)該可以常常在各種商業(yè)網(wǎng)站中，看到網(wǎng)頁中出現(xiàn)多張圖片輪流切換的廣告，這種效果就可以由時間軸技術(shù)所做出的應(yīng)用影像變換來做出。目標(biāo)：將 2 張圖片輪流在一張網(wǎng)頁上切換顯示，造成動態(tài)廣告的效果(10). 開啟舊檔檔案名稱為： f_top.htm(11). 範(fàn)例練習(xí)步驟A. 建立一個有圖片的圖層按主功能表 上的插入圖層B. 按主功能表 上的插入影像C.選擇影像檔案： title.jpgD.建立時間軸的動畫列(a). 建立動畫列選擇圖片將圖片拉曳到下方的時間軸時間軸則會出現(xiàn)image1 的動畫列將圖層拉曳到下方的時間軸E. 設(shè)定動畫關(guān)鍵影格的位置- 要切換圖片的那一格先將播放頭移到第7 格按