• 沒有找到結果。

動畫是以影格( frame )為單位。

N/A
N/A
Protected

Academic year: 2021

Share "動畫是以影格( frame )為單位。"

Copied!
52
0
0

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

全文

(1)

FLASH

(2)

Flash 介紹 ( 檔案格式 )

Flash 是 Adobe 公司推出的專業網頁動畫設計軟體,利用向量繪圖 技術,結合音效,且支援點陣圖及視訊檔案匯入,還可撰寫 Actio n Script  程式,製作出互動式的網頁、動畫、遊戲、電影,亦可 與其他軟體整合運用,現已成為一套多媒體的整合工具。

應用範圍廣泛如,網頁介面、遊戲、教學、結合資料庫、影音展示、

動畫作品……等。

(3)

動畫的概念 - 動畫是根據視覺暫留原理,讓靜態圖片快速連續播放,而造成的

連續性畫面。

動畫是以影格( frame )為單位。

–Flash 預設為每秒播放 24 格,即 24 fps 。若為網路用,用預設值即可,格

數愈高,則畫面動作愈流暢。

也可依照播放媒體來設定動畫的每秒播放格數 (fps) ,設定如下 :

電視: 29.97 fps(NTSC)

電影: 24 fps

DVD : 30 fps

(4)

Flash 動畫製作流程

Flash 的動畫類型大致分為逐格動畫 (Frame-by-Frame Animatio n) 與漸變動畫 (Tweening Animation) 兩大類

開新檔案 匯入資源 動畫製作 測試與發佈

選擇 Actionscript3.0/2.0

設定文件尺寸

影格播放速率 (fps)

圖像

影片

音訊

繪製元件 ( 角色 )

在舞台安排元素的動作

在時間軸中安排元件的 出場時間與順序

加入效果

加入互動行為 (action script)

動畫檔 swf

網頁

自動執行檔 exe

(5)
(6)

操作介面

圖層與時間軸 功能表列

工作區 ( 舞台 )

工具箱 浮動功能視窗列 :

可以移動、收合 製作自己的工作區

屬性面板 :

當前編輯的物件的各項 屬性都可以在此作調整

(7)

Flash 概念

工作區 舞台

影格 人物的各個分解動作

時間軸 / 圖層 進 / 出場順序

元件 演員 / 角色

元件庫 演員休息室,儲存元件的資

料庫

場景 演出的地方,包括背景色、

影片尺寸大小 等設定

(8)

開啟新檔 : 檔案 >> 新增 >> 檔案類型 >> 確定

(9)

文件修改 : 修改 >> 文件 >> 文件屬性 >> 確定

(10)

繪圖工具 ( 工具箱 )

細部選取工具 選取工具

套索工具 文字工具

筆刷工具 油漆桶工具 橡皮擦工具 縮放工具 筆畫顏色 填色顏色

手掌工具 滴管工具

墨水瓶工具 鉛筆工具 線段工具 自由變形工具

工具選項欄

(11)

選取 / 直接選取工具

直接選取工具可以編輯圖形的端點 選取工具可以編輯圖形中相同

顏色的像素

(12)

任意變形 / 套索工具

任意編輯工具可以旋轉、縮放圖形

套索工具可以選取圖形的像素進行編輯

(13)

文字

橡皮擦

文字框鍵入文字後,可以點選文字,在屬性欄裡調整文字選項

Flash 的橡皮擦工具有五種不同的模式,可以視功能選擇使用

(14)

基本繪圖教學

線條

鋼筆 線條

使用貝茲曲線描繪路徑

按住左鍵拖曳線條方向

(15)

筆刷       鉛筆

按住左鍵即可描繪線條

按住左鍵即可描繪線條,

鉛筆工具會自動平滑化

(16)

多邊形

墨水瓶 / 油漆桶

按住左鍵往右下拖曳

,即可產生圖形

筆畫顏色

填色顏色

(17)

漸層填色

左鍵點擊漸層類型

1

2

可以在顏色視窗調整漸層選項

(18)

元件的概念

Flash 中創建的圖形、按鈕或影片群組,儲存為“元件”之後可以重複 使用,快速進入編輯模式,整個檔案的元件會跟著改變。

元件製作可以用父子概念去理解,變化出不一樣的群組元件

