• 沒有找到結果。

November 25, 2007

N/A
N/A
Protected

Academic year: 2022

Share "November 25, 2007"

Copied!
42
0
0

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

全文

(1)

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

Flash 動態網頁設計入門

November 25, 2007

(2)

Page 2 November 25, 2007

大綱

16-1 元件介紹

16-2 調整鞦韆實體與製作陰影元件

16-3 製作鞦韆擺動動畫

16-4 製作鞦韆陰影動畫

16-5 調整陰影及鞦韆的速度變化

16-6 加入音效

16-7 延伸學習

(3)

Page 3 November 25, 2007

前言

本範例結合了更改變形點的位置、實體旋轉角度 的設定、移動補間動畫的旋轉效果及音效的應用。

本範例是模擬真實的鞦韆擺盪速度, 所以還會加 入鞦韆速度變化的效果, 我們將會設定鞦韆由右 邊最高點擺盪到左邊最高點時, 速度由最快遞減 至無速度狀態;由左邊最高點擺盪到右邊最高點 也是設定相同的速度變化。

(4)

Page 4 November 25, 2007

16-1 元件介紹

(5)

Page 5 November 25, 2007

16-2 調整鞦韆實體與製作陰影元件

文件屬性設定

圖層的配置

調整鞦韆實體的變形點

製作鞦韆陰影元件

(6)

Page 6 November 25, 2007

文件屬性設定

(7)

Page 7 November 25, 2007

圖層的配置

在背景圖層中安 排好背景實體並 鞦韆動畫圖層中 安排好鞦韆實體 的位置

(8)

Page 8 November 25, 2007

調整鞦韆實體的變形點

(9)

Page 9 November 25, 2007

調整鞦韆實體的變形點

(10)

Page 10 November 25, 2007

調整鞦韆實體的變形點

1.

首先選擇使用工具面板中的自由變形工具, 接 著選取舞台中的鞦韆實體後, 你將看到實體的 變形點會以空心圓表示。

(11)

Page 11 November 25, 2007

調整鞦韆實體的變形點

2.

拉曳變形點移動到 2 條鞦韆繩頂段中間的位置 後, 當旋轉鞦韆實體時就會有鞦韆擺動的效果。

(12)

Page 12 November 25, 2007

製作鞦韆陰影元件

1.

首先請在鞦韆動畫圖層下面新增陰影動畫圖層,

我們會將陰影繪製在此圖層。

(13)

Page 13 November 25, 2007

製作鞦韆陰影元件

2.

利用工具面板中的鉛筆工具在鞦韆下面繪製出

陰影輪廓 (只要繪製出大概的形狀就可以了),

接著填入深灰色, 並刪除輪廓線後, 建立名稱 為 "陰影" 的圖像元件後, 陰影元件就完成了。

(14)

Page 14 November 25, 2007

16-3 製作鞦韆擺動動畫

前面我們已經完成了鞦韆元件的變形點調整, 並 製作好了陰影元件, 現在只要再加上鞦韆懸吊桿 的鞦韆桿元件, 最後再加上移動補間動畫功能就 可以製作出鞦韆動畫。

在製作鞦韆動畫前, 我們先來瞭解一下移動補間 動畫的作用對象與作用條件:

(15)

Page 15 November 25, 2007

利用移動補間動畫製作鞦韆動畫

背景中我們已經安排了懸吊鞦韆的柱子, 現在請 在鞦韆動畫圖層上, 新增一個鞦韆桿圖層, 然後 由元件庫面板中, 拉曳鞦韆桿實體到柱子上面的 位置, 做為鞦韆的懸吊桿。

(16)

Page 16 November 25, 2007

利用移動補間動畫製作鞦韆動畫

拉曳鞦韆元件, 將鞦韆繩連接在鞦韆桿實體上的 繩子上。

(17)

Page 17 November 25, 2007

利用移動補間動畫製作鞦韆動畫

