行為和時間線概述

行為和時間線第一頁，共五十一頁。什么是行為行為(behaviors)：就是網(wǎng)頁中進(jìn)行的一系列動作，通過這些動作，可以實現(xiàn)用戶同網(wǎng)頁的交互，也可以通過這些動作使某個任務(wù)完成。行為是瀏覽器執(zhí)行的動作。組成：一般來講，一個行為應(yīng)該由一個事件（event）和一個動作(action)所組成。

行為=事件+動作第二頁，共五十一頁。認(rèn)識事件事件：指特定時間或者由用戶發(fā)出的特定的指令，是瀏覽器能夠識別的一些操作。如:單擊鼠標(biāo),鼠標(biāo)經(jīng)過等第三頁，共五十一頁。認(rèn)識動作動作：是事先編好的一段JawaScript腳本代碼，利用這些代碼完成特定的任務(wù)，如：播放聲音，打開瀏覽器，顯示層，視頻等第四頁，共五十一頁。行為面板刪除行為添加行為用于修改事件的事件列表事件列動作列第五頁，共五十一頁。Dreamweaver的內(nèi)置行為第六頁，共五十一頁?；镜氖录愋?第七頁，共五十一頁?；镜氖录愋?第八頁，共五十一頁。常用事件列表OnabortIe4,5當(dāng)網(wǎng)頁下載中斷Onclick當(dāng)鼠標(biāo)單擊OndblclickIe345當(dāng)鼠標(biāo)雙擊Onloadie45當(dāng)圖象或頁面完全載入后Onmousedownie45當(dāng)按下鼠標(biāo)左鍵尚未釋放時Onmouseoverie345當(dāng)鼠標(biāo)剛移動到特定的元素上時Onmouseoutie45當(dāng)鼠標(biāo)剛移出特定元素時第九頁，共五十一頁。創(chuàng)建行為可以將行為附加給整個文件,也可以附加給\文本\圖像\鏈接\層\等，對象可以接受什么樣的行為取決于瀏覽器。瀏覽器的版本越高，接受的事件就越多步驟:

1選中要附加行為的對象

2打開行為面板

3單擊，點擊“顯示事件屬”----選一個瀏覽器版本

4再單擊，選一個動作，彈出相應(yīng)對話框，設(shè)置相應(yīng)的參數(shù)。