舉例 : 汽車 ( 輪胎會動 ) ,元件的組成可能是

製作元件步驟

匯入 / 繪製圖像 轉換成元件 從元件庫中拖曳到舞 台中重複取用

按鈕元件

圖形元件

影片元件

點陣圖

向量圖

汽車 ( 影片元件 )= 車身 ( 圖像元件 )+ 轉動的輪子 ( 影片 元件 )+ 控制車輪停止 / 啟動的按鈕 ( 按鈕元件 )

(19)

常匯入的圖像格式

PSD Photoshop

內部的編輯檔案格式,專為處理點

陣圖而用,保留透明度及圖層 , 檔案較 PNG 大

AI illustrator 內部的編輯檔案格式,專為製作向量 圖而用,檔案保留圖層 , 若要匯入 Flash 儘量少 用漸層色

GIF 網頁常用格式,可製作透明圖、交錯圖、動畫等,

檔案體積小,不失真,非破壞性壓縮,不支援全彩 影像

JPEG / JPG 一般與網頁常用格式,壓縮率大,屬破壞性壓縮,

捨棄像素造成失真,一般壓縮下肉眼很難分辨 PNG 結合 GIF 與 JPG 優點,適合用於網路,可保留透

明度

(20)

元件類型比較

Graphic圖像 按鈕

Button 影片片段

Movie Clip 圖像元件含靜止圖片或動

畫,是製作動畫的基本元 素之一。播放長度就是時 間軸的長度,無法自行獨 立迴圈播放,也無法被程 式控制。

用於控制滑鼠的互動的行

為,可設定 一般 、

滑入 、 按下 和 感應區” “ ” “ 等四個狀態,內容可為靜 止圖像或影片片段。

動畫的一個片段,可獨立 產生動態效果。當播放主 要動畫時,影片元件可以 自行迴圈播放。影片片段 也可包含程式碼。

(21)

匯入檔案 ( 圖像、影片、音訊 ) 製作成元件

檔案 > 匯入 > 匯入至元件庫

選擇檔案 > 開啟舊檔

檔案已匯入元件庫

(22)

音訊匯入元件庫

檔案 > 匯入 > 匯入至元件庫

聲音已被存在元件庫

(23)

影片匯入元件庫

(24)
(25)
(26)

將畫好的物件製作成元件

選取畫好的物件

點擊右鍵開啟選單

,選擇轉換成元件。

選取元件類型 為元件訂定名稱

(27)

將文字當作元件

文字也可以變成文件,點擊 滑鼠右鍵開啟選單選擇

轉換成元件,就可以將文字 存入元件庫當中使用。

(28)

一段文字元件可以打散成個別的字元

,作個別的效果,按右鍵點選打散 一段文字就會被變成個別的字元元件

,再按一次右鍵點擊分層製圖層,每 個字元元件就會被分到各自的圖層中

(29)

元件編輯區左鍵雙擊元件即可進入元件編輯區

圖像影片編輯區 影片片 段 元件編輯區

(30)

混合模式

建立複合影像,將兩個以上的 重疊物件,改變其透明度

或顏色互動的過程。混和模式藉由重疊的影片片段中的混和顏色

,建立特殊效果。

一般

圖層

變暗

相乘

變亮

螢幕

(31)

變亮

實光

增加

相減

差異化

負片效果

Alpha

擦除

(32)

按鈕編輯區

按扭的時間軸指示了每個按鈕動作時 的影格,使用者在這裡編輯按鈕的變化

(33)

時間軸的概念

F l a s h 編 輯 動 畫 的 主 要 工 具 , 用 於 組 織 和 控 制 動 畫 中 的 影 格 和 圖 層 的 播 放 時 間 和 出 現 順 序 。 時 間 軸 主 要 由 圖 層 控 制 區 、 影 格 和 播 放 控 制 等 部 分 組 成 。

影格數

圖層 / 影格

在影格上點擊右鍵影格編輯選單

(34)

描圖紙功能 ( 洋蔥皮 )

在繪製動畫時,可使用描圖紙功能,了解前面圖形的位置與形體變化

顯示前一影格的 半透明影像

顯示前一影格的 外框

(35)

導引線動畫 : 利用導引線功能使物件沿著路徑移動。

點選圖層,點擊右鍵出現圖層選單

