mis.hwai.edu.twmis.hwai.edu.tw/im/project103/a2.docx · web...

中華醫事科技大學102 學年度專題報告

第五屆東陽盃「全民瘋創意」交通安全創意大賽-必安小組

指導老師:莊芳昇研究生

彭裕林陳信維樊雋浩黃俊棋鄭雅文

0

目錄

內容目錄.................................................................................................................................1前言.................................................................................................................................2摘要.................................................................................................................................3研究目的.........................................................................................................................4研究方法.........................................................................................................................5

Flash 動畫的製作方式............................................................................................5鎖定圖層.................................................................................................................7隱藏圖層.................................................................................................................8形狀補間動畫.........................................................................................................9導引線...................................................................................................................14加入導引線圖層 的其他方法...............................................................................17遮色片...................................................................................................................18動畫的延長與縮短...............................................................................................21

製作出一個側邊走動人物...........................................................................................24場景的切換...................................................................................................................27甘特圖...........................................................................................................................37工作分配表...................................................................................................................38參考文獻.......................................................................................................................39

1

前言

由於一開始不曉得是要做購物網站呢?還是做 FLASH 呢?當正在矛盾的時候，老師建議我們製作 FLASH 的影片但主題呢??老師就介紹一個有關於交通安全的 FLASH 創意比賽(東陽文教基金會交通安全多媒體動畫比賽) 。所以我們製作有關於交通安全的影片，在我們精心的思想下製作出交通與低頭族結合的影片。

會選擇使用 Flash 是因為它使用十分的廣泛且千變萬化，可以製作動態網頁、遊戲設計、動畫影音都可以使用 Flash 完成。

在這次的比賽中雖然大家來自四方卻發揮我們小組團隊的合作的精神，有人收集資料、有人製作影片，在這次中承受著許大的壓力在各位的努力下才完成我們的 Flash 的影片。

2

摘要

因為我們要參加東陽盃東陽盃「全民瘋創意」交通安全創意大賽

所以我們使用 Flash 來製作了一個有關於交通安全的宣導影片，因為

在網路上看到的很多廣告都是由 Flash 做出來的，他有很大的好處在

於為檔案體積小，視覺效果好、互動性強等優點 。

成為當今最流行的 Web 頁面動畫格式。Flash 動畫可以更加形

象生動的體現一個網站的性質和形象，一個好的 Flash 動畫具有很高

的藝術欣賞性，對於增強網站流覽者對網站的友好度非常好。

3

因現在科技日新月異手機的普及化人人視線離不開手機導致一個

不注意所稱為低頭族所以我們想要交通安全跟手機做一個結合出一個

宣導影片。 

4

研究目的

現在科技日新月異而手機也越來越先進到現在的智慧型手機可是

人手一支可說是機不離身身不離機，而這些人走在路上、在公車上、

捷運上，甚至還有人在騎摩托車時，低著頭滑著自己的手機，這樣左

右來車都不知道可能會造成很大的危險。

所以我們想用 Flash 來製作一個有關於低頭族的相關影片，首先

要先了解整個 Flash 的運用在另一方面來提升我們影音動畫的技術方

面在製作出一部可以有效的帶給後人一個有效的警惕，所以我們參加

了第五屆東陽盃「全民瘋創意」交通安全創意大賽，在它們主題下製5

作出這次的影片。這影片不景景是為了畢業門檻而是有效的減少交通

事，可望在這次比賽中可以有亮眼的成績才是的另一總挑戰。

6

研究方法

Flash 動畫的製作方式

Flash 使用時間軸編輯動畫，時間軸記錄時間的經過，並使用關鍵影格來記錄物件的狀態。 Flash 製作動畫的方式，可分為移動補間動畫、形狀補間動畫與逐格動畫。

空白關鍵影格 - 空心圓形表示空白關鍵影格，此影格內沒有任何的物件。

關鍵影格 - 實心圓形表示關鍵影格。

關鍵影格。

移動補間動畫 - 加入移動補間動畫的時間軸顯示藍色背景。

傳統補間動畫。

7

形狀補間動畫 - 加入形狀補間動畫的時間軸顯示綠色背景。

動作指令影格 - 小寫的字母 a 表示此影格包含了動作指令。

標籤影格 - 紅色旗桿圖示表示此影格為標籤。

註解影格 - 綠色的雙斜線表示此影格包含了註解。

錨點影格。

錯誤的傳統補間動畫。

錯誤的形狀補間動畫。

8

鎖定圖層

為了避免編輯時不小心修改了已繪製完成的圖層，您可以將部份的圖層鎖定。

鎖定全部圖層「鎖定∕解除鎖定所有圖層」圖示此外，在時間軸面板的圖層按滑鼠右鍵，並選擇「鎖定其他圖層」，就可以

鎖定此圖層以外的所有圖層。

9

隱藏圖層