5單擊“確定”按鈕第十頁，共五十一頁。例如：創(chuàng)建顯示隱藏層行為效果（圖片旁邊的說明文字為隱藏的，當(dāng)鼠標(biāo)經(jīng)過圖像時才顯示）步驟如下：1、插入圖象2、插入層插入面板/層按鈕3、設(shè)置層屬性屬性面板/相應(yīng)選項/并設(shè)置層屬性為隱藏4、選種圖像，對圖象設(shè)置行為:顯示隱藏圖層5、添加事件OnMouseOver6、保存第十一頁，共五十一頁。創(chuàng)建顯示隱藏層行為的圖示第十二頁，共五十一頁。什么是時間軸(時間線)時間線：它是一條貫穿時間的軸,用于表示網(wǎng)頁存活時間中發(fā)生的各種狀態(tài)。作用：通過往這個時間線的不同部位放置不同的內(nèi)容,或是綁定相應(yīng)的行為,就可以讓對應(yīng)的時間發(fā)生對應(yīng)的事件,從而實現(xiàn)網(wǎng)頁元素的動態(tài)效果優(yōu)點：它純粹是往文檔中添加javascript代碼來實現(xiàn)網(wǎng)頁的動態(tài)效果，不需要任何ActibeX控件，不需要插件，也不需要任何java小程序，具有極好的兼容性。第十三頁，共五十一頁。時間軸面板1回放頭回放頭所在的幀每秒播放幀數(shù)關(guān)鍵幀附加的行為動畫通道（幀控制區(qū)）動畫條行為通道返回后退時間線下拉菜單幀數(shù)第十四頁，共五十一頁。時間軸面板2時間下拉菜單：一個文檔中可以包含多條時間線，時間線下拉菜單主要用于控制哪條時間線顯示在時間線面板上。打開該菜單，并選擇不同的時間線。就可以在時間線面板上顯示不同的時間設(shè)置。行為通道：在該通道上，顯示時間線上相應(yīng)時間中所綁定的行為。淺藍(lán)色的方塊表示存在行為。幀數(shù)：在該通道上顯示在時間線上不同時間對應(yīng)的動畫幀第十五頁，共五十一頁。時間軸面板3回放頭:回放頭是位于幀數(shù)行上的紅色方塊，它表明當(dāng)前的動畫放映到哪個位置，通過在時間線面板上拖動回放頭，可以在文檔窗口中看到相應(yīng)時間上動畫放映的狀態(tài)。同時，當(dāng)前回放頭所在的幀位置會顯示在時間線面板上方前進(jìn)箭頭按鈕和后退箭頭按鈕之間的文本框中。第十六頁，共五十一頁。動畫通道：在時間線面板上有33個動畫通道，分別從1排列至33，表示可以在同一時間進(jìn)行33路動畫設(shè)置。一旦某個動畫通道上存在動畫，就會顯示動畫條.動畫條：動畫條表明某個對象在某段時間內(nèi)的持續(xù)狀態(tài)，動畫條是真正的動畫實體。其中一些空白圓圈表明關(guān)鍵幀。在一個動畫通道行上可以包含多個動畫條，用于表示多個不同的對象·／不同的動畫條在同一幀內(nèi)不能控制相同的對象。時間軸面板4第十七頁，共五十一頁。時間軸面板5關(guān)鍵幀：如果你進(jìn)行過動畫設(shè)計，就很容易理解什么是關(guān)鍵幀，簡單地說，關(guān)鍵幀就是由你為對象所指定的在某一確定時刻(幀)上的狀態(tài)。Dreamweaver會自動根據(jù)兩個關(guān)鍵幀的位置計算對象在其間的動作。例如，要設(shè)計對象直線移動，只需要定義開始和結(jié)束的位置，這兩個位置就是關(guān)鍵幀，dreamweaver會根據(jù)直線的開始和結(jié)束位置自動計算中間移動狀態(tài)。在動畫條上，“關(guān)鍵幀”以一個圓圈的形式表示。第十八頁，共五十一頁。時間軸面板6返回：單擊該按鈕，可以回放頭返回到動畫的開始位置。后退：單擊該按鈕，可以將動畫后退一幀，連續(xù)單擊后退按鈕，可以向后播放動畫。播放：單擊該按鈕，可以將動畫播放一幀，連續(xù)單擊播放按鈕，可以播放動畫。第十九頁，共五十一頁。時間軸面板7每秒幀數(shù)：在該文本框中，可以設(shè)置動畫播放的速度。你可以直接輸入每秒幀數(shù)值。自動播放：選中該復(fù)選框，則當(dāng)網(wǎng)頁被載人之后自動播放動畫。如果清除該復(fù)選框，則網(wǎng)頁載人之后，動畫并不播放，你可以利用為對象綁定行為的方法，提供播放動畫的命令。第二十頁，共五十一頁。時間軸面板8循環(huán)：選中該復(fù)選框，則動畫播放完畢后自動重新播放，也即動畫不斷循環(huán)播放，直至用戶離開頁面。清除該復(fù)選框，則動畫只播放一次。第二十一頁，共五十一頁。什么叫創(chuàng)建時間線動畫創(chuàng)建時間線動畫，簡而言之，就是首先往動畫通道上添加對象來構(gòu)建動畫條，然后構(gòu)建動畫條上的關(guān)鍵幀，最后在文檔窗口中設(shè)置對象在關(guān)鍵幀上的位置，然后播放，從而實現(xiàn)動畫的創(chuàng)作。第二十二頁，共五十一頁。創(chuàng)建動畫的注意事項利用時間線，你可以在頁面上構(gòu)建分層的動畫效果。要注意的是，時間線只能移動分層對象，如果你希望移動諸如文本或圖像之類的對象，可以將之放人分層中。第二十三頁，共五十一頁。利用時間線構(gòu)建分層動畫的基本方法如下：1．首先指定起始的關(guān)鍵幀。操作方法：將分層移動到動畫的起始位置。2．選中該要制作動畫的分層。3．添加動畫條。

方法(1)：打開時間線面板菜單，選擇Addobject(添加對象)命令，即可在動畫通道中添加一個對應(yīng)該分層的動畫條。

方法(2)：也可以直接將分層拖動到時間線面板上相應(yīng)位置來構(gòu)建動畫條。在動畫條上可以看到分層名稱。第二十四頁，共五十一頁。利用時間線構(gòu)建分層動畫的基本方法如下：4．改變該對象參與動畫的時間。

拖動動畫條上最右端的關(guān)鍵幀標(biāo)記，可以改變動畫條的長度，也即改變該對象參與動畫的時間。5．構(gòu)建了動畫結(jié)束位置的關(guān)鍵幀。

單擊動畫條最右端的關(guān)鍵幀標(biāo)記，然后在文檔窗口中將分層移動到動畫結(jié)束的位置，這實際上是構(gòu)建了動畫結(jié)束位置的關(guān)鍵幀。第二十五頁，共五十一頁。利用時間線構(gòu)建分層動畫的基本方法如下：6．在動畫條中間位置添加關(guān)鍵幀.

