Dreamweaver8和Flash8案例教程時(shí)間軸和行為

第5章時(shí)間軸和行為

【案例15】“顯示器展示”網(wǎng)頁5.1

【案例16】為“Word操作演示”網(wǎng)頁增加控制按鈕5.2【案例17】“產(chǎn)品促銷之游戲頁”網(wǎng)頁5.35.1【案例15】“顯示器展示”網(wǎng)頁5.1.1學(xué)習(xí)目標(biāo)

“顯示器展示”網(wǎng)頁的顯示效果如圖5-1-1所示。利用時(shí)間軸功能，可以在網(wǎng)頁中插入一個(gè)動畫，增加網(wǎng)頁的動態(tài)效果。圖5-1-1“顯示器展示”網(wǎng)頁的顯示效果

它通過在不同的時(shí)間改變層的位置、大小、可見性和疊放順序等來創(chuàng)建動畫。時(shí)間軸的層功能只在IE4.0及更高版本的瀏覽器中有效。5.1.2操作過程5.1.3相關(guān)知識1．“時(shí)間軸”面板單擊“窗口”→“時(shí)間軸”菜單命令，或按Alt+F9鍵，即可彈出“時(shí)間軸”面板，如圖5-1-3所示。該面板中的各個(gè)工具及各項(xiàng)目的作用如下。圖5-1-3“時(shí)間軸”面板（1）“時(shí)間軸”面板的工具欄

“時(shí)間軸”下拉列表框：其內(nèi)列出了當(dāng)前頁面內(nèi)所有時(shí)間軸動畫的名字，選中其中一個(gè)選項(xiàng)后，相應(yīng)的動畫就會在“時(shí)間軸”面板中顯示出來。

“歸位”按鈕：將動畫圖像移到起始位置，同時(shí)回放頭也移動到該位置處。

“回放”按鈕：單擊它，可以使動畫回退一個(gè)幀。單擊按住該按鈕不放，可以向相反方向播放動畫?！爱?dāng)前幀號碼”（也是回放頭當(dāng)前位置）文本框：用來輸入和顯示“回放頭”所處的時(shí)間軸位置號，即當(dāng)前幀號碼。“播放”按鈕：單擊它，可使動畫前進(jìn)一個(gè)幀。按住該按鈕不放，可以向正常方向播放動畫?！八俾省蔽谋究颍河脕磔斎朊棵腌姴シ诺膸瑪?shù)。

“自動播放”復(fù)選框：選中它后，則在網(wǎng)上下載動畫后會自動播放。不選中它時(shí)，需要在使用行為事件時(shí)才可以播放。

“循環(huán)”復(fù)選框：選中它后，則循環(huán)播放動畫，否則只播放一次動畫。（2）通道行為通道：其左邊標(biāo)有字母“B”?？梢栽谠撏ǖ赖奶囟◣褂眯袨槭录Ｐ袨閹杭尤肓诵袨槭录膸?，它在“行為通道”內(nèi)。時(shí)間標(biāo)尺：給出了與時(shí)間對應(yīng)的幀數(shù)碼。回放頭：播放動畫時(shí)，它在時(shí)間標(biāo)尺上移動，好像放像機(jī)的磁頭一樣。用鼠標(biāo)拖曳它在時(shí)間標(biāo)尺上移動，當(dāng)它移到某一時(shí)間單位處時(shí)，相應(yīng)的動畫畫面會出現(xiàn)在網(wǎng)頁窗口內(nèi)。