編輯時 Flash 允許您隱藏圖層。

隱藏全部圖層「顯示∕隱藏所有圖層」圖示此外，在時間軸面板的圖層按滑鼠右鍵，並選擇「隱藏其他圖層」，就可以

隱藏此圖層以外的所有圖層。

10

形狀補間動畫

1- 在時間軸面板上，於［第一個影格］的畫面中，製作數字 3

2- 在指定的影格中，按右鍵［插入關鍵影格］，即建立第二個關鍵影格。

11

12

3- 在第二個關鍵影格中，將數字改為 2。

重複 2 與 3 的動作。4- 於指定影格中按右鍵插入關鍵影格，並修改數字為 1。

13

5-完成數字與關鍵影格的設置後，返回點擊時間軸上的第一個關鍵影格，並點擊畫面中的數字 3 做為指令目標，之後於上方［修改］中，點擊［打散

］或按快捷鍵［Ctrl+B］。

打散後的數字 3，即會變成下圖的樣子。

14

重複 5-，針對數字 2 與數字 1 做［打散］的動作。

6-將數字全部完成打散的動作後，在下方任意一影格中，［按右鍵］點擊［選取所有影格］，將全部影格選取起來。

15

7-將全部影格選取起來後，在區域中的任一影格中［按右鍵］，點擊［建立形狀補間動畫］。

完成的形狀補間動畫後，時間軸面板上的影格（如下圖）。

16

導引線

我們可以畫一條不規則的線條，讓元件的動畫，跟著這條路線來做不規則曲線運動請同學畫一個簡單的飛碟，再把它轉成元件，再將圖層 1命名為"飛碟"，做

一段長度為 30格的動畫

執行加入引導線的指令，請直接點選增加導引線的圖示按紐，就會產生一個導引線:飛碟的圖層

17

用鉛筆在導引線:飛碟 圖層，隨意畫線，如下圖請注意線條只能有一條，可以隨意交叉， 但不能重疊，也不能有其他分支..

再將導引線圖層鎖住，將"飛碟"圖層設為編輯狀態，確定貼齊物件工具是按下去的狀態，點選影格 1，再選擇舞台上的飛碟軸心，拖曳貼齊到線條的其一端點，如下圖

18

19

點選影格 40，再選擇舞台上的飛碟軸心，移到線條的另一端點，如下圖因為有開啟貼齊工具，所以到一定距離時，飛碟的軸心會自動靠到端點。

再預覽其效果..測試影片 看看飛碟有沒有照著引導線走呀!

20

加入導引線圖層 的其他方法

方法一

方法二在需要導引線圖層的某一圖層按右鍵，執行增加導引線

21

遮色片

請同學匯入隨便一張照片，把該圖層命名為"照片"，如下圖

再新增一個圖層，把該圖層命名為"遮罩"，在"遮罩"圖層產生一個紅球的元件，並且做一段由左至右，並且變大的動畫，如下圖

22

將"照片"圖層時間延長與"遮罩"圖層相同，再點選"遮罩"圖層，按右鍵執行遮色片指令， 如下圖

這時就可以看到遮色片的效果，如下圖案 Ctrl+Enter

23

24

如果要取消遮色片指令，就是再點選"遮罩"圖層，按右鍵將執行 Mask 指令勾選拿掉! 如下圖

25

動畫的延長與縮短

我們做一段 20格影格的動畫，如果要將動畫延長至 30格，就是將滑鼠移到兩個關鍵影格之間，按著滑鼠左鍵拖曳，選取一段 10格的長度，按右鍵插入影格即可。如下圖

步驟與動畫延長相同，差別只是在於按右鍵時，選擇移除影格 (移除影格，不能連同關鍵影格也移除，這樣會造成動畫失效)

如下圖

26

方法 2動畫延長我們做一段 20格的動畫，如果要將動畫延長至 30格，就是將滑鼠點在影格

20 的關鍵影格，按著滑鼠左鍵拖曳，將該關鍵影格拖曳到影格 30如下圖

再放開左鍵，就延長動畫時間了如下圖

動畫縮短點選影格 30 的關鍵影格，向左拖曳到適當的某一格

如下圖

27

再放開左鍵，就縮短動畫時間了

不過我們縮短了動畫時間，但影片時間仍然是不變的。如果要影片時間也縮短至與動畫相同的話，就是將結束的關鍵影格後面的影格，用左鍵拖曳選取，再按右鍵，選擇移除影格如下圖

動畫長度與影片長度就相同了

28

製作出一個側邊走動人物

人的動作是復雜的，但卻有規律可尋。人的走路的運動規律：出右腳甩動左臂（朝前），右臂同時朝后擺。上肢與下肢的運動方向正好相反。另外，人在走路動作過程中，頭的高低也必然成波浪形運動。當邁開步子時，頭頂就略低，當一腳著地，另一只腳提起朝前彎曲時，頭就略高。由此以有前輩們總結了，人走路可以用五幅畫組成一個完步。

