• 沒有找到結果。

November 25, 2007

N/A
N/A
Protected

Academic year: 2022

Share "November 25, 2007"

Copied!
48
0
0

加載中.... (立即查看全文)

全文

(1)

著作權所有 © 旗標出版股份有限公司

Flash 動態網頁設計入門

November 25, 2007

(2)

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 淡出效果的動畫結尾

(3)

Page 3 November 25, 2007

14-1 顏色與形狀漸變動畫

(4)

Page 4 November 25, 2007

14-1-1 動畫元件與流程說明

元件介紹

動畫製作流程

(5)

Page 5 November 25, 2007

本章動畫的主角是各個英文字母文字物件,由 於 Flash 提供了文字物件打散 (Break Apart) 及分散至圖層 (Distribute to Layer) 功能,讓 我們能從建立文字、分配圖層、到設定動畫 的過程一氣呵成,所以

並不需要先製作這些英 文字母,只要準備好一 個背景元件,就可以邁 入動畫製作階段囉!

元件介紹

(6)

Page 6 November 25, 2007

動畫製作流程

(7)

Page 7 November 25, 2007

14-1-2 設定文件屬性並置入背景圖

設定文件屬性

置入背景圖

(8)

Page 8 November 25, 2007

14-1-3 設定文字飛入動畫

建立 FLASH 文字物件

建立文字飛入動畫

(9)

Page 9 November 25, 2007

建立 FLASH 文字物件

首先我們要建立 FLASH 這 5 個字母的文字物件

(10)

Page 10 November 25, 2007

建立文字飛入動畫

接著進行文字物件的圖層分配

先將 5 個字母分配到不同圖層

再設定文字飛入的移動補間動畫

請點選舞台中的 FLASH 文字物件,然後按一次 [Ctrl] + [B] 鍵來打散 (或執行『修改/打散』命 令):

(11)

Page 11 November 25, 2007

建立文字飛入動畫

在 5 個字母仍處於被選取的狀態下,按下 [Ctrl]

+ [Shift] + [D] 鍵 (或執行『修改/分散至圖層』

命令):

(12)

Page 12 November 25, 2007

建立文字飛入動畫

接著就可以設定文字飛入的 移動補間動畫,並製造文字 飛入時間差。

(13)

Page 13 November 25, 2007

14-1-4 文字形狀與色彩漸變補間動畫

建立 SUPER 文字物件

調整字母位置

設定形狀補間動畫

(14)

Page 14 November 25, 2007

建立 SUPER 文字物件

首先是建立 S、U、P、E、R 這 5 個獨立的文字物件,並 將之分別安排至 F、L、A、S、H 各圖層中。

(15)

Page 15 November 25, 2007

建立 SUPER 文字物件

以上動作都完成後,你就可以把空的 S、U、P、

E、R 圖層都刪除。

在正式設定動畫前,我們最好先利用描圖紙功能 讓 FLASH 這 5 個字母與SUPER 這 5 個字母能分 別對齊 (完整重疊),這樣變形起來才不會有位移,

也比較美觀。

(16)

Page 16 November 25, 2007

設定形狀補間動畫

接下來要設定形狀補間動畫。由於形狀補間動畫不能設定 在文字物件上,所以我們在做變化前,要把需要用到的字 母執行『修改/打散』命令,將其轉變為圖像物件。

(17)

Page 17 November 25, 2007

14-1-5 設定形狀提示點

有時單純的形狀補間動畫無法讓圖像物件變形得 很漂亮,這時可以設定形狀提示點 (Shape Hint) 來幫助整個變形過程。

形狀提示點的作用是在形狀補間動畫的起始影格 設定數個提示點,然後在結束影格指定這些提示 點的對應位置,這樣 Flash 就會依照這些提示點 來變形。

(18)

Page 18 November 25, 2007

設定形狀提示點

(19)

Page 19 November 25, 2007

設定形狀提示點

