Dreamweaver/制作層動(dòng)畫(huà)

使用“時(shí)間軸”面板

“時(shí)間軸”面板顯示層和圖像的屬性在一段時(shí)間內(nèi)如何更改。選擇“窗口”>“時(shí)間軸”，打開(kāi)“時(shí)間軸”面板。

'時(shí)間軸彈出式菜單'指定當(dāng)前在“時(shí)間軸”面板中顯示文檔的哪些時(shí)間軸。

'播放欄'顯示當(dāng)前在“文檔”窗口中顯示時(shí)間軸的哪一幀。

'幀編號(hào)'指示幀的序號(hào)?！昂笸恕焙汀安シ拧卑粹o之間的數(shù)字是當(dāng)前幀編號(hào)。您可以通過(guò)設(shè)置幀的總數(shù)和每秒幀數(shù) (fps) 來(lái)控制動(dòng)畫(huà)的持續(xù)時(shí)間。每秒 15 幀這一默認(rèn)設(shè)置是比較適當(dāng)?shù)钠骄俾?，可用于在通常?Windows 和 Macintosh 系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器。較快的速率可能不會(huì)提高性能。瀏覽器始終會(huì)播放動(dòng)畫(huà)的每一幀，即使它們無(wú)法達(dá)到指定的幀速率。如果幀速率超過(guò)瀏覽器可以支持的速率，則將被忽略。

'上下文菜單'包含各種與時(shí)間軸相關(guān)的命令。

'行為通道'是應(yīng)該在時(shí)間軸中特定幀處執(zhí)行的行為的通道。

'動(dòng)畫(huà)條'顯示每個(gè)對(duì)象的動(dòng)畫(huà)的持續(xù)時(shí)間。一個(gè)行可以包含表示不同對(duì)象的多個(gè)條。不同的條無(wú)法控制同一幀中的同一對(duì)象。

'關(guān)鍵幀'是動(dòng)畫(huà)條中已經(jīng)為對(duì)象指定屬性（如位置）的幀。Dreamweaver 會(huì)計(jì)算關(guān)鍵幀之間幀的中間值。小圓標(biāo)記表示關(guān)鍵幀。

'動(dòng)畫(huà)'通道顯示用于制作層和圖像動(dòng)畫(huà)的條。

播放選項(xiàng)

下面是用于查看動(dòng)畫(huà)的播放選項(xiàng)。

'后退至起點(diǎn)'將播放欄移至?xí)r間軸中的第一幀。

'后退'將播放欄向左移動(dòng)一幀。單擊“后退”并按住鼠標(biāo)按鈕可向后播放時(shí)間軸。

'播放'將播放欄向右移動(dòng)一幀。單擊“播放”并按住鼠標(biāo)按鈕可向前播放時(shí)間軸。

'自動(dòng)播'放使時(shí)間軸于當(dāng)前頁(yè)在瀏覽器中加載時(shí)自動(dòng)開(kāi)始播放?！白詣?dòng)播放”將一個(gè)行為附加到頁(yè)的 body 標(biāo)簽，該行為在頁(yè)加載時(shí)執(zhí)行“播放時(shí)間軸”操作。

'循環(huán)'使當(dāng)前時(shí)間軸于頁(yè)在瀏覽器中打開(kāi)時(shí)無(wú)限地循環(huán)?！把h(huán)”在動(dòng)畫(huà)的最后一幀之后將“轉(zhuǎn)到時(shí)間軸幀”行為插入到“行為”通道中。在“行為”通道中雙擊該行為的標(biāo)記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)。

使用時(shí)間軸動(dòng)畫(huà)移動(dòng)層

最常見(jiàn)的時(shí)間軸動(dòng)畫(huà)都涉及到沿著一條軌跡移動(dòng)層。時(shí)間軸只能移動(dòng)層。若要使圖像或文本移動(dòng)，請(qǐng)使用“插入”欄上的“繪制層”按鈕創(chuàng)建一個(gè)層，然后在該層中插入圖像、文本或其他任何類(lèi)型的內(nèi)容。

