（必備知識：Frontpage、Dreamweaver）

Presentation on theme: "（必備知識：Frontpage、Dreamweaver）"— Presentation transcript:

1 （必備知識：Frontpage、Dreamweaver）
週次一 - 認識Flash Flash 概念 基本功能介紹及功能表單 （必備知識：Frontpage、Dreamweaver）

2 Flash用意 工作介面簡易明瞭 向量格式 多媒體化與資料庫的結合 互動性大

3 Flash 動畫的基本概念 Flash動畫具備了五樣重要的元素： 影片(Movie)、場景(Scene)、
圖層(Layer)、影格(Frame)、元件(Symbol)， 當然更少不了你這位導演了。 1.元件(Symbol)：動畫上各式各樣的圖片或文字，亦可翻譯為"角色"。 2.影格(Frame)：像卡通影片中每一個人物的各個分解動作，而每個分解動作畫面就是一個影格，在Flash中是以時間軸來表示其影格。 3.圖層(Layer)：由數個影格所組成，它記錄著每一個元件所要進場演出的時間及出場時間。 4.場景(Scene)：場景包含了所有製作動畫的基本設定，例如動畫的尺寸、背景色。 5.影片(Movie)：整個動畫要如何演出必須在你的腦中構思成形，並且排練過一遍，再藉由Flash驚人的技術將之表現出來，因此要設計一個可看性高的動畫應將整個細節紀錄下來，將有助於動畫的製作。

4 FLASH的操作畫面 主功能表 浮動面板 圖層區 時間軸 電影編輯區 (舞台區) 標準工具鈕列 螢幕顥示百分比 場景名稱 繪圖工具 檢視工具
色彩工具 電影編輯區 (舞台區) 屬性工具

5 Flash 的繪圖工具 繪圖工具面板用途 繪製線條 筆刷筆觸 色彩使用 圖形編輯 繪圖輔助功能 文字處理 物件編輯 繪圖工具箱 選取工具
調整工具 直線工具 套索工具 鋼筆工具 文字工具 圓形工具 矩形工具 鉛筆工具 筆刷工具 油漆罐工具 墨水瓶工具 橡皮擦工具 吸色工具 放大鏡工具 檢視工具 移動工具 色彩工具 線條顏色 填色工具 色彩互換 附屬工具選項 區域透明工具

6 直線(Line)工具 功能：繪製線條 先選取Tool設定區的直線工具
執行功能表[Window/Panels/Stroke]指令，設定線條的樣式(共有七種)、粗細(垂直拉桿拖曳設定或輸入數值)及顏色。 拖曳滑鼠同時按住Shift鍵，可畫水平線、垂直線、45度斜線。 自訂線條

7 矩形(Rectangle)、圓形(Oval)工具
繪出矩形、楕圓形；按著Shift鍵不放，拖曳滑鼠可繪出正方形或圓形。 可設定畫筆(線條)和內部填滿的顏色。 鉛筆工具(Pencil) 鉛筆模式：Straight、Smooth、Ink 線條色彩 線條粗細 線條樣式

8 選取物件 使用選取工具或套索工具點選物件。 指標工具(Arrow)使用二種方式選取物件
選取物件：直接在物件使用指標工具拉曳出一個範圍，範圍之內的圖型或物件選取，若要保留先前的選取，必須按住Shift鍵圈選。若圈選部份圖像時，可自動產生分段。

9 選取物件 套索工具(Lasso) ： 以拉曳方式選取任意形狀的圈選範圍。 魔術棒(Magic Wand) ：
可以選取點陣圖填色區塊中的色彩相似的區域。 可設定色彩容錯度，協助選取色彩相似的區域。

10 筆刷筆觸 筆刷工具(Brush) 筆刷模式：Normal、Fills 、Behind 、Selection、Inside模式 筆刷填色
筆刷大小 筆刷形狀 鎖定填塗：將多個填色區塊視為同一區域來填色

11 填色工具 墨水瓶工具(Ink Bottle)可用來更改使用其它工具所繪製線條之粗細、色彩或是顏色。
使用墨水瓶工具時，不必選取線條，在所繪製之線條按一下即可。 若是同時變更多條線條時，就必須先選取線條，再使用墨水瓶工具。 使用油漆罐工具(Paint Bucket) 可在封閉區域內填滿顏色。 填色色彩 缺口大小：若封閉區域出現缺口，可用來在其中填入色彩。只對小範圍缺口產生作用，若缺口太大，將顯示比例縮小就可能填入顏色 漸層填色功能

12 調色盤 Flash製作之動畫主要是應用上網頁上，因此單色調色盤中之色彩都是瀏覽器標準色彩216色。 調色盤 單色調色盤：線條只能使用單色，
所以只會出現單色調色盤。 漸層調色盤：填色區塊才能使用 漸層色，所以除了單色調色盤外 還有漸層調色盤。