現在我們就在 H 字母上設置形狀提示點,幫助它 更順利地變形成 R 字母:

(20)

Page 20 November 25, 2007

設定形狀提示點

(21)

Page 21 November 25, 2007

刪除、顯示/隱藏形狀提示點

若想刪除全部的形狀提示點,請先選擇時間軸內 形狀提示點的起始影格,然後執行『修改/形狀/

移除全部提示點』 命令將形狀提示點一次全部刪 除。或者你也可以將滑鼠移到形狀提示點上,按 滑鼠右鈕執行『移除形狀提示點』命令來移除單 一的形狀提示點。另外,執行『檢視/顯示形狀提 示點』命令可以顯示或隱藏形狀提示點。

(22)

Page 22 November 25, 2007

14-1-6 實做練習:再一段形狀補間動畫

仿照 14-1-4 和14-1-5 節的做法,再加上一段 SUPER 變形變色成為 EASY!的動畫。

物體移動時濾鏡漸變?

物體形狀變化 + 透明變化?

同學的提問蒐集

(23)

Page 23 November 25, 2007

14-1-7 淡出效果的動畫結尾

最後我們只要再製作文字淡出消失的結尾動畫,

整個動畫就製作完成:

(24)

Page 24 November 25, 2007

淡出效果的動畫結尾

(25)

Page 25 November 25, 2007

淡出效果的動畫結尾

(26)

Page 26 November 25, 2007

本章提要

14-2 導引線動畫

14-2-1 動畫元件與流程說明

14-2-2 設定文件屬性與圖層安排

14-2-3 製作蜜蜂飛行的移動補間動畫

14-2-4 設定導引圖層

14-2-5 調整位置及方向

(27)

Page 27 November 25, 2007

14-2 導引線動畫

之前我們製作的移動補間動畫,都是以直線方式 在移動,但若想要使物件在移動上多一點變化,

可以利用 Flash 的導引圖層 (Motion Guide) 功 能,描繪出物件的行進路線,就可以讓移動補間 動畫依循你繪製的路線移動。

(28)

Page 28 November 25, 2007

14-2-1 動畫元件與流程說明

元件介紹

動畫製作流程

(29)

Page 29 November 25, 2007

元件介紹

(30)

Page 30 November 25, 2007

動畫製作流程

(31)

Page 31 November 25, 2007

14-2-2 設定文件屬性與圖層安排

設定文件屬性

圖層安排

(32)

Page 32 November 25, 2007

14-2-3 製作蜜蜂飛行移動補間動畫

接下來我們要設定蜜蜂的移動補間動畫。

(33)

Page 33 November 25, 2007

製作蜜蜂飛行的移動補間動畫

(34)

Page 34 November 25, 2007

製作蜜蜂飛行的移動補間動畫

再選取蜜蜂圖層的影格 1,由屬性面板將其設定 為移動補間動畫。

(35)

Page 35 November 25, 2007

14-2-4 設定導引圖層

新增導引圖層

製作移動路徑

(36)

Page 36 November 25, 2007

新增導引圖層

請在蜜蜂圖層名稱處按下滑鼠右鈕,執行『增加 導引線』命令,就可以在蜜蜂圖層之上新增一個 導引圖層。

(37)

Page 37 November 25, 2007

導引圖層的設定與取消

在圖層名稱處按下右鍵執行『增加導引線』命令,

可在該圖層上新增一個「導引圖層」,而圖層本 身成為「被導引圖層」。

若是要把一般圖層設定為導引圖層,可在圖層名 稱處按下右鍵,執行『導引線』。

當導引圖層的圖示顯示為 時,表示該導引圖 層下方帶有被導引圖層,物件將可依著導引圖層 的路徑移動;若導引圖層的圖示顯示為 ,表 示下方沒有被導引的圖層,那麼導引圖層將無法 發揮作用,物件也就無法隨著導引線移動了。

(38)

Page 38 November 25, 2007