執行『視窗/變形』命令開啟變形面板, 設定影 格 1 上的鞦韆實體旋轉角度。

(18)

Page 18 November 25, 2007

利用移動補間動畫製作鞦韆動畫

接下來我們將各圖層的時間軸長度增加為 40 影 格, 然後分別在鞦韆動畫圖層的 20 影格以及 40 影格上設定關鍵影格。

(19)

Page 19 November 25, 2007

利用移動補間動畫製作鞦韆動畫

選取第 20 影格的鞦韆元件後, 在變形面板中設 定鞦韆左擺的角度。

(20)

Page 20 November 25, 2007

利用移動補間動畫製作鞦韆動畫

選取鞦韆動畫圖層的所有影格後, 接著要加入移 動補間動畫, 讓鞦韆產生擺動的動畫效果。

(21)

Page 21 November 25, 2007

16-4 製作鞦韆陰影動畫

1.

首先在鞦韆動畫圖層相同間隔處, 設定陰影動 畫圖層的關鍵影格。

(22)

Page 22 November 25, 2007

製作鞦韆陰影動畫

2.

選取整個陰影動畫圖層, 並設定移動補間動畫。

(23)

Page 23 November 25, 2007

製作鞦韆陰影動畫

3.

分別選取陰影動畫圖層各關鍵影格的陰影實體,

水平拉曳在鞦韆實體的正下方。

(24)

Page 24 November 25, 2007

16-5 調整陰影及鞦韆的速度變化

為了讓鞦韆擺盪效果更逼真, 還要再加入速度變 化的效果, 也就是要讓鞦韆由左邊高處盪到右邊 高處時, 速度會由最快逐漸遞減;而右邊盪到左 邊也是以同樣方式設定, 如此一來鞦韆就會有擺 盪的真實感。

(25)

Page 25 November 25, 2007

調整陰影及鞦韆的速度變化

1.

因為陰影跟鞦韆必須如影隨行, 所以可以同時設定陰影 跟鞦韆的速度變化, 請同時選取鞦韆動畫圖層以及陰影 動畫圖層的影格

1, 然後再從自訂加/ 減速度交談窗中

設定加速或減速曲線變化

(26)

Page 26 November 25, 2007

調整陰影及鞦韆的速度變化

(27)

Page 27 November 25, 2007

調整陰影及鞦韆的速度變化

2.

在自訂加/減速度交談窗的線段上點一下, 產生控制點 後, 往上拉曳控制點增加動畫速度, 接著分別選取左 下角及右上角的控制點後, 拉曳正切點改變曲線變化。

(28)

Page 28 November 25, 2007

3.

設定好曲線變化後, 先按下 預覽播放, 看看是否如 同真實的鞦韆擺盪方式後, 再按下確定鈕完成設定。

調整陰影及鞦韆的速度變化

(29)

Page 29 November 25, 2007

調整陰影及鞦韆的速度變化

4.

同時選取鞦韆動畫圖層, 以及陰影動畫圖層的影格 20 , 然後在自訂加/減速度交談窗中, 設定與影格 1 相同的 曲線變化後, 鞦韆的速度變化設定就完成了。

(30)

Page 30 November 25, 2007

調整陰影及鞦韆的速度變化

在曲線中增加的控制點, 就如同在圖層的補間動畫中設 定關鍵影格, 直接拉曳控制點, 就可以改變動畫的速度 變化, 而且不會在圖層中產生關鍵影格。

曲線預設的變化, 可以同時設定動畫的位置、旋轉、縮

放、顏色、濾鏡變化。若想要控制單一項目中的曲線變化,

那麼你可以取消勾選全部屬性使用單一設定項目後, 再 選擇你想要套用曲線變化的項目。

30

(31)

Page 31 November 25, 2007

單一項目的曲線變化設定

位置:設定動畫移動的加 / 減速度 (例如動畫由 左向右移動的動畫效果)。