選擇增加導引線 圖層上方出現導引線圖層,

在此圖層關鍵影格繪製導引線

在起終的關鍵影格將圖形分別放置在

導引線的兩端,要出現圓圈標誌才是正確放置

1

2

3

(36)

在物件圖層中間點擊右鍵

,選擇建立移動補間動畫

移動補間動畫建立後,可以移動影格,檢查 圖形物件是否沿著導引線移動

4

5

(37)

遮罩 () 動畫

1

建立兩個圖層,個別描繪物件,物件圖層 ( 下 ) 與遮罩圖層 ( 上 )

2

,在遮罩的起終關鍵圖層設定其移動方向或其他變化

遮罩概念 :

被遮罩覆蓋的圖形會顯現,其他部分會被隱藏。

遮罩

物件 : 文字 / 圖形

在遮罩圖層中點右鍵,

建立移動補間動畫

(38)

遮罩圖層的移動補間動畫已建立

在遮罩圖層點擊右鍵,

選單中點遮色片選項

遮色片已被建立

測試影片檢查效果

4

5

3

6

(39)

影格 (frame) 的概念

影片中每個畫面在 Flash 中稱為影格,影格是 Flash 最基本的單 位。在各個影格上放置圖形、文字、聲音等各種素材或物件。多個 影格按照先後次序以一定速率連續播放形成動畫。

影格的選擇 : 在 Flash 中影格按照功能的不同,可以分為三種:關鍵影 格、空白關鍵影格和普通影格。

插入影格快捷鍵

關鍵影格 : 放置元件、圖形… . 等內容的影格

空白關鍵影格 : 沒有放置內容的關鍵影格,通常做為隔離不同段動畫用 普通影格 : 關鍵影格時間的延伸,無法放置內容

F6 F5

(40)

逐格動畫 (Frame-by-Frame Animation)

逐格動畫是動畫最基本的製作方式,一個影格,填入一個影像

(41)

漸變動畫 (Tweening Animation)

形狀補間動畫 ( 讓圖形產生形變 )

1

2

3

建立兩個關鍵影格,

在結束的關鍵影格讓 圖形改變

在起終關鍵影格中間,按滑鼠 右鍵出現選單,選擇”建立形狀 補間動畫”

當中間影格變成綠色且出現箭頭 即為完成形變動畫,可測試影片。

(42)

移動補間動畫 : 旋轉、速度、縮放

在起終的關鍵影格設定好圖形的位置

在起終的關鍵影格中間按右鍵

,出現選單選擇建立“移動補間動畫”

在起終的關鍵影格中間按左鍵

,屬性欄位出現補間動畫選項,選擇 移動。可以再次編輯物件的旋轉、速 度、縮放、加減速等動態選項

1

2

當中間影格變成紫色且出現箭頭 即為完成移動動畫。

3

4

(43)

除錯

當建立補間動畫失敗時,如圖 會出現虛線,此時請檢查步驟 是否執行錯誤或有遺失關鍵影 格的情形發生。

(44)

測試動畫 : 檢視動畫的最終匯出成果

快捷鍵 : Ctrl + Enter

(45)

發佈設定

匯出檔案格式: SWF

編輯檔 :FLA 檔案 > 匯出 > 匯出影片

選擇匯出位置

選擇匯出檔案類 型 > 存檔

(46)

匯出檔案格式: SWF

匯出檔案格式: AVI

(47)

Ctrl + N

開新檔案

Ctrl + O 開啟舊檔

Ctrl + Shift + O 將檔案以元件庫形式開啟

Ctrl + W 關閉檔案

Ctrl + S 存檔

Ctrl + Shift + S 另存新檔

Ctrl + R 匯入音效檔或點陣圖檔

Ctrl + Alt + Shift + S 匯出影片或單張影像 Ctrl + Shift + F12 輸出影片設定

Shift + F12 輸出影片

Ctrl + P 列印

Ctrl + Q 離開 Flash

快捷鍵一覽

檔案的存取指令

(48)

Ctrl + Z

復原

Ctrl + Y 重做

Ctrl + X 剪下

Ctrl + C 複製

Ctrl + V 貼上

Ctrl + Shift + V 貼在原位置上

Ctrl + D 再製一個圖形

Ctrl + A 全部選取