導引圖層的設定與取消

若要讓導引圖層恢復成一般的圖層,請在導引圖 層名稱處按下滑鼠右鈕,執行『導引線』命令,

取消該命令的勾選狀態。

接著我們要在導引線:蜜蜂圖層製作蜜蜂的路徑,

你可以直接在此圖層用鉛筆工具、鋼筆工具、筆 刷工具...等繪製路徑。

(39)

Page 39 November 25, 2007

移動路徑的變化

移動路徑並不只限於具有起點及終點的開放路徑,其它像 是圓形、矩形等封閉的線條或是填色形狀,也可以做為移 動路徑。在繪製路徑時,你可以使用任何顏色來繪製,因 為當動畫輸出成 Flash 影片 (.swf 檔),導引線圖層的內容 會被自動隱藏,建議你使用不同的顏色來區分不同的路徑,

以避免混淆。

(40)

Page 40 November 25, 2007

14-2-5 調整位置及方向

確認行進路徑

增加被導引圖層

(41)

Page 41 November 25, 2007

確認行進路徑

由於我們在製作路徑的同時,已勾選屬性面板中 的貼齊項目,因此飛行中的蜜蜂將會自動與路徑 結合起來,也就是說其註冊點會吸附在路徑上。

此外,還可設定同步及沿向路徑項目。

(42)

Page 42 November 25, 2007

確認行進路徑

當吸附功能失效時,請先檢查是否已勾選屬性面 板的貼齊項目。此外,若不斷修改路徑,也可能 發生此功能失效的情形。補救措施是先勾選貼齊 項目,再將指標對準物件的註冊點,然後將物件 拉曳到路徑上,即可重新吸附到路徑上。

以下我們要確認路徑上的實體位置,確保蜜蜂在 路徑上的行進方向正確。

(43)

Page 43 November 25, 2007

確認行進路徑

(44)

Page 44 November 25, 2007

確認行進路徑

(45)

Page 45 November 25, 2007

確認行進路徑

開啟描圖紙效果來檢視一下移動路徑:

(46)

Page 46 November 25, 2007

增加被導引圖層

一條路徑可以導引多個物件,只要增加被導引的圖層 即可。

例如我們想讓動畫變成兩隻蜜蜂一前一後的飛出畫面,

則可以如下操作:

1.

新增一個蜜蜂 2 的圖層,並從影格 10 開始設定蜜蜂 的移動補間動畫,才能製造先後出現的效果:

(47)

Page 47 November 25, 2007

增加被導引圖層

將此圖層拉曳到導引圖層之下,使圖層轉換成被 導引圖層。

(48)

Page 48 November 25, 2007

14-2-6 實做練習:飛行太空船

練習一

火箭飛行時不僅依路徑,還隨著方向轉彎。

練習二

製作火箭飛行時之遠近效果

練習三

火箭飛行時火焰燃燒效果

參考文獻

相關文件

圖畫書 橋樑書

發文日期:中華民國109年1月13日 發文字號:高分署人字第1092500023號

 電腦鍵盤已經代替了筆,能夠快速打出一長串文字 ,大 多數人不會再選擇去「握筆寫字」,甚至有人都要 漸漸忘記文字

• 雖然 Flash 可以接受任何 Unicode 文字(包含中 文), 但為了確保與其它版本的 Flash 相容, 也

• Flash 的打散(Break Apart)功能,可以將群組 物件、點陣圖、文字物件,以及元件轉換成填色

圖畫書 橋樑書

 透過一系列 一系列 一系列 一系列的圖畫 圖畫 圖畫 圖畫與少許相關文字 相關文字 相關文字 相關文字或者完全沒有 文字的結合,來傳遞資訊 傳遞資訊 傳遞資訊或說故事 傳遞資訊

 圖畫:輔助文字表 達,展現文本中的 重要場景、主體氣 氛;描述角色的外 貌、形態、神情、.