時(shí)間軸也可以更改層和圖像的其他屬性；

• '若要使用時(shí)間軸制作層動(dòng)畫(huà)，請(qǐng)執(zhí)行以下操作：'

1. 將層移至它在動(dòng)畫(huà)開(kāi)始時(shí)應(yīng)處于的位置。
2. 選擇“窗口”>“時(shí)間軸”。
3. 選擇您要制作動(dòng)畫(huà)的層。確保您已選擇了所需的元素。單擊層標(biāo)記或?qū)舆x擇柄，或者使用“層”面板選擇一個(gè)層。有關(guān)更多信息，請(qǐng)參見(jiàn)操作層。當(dāng)選定一個(gè)層后，它的周?chē)鷮⒊霈F(xiàn)調(diào)整柄。在層中單擊會(huì)將一個(gè)閃爍的插入點(diǎn)放入層中，但不會(huì)選定該層。
4. 選擇“修改”>“時(shí)間軸”>“在時(shí)間軸上添加對(duì)象”，或者直接將選定層拖至“時(shí)間軸”面板中。一個(gè)條將出現(xiàn)在時(shí)間軸的第一個(gè)通道中。層的名稱(chēng)將在該條中出現(xiàn)。
5. 單擊位于條末端的關(guān)鍵幀標(biāo)記。
6. 在頁(yè)面上將層移至它在動(dòng)畫(huà)結(jié)束時(shí)應(yīng)處于的位置，將出現(xiàn)一條線，它顯示“文檔”窗口中動(dòng)畫(huà)的軌跡。
7. 如果要讓層沿曲線移動(dòng)，請(qǐng)選擇其動(dòng)畫(huà)條，然后按住 Ctrl 鍵并單擊 (Windows) 或按住 Command 鍵并單擊 (Macintosh) 動(dòng)畫(huà)條中部的一個(gè)幀，從而在您單擊的幀處添加一個(gè)關(guān)鍵幀，或者單擊動(dòng)畫(huà)條中部的一個(gè)幀并從上下文菜單中選擇“添加關(guān)鍵幀”。重復(fù)此步驟，定義其他關(guān)鍵幀。
8. 按住“播放”按鈕，預(yù)覽頁(yè)面上的動(dòng)畫(huà)。重復(fù)此過(guò)程，在時(shí)間軸上添加其他層和圖像并創(chuàng)建更為復(fù)雜的動(dòng)畫(huà)。

通過(guò)拖動(dòng)軌跡創(chuàng)建時(shí)間軸'

如果要用復(fù)雜的軌跡創(chuàng)建動(dòng)畫(huà)，更為有效的方法可能是記錄您拖動(dòng)層時(shí)經(jīng)過(guò)的軌跡，而不是創(chuàng)建各個(gè)關(guān)鍵幀。

• '若要通過(guò)拖動(dòng)軌跡來(lái)創(chuàng)建時(shí)間軸，請(qǐng)執(zhí)行以下操作：'

1. 選擇一個(gè)層，將該層移至它在動(dòng)畫(huà)開(kāi)始時(shí)應(yīng)處于的位置。
2. 確保您已選定該層；如果插入點(diǎn)位于該層中，則說(shuō)明尚未選定該層。若要選擇一個(gè)層，請(qǐng)單擊層標(biāo)記或?qū)拥倪x擇柄，或者使用“層”面板。
3. 選擇“修改”>“時(shí)間軸”>“記錄層的軌跡”，在頁(yè)面上拖動(dòng)層以創(chuàng)建軌跡。
4. 當(dāng)?shù)竭_(dá)動(dòng)畫(huà)應(yīng)停止的點(diǎn)時(shí)釋放該層，Dreamweaver在時(shí)間軸上添加一個(gè)動(dòng)畫(huà)條，其中包含適當(dāng)數(shù)量的關(guān)鍵幀。
5. 在“時(shí)間軸”面板中，單擊“后退”按鈕；然后按住“播放”按鈕預(yù)覽動(dòng)畫(huà)。