如果希望在動畫條中間位置添加關(guān)鍵幀，可以按住Ctrl鍵，然后在動畫條上相應(yīng)幀位置單擊鼠標(biāo)，這時會出現(xiàn)新的關(guān)鍵幀標(biāo)記；另外，也可以通過打開面板菜單，選擇AddKey~ames(添加關(guān)鍵幀)命令來添加關(guān)鍵幀。選中關(guān)鍵幀標(biāo)記，然后從文檔窗口中拖動分層，將之移動到該幀對應(yīng)的位置上。重復(fù)該操作，直至所有的關(guān)鍵幀被創(chuàng)建?！诙摚参迨豁?。利用時間線構(gòu)建分層動畫的基本方法如下：7．預(yù)覽動畫效果。

在Play(播放)按鈕上按住鼠標(biāo)左鍵，可以在文檔窗口中預(yù)覽動畫效果。8．選擇播放方式.

根據(jù)需要，選中或清除相應(yīng)的Autoplay(自動播放)和Loop(循巧)復(fù)選框。第二十七頁，共五十一頁。二、錄制分層路徑1對于簡單的直線路徑，采用前一節(jié)介紹的方法，可以很好地構(gòu)建動畫。然而如果動畫路徑較為復(fù)雜，例如是曲線或圓形，則無法通過先設(shè)置關(guān)鍵幀，再拖動分層到指定位置的方法構(gòu)建動畫。第二十八頁，共五十一頁。錄制分層路徑2在Dreamweaver中提供了以供記錄路徑的方法，允許你直接在文檔窗口中拖動分層，Dreamweaver在后臺記錄你拖動分層的路徑，然后將之應(yīng)用到時間線上，利用這種方法，可以很容易地構(gòu)建各種移動方式的分層動畫。第二十九頁，共五十一頁。錄制分層路徑操作方法3：1．在文檔窗口中選擇要創(chuàng)建分層動畫的分層。2．將分層移動到動畫的起始位置。3．在時間線面板上，打開面板菜單，選擇RecordPathofLayer(錄制分層路徑)命令。這時就可以開始錄制分層的移動路徑。第三十頁，共五十一頁。錄制分層路徑44．在文檔窗口中，按照需要的路徑拖動分層。5．當(dāng)希望動畫停止時，可以釋放鼠標(biāo)，停止移動分層。6．在時間線面板上，按住Play(播放)按鈕，就可以預(yù)覽動畫效果。第三十一頁，共五十一頁。例如假設(shè)我們希望構(gòu)建一個地球圍繞太陽旋轉(zhuǎn)的動畫，可以分別將太陽圖像和地球圖像放人不同的分層，然后選中地球所在分層，啟動RecordPathofLayer命令，再將地球分層圍繞太陽分層拖動一圈，釋放鼠標(biāo)，即可構(gòu)建相應(yīng)的動畫。Dreamweaver會自動將地球分層添加到時間線上，構(gòu)建一個動畫條，并按照拖動的路徑構(gòu)建關(guān)鍵幀數(shù)據(jù)。第三十二頁，共五十一頁。三、利用時間線改變圖像和分層屬性利用時間線，不僅可以改變分層的位置，還可以改變分層的某些屬性利用時間線，還可以改變圖像的源文件，實現(xiàn)某些特殊效果。例如：改變分層的大小和可見性等可以按照如下方法進(jìn)行操作：步驟1．從時間線面板上，單擊選中相應(yīng)的關(guān)鍵幀，這時文檔窗口中相應(yīng)的對象也被選中。步驟2．根據(jù)需要改變對象的屬性第三十三頁，共五十一頁。步驟2,根據(jù)需要改變對象的屬性：(1)要改變圖像源文件，

可以在圖像屬性面板上的Src(源)文本框中輸入新文件的URL地址，或是單擊文件夾按鈕，從磁盤上選擇新圖像文件。(2)要改變分層的可見性，

可以從分層的屬性面板上的Vis(可見性)下拉列表中選擇需要的可見性設(shè)置。第三十四頁，共五十一頁。根據(jù)需要改變對象的屬性(3)要改變分層的大小，

可以通過拖動分層的邊框控點來改變大小，也可以直接在分層的屬性面板上輸入需要的寬度和高度值。要注意的是，只有InternetExplorer4．0和5．0才支持對分層大小的改變。第三十五頁，共五十一頁。根據(jù)需要改變對象的屬性：(4)要改變分層的重疊順序，