旋轉:設定動畫旋轉效果的加 / 減速度 (例如風 扇旋轉的動畫效果)。

縮放:設定動畫縮放變化的加 / 減速度 (例如由 小變大的動畫效果)。

顏色:設定動畫顏色轉換時的加 / 減速度 (例如 顏色漸變的動畫效果)。

濾鏡:設定動畫套用濾鏡後的加 / 減速度 (例如 套用模糊變清晰的動畫效果)。

31

(32)

Page 32 November 25, 2007

16-6 加入音效

我們雖然已經完成鞦韆動畫的製作, 但是只有動畫卻沒 有音效, 顯得有點太安靜了, 所以現在我們就要在動 畫中加入背景音效。

1.

首先請在鞦韆桿圖層上新增背景音效圖層, 接著由元件 庫面板中, 拉曳我們準備好的音效到舞台中。

32

(33)

Page 33 November 25, 2007

加入音效

33

2.

在屬性面板中, 設定音效的同步類型為開始,

音效就不會被影格長度限制全部播放完, 然後 再選擇重複播放, 讓音效循環播放。

(34)

Page 34 November 25, 2007

16-7 延伸學習

活蹦亂跳的足球

本範例結合了點陣圖的應用、漸層色陰影效果、移 動補間動畫的旋轉效果, 以及音效的進階應用。

34

(35)

Page 35 November 25, 2007

繪製足球的漸層色陰影

繪製足球的陰影, 只要設定由黑到透明的放射 狀漸層色後, 再繪製出橢圓形即可完成。

1.

請先在調色盤面板中, 設定由黑色到透明的放 射狀漸層色。

35

(36)

Page 36 November 25, 2007

繪製足球的漸層色陰影

36

2.

利用橢圓形工具繪製出無框線的圓形, 由於圖 形內填入了放射狀的漸層色, 看起來就會像是 個陰影。

(37)

Page 37 November 25, 2007

繪製足球的漸層色陰影

37

3.

利用自由變形工具調整陰影的比例, 接著就可 以轉換成圖像元件完成陰影製作了。

(38)

Page 38 November 25, 2007

設定移動補間動畫的旋轉效果

這裡我們設定落下的關鍵影格加/減速值為 -100,

彈跳時則設定為 100;在設定足球加/減速值的同 時, 再進階設定彈跳時順時針旋轉。

38

(39)

Page 39 November 25, 2007

設定移動補間動畫的旋轉效果

39

(40)

Page 40 November 25, 2007

音效的進階控制

40

(41)

Page 41 November 25, 2007

音效的進階控制

經過最後的音效設定後, 足球彈跳動畫就已經完 成了。

41

(42)

Page 42 November 25, 2007

實做練習-驚險的飛行

42

請運用速度變化、音效以及元件逐漸透明技巧,

讓原本即將撞在一起的飛機, 在千鈞一髮之際 錯身而過, 最後再讓一架飛機淡出消失在天際。

參考文獻

相關文件

LED。Wii remote 裏的光學感應器,可以根據這些 LED 成像的

重要廟宇 旅遊服務 嘉義仁武宮、嘉義城隍廟、彌陀寺 民俗活動 旅遊服務

Effect (a) Detector moving; source stationary...

她寫道,當我們在生活中最想做的事情也是我們的義務時,最能 感受到 Ikigai 。關於 Ikigai ,感受就是最誠實的,如果我們知道如何

 在 pop 的同時,以 pop 出的元素為左界 ,即將 push 的元素為右界 ,且因為原 stack 中高度為 遞增關係,所以高度必為即將 pop 出的元素代

在嘉年華會期間,最熱鬧的就是聖馬可廣場,時時

2‐c. 若 , 則將DEPQ中B拿出丟到右邊 (或者將DEPQ 中S拿出丟到左邊), 並將A放入DEPQ.

 中国的高速铁路,是目前世界上最长、以及最快的高 速铁路系统 。现已建成四条横贯东西和四条纵贯南 北的高铁线路