修改時(shí)間軸

定義完時(shí)間軸的基本組成部分后，可以進(jìn)行一些更改，如添加和刪除幀、更改動(dòng)畫(huà)開(kāi)始時(shí)間等。

• '若要修改時(shí)間軸，請(qǐng)執(zhí)行以下任一操作：'
  • 若要使動(dòng)畫(huà)的播放時(shí)間更長(zhǎng)，請(qǐng)將結(jié)束幀標(biāo)記向右拖動(dòng)。動(dòng)畫(huà)中的所有關(guān)鍵幀都會(huì)移動(dòng)，以保持它們的相對(duì)位置不變。若要阻止其他關(guān)鍵幀移動(dòng)，請(qǐng)按住 Ctrl 鍵并拖動(dòng)結(jié)束幀標(biāo)記。
  • 若要使層更早或更晚地到達(dá)某一關(guān)鍵幀位置，請(qǐng)?jiān)趧?dòng)畫(huà)條中將關(guān)鍵幀向左或向右移動(dòng)。
  • 若要更改動(dòng)畫(huà)的開(kāi)始時(shí)間，請(qǐng)選擇一個(gè)或多個(gè)與該動(dòng)畫(huà)關(guān)聯(lián)的動(dòng)畫(huà)條（按 Shift 可一次選擇多個(gè)動(dòng)畫(huà)條），然后向左或向右移動(dòng)。
  • 若要移動(dòng)整個(gè)動(dòng)畫(huà)軌跡的位置，請(qǐng)選擇整個(gè)動(dòng)畫(huà)條，然后在頁(yè)面上拖動(dòng)該對(duì)象。Dreamweaver 會(huì)調(diào)整所有關(guān)鍵幀的位置。在整個(gè)動(dòng)畫(huà)條上所做出的任何更改將更改所有關(guān)鍵幀。
  • 若要在時(shí)間軸上添加或刪除幀，請(qǐng)選擇“修改”>“時(shí)間軸”>“添加幀”或“修改”>“時(shí)間軸”>“刪除幀”。
  • 若要使時(shí)間軸于頁(yè)在瀏覽器中打開(kāi)時(shí)自動(dòng)播放，請(qǐng)單擊“自動(dòng)播放”?！白詣?dòng)播放”會(huì)向頁(yè)附加一個(gè)行為，該行為將在頁(yè)加載時(shí)執(zhí)行“播放時(shí)間軸”操作。
• 若要使時(shí)間軸連續(xù)循環(huán)，請(qǐng)單擊“循環(huán)”?！把h(huán)”將“轉(zhuǎn)到時(shí)間軸幀”操作插入到動(dòng)畫(huà)最后一幀后的“行為”通道。

用時(shí)間軸更改圖像和層的屬性

除了用時(shí)間軸移動(dòng)層之外，您還可以更改層的可見(jiàn)性、大小和層疊順序并更改圖像的源文件。

• '若要用時(shí)間軸更改圖像和層的屬性，請(qǐng)執(zhí)行以下操作：'

1. 在“時(shí)間軸”面板中，執(zhí)行以下操作之一：
   • 在控制要更改的對(duì)象的動(dòng)畫(huà)條中選擇一個(gè)現(xiàn)有關(guān)鍵幀。（起始幀和結(jié)束幀始終是關(guān)鍵幀。）
   • 單擊動(dòng)畫(huà)條中部的一個(gè)幀并選擇“修改”>“時(shí)間軸”>“添加關(guān)鍵幀”，創(chuàng)建一個(gè)新的關(guān)鍵幀?；蛘?，可以通過(guò)按住 Ctrl 鍵并單擊 (Windows) 或按住 Command 鍵并單擊 (Macintosh) 動(dòng)畫(huà)條中的一個(gè)幀來(lái)創(chuàng)建一個(gè)新的關(guān)鍵幀。