動畫條：表示一個(gè)動畫所占的幀數(shù)，上面標(biāo)有該動畫所在層的名字。它的起始處和終止處各有一個(gè)小圓，表示首幀和終止幀。如果設(shè)置了關(guān)鍵幀，則關(guān)鍵幀也會有一個(gè)小圓。動畫通道：它由許多圖層組成，表示可以在一個(gè)頁面內(nèi)加入多個(gè)時(shí)間軸動畫，但最多只可以加32個(gè)。它的左邊標(biāo)有圖層的編號，圖層編號大的動畫在圖層編號小的動畫之上。（1）動畫的更名可以直接在“時(shí)間軸”面板的列表框內(nèi)更改動畫的名字。單擊時(shí)間軸菜單中的“重命名時(shí)間軸”菜單命令，彈出“重命名時(shí)間軸”對話框，如圖5-1-4所示。在該對話框內(nèi)的“時(shí)間軸名稱”文本框內(nèi)輸入新的名字，再單擊“確定”按鈕即可。2．時(shí)間軸的相關(guān)操作圖5-1-4“重命名時(shí)間軸”對話框（2）動畫的刪除刪除動畫條：選中要刪除的動畫條，再單擊“編輯”→“剪切”菜單命令。刪除動畫的移動路徑：選中要刪除的動畫條，再按Delete按鍵。刪除所有動畫條：單擊時(shí)間軸菜單中的“刪除時(shí)間軸”菜單命令。（3）動畫的復(fù)制單擊選中要復(fù)制的動畫條。再單擊時(shí)間軸菜單中的“復(fù)制”菜單命令。調(diào)整回放頭的位置。再單擊時(shí)間軸菜單中的“粘貼”菜單命令，即可在選中的動畫條的右邊復(fù)制一個(gè)動畫條。而且可以復(fù)制到其他頁面的“時(shí)間軸”面板中。（4）動畫的移動單擊選中要移動的動畫條。再單擊時(shí)間軸菜單中的“剪切”菜單命令。調(diào)整回放頭的位置，再單擊時(shí)間軸菜單中的“粘貼”菜單命令，即可將動畫條移到回放頭所處的位置處。利用此方法，還可以移動到其他頁面的“時(shí)間軸”面板中。

可以用鼠標(biāo)拖曳一個(gè)動畫條在整個(gè)動畫通道內(nèi)移動。按住Shift鍵，單擊要移動的動畫條，可以選中多個(gè)動畫條，鼠標(biāo)拖曳一個(gè)動畫條即可同時(shí)移動多個(gè)動畫條。5.2.1學(xué)習(xí)目標(biāo)為“Word操作演示”網(wǎng)頁增加控制按鈕后，該網(wǎng)頁的顯示效果如圖5-2-1所示。在該網(wǎng)頁的底部，添加了3個(gè)控制按鈕，單擊其中的任意一個(gè)按鈕，即可實(shí)現(xiàn)網(wǎng)頁中控制Flash動畫的開始、停止及重新播放。5.2【案例16】為“Word操作演示”網(wǎng)頁增加控制按鈕圖5-2-1添加控制按鈕后的“Word操作演示”網(wǎng)頁

行為是動作（Actions）和事件（Events）的組合。動作就是計(jì)算機(jī)系統(tǒng)做的一個(gè)動作，例如，彈出一個(gè)提示框、執(zhí)行一段程序或一個(gè)函數(shù)、播放聲音或影片、啟動或停止“時(shí)間軸”面板中的動畫等。

動作通常是由預(yù)先編寫好的JavaScript程序腳本實(shí)現(xiàn)的，Dreamweaver8自帶了一些動作的JavaScript程序腳本，可供用戶直接調(diào)用。用戶也可以自己用JavaScript語言編寫JavaScript程序腳本，創(chuàng)建新的行為。