Ctrl + Shift + A 取消全部的選取

Ctrl + Alt + X 剪下影格內容

Ctrl + Alt + C 複製影格內容

Ctrl + Alt + V 貼上影格內容

Alt+ Backspace 清除影格內容

Ctrl + Alt + A 選擇所有影格內容

Ctrl + E 編輯

編輯指令

(49)

Home

回到第一個影格

Page Up 到前一個影格

Page Down 到後一個影格

End 到最後一個影格

Ctrl + 1 用 100% 的比例顯示畫面

Ctrl + Alt + T 顯示 / 隱藏時間軸面板 Ctrl + Shift + W 將工作區域放到最大範圍 Ctrl + Shift + / 吸附 ( 貼齊 ) 至物件

Ctrl + Alt + H 顯示漸變控制提示點

Ctrl + H 顯示 / 隱藏邊界

F4 顯示 / 隱藏畫面上的面板

檢視指令

(50)

F8

將選取的物件轉換成元件

Ctrl + F8 新增元件

F5 插入影格

Shift + F5 移除影格

F6 插入關鍵影格

F7 插入空白影格

Shift + F6 清除關鍵影格

Enter 播放目前場景的影片

Ctrl + Alt + R 回到第一影格

Ctrl + Enter 測試影片

Ctrl + Shift + Enter 影片除錯模式 Ctrl + Alt + Enter 測試場景

Ctrl + Alt + B 在場景中直接測試按鈕元件

功能

插入指令

(51)

Ctrl + U

開啟偏好設定視窗

Ctrl + J 開啟文件屬性設定視窗

Ctrl + F2 顯示 / 隱藏工具面板

Ctrl + Alt + T 顯示 / 隱藏時間軸面板

Ctrl + F3 顯示 / 隱藏屬性面板

Ctrl + K 顯示 / 隱藏混色器面板

Shift + F9 顯示 / 隱藏混色器面板

Ctrl+ F9 顯示 / 隱藏顏色色票面板

Ctrl + I 顯示 / 隱藏資訊面板

Shift + F2 顯示 / 隱藏場景面板

Ctrl + T 顯示 / 隱藏變形面板

F9 顯示 / 隱藏 Actions 面板

Shift + F4 顯示 / 隱藏除錯面板

Alt + F3 顯示 / 隱藏影片結構檢視器

Shift + F1 面板 顯示 / 隱藏 Actions 參考資 Ctrl + F7 訊面板 顯示 / 隱藏組件面板

Alt + F7 顯示 / 隱藏組件參數面板

Alt + F1 顯示 / 隱藏 Flash 解答面板

啟動面板指令

(52)

F1

線上說明視窗

Ctrl + B 分散到圖層

Ctrl + Shift +D 打散

Ctrl + G 群組

Ctrl + Shift +G 取消群組

Ctrl + Shift + 

將物件移到最前面

Ctrl + 

將物件向前移動一層

Ctrl + 

將物件向後移動一層

Ctrl + Shift +

將物件移動到最後面

其它重要指令

參考文獻

相關文件

3.丙級:包括應用作業系統、安裝軟體與使用電腦週邊設 備、設定繪圖環境、控制圖形螢幕、輸出圖形與 管理圖面等基本工作及繪製單件立體圖、立體剖

序號 職類名稱及代號 技能範圍 版面編排方面:Adobe InDesign 影像編輯方面:Adobe PhotoShop 向量軟體:Adobe Illustrator. 其他軟體:Adobe

多元就業開發方案社會型 3 年期計畫書撰寫格式

計畫撰寫技巧,並進行部分執行單位成果分享,以提升提案

動畫設計師常需利用電腦來繪製 3D 圖形,當他覺得螢幕上所呈現的影... 大部分的組織及個人都必須經由

Flash 動畫與視訊產生互動,例如加上字幕、音 效…等,也能以 ActionScript 來控制視訊的播放 效果,甚至藉由 ActionScript

” 影格速率(Frame Rate )是指 Flash 動畫每 秒鐘播放的影格數,預設是 12 fps(frame per second),也就是每秒播放 12

• 做好的 Flash 動畫除了要儲存起來,方便日後再 載入 Flash 中編輯外,想要讓 Flash 動畫能夠在 其它應用程式播放,例如用 Microsoft Media Player