2. 通過(guò)執(zhí)行以下操作之一定義對(duì)象的新屬性：
   • 若要更改圖像的源文件，請(qǐng)單擊“屬性”檢查器中“源文件”文本框旁的文件夾圖標(biāo)，然后瀏覽到新圖像并將其選定。
   • 若要更改層的可見(jiàn)性，請(qǐng)從“屬性”檢查器“可見(jiàn)性”文本框中的彈出式菜單選擇“繼承”、“可見(jiàn)”或“隱藏”?；蛘?，您也可以使用“層”面板中的眼形圖標(biāo)。#*若要更改層的大小，請(qǐng)拖動(dòng)該層的大小調(diào)整柄或在“屬性”檢查器的“寬”和“高”文本框中輸入新的值。并非所有瀏覽器都會(huì)動(dòng)態(tài)更改層的大小。
   • 若要更改層的堆疊順序，請(qǐng)?jiān)凇癦 軸”文本框中輸入新值，或使用“層”面板更改當(dāng)前層的堆疊順序（按住“播放”按鈕以查看動(dòng)畫(huà)。
3. 按住“播放”按鈕以查看動(dòng)畫(huà)。

使用多個(gè)時(shí)間軸

與嘗試用一個(gè)時(shí)間軸控制頁(yè)面上的所有操作相比，使用單獨(dú)的時(shí)間軸來(lái)控制頁(yè)的各個(gè)離散部分會(huì)更容易一些。例如，一個(gè)頁(yè)可能包含多個(gè)互動(dòng)元素，每個(gè)元素都觸發(fā)不同的時(shí)間軸。

• '若要管理多個(gè)時(shí)間軸，請(qǐng)執(zhí)行以下任一操作：'
  • 若要新建時(shí)間軸，請(qǐng)選擇“修改”>“時(shí)間軸”>“添加時(shí)間軸”。
  • 若要?jiǎng)h除選定的時(shí)間軸，請(qǐng)選擇“修改”>“時(shí)間軸”>“刪除時(shí)間軸”。這將永久刪除選定時(shí)間軸中的所有動(dòng)畫(huà)。
  • 若要重命名選定時(shí)間軸，請(qǐng)選擇“修改”>“時(shí)間軸”>“重命名時(shí)間軸”，或者在“時(shí)間軸”面板的“時(shí)間軸”彈出式菜單中輸入新的名稱(chēng)。
  • 若要在“時(shí)間軸”面板中查看另一個(gè)時(shí)間軸，請(qǐng)從“時(shí)間軸”面板的“時(shí)間軸”彈出式菜單中選擇一個(gè)新的時(shí)間軸。

拷貝和粘貼動(dòng)畫(huà)

一旦有您喜愛(ài)的動(dòng)畫(huà)序列，就可以將其拷貝并粘貼到當(dāng)前時(shí)間軸的另一區(qū)域、同一文檔中的另一時(shí)間軸或者另一文檔中的時(shí)間軸。您還可以同時(shí)拷貝并粘貼多個(gè)序列。

'若要剪切（或拷貝）并粘貼動(dòng)畫(huà)序列，請(qǐng)執(zhí)行以下操作：'

1. 單擊一個(gè)動(dòng)畫(huà)條以選擇一個(gè)序列。若要選擇多個(gè)序列，請(qǐng)按住 Shift 鍵并單擊多個(gè)動(dòng)畫(huà)條；若要選擇所有序列，請(qǐng)按 Ctrl+A 鍵 (Windows) 或 Command+A 鍵 (Macintosh)。
2. 拷貝或剪切選定內(nèi)容。執(zhí)行下列操作之一：
   • 將播放欄移至當(dāng)前時(shí)間軸中的另一處。
   • 從“時(shí)間軸”彈出式菜單中選擇另一個(gè)時(shí)間軸。
   • 打開(kāi)另一個(gè)文檔或創(chuàng)建一個(gè)新文檔，然后在“時(shí)間軸”面板中單擊。