事件是指引發(fā)動作產(chǎn)生的事情，例如，鼠標(biāo)移到某對象上、鼠標(biāo)單擊某對象、“時(shí)間軸”面板中的回放頭播放到某一幀等。要創(chuàng)建一個(gè)行為，就是要指定一個(gè)動作，再確定觸發(fā)該動作的事件。有時(shí)，某幾個(gè)動作可以被相同的事件觸發(fā)，則需要指定動作發(fā)生的順序。Dreamweaver8采用“行為”面板（也叫做行為控制器）來完成行為中的動作和事件的設(shè)置，從而實(shí)現(xiàn)動態(tài)交互效果。5.2.2操作過程1．“行為”面板單擊“窗口”→“行為”菜單命令或按Shift+F3鍵，即可彈出“行為”面板，如圖5-2-2所示。“行為”面板的使用方法與“行為”面板中的各按鈕與列表框等的作用如下。5.2.3相關(guān)知識（1）“添加行為”按鈕：單擊此按鈕，將彈出“動作”快捷菜單，通過選擇菜單的相應(yīng)項(xiàng)目，進(jìn)行插入動作的操作。（2）“刪除行為”按鈕：單擊此按鈕將刪除選中的行為。（3）“向上移動”按鈕：單擊此按鈕，將選中的行為在“行為”面板中向頂部移動。（4）“向下移動”按鈕：單擊此按鈕，將選中的行為在“行為”面板中向底部移動。（5）“顯示所有事件”按鈕：單擊此按鈕后，在“行為”面板中將顯示出此對象所能使用的所有事件，如圖5-2-4所示。圖5-2-4“顯示所有事件”的“行為”面板（6）“顯示設(shè)置事件”按鈕：單擊此按鈕后，在“行為”面板中只顯示已經(jīng)使用的事件，如圖5-2-2所示。（1）如果要更改系統(tǒng)默認(rèn)的事件，可以單擊“事件”欄中默認(rèn)的事件名稱右邊的按鈕，彈出事件名稱菜單。菜單中列出了該對象可以使用的所有事件。（2）各個(gè)事件所能作用的對象與它的作用如表5-2-1所示。2．選擇事件序號事件名稱事件可以作用的對象事件的作用1onAbort圖像、頁面等中斷對象載入操作時(shí)2onAfterUpdate圖像、頁面等對象更新之后3onBeforeUpdate圖像、頁面等對象更新之前4onFocus按鈕、鏈接和文本框等當(dāng)前對象得到輸入焦點(diǎn)時(shí)5onBlur按鈕、鏈接和文本框等焦點(diǎn)從當(dāng)前對象移開時(shí)6onClick所有對象單擊對象時(shí)表5-2-1 事件名稱菜單中各個(gè)事件所能作用的對象與它的作用序號事件名稱事件可以作用的對象事件的作用7onDblClick所有對象雙擊對象時(shí)8onError圖像、頁面等載入圖像等中間產(chǎn)生錯(cuò)誤時(shí)9onHelp圖像等調(diào)用幫助時(shí)10onLoad圖像、頁面等載入對象時(shí)11onMouseDown鏈接圖像和文字等在熱字或圖像處按下鼠標(biāo)左鍵時(shí)12onMouseUp鏈接圖像和文字等在熱字或圖像處鼠標(biāo)左鍵彈起時(shí)13onMouseOver鏈接圖像和文字等鼠標(biāo)指針移入熱字或圖像區(qū)域時(shí)14onMouseOut鏈接圖像和文字等鼠標(biāo)指針移出熱字或圖像區(qū)域時(shí)15onMouseMove鏈接圖像和文字等鼠標(biāo)指針在熱字或圖像上移動時(shí)16onReadyStateChange圖像等對象狀態(tài)改變時(shí)續(xù)表

17onKeyDown鏈接圖像和文字等當(dāng)焦點(diǎn)在對象上，按鍵處于按下狀態(tài)時(shí)18onKeyPress鏈接圖像和文字等當(dāng)焦點(diǎn)在對象上，按鍵按下時(shí)19onKeyUp鏈接圖像和文字等當(dāng)焦點(diǎn)在對象上，按鍵抬起時(shí)20onSubmit表單等表單提交時(shí)21onReset表單等表單重置時(shí)22onSelect文字段落、選擇框等選定文字段落或選擇框內(nèi)某項(xiàng)時(shí)23onUnload主頁面等當(dāng)離開此頁時(shí)24onResize主窗口、幀窗口等當(dāng)瀏覽器內(nèi)的窗口大小改變時(shí)25onScroll主窗口、幀窗口、多行輸入文本框等當(dāng)拖曳瀏覽器窗口的滾動條時(shí)26onRowEnterShockwave等動畫載入時(shí)27onRowExitShockwave等動畫卸載時(shí)續(xù)表

（3）如果出現(xiàn)帶括號的事件，則該事件是鏈接對象的，使用它們時(shí)，系統(tǒng)會自動在行為控制器下拉列表框內(nèi)顯示的事件名稱前面增加一個(gè)“#”號，表示空鏈接。（4）其他操作。

選中行為控制器列表框內(nèi)的某一個(gè)行為項(xiàng)（即動作和事件）時(shí)，再單擊按鈕，即可刪除選中的行為項(xiàng)。選中行為項(xiàng)后，單擊按鈕，可以使選中的行為執(zhí)行次序提前；單擊選中行為項(xiàng)后，單擊按鈕，可以使選中的行為執(zhí)行次序下降。