13 色彩的編輯 新色彩的使用：按下調色盤的 鈕或是『視窗/設計面版/調色盤』可自訂色彩。
新色彩的使用：按下調色盤的 鈕或是『視窗/設計面版/調色盤』可自訂色彩。 實色標籤(Solid)：瀏覽器的安全色(Snap to Web Safe) 216色。 漸層色標籤(Gradient) ：使用漸層色滑桿更換或新增漸層色。 漸層形式：線型(Linear)與放射狀(Radial)漸層色彩。 可使用匯入調色盤按鈕 新增色彩。

14 色彩的消除 橡皮擦工具(Eraser)： 用來拭除線條以及填色區塊
擦拭模式：擦拭線條或是填色區塊，有Normal、Fills 、Lines 、Selected Fills 、Inside五種模式。 水龍頭功能： 可一次將封閉區域內的填色清除。

15 時間軸面板(Timeline Panel)
場景切換鈕 元件編輯鈕 顯示設定 鎖定圖層 顯示/隱藏圖層 外框顯示 時間軸 圖層面板 新增圖資料夾 新增導向圖層 圖層面板 圖層名稱 影格 影格指標 狀態列 時間軸 時間軸指標 每秒播放影格數 新增圖層 刪除圖層

16 圖層(Layer) 圖層的功能： (1)區隔不同的動畫元件，以簡化動畫編作業 (2)作為動畫中元件出場順序的控制
(3)作為每一元件或角色運軌軚跡的設定 Current(作用中圖層)：表示可以在該圖層新增物件。 Normal( 正常圖層 ) ：該圖層可以編輯。 Locked( 鎖定圖層 ) ：該圖層無法執行編輯。 Hidden( 隱藏圖層 ) ：物件不能顯示出來。 Outlined(外框顯示) ：圖層內容以外框顯示。

17 圖層使用 我們通常會使用圖層(layer)來安排場景，將不 同的圖畫或動畫分別放在不同的圖層中，以避
免在編輯時互相干擾，造成動畫的結果不正確 。 不同的圖層彼此重疊在一起，最後看到的畫 面則是所有圖層重疊在一起的結果。

18 圖層使用 場景 圖層（Layer） 要讓一個物件產生動畫效果時，必須藉由數個畫格來組成，該物件則佔用了一個圖層，相對的，若要讓數個物件在同一個時間內產生動效果，則必須藉由數個圖層來組合。

19 時間軸(TimeLine) 時間軸 (Timeline)是用來控制並記錄我們的 Flash 互動電影，它顯示每一個場景(Scene)
、影格(Frame)以及圖層(Layer)。 我們利用時間軸來將不同的場景或是影格 串連成一個互動的Flash電影。

20 影格(Frame)類型 Frame(普通影格)：視窗時間軸上的一格格子。 Keyframe(關鍵影格)：該畫格在動畫中具有關鍵性內容。
Blank Keyframe(空白關鍵影格)：該畫格沒有任何關鍵性內容，作用是清除前面Keyframe內容。 區段中之畫格：設定起點和輸入的圖像，中間的動畫過程，Flash會自動補上。 加入聲音/指令/標籤的畫格

21 隱藏的圖層 鎖定的圖層 白色的空心圓代表空白的關鍵影格 黑色的實心圓代表關鍵影格 普通影格 動畫影格

22 影格(Frame) 影格(Frame)是一般動畫軟體所通用的計數 單位，而時間軸就以影格為時間基準來安 排每個元件的演出。 分為
關鍵影格(Keyframe)

23 影格的應用(Frame) (1)連續的關鍵影格：每一格關鍵影格 都做一點變化，便產生最簡單的動畫效果。 (2)關鍵影格 與 影格 的組合
指標移到關鍵影格 時才會有畫面的變化, 而移至非黑色圓點的影格時 (影格) 則畫面保持不變。其中的 影格 則具有延遲畫面顯示的效果。

24 影格的應用(Frame) (3)補間(漸變)動畫
在兩個 關鍵影格 之間的影格中, 自動產生物件漸進變化的畫面。補間動畫的技術有 移動 與 形狀 兩種。 (4)空白關鍵影格： 新增 空白關鍵影格 可以將前面的關鍵影格 內容清除掉，使動畫中的物件消失掉。

25 場景(Scene ) 場景 （Scene） 一個動畫檔中允許一個以上的場景動畫存在著，也就是說，您可以設計好多個動畫劇情，以符合整體動畫的需求。一個場景中可以擁有各自獨立的圖層與劇情。

26 工作環境的設定 尺規的顯示和隱藏： 【檢視】-【尺規】 格線的顯示、隱藏和設定：  【檢視】-【格線】 各種工具列的顯示和隱藏：
 【視窗】-【工具列】 各項浮動面板的顯示和隱藏：  【視窗】-【面板】 螢幕顯示百分比設定 偏好設定  【編輯】-【偏好設定】

27 熟悉 Flash 的面版組件 主功能表 標準工具列/播放控制工具列 工具箱/檢視工具鈕/顏色面板/屬性工具面板
場景名稱/場景編輯鈕/元件編輯鈕 時間軸面板 圖層面板 時間軸 舞台區(Stage)和工作區(Work Area) 螢幕顯示百分比/快速啟動工具列 狀態列

