著作權所有 © 旗標出版股份有限公司
Flash 動態網頁設計入門
November 25, 2007
Page 2 November 25, 2007
本章提要
•
14-1 顏色與形狀漸變動畫特效▫
14-1-1 動畫元件與流程說明▫
14-1-2 設定文件屬性並置入背景圖▫
14-1-3 設定文字飛入動畫▫
14-1-4 製作文字形狀與色彩漸變形狀補間動畫▫
14-1-5 設定形狀提示點▫
14-1-6 實做練習:再加一段形狀補間動畫▫
14-1-7 淡出效果的動畫結尾Page 3 November 25, 2007
14-1 顏色與形狀漸變動畫
Page 4 November 25, 2007
14-1-1 動畫元件與流程說明
•
元件介紹•
動畫製作流程Page 5 November 25, 2007
•
本章動畫的主角是各個英文字母文字物件,由 於 Flash 提供了文字物件打散 (Break Apart) 及分散至圖層 (Distribute to Layer) 功能,讓 我們能從建立文字、分配圖層、到設定動畫 的過程一氣呵成,所以並不需要先製作這些英 文字母,只要準備好一 個背景元件,就可以邁 入動畫製作階段囉!
元件介紹
Page 6 November 25, 2007
動畫製作流程
Page 7 November 25, 2007
14-1-2 設定文件屬性並置入背景圖
•
設定文件屬性•
置入背景圖Page 8 November 25, 2007
14-1-3 設定文字飛入動畫
•
建立 FLASH 文字物件•
建立文字飛入動畫Page 9 November 25, 2007
建立 FLASH 文字物件
•
首先我們要建立 FLASH 這 5 個字母的文字物件Page 10 November 25, 2007
建立文字飛入動畫
•
接著進行文字物件的圖層分配▫
先將 5 個字母分配到不同圖層▫
再設定文字飛入的移動補間動畫•
請點選舞台中的 FLASH 文字物件,然後按一次 [Ctrl] + [B] 鍵來打散 (或執行『修改/打散』命 令):Page 11 November 25, 2007
建立文字飛入動畫
•
在 5 個字母仍處於被選取的狀態下,按下 [Ctrl]+ [Shift] + [D] 鍵 (或執行『修改/分散至圖層』
命令):
Page 12 November 25, 2007
建立文字飛入動畫
•
接著就可以設定文字飛入的 移動補間動畫,並製造文字 飛入時間差。Page 13 November 25, 2007
14-1-4 文字形狀與色彩漸變補間動畫
•
建立 SUPER 文字物件•
調整字母位置•
設定形狀補間動畫Page 14 November 25, 2007
建立 SUPER 文字物件
•
首先是建立 S、U、P、E、R 這 5 個獨立的文字物件,並 將之分別安排至 F、L、A、S、H 各圖層中。Page 15 November 25, 2007
建立 SUPER 文字物件
•
以上動作都完成後,你就可以把空的 S、U、P、E、R 圖層都刪除。
•
在正式設定動畫前,我們最好先利用描圖紙功能 讓 FLASH 這 5 個字母與SUPER 這 5 個字母能分 別對齊 (完整重疊),這樣變形起來才不會有位移,也比較美觀。
Page 16 November 25, 2007
設定形狀補間動畫
•
接下來要設定形狀補間動畫。由於形狀補間動畫不能設定 在文字物件上,所以我們在做變化前,要把需要用到的字 母執行『修改/打散』命令,將其轉變為圖像物件。Page 17 November 25, 2007
14-1-5 設定形狀提示點
•
有時單純的形狀補間動畫無法讓圖像物件變形得 很漂亮,這時可以設定形狀提示點 (Shape Hint) 來幫助整個變形過程。•
形狀提示點的作用是在形狀補間動畫的起始影格 設定數個提示點,然後在結束影格指定這些提示 點的對應位置,這樣 Flash 就會依照這些提示點 來變形。Page 18 November 25, 2007
設定形狀提示點
Page 19 November 25, 2007
設定形狀提示點
•
現在我們就在 H 字母上設置形狀提示點,幫助它 更順利地變形成 R 字母:Page 20 November 25, 2007
設定形狀提示點
Page 21 November 25, 2007
刪除、顯示/隱藏形狀提示點
•
若想刪除全部的形狀提示點,請先選擇時間軸內 形狀提示點的起始影格,然後執行『修改/形狀/移除全部提示點』 命令將形狀提示點一次全部刪 除。或者你也可以將滑鼠移到形狀提示點上,按 滑鼠右鈕執行『移除形狀提示點』命令來移除單 一的形狀提示點。另外,執行『檢視/顯示形狀提 示點』命令可以顯示或隱藏形狀提示點。
Page 22 November 25, 2007
14-1-6 實做練習:再一段形狀補間動畫
•
仿照 14-1-4 和14-1-5 節的做法,再加上一段 SUPER 變形變色成為 EASY!的動畫。•
物體移動時濾鏡漸變?•
物體形狀變化 + 透明變化?同學的提問蒐集
Page 23 November 25, 2007
14-1-7 淡出效果的動畫結尾
•
最後我們只要再製作文字淡出消失的結尾動畫,整個動畫就製作完成:
Page 24 November 25, 2007
淡出效果的動畫結尾
Page 25 November 25, 2007
淡出效果的動畫結尾
Page 26 November 25, 2007
本章提要
•
14-2 導引線動畫▫
14-2-1 動畫元件與流程說明▫
14-2-2 設定文件屬性與圖層安排▫
14-2-3 製作蜜蜂飛行的移動補間動畫▫
14-2-4 設定導引圖層▫
14-2-5 調整位置及方向Page 27 November 25, 2007
14-2 導引線動畫
•
之前我們製作的移動補間動畫,都是以直線方式 在移動,但若想要使物件在移動上多一點變化,可以利用 Flash 的導引圖層 (Motion Guide) 功 能,描繪出物件的行進路線,就可以讓移動補間 動畫依循你繪製的路線移動。
Page 28 November 25, 2007
14-2-1 動畫元件與流程說明
•
元件介紹•
動畫製作流程Page 29 November 25, 2007
元件介紹
Page 30 November 25, 2007
動畫製作流程
Page 31 November 25, 2007
14-2-2 設定文件屬性與圖層安排
•
設定文件屬性•
圖層安排Page 32 November 25, 2007
14-2-3 製作蜜蜂飛行移動補間動畫
•
接下來我們要設定蜜蜂的移動補間動畫。Page 33 November 25, 2007
製作蜜蜂飛行的移動補間動畫
Page 34 November 25, 2007
製作蜜蜂飛行的移動補間動畫
•
再選取蜜蜂圖層的影格 1,由屬性面板將其設定 為移動補間動畫。Page 35 November 25, 2007
14-2-4 設定導引圖層
•
新增導引圖層•
製作移動路徑Page 36 November 25, 2007
新增導引圖層
•
請在蜜蜂圖層名稱處按下滑鼠右鈕,執行『增加 導引線』命令,就可以在蜜蜂圖層之上新增一個 導引圖層。Page 37 November 25, 2007
導引圖層的設定與取消
•
在圖層名稱處按下右鍵執行『增加導引線』命令,可在該圖層上新增一個「導引圖層」,而圖層本 身成為「被導引圖層」。
•
若是要把一般圖層設定為導引圖層,可在圖層名 稱處按下右鍵,執行『導引線』。•
當導引圖層的圖示顯示為 時,表示該導引圖 層下方帶有被導引圖層,物件將可依著導引圖層 的路徑移動;若導引圖層的圖示顯示為 ,表 示下方沒有被導引的圖層,那麼導引圖層將無法 發揮作用,物件也就無法隨著導引線移動了。Page 38 November 25, 2007
導引圖層的設定與取消
•
若要讓導引圖層恢復成一般的圖層,請在導引圖 層名稱處按下滑鼠右鈕,執行『導引線』命令,取消該命令的勾選狀態。
•
接著我們要在導引線:蜜蜂圖層製作蜜蜂的路徑,你可以直接在此圖層用鉛筆工具、鋼筆工具、筆 刷工具...等繪製路徑。
Page 39 November 25, 2007
移動路徑的變化
•
移動路徑並不只限於具有起點及終點的開放路徑,其它像 是圓形、矩形等封閉的線條或是填色形狀,也可以做為移 動路徑。在繪製路徑時,你可以使用任何顏色來繪製,因 為當動畫輸出成 Flash 影片 (.swf 檔),導引線圖層的內容 會被自動隱藏,建議你使用不同的顏色來區分不同的路徑,以避免混淆。
Page 40 November 25, 2007
14-2-5 調整位置及方向
•
確認行進路徑•
增加被導引圖層Page 41 November 25, 2007
確認行進路徑
•
由於我們在製作路徑的同時,已勾選屬性面板中 的貼齊項目,因此飛行中的蜜蜂將會自動與路徑 結合起來,也就是說其註冊點會吸附在路徑上。•
此外,還可設定同步及沿向路徑項目。Page 42 November 25, 2007
確認行進路徑
•
當吸附功能失效時,請先檢查是否已勾選屬性面 板的貼齊項目。此外,若不斷修改路徑,也可能 發生此功能失效的情形。補救措施是先勾選貼齊 項目,再將指標對準物件的註冊點,然後將物件 拉曳到路徑上,即可重新吸附到路徑上。•
以下我們要確認路徑上的實體位置,確保蜜蜂在 路徑上的行進方向正確。Page 43 November 25, 2007
確認行進路徑
Page 44 November 25, 2007
確認行進路徑
Page 45 November 25, 2007
確認行進路徑
•
開啟描圖紙效果來檢視一下移動路徑:Page 46 November 25, 2007
增加被導引圖層
•
一條路徑可以導引多個物件,只要增加被導引的圖層 即可。•
例如我們想讓動畫變成兩隻蜜蜂一前一後的飛出畫面,則可以如下操作:
1.
新增一個蜜蜂 2 的圖層,並從影格 10 開始設定蜜蜂 的移動補間動畫,才能製造先後出現的效果:Page 47 November 25, 2007
增加被導引圖層
•
將此圖層拉曳到導引圖層之下,使圖層轉換成被 導引圖層。Page 48 November 25, 2007