动态时间轴.pptVIP

第14章 動態時間軸效果 第十四章：動態時間軸效果 將時間軸視為Dreamweaver動態效果的設計中心一點也不為過，各位可以將動畫中的影格觀念加入到頁面中，同時藉由圖層可自由移動的特性來創造出頁面中的動畫效果。 本章的重點在於時間軸的基本觀念與使用技巧，這裡將從基本的動畫設計開始一直到時間軸的管理操作，最後會再介紹動畫原理與各種影格類型。 第十四章：動態時間軸效果 14-1時間軸面板簡介 14-2時間軸動畫設計 14-2-1建立動畫效果 14-2-2建立轉彎動畫 14-2-3調整動畫內容 14-2-4錄製動畫內容 14-3時間軸的管理 14-3-1增加時間軸 14-3-2刪除時間軸 14-3-3時間軸重新命名 14-4動畫原理剖析 14-4-1動畫播放速度 14-4-2動畫影格類型 14-1時間軸面板簡介 若各位有學過動畫製作的相關軟體時會發現到Dreamweaver的時間軸畫面非常的熟悉，因為它就是利用影格觀念來設計動畫的。如果沒學過也沒關係，這裡一樣會帶領各位了解時間軸面板的各項功能，請執行「視窗/時間軸」以開啟「時間軸」面板。 14-2時間軸動畫設計 要利用時間軸產生動畫必須要和圖層一起搭配，因為只有圖層可以在頁面上作自由移動，但由於我們可以在圖層內放置多種網頁元素，所以幾乎所有看到的內容都能做出動畫效果，當各位學習完時間軸的動畫製作後我們會在最後一個小節中將動畫的原理及相關名詞作一個完整的解釋讓大家知其然也知其所以然。 14-2-1建立動畫效果 我們就以簡單的圖層移動效果來學習時間軸上的動畫控制。 將圖層放入到時間軸 建立移動動畫 14-2-2建立轉彎動畫 二個關鍵影格可以做出移動動畫，若要讓動畫產生轉彎的效果時，那就至少要需三個關鍵影格了。 增加關鍵影格 調整動畫效果 14-2-3調整動畫內容 一個好的動畫效果並無法直接設計完成，而是先建立基本的動畫內容後再做細部調整一直到效果滿意為止，各位在調整的過程中也要記得隨時預覽動畫效果以做為繼續調整的依據。 關鍵影格的移動及刪除 圖層物件的增加與移除 「重覆」控制項的作用 調整動畫播放的時間長短 調整動畫開始播放的時間 變更動畫速度 14-2-4錄製動畫內容 那如果要設計出像蝴蝶飛舞般的動畫效果時，利用手動新增關鍵影格的方式絶對會讓各位大喊叫不消，此時可以搬出時間軸的另一項法寶「記錄圖層移動路徑」，它能讓各位像在畫面上繪圖般的設計動畫移動路徑並產生動畫效果，所以路徑再複雜也不怕。 14-3時間軸的管理 時間軸使用起來雖然方便，但也不能毫無章法的使用，所以我們還必須了解如何對時間軸進行管理，才不會讓頁面上的動畫效果亂成一團。 14-3-1增加時間軸 前面曾經提過一個時間軸最多可以建立32組圖層動畫，如果還不夠使用的話我們可以再新增第二個時間軸來設計動畫效果。 14-3-2刪除時間軸 不需使用的時間軸也可以直接刪除。 14-3-3時間軸重新命名 像「Timeline1」這種時間軸名稱看起來一點也不直覺，同時也可能造成使用時的困擾，沒關係，改個名字就好了。 14-4動畫原理剖析 本章最後來為各位詳述動畫的產生原理及相關名詞解釋，同時這些觀念不只適用於Dreamwever，就連其他的動畫軟體都一體適用。 14-4-1動畫播放速度 各位眼中的動畫其實是多個畫面快速切換的效果，我們可以從時間軸中來證明這一點。 14-4-2動畫影格類型 但我們不可能為了動畫效果而一一去繪製每個動畫畫面，而此時就是關鍵影格上場的時候了。 記得在調整動畫時我們都是先點取時間軸上的圓點，然後再去變更圖層位置。位於圓點上的影格就稱為「關鍵影格」，可以讓我們自由調整圖層在頁面上的位置。其他的影格則稱為「一般影格」，其內容會根據前後二個關鍵影格上的圖層位置而自動產生，利用這個特性，當我們在設計移動動畫時只要調整位於關鍵影格上的圖層位置即可，剩下的就全交給Dreamweaver處理吧。