3. 將選定內(nèi)容粘貼到時(shí)間軸中。同一對(duì)象的動(dòng)畫(huà)條不能重疊，因?yàn)橐粋€(gè)層不能同時(shí)處于兩個(gè)位置（一個(gè)圖像也不能同時(shí)具有兩個(gè)不同的源）。如果您所粘貼的動(dòng)畫(huà)條與同一對(duì)象的另一動(dòng)畫(huà)條重疊，Dreamweaver 會(huì)自動(dòng)將選定內(nèi)容移至第一個(gè)不重疊的幀。

• 在將動(dòng)畫(huà)序列粘貼到另一文檔時(shí)，應(yīng)牢記兩條原則：
  • 如果您拷貝層的動(dòng)畫(huà)序列且新文檔包含同名的層，Dreamweaver 會(huì)將動(dòng)畫(huà)屬性應(yīng)用于新文檔中的現(xiàn)有層。
  • 如果您拷貝層的動(dòng)畫(huà)序列且新文檔不包含同名的層，Dreamweaver會(huì)將層和它的內(nèi)容隨動(dòng)畫(huà)序列一起從初始文檔中拷貝下來(lái)。若要將粘貼的動(dòng)畫(huà)序列應(yīng)用于新文檔中的另一個(gè)層，請(qǐng)從上下文菜單中選擇“更改對(duì)象”并從彈出式菜單中選擇第二個(gè)層的名稱(chēng)。如果需要，刪除所粘貼的層。

將動(dòng)畫(huà)序列應(yīng)用于另一對(duì)象 為了節(jié)約時(shí)間，您可以只創(chuàng)建一次動(dòng)畫(huà)序列，然后將其應(yīng)用于文檔中剩余的每個(gè)層。

'若要將現(xiàn)有動(dòng)畫(huà)序列應(yīng)用于其他對(duì)象，請(qǐng)執(zhí)行以下操作：'

1. 在“時(shí)間軸”面板中，選擇動(dòng)畫(huà)序列并將其拷貝。
2. 單擊“時(shí)間軸”面板的任一幀，然后在該幀處粘貼動(dòng)畫(huà)序列。
3. 右鍵單擊 (Windows) 或按住 Control 鍵并單擊 (Macintosh) 粘貼的動(dòng)畫(huà)序列，然后從上下文菜單中選擇“更改對(duì)象”。

在出現(xiàn)的對(duì)話框中，從彈出式菜單中選擇另一對(duì)象并單擊“確定”。

1. 對(duì)于要遵循同一動(dòng)畫(huà)序列的其他所有對(duì)象，重復(fù)第 2 步到第 4 步。
2. 創(chuàng)建動(dòng)畫(huà)序列后，您也可以改變關(guān)于制作哪一個(gè)層的動(dòng)畫(huà)的決定；只需執(zhí)行上面的第 3 步和第 4 步即可（不必進(jìn)行拷貝或粘貼）。

重命名時(shí)間軸

可以重命名時(shí)間軸。

'若要重命名當(dāng)前在“時(shí)間軸”面板中顯示的時(shí)間軸，請(qǐng)執(zhí)行以下操作：'

1. 選擇“修改”>“時(shí)間軸”>“重命名時(shí)間軸”。
2. 在“重命名時(shí)間軸”對(duì)話框中輸入新的名稱(chēng)。

如果您的文檔包含“播放時(shí)間軸”行為操作（例如，如果它包含訪問(wèn)者必須單擊才能啟動(dòng)時(shí)間軸的按鈕），則必須編輯該行為以反映新的時(shí)間軸名稱(chēng)。

時(shí)間軸動(dòng)畫(huà)小技巧

以下建議可以提高動(dòng)畫(huà)的性能并使動(dòng)畫(huà)更易于創(chuàng)建：

