第10章使用層和時間軸

本章將介紹層和時間軸的基本知識以及使用它們創(chuàng)建動畫的基本方法。

第10章使用層和時間軸教學目標了解層的概念和【層】面板的使用方法。掌握創(chuàng)建和編輯層的基本方法。掌握【時間軸】面板的使用方法。掌握使用層和時間軸創(chuàng)建動畫的方法。10.1創(chuàng)建層本節(jié)主要內容：認識層創(chuàng)建層設置層屬性10.1.1

認識層層是一種能夠隨意定位的頁面元素，如同浮動在頁面里的透明層，可以將層放置在頁面的任何位置。在網頁制作中，可以使用層將許多對象進行重疊，從而使其產生層次感。層與Div標簽還有一定的聯(lián)系，它們的共同點是在源代碼中都都使用HTML標簽<div>…</div>進行標識，不同的是Div標簽是相對定位的，不能重疊，而層是絕對定位的，可以重疊。層和Div標簽兩者可以相互轉換，轉換的方法是，在【CSS規(guī)則定義】對話框的【定位】分類中，將【類型】選項設置為“絕對”，即表示層，否則即為Div標簽，這是層與Div標簽轉換的關鍵因素。在插入層時，層同時被賦予了CSS樣式，通過【屬性】面板還可以修改這些CSS樣式，而插入Div標簽時，需要再單獨創(chuàng)建CSS樣式對它進行控制，而且也不能通過【屬性】面板設置其CSS樣式。10.1.1

認識層Div標簽和層的外觀和源代碼。10.1.2

創(chuàng)建層一、創(chuàng)建層? 選擇【插入】/【布局對象】/【層】命令，插入一個默認大小的層。? 將【插入】/【布局】面板上的（繪制層）按鈕拖動到文檔窗口中，插入一個默認大小的層。? 單擊【插入】/【布局】面板上的（繪制層）按鈕，并將光標移至文檔窗口中，當光標變?yōu)樾螤顣r拖曳光標，繪制一個自定義大小的層。? 如果想一次繪制多個層，在單擊（繪制層）按鈕后，按住Ctrl鍵不放，連續(xù)進行繪制即可。10.1.2

創(chuàng)建層二、選擇層1、在【層】面板中單擊層的名稱選中層。10.1.2

創(chuàng)建層2、單擊文檔中的圖標來選定層，如果該圖標沒有顯示，可在【首選參數(shù)】/【不可見元素】分類中勾選【層錨記】復選框。10.1.2

創(chuàng)建層3、將光標置于層內，然后在文檔窗口底邊的標簽條中選擇相應的HTML標簽。10.1.2

創(chuàng)建層4、單擊層的邊框線選中層。10.1.2

創(chuàng)建層三、縮放層1、選定層，然后拖動縮放手柄（層周圍出現(xiàn)的小方塊）來改變層的尺寸。拖動上或下手柄改變層的高度，拖動左或右手柄改變層的寬度，拖動4個角的任意一個縮放點同時改變層的寬度和高度。10.1.2

創(chuàng)建層2、選定層，然后按住Ctrl鍵，每按一次方向鍵，層就被改變一個像素值。3、選定層，然后同時按住Shift＋Ctrl鍵，每按一次方向鍵，層就被改變10個像素值。如果同時對多個層的大小進行統(tǒng)一調整，方法是，按住Shift鍵，將所有的層逐一選定，然后在【屬性】面板的【寬】文本框內輸入數(shù)值，按Enter鍵確認。此時文檔窗口中所有層的寬度全部變成了指定的寬度。還可以使用【修改】/【排列順序】/【設成寬度相同】命令來統(tǒng)一寬度，利用這種方法將以最后選定的層的寬度為標準。10.1.2

創(chuàng)建層四、移動層? 選定層后，當光標靠近縮放手柄出現(xiàn)時，按住鼠標左鍵不放并進行拖動，層將跟著鼠標的移動而發(fā)生位移。? 選定層，然后按4個方向鍵向4個方向移動層。每按一次方向鍵，將使層移動1個像素值的距離。? 選定層，按住Shift鍵，然后按4個方向鍵，向4個方向移動層。每按一次方向鍵，將使層移動10個像素值的距離。10.1.2

創(chuàng)建層五、對齊層對齊層的方法是，首先將所有層選定，然后選擇【修改】/【排列順序】中的相應命令即可。? 【左對齊】：以最后選定的層的左邊線為標準，對齊排列層。? 【右對齊】：以最后選定的層的右邊線為標準，對齊排列層。? 【對齊上緣】：以最后選定的層的頂邊為標準，對齊排列層。? 【對齊下緣】：以最后選定的層的底邊為標準，對齊排列層。10.1.3

設置層屬性插入層后，還需要設置層的屬性，這樣它才會更符合要求。10.2使用時間軸認識時間軸創(chuàng)建時間軸動畫錄制層路徑本節(jié)主要內容：10.2.1

認識時間軸時間軸是通過計算機技術，依據時間順序，把一方面或多方面的事件串聯(lián)起來，形成相對完整的記錄體系，運用圖文的形式呈現(xiàn)給用戶。在Dreamweaver中，【時間軸】面板是創(chuàng)建時間軸動畫的關鍵。選擇【窗口】/【時間軸】命令即可打開【時間軸】面板。10.2.1