可以直接在分層屬性面板上的Z-Index區(qū)域輸入新值。第三十六頁，共五十一頁。設(shè)置完畢預(yù)覽效果設(shè)置完畢,可以從時間線面板上，按住Play(播放)按鈕，預(yù)覽效果。第三十七頁，共五十一頁?？刂茣r間線設(shè)計好動畫之后，可以在時間線面板中對時間線進(jìn)行各種控制，從而實現(xiàn)對動畫的編輯和修改。例如：一、選中動畫條二、改變對象參與動畫的時間三、改變動畫局部的播放速度四、改變動畫起始時間五、改變動畫完整路徑六、添加幀和刪除幀七、對象的添加、刪除和修改八、自動播放和循環(huán)播放九、使用多條時間線第三十八頁，共五十一頁。一、選中動畫條一個動畫條表示—個對象在某段時間內(nèi)的動畫序列。要選中動畫條，你可以按照如下方法進(jìn)行:單擊相應(yīng)的動畫條，可以選中一個動畫條。要選中多個動畫序列，可以按住Shift鍵，再單擊相應(yīng)的動畫條。第三十九頁，共五十一頁。二、改變對象參與動畫的時間如果希望使某個對象在動畫中參與的動畫時間變長或變短；可以拖動該對象對應(yīng)動畫條最右端的關(guān)鍵幀(也即結(jié)束幀)標(biāo)記，將之左右拖動，這時動畫條長度會發(fā)生變化，同時上面所有的關(guān)鍵幀標(biāo)記也按照比例移動相應(yīng)的位置。如果希望保持所有中間位置的關(guān)鍵幀不動，可以按住Ctrl鍵，再拖動結(jié)束幀標(biāo)記。第四十頁，共五十一頁。三、改變動畫局部的播放速度要改變某兩個關(guān)鍵幀之間動畫的播放時間，也即改變關(guān)鍵幀之間的動畫播放速度，可以在動畫條上直接左右拖動相應(yīng)關(guān)鍵幀標(biāo)記。在圖16—35中，我們改變了起始幀和第二個關(guān)鍵幀之間的距離，也即改變了相應(yīng)序列的播放時間。第四十一頁，共五十一頁。四、改變動畫起始時間要改變動畫的起始時間，可以單擊動畫條選中它，然后將之在動畫通道上左右拖動。按住Shift鍵，可以一次選中多個動畫條。圖16—36顯示了改變動畫起始時間的情形。改變后，動畫從原先動畫的第10幀對應(yīng)的時間開始播放。第四十二頁，共五十一頁。五、改變動畫完整路徑要將完整的動畫路徑移動位置，可以選中整個動畫條，然后拖動頁面上的對象。這時Dreamweaver會自動調(diào)整所有關(guān)鍵幀的位置。選中整個動畫條后進(jìn)行的任何改變都會影響所有的關(guān)鍵幀。第四十三頁，共五十一頁。六、添加幀和刪除幀要往時間線上添加幀，可以打開面板菜單，再選擇AddFrame(添加幀)命令。要往時間線上刪除幀，可以打開面板菜單，再選擇RemoveFrame(刪除幀)、命令。要往時間線上添加關(guān)鍵幀，可以打開面板菜單，再選擇AddKeyffame(添加關(guān)鍵幀)命令，也可以按住Ctrl鍵，然后單擊要添加關(guān)鍵幀的位置。要往時間線上刪除關(guān)鍵幀，可以打開面板菜單，再選擇RemoveKeyffame(刪除關(guān)鍵幀)命令。第四十四頁，共五十一頁。七、對象的添加、刪除和修改1首先在文檔窗口中選中對象，然后打開時間線面板菜單，選擇AddOject(添加對象)命令，可以添加對象，也即創(chuàng)建新的動畫條。如果希望從時間線中刪除對象，可以首先選中該動畫條，然后打開時間線面板菜單，再選擇RemoveObiect(刪除對象)命令，這時動畫條會消失。第四十五頁，共五十一頁。七、對象的添加、刪除和修改2如果希望改變動畫條對應(yīng)的對象，可以首先選中該動畫條，然后打開時間線面板菜單，再選擇ChangeO均ect(改變對象)命令，這時會打開如圖16—37所示的對話框，提示你選擇新對象。選擇新對象，按下OK按鈕，確定操作，即可改變動畫條對應(yīng)的對象。第四十六頁，共五十一頁。八、自動播放和循環(huán)播放選中時間線面板上的Autoplay(自動播放)按鈕，則在頁面被載入后自動播放動畫。該操作實際上是為頁面綁定了一個進(jìn)行自動播放動畫的行為，你可以在行為通道上看到它。選中時間線面板上的Loop(循環(huán))按鈕，則在頁面被載人后，一旦動畫被播放將循環(huán)不止。該操作實際上是為頁面綁定了一個進(jìn)行循環(huán)播放動畫的行為，你可以從行為通道上看到它。選中該標(biāo)記，然后單擊行為面板上的“+”按鈕，打開動作菜單，然后選擇相應(yīng)的命令，即可編輯循環(huán)次數(shù)。第四十七頁，共五十一頁。九、使用多條時間線1一條時間線可以控制33條動畫通道，這好比控制33個分鏡頭。然而有時候當(dāng)動畫