• 顯示和隱藏層，而不是更改多圖像動(dòng)畫(huà)的源文件。由于新的圖像必須進(jìn)行下載，所以切換圖像的源文件會(huì)降低動(dòng)畫(huà)的速度。如果所有圖像都在動(dòng)畫(huà)運(yùn)行前在隱藏層中同時(shí)下載，將不會(huì)出現(xiàn)明顯的停頓，并且不會(huì)缺少圖像。
• 擴(kuò)展動(dòng)畫(huà)條以創(chuàng)建更順暢的動(dòng)作。如果動(dòng)畫(huà)斷斷續(xù)續(xù)并且圖像在不同位置之間跳動(dòng)，請(qǐng)拖動(dòng)該層動(dòng)畫(huà)條的結(jié)束幀，使動(dòng)作延伸到更多的幀。通過(guò)延長(zhǎng)動(dòng)畫(huà)條，可以在運(yùn)動(dòng)的開(kāi)始點(diǎn)和結(jié)束點(diǎn)之間創(chuàng)建更多的數(shù)據(jù)點(diǎn)，同時(shí)也會(huì)使對(duì)象更為緩慢地移動(dòng)。請(qǐng)嘗試增加每秒幀數(shù) (fps) 以提高速度，但應(yīng)注意在普通系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器都不能支持超過(guò) 15 fps 的動(dòng)畫(huà)速度。請(qǐng)?jiān)诓煌南到y(tǒng)上用不同的瀏覽器對(duì)動(dòng)畫(huà)進(jìn)行測(cè)試，以找到最佳的設(shè)置。
• 不要制作大型位圖的動(dòng)畫(huà)。制作大型圖像的動(dòng)畫(huà)會(huì)導(dǎo)致動(dòng)畫(huà)速度減慢。相反，應(yīng)創(chuàng)建合成圖像，并移動(dòng)圖像中較小的部分。例如，可以通過(guò)僅制作汽車(chē)輪胎的動(dòng)畫(huà)來(lái)顯示汽車(chē)的運(yùn)動(dòng)。
• 創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)。不要?jiǎng)?chuàng)建對(duì)當(dāng)前瀏覽器要求過(guò)高的動(dòng)畫(huà)。即使在系統(tǒng)或 Internet 性能降低時(shí)，瀏覽器始終會(huì)播放時(shí)間軸動(dòng)畫(huà)中的每一幀。

參考來(lái)源

http://www.baike.baidu.com

Dreamweaver使用手冊(cè)導(dǎo)航

Dreamweaver安裝: Dreamweaver安裝 Dreamweaver使用： 新建站點(diǎn)| 創(chuàng)建新文檔| 保存新文檔| 關(guān)于CSS層| 插入層| 管理層| 將層轉(zhuǎn)化為表格| 制作層動(dòng)畫(huà)| 處理CSS布局可視化| div標(biāo)簽進(jìn)行布局| 關(guān)于表格| 添加及刪除行和列| 拆分和合并單元格 |復(fù)制、粘貼和刪除單元格| 設(shè)置表格和單元格的格式| 選擇表格元素| 關(guān)于框架和框架集| 創(chuàng)建框架和框架集| 框架中打開(kāi)文檔| 查看和設(shè)置框架屬性| 關(guān)于Dreamweaver模板| 模板標(biāo)簽語(yǔ)法| 設(shè)計(jì)視圖和代碼視圖中的模板和基于模板的文檔| 創(chuàng)建Dreamweaver模板| 創(chuàng)建可編輯區(qū)域| 編輯和更新模板| DreamWeaver管理模板| 關(guān)于使用頁(yè)面| 設(shè)置頁(yè)面屬性 | 任務(wù)自動(dòng)化| 在瀏覽器中預(yù)覽和測(cè)試頁(yè)面| 插入文本| 設(shè)置段落格式和文檔結(jié)構(gòu)| 設(shè)置文本格式| 使用層疊樣式表設(shè)置文本格式| 創(chuàng)建鏈接| 管理鏈接| 導(dǎo)航條| DreamWeaver插入圖像| 使用JavaScript行為 Dreamweaver其他 : Dreamweaver快捷鍵 | Dreamweaver序列號(hào)