28 flash的影像檔來源 使用內建圖庫 => 視窗 / 元件庫。 讀入其他檔案 => 檔案 / 匯入 / 匯入至元件庫。
使用工具(箱)繪製，然後以面板設定屬性。

29 群組特性 flash有個很重要的特性，若2個不同 的物件重疊在一起，則會有兩種可能 的現象發生。 結合：物件顏色完全相同時，重
疊之後將會結合在一起。

30 群組特性 (2)消去：物件顏色不相同，被覆蓋的 地方將會被消去，將物件移開後就可得到 證明。

31 元件特性 元件就像電影中的演員，扮演著各式不同的角色。 製作元件的好處很多，元件可以重複使用而不佔記憶體空間。

32 製作元件 在flash中可以製造圖像、影片片段、按鈕，三種元件 以下說明一下圖像元件的產生方式 . (1)在元件編輯模式下製作 :
插入 / 新增元件輸入圖像的名稱 設定性質為圖像確定 / 自我編輯 (2)在舞台上直接製作 : 直接在舞台上繪製圖案 , 然後用箭頭工具選 取整個圖案插入 / 轉換為元件設定性質

33 製作元件 (3)使用檔案讀入的功能: (外部元件庫) 檔案 / 匯入 匯入外部的圖檔至元件庫或舞台
(4)使用元件：可以從圖庫找到做好的元件，然後將元件拖曳到場景中使用，除非將元件刪除，否則元件可無限次拖曳出來使用 。

34 Flash檔名 (1) flash影片檔 ： 檔名為「fla」，此為flash電影的原始檔，可以編輯 與修改，但不能放在網頁中執行。
副檔名為「swf」，此為flash編譯過的輸出檔案，可 以放在網頁中或使用獨立的播放程式撥放，但無法 編輯與修改。 所以在將來在製作階段時先存成「fla」檔，電影製 作完成後再存成「swf」檔。

35 選取功能表列「File/New」或按標準工具列的。
建立新的工作檔 選取功能表列「File/New」或按標準工具列的。 開始Flash工作檔 將先前所製作的Flash工作檔(*.fla)開始， 選取功能表列「檔案/開新檔案」或按標準工具列的。 影格（Frame） 是指每一格動畫圖片，Frame是Flash動畫展示的舞台，藉著每一格影格 的更替，展現flash 豐富的內容。 在每一格影格裡，會有幾種不同的物件型態： 圖形物件：使用Flash 的繪圖工具所繪製的物。 文字物件：使用繪圖工具面板中的文字工具可以產生文字物件。 點陣圖物件：利用匯入(「檔案/匯入」)功能，可以把各種圖形檔加入畫格內。 角色元件(Symbol)：當動畫中有重複使用到的物件，為了縮小動檔的體積，我們通常會將該物件建立成 「元件」 ,如此不管該物件在動畫中出現了幾次，其動畫檔中也只會儲存一個。 群組物件：二個以上的物，都可以組成一個群組物件。

36 FLASH 常用快速鍵一覽表 FLASH MX 快速鍵一覽表 注意事項： 1.相同顏色物件在一起會變成同個物件，不同顏色會被切開
2.任何要作形狀漸變或移動漸變效果的文字或圖形都必需做成元件 3.要做移動漸變的文字必需先做打散(Ctrl+B)及群組(Ctrl+G)才可設定顏色Alpha 4.加入音樂：檔案格式限MP3、WAV、AU，先匯入至元件庫再拖曳至版面(不是時間軸) 5.背景色變透明：在網頁HTML碼的<object>內插入一行<param name="wmode" value="transparent">即可

37 注意事項： 1.相同顏色物件在一起會變成同個物件，不同顏色會被切開 P29-30
3.要做移動漸變的文字必需先做打散(Ctrl+B)及群組(Ctrl+G)才可設定顏色Alpha 4.加入音樂：檔案格式限MP3、WAV、AU，先匯入至元件庫再拖曳至版面(不是時間軸) 5.背景色變透明：在網頁HTML碼的<object>內插入一行<param name="wmode" value="transparent">即可

38 簡單實例操作 1. 逐格動畫製作-影格(Frame) 圖片、文字 2. 補間動畫-漸變(Tweening) 分為=移動、形狀
移動-物件可直線移動及變化大小 -物件須群組化 形狀-展現由一物件慢慢轉變為另一物件

39 逐格製作動畫 這是最簡單的動畫表現方式，就是每一個影格都放進不同的內容，當然這些內容是有連續性的，如此一來只要一格一格播放，自然就會產生動畫效果。

40 漸變(Tweening)動畫製作 移動漸變動畫
形狀漸變動畫 　經由設定起始和結束兩個不同形狀的影格，電腦會自行補上中間的變化過程。

41 Flash時間 問 題 與 討 論

42 下次內容 – 時間軸應用 物件繪製 時間軸設定 圖層及遮罩使用 場景介紹及應用