29

這些可以用傳統捕間動畫來製作

30

這是把人物的每一個部分做一個分解然後做一個手跟腳的調整讓它動作流利就很像一個人在走動的樣子。然而你想要很多人的時候把全部一起轉換成原件，就可以用複製的方式來製做很多人。

31

場景的切換

步驟一：首先先將所要使用的元件準備好，這邊準備了二張圖片，是用於分辨場景切換使用的，而按鈕元件也先至做好二個，分別命名「按鈕-01、按鈕-02」。

步驟二-1：點選工具「場景」。步驟二-2：再點選下方「 + 」按鈕，新增一個場景。

32

步驟三：將元件庫中的”02.jpg”拖移至場景二的舞台中。

步驟四-1：再點選「場景」切換至「場景 1」。步驟四-2：將元件庫中的”01.jpg”拖移至場景一的舞台中。

33

34

步驟五：點選圖層下方「插入圖層」選項，新增一個圖層。

步驟六：再將「按鈕元件」，"按鈕-01、按鈕-02"拖入”圖層 2”的舞台中。

35

步驟七-1：選取”場景一”按鈕，按下滑鼠右鍵。步驟七-2：選擇「動作」選項。

步驟八-1：之後跳出”動作視窗”。步驟八-2：點選「時間軸控制項」，再點選「g o t o 」選項，點擊二下。

36

步驟九-1：點選”gotoAndPlay ( 1 )”。步驟九-2：選擇場景選項，將選單下拉，選擇”場景 1”，並選擇“ 前往並停止 ”選項。

步驟十：而”場景二”的按鈕的設定，以此類推的重複”場景一”按鈕的設定方式，唯一不同的是場景這邊選項要選擇”場景 2 “。

37

步驟十一：之後將”場景一、場景二”按鈕，一起選取，按下滑鼠右鍵，選擇“ 複製 ”。

步驟十二：使用「場景」工具作切換，切換至“ 場景 2 ”。

步驟十三：再重複先前在”場景一”做的，”插入圖層”，再將剛剛在場景38

一複製的按鈕貼上。

步驟十四：在舞台空白處，按下滑鼠右鍵，選擇”在原地貼上”選項。

39

步驟十五：之後就會看到剛剛在”場景一”複製的按鈕，在原位貼上了。

步驟十六-1：再”插入圖層”。步驟十六-2：點選”影格”，按下滑鼠右鍵。步驟十六-3：選擇”動作”選項。

40

步驟十七：選擇”s t o p”選項，點擊二下，後關閉”動作”視窗。

步驟十八：這時可以看到”圖層 3”影格多了「 a 」符號，這代表，這裡設定了動作。

41

步驟十九：這時再切換回”場景 1”，再將剛剛設定在”場景 2”圖層的動作，再重複設定於”場景 1”。

步驟二十：重複設定後，將會看到與”場景 2”設定一樣，出現「 a 」符號。

以上步驟設定完成後，就可以輸出影片看看效果了。

42

甘特圖

2014/3 2014/4 2014/5 2014/6 2014/7 2014/8 2014/9 2014/10 2014/11 2014/12

資料收集書面報告Flash 動畫製作美工編排

藍色:預估執行 紅色:實際執行

43

工作分配表

資料收集 書面報告 Flash 影音製作 美工編排彭裕林 ★ ★ ★ ★

陳信維 ★ ★ ★

樊雋浩 ★ ★ ★

鄭雅文 ★ ★

黃俊棋 ★ ★ ★

44

參考文獻

http://cg.com.tw/Flash/htm/Flash_008.asp

http://shuccedu.wordpress.com/2013/08/08/%E3%80%90flash%E8%AA%B2%E7%A8%8B%E7%AD%86%E8%A8%98%E3%80%91%E7%A7%BB%E5%8B%95%E6%BC%B8%E8%AE%8A%EF%BC%9A%E5%BD%A2%E7%8B%80%E8%A3%9C%E9%96%93%E5%8B%95%E7%95%AB/

http://www.twisu.com.tw/3/flash/basic/lesson3/flash3-15.htm甘特圖http://pcuser.pixnet.net/blog/post/20683561-%5b%E5%AF%86%E6%8A%80%5d-%E6%8B%BC%E6%B9%8A%E6%B4%BB%E7%94%A8%EF%BC%8Cexcel%E4%B9%9F%E8%83%BD%E7%B9%AA%E8%A3%BD%E7%94%98%E7%89%B9%E5%9C%96人物製作http://www.dugukeji.com/mb/jiaocheng/19439.html

http://jun431869.pixnet.net/blog/post/23875782-flash-%E5%A0%B4%E6%99%AF%E5%88%87%E6%8F%9B%E8%A8%AD%E5%AE%9A

45