認識時間軸動畫的基本單位叫做幀，將很多幀按照時間先后順序連接起來就形成了動畫，而時間軸用來排列幀。在動畫中有些幀非常關鍵，可以影響整個動畫，這樣的幀叫做關鍵幀。關鍵幀的概念來源于傳統(tǒng)的卡通片制作。在早期，熟練的動畫師設計卡通片中的關鍵畫面，也即所謂的關鍵幀，然后由一般的動畫師設計中間幀。在三維計算機動畫中，中間幀的生成由計算機來完成。所有影響畫面圖像的參數(shù)都可成為關鍵幀的參數(shù)，如位置、旋轉角、紋理的參數(shù)等。關鍵幀技術是計算機動畫中最基本并且運用最廣泛的方法。10.2.2創(chuàng)建時間軸動畫一、使用層創(chuàng)建時間軸動畫（1）選中層，然后選擇【修改】/【時間軸】/【增加對象到時間軸】命令，將對象添加到時間軸。（2）調整動畫條的長度，然后設置最后一幀層的【左】和【上】屬性。（3）根據需要在動畫條的中間增加關鍵幀并設置層的【左】和【上】屬性。10.2.2創(chuàng)建時間軸動畫（4）如果需要在動畫運動過程中變換圖像，可單擊時間軸的第1幀，然后選中層中的圖像，接著選擇【修改】/【時間軸】/【增加對象到時間軸】命令將其添加到時間軸中，調整播放長度，然后在適當位置增加一個關鍵幀，最后在圖像【屬性】面板中將圖像修改為其他圖像。（5）在【時間軸】面板中設置動畫為自動循環(huán)播放，即勾選【自動播放】和【循環(huán)】復選框。10.2.2創(chuàng)建時間軸動畫二、將對象添加到【時間軸】面板的方法? 選擇【修改】/【時間軸】/【增加對象到時間軸】命令。? 將層直接拖曳到【時間軸】面板中。? 單擊【時間軸】面板右上角的按鈕，在快捷菜單中選擇【添加對象】命令。三、在時間軸中添加或移除幀的方法? 選擇【修改】/【時間軸】/【添加幀】或【刪除幀】命令，在播放頭右邊加入或刪除1幀。也可以使用右鍵菜單命令進行操作。? 選擇【修改】/【時間軸】/【增加關鍵幀】命令，在當前播放頭位置增加關鍵幀；選定關鍵幀，選擇【修改】/【時間軸】/【刪除關鍵幀】命令，將當前關鍵幀刪除。也可以使用右鍵菜單命令進行操作。10.2.2創(chuàng)建時間軸動畫四、修改時間軸?

若要使動畫的播放時間更長，可將結束幀標記向右拖動。動畫中的所有關鍵幀都會相應移動，若要阻止其他關鍵幀移動，可按住Ctrl鍵不放再拖動結束幀標記。? 播放時間軸動畫時，若要使層更早或更晚地到達某一關鍵幀位置，可在動畫條中將關鍵幀向左或向右移動。? 若要更改動畫的開始時間，請選擇一個或多個與該動畫關聯(lián)的動畫條（按Shift可一次選擇多個動畫條），然后向左或向右移動。? 若要在頁面中移動整個動畫運行軌跡的位置，可在【時間軸】面板中選擇整個動畫條，然后在頁面上拖動該對象。Dreamweaver會調整所有關鍵幀的位置。在整個動畫條上所做出的任何更改將更改所有關鍵幀。10.2.3錄制層路徑如果需要創(chuàng)建具有復雜運動路徑的動畫，逐個創(chuàng)建關鍵幀會花費許多時間。使用記錄AP元素的路徑功能來創(chuàng)建復雜運動軌跡的動畫。在文檔中選中層，然后選擇【修改】/【時間軸】/【錄制層路徑】命令，并在頁面上拖動層來錄制層移動的軌跡，在動畫停止的地方釋放鼠標左鍵，Dreamweaver將自動在【時間軸】面板中添加對象，并且較為合理地創(chuàng)建一定數(shù)目的關鍵幀。10.2.3錄制層路徑在創(chuàng)建時間軸動畫時需要講究一些小技巧的應用，以下幾點可以提高動畫的性能。? 使用顯示和隱藏層，而不是更改多圖像動畫的源文件。由于新的圖像必須進行下載，所以切換圖像的源文件會降低動畫的速度。如果所有圖像都在動畫運行前在隱藏層中同時下載，將不會出現(xiàn)明顯的停頓，并且不會缺少圖像。? 擴展動畫條以創(chuàng)建更順暢的動作。如果動畫斷斷續(xù)續(xù)并且圖像在不同位置之間跳動，可拖動該層動畫條的結束幀，使動作延伸到更多的幀。通過延長動畫條，可以在運動的開始點和結束點之間創(chuàng)建更多的數(shù)據點，同時也會使對象更為緩慢地移動?？蓢L試增加每秒幀數(shù)(fps)以提高速度，但應注意在