在頁面內(nèi)插入Shockwave或Flash影像的情況下，選擇該動作名稱后，會彈出“控制Shockwave或Flash”對話框，如圖5-2-3所示。（1）“影片”下拉列表框：用來選擇Shockwave或Flash影像的名字。3．控制Shockwave或Flash（2）“操作”欄：該欄有4個(gè)單選項(xiàng)，各選項(xiàng)的含義如下。

“播放”：使指定的Flash或Shockwave播放。

“停止”：使指定的Flash或Shockwave停止。“后退”：使指定的Flash或Shockwave回到第一幀并開始播放。

“前往幀”：選擇該選項(xiàng)后，在后面的“前往幀”文本框中輸入一個(gè)數(shù)值，即可將網(wǎng)頁中的Flash或Shockwave轉(zhuǎn)到指定的幀。單擊“確定”按鈕后，即可在網(wǎng)頁中插入“控制Shockwave或Flash”行為。5.3.1學(xué)習(xí)目標(biāo)商家在促銷產(chǎn)品時(shí)，為了吸引消費(fèi)者的注意，經(jīng)常會設(shè)置一些小游戲。網(wǎng)上促銷也一樣，“產(chǎn)品促銷之游戲頁”就是模擬商家的促銷行為，制作一個(gè)帶有游戲的產(chǎn)品宣傳網(wǎng)頁。該網(wǎng)頁的顯示效果如圖5-3-1所示。5.3【案例17】“產(chǎn)品促銷之游戲頁”網(wǎng)頁圖5-3-1“產(chǎn)品促銷之游戲頁”網(wǎng)頁的顯示效果

拼圖游戲是利用層和行為制作的一個(gè)非常有意思的網(wǎng)頁實(shí)例。利用“行為”中的“拖曳層”動作，可以使層脫離位置的限制，隨意在網(wǎng)頁中進(jìn)行移動，而靠齊文本框設(shè)置可以使層在接近單元格的時(shí)候自動對齊，使游戲時(shí)的操作更簡單。

在網(wǎng)頁中添加音樂后，可以增加游戲的可玩性，提高瀏覽者對該網(wǎng)頁的歡迎程度。5.3.2操作過程1．顯示-隱藏層創(chuàng)建層后，單擊選擇該動作名稱，彈出“顯示-隱藏層”對話框，如圖5-3-2所示。如果要設(shè)置層為顯示狀態(tài)，單擊選中“命名的層”列表框內(nèi)層的名稱，再單擊“顯示”按鈕，此時(shí)“命名的層”列表框內(nèi)選中的層名稱右邊會出現(xiàn)“（顯示）”文字。5.3.3相關(guān)知識

如果要設(shè)置層為不顯示狀態(tài)，則單擊“隱藏”按鈕。單擊“默認(rèn)值”按鈕后，可將層的顯示與否設(shè)置為默認(rèn)狀態(tài)。2．“拖動層”動作在頁面內(nèi)插入層后，單擊該動作名稱，彈出“拖動層”對話框，如圖5-3-3所示。（1）選擇“基本”標(biāo)簽后的“拖動層”對話框如圖5-3-3所示。該對話框內(nèi)各選項(xiàng)的作用如下?！皩印毕吕斜砜颍哼x擇要拖動的層的名字。

“移動”下拉列表框：選擇“不限制”，層可以在頁面內(nèi)任意移動。選擇“限制”后，在其右邊會增加4個(gè)文本框，用來輸入上、下、左和右的數(shù)字，形成層移動的限制區(qū)域。

“放下目標(biāo)”欄：在“左”和“上”文本框內(nèi)輸入數(shù)據(jù)（相對于瀏覽器的左上角），以確定拖曳層移動的目標(biāo)位置。單擊“取得目前位置”按鈕，可以將選定層的當(dāng)前位置數(shù)值自動填入上述兩個(gè)文本框內(nèi)。“靠齊距離”文本框：輸入一個(gè)數(shù)據(jù)，當(dāng)層移動到的位置與目標(biāo)位置小于該數(shù)據(jù)時(shí)，層會自動定位到目標(biāo)位置。否則層將移回原位置。可見，該文本框內(nèi)的數(shù)值越大，越容易將層拖曳到目標(biāo)位置。（2