第六章时间轴的行为特效

1、第六章 時間軸的行為特效目錄1. 本章目的： 2.2. 製作動畫效果網頁方法的總整理 2.3. 時間軸 2.4. 製作圖層位移動畫效果 6.5. 製作圖片影像變換效果 1.21. 本章目的：Dreamweaver 時間軸的功能，可以讓使用者建立出具有動態 效果的網頁 本章節將介紹兩種建立時間軸動畫的方法，分別是 圖層位移 動畫、圖片影像的變換Dreamweaver 時間軸的功能如果配合 圖層與行為控制 等技術，則可以將時間軸動畫的效果發揮到淋漓盡致，做出 美輪美奐的動態網頁來2. 製作動畫效果網頁方法的總整理一般而言，製作動畫效果網頁的方法有以下幾種：A. 外插 Flash 動畫播放檔案 (*

2、.swf)B. 外插GIF動畫檔案C. 使用時間軸製作動畫網頁D. 插入 JavaApplet 、JavaScript 元件E. 使用DHTM語法F. 使用XHML及CSS吾法G. 使用建立 WEB3的外掛元件，例如 VRML CULT3睜在本章內，將會介紹 外插 Flash 動畫播放檔案、外插 GIF 動畫檔案、使用時間軸製作動畫網頁 、插入 JavaApplet 、 JavaScript 元件等方法至於DHTM語法、使用XHML及CSS語法、使用建立WEB3的外掛元件則不在本章介紹的範圍內3. 時間軸(2) . 何謂時間軸A. 時間軸是經由一格一格的動作畫面設定，成為一連串的連續 動作，類

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

4、得指 定的影格速率，瀏覽器還是會播放動畫的每一個影格。如果影 格速率比瀏覽器所能處理的要高，則影格速率會被忽略。D. 快顯選單-包含各種時間軸相關命令。E. 行為控制板是時間軸中特定影格上應執行的行為的控制板。F. 動畫列 顯示每個物件的動畫持續時間 。單獨一列可以包含多個代表不同物件的控制列 。不同控制列不能控制相同影 格中的相同物件。G. 關鍵影格是控制列中的影格，您在控制列中已經指定物件的屬性 （ 例如位置 ） 。 Dreamweaver 會替關鍵影格之間的 影格計算中間值。關鍵影格由小圓圈標示。H. 動畫控制板顯示動畫圖層和影像的控制列。4. 製作圖層位移動畫效果(6) .範例練習目的

5、：現在要練習在網頁中加入圖層位移動畫目標：將一個擁有圖片的圖層使它從左邊移動到右 邊，造成動態網頁的效果(7) .開啟新檔，並先選擇網頁格式檔案名稱命名為：prodcut.htm設定網頁為基本網頁格式為HTML網頁標籤一商品目錄與搜尋(8) .範例練習步驟A.建立一個有圖片的圖層按主功能表上的插入-圖層標鏈防CtrL+E-iCtrl+Alll-I，影擁預留位置國互動武影橡園卜媒 se(w表格CDCtiL+Altt?表格物件h圖層(I)I頁框糅版勧件再按主功能表上的插入f影像|储改塑窒宇侖會駕1標驚世)Ctrl+ECtrifAlt+Itill秦问預留位苣(M)互動武影擦00媒雄廻)圖片檔案名稱：

6、image/product.gifB. 建立時間軸的動畫列(a).建立動畫列選擇圖層將圖層拉曳到下方的時間軸時間軸則會出現Layerl的動畫列product*bodyciing(b).設定動畫最後一格的位置先將播放頭移到第15格再移動圖層。選擇圖層，按住左鍵拉曳即可完成C. 如何設定一開啟網頁就開始播放你可以勾選一自動播放，此時就會出現提示對話框Dreankveaver播股時晶虬的It作正在利用oTiLoad爭件新思 至文件中-當頁面裁入時此時間軸將會閘始福不要再顯示這個訊息*r二確定D. 如何將移動路徑改變為曲線方式選取動畫列將播放頭移到第五格按右鍵選擇增加關鍵影格再將圖層向下拉曳姑上迥 刪

7、尊)也更边件旳憎力陽件Piodixtf 幟甫爲巴CMly cd：増加影格 移除部曙憎加時間輒(L) 穆除峙間軸 串新命名時閒钳(E)E.測試瀏覽動畫的結果方法：F125. 製作圖片影像變換效果(9) .範例練習目的：現在要練習在網頁中加入應用影像的變換效果動 畫，這種動畫常常用來作為廣告的展示，大家應該可 以常常在各種商業網站中，看到網頁中出現多張圖片 輪流切換的廣告，這種效果就可以由時間軸技術所做 出的應用影像變換來做出。目標：將2張圖片輪流在一張網頁上切換顯示，造成 動態廣告的效果(10) .開啟舊檔檔案名稱為：f_top.htm(11) .範例練習步驟A.建立一個有圖片的圖層按主功能表上

8、的插入-圖層楼入(1)憊改皿交字(I)侖令(S粥報禅融圄彫像(D毎橡預留位置如互勤武至像迪Cttl+E Ctrl+Alt+1C trl+Altt TB.按主功能表上的插入-影像轉进童)Ctrl+Ept通Ctrl+Alt+I1帑博預留位置(W互動武影隊迪O描入0)灵字 命竿 粥站站C. 選擇影像檔案：title.jpg図jHpaodm.textl _over fj prodccL 愴沁fjsfiecial_beT I* * 1_4j Fps 40自勤播放叵1重滾i帕1inel2025303540455055606!E. 設定動畫關鍵影格的位置-要切換圖片的那一格先將播放頭移到第7格按右鍵選擇增加關鍵影格Meprodxt i_ div?ML5JU炖B増加時閒軸討 移除桃H圄 畫靳命名時間訥QDIP自計播的 v章袴30曙加行爲迪憎加壬韬 移除黔榕穰隧堡更物件増加扔件回 移除捞件（W 記捺回層*镰404 550 劳1會員萱理F. 設定要變更圖片的路徑檔名（a）.點選-第5格關鍵影格上（b）.更改影像屬性面板原始檔的路徑改為另