FLASH 的 動 畫 實 作 專 題 學 生 :I4B50 潘 俊 安 指 導 教 授 : 嚴 威 助 理 教 授 大 同 大 學 資 訊 工 程 學 系 專 題 報 告 中 華 民 國 九 十 六 年 一 月 - 1 -
圖 表 目 錄... - 3 - 第 一 章 概 述... - 4-1.1 專 題 動 機... - 4-1.1.1 政 府 政 策... - 4-1.1.2 個 人 興 趣... - 4-1.2 專 題 目 標... - 5-1.3 專 題 進 度 與 工 作 分 配... - 5 - 第 二 章 相 關 研 究... - 6-2.1 動 畫... - 6-2.1.1 動 畫 的 來 源... - 6-2.2 動 畫 的 分 類... - 7-2.2.1 平 面 動 畫... - 7-2.2.2 立 體 動 畫... - 7-2.2.3 實 驗 動 畫... - 8-2.2.4 電 腦 動 畫... - 8 - 第 三 章 FLASH 系 統 的 架 構... - 9-3.1 FLASH... - 9-3.2 FLASH 檔 案 的 組 成... - 9-3.2.1 元 件... - 9-3.2.2 圖 層... - 10-3.2.3 關 鍵 影 格... - 12-3.2.4 時 間 軸... - 13-3.3 用 FLASH 編 輯 的 動 畫... - 15-3.3.1 補 間 動 畫... - 15-3.3.2 逐 格 動 畫... - 15-3.4 FLASH 動 畫 的 優 點... - 16 - 第 四 章 實 驗 過 程... - 17-4.1 製 作 概 念... - 17-4.1.1 動 畫 製 作 流 程... - 17-4.2 故 事 內 容... - 19-4.2.1 製 作 元 件 過 程... - 19-4.3 遊 戲 製 作... - 28-4.3.1 Action Script... - 28-4.3.2 製 作 過 程... - 28 - 第 五 章 評 估 與 改 進... - 32 - 第 六 章 結 論... - 33 - 參 考 資 料... - 34 - - 2 -
圖 表 目 錄 圖 表 1 工 作 分 配 表... - 5 - 圖 表 2 正 確 的 圖 層 放 置... - 11 - 圖 表 3 錯 誤 的 圖 層 放 置... - 11 - 圖 表 4 關 鍵 影 格 的 標 示... - 12 - 圖 表 5 時 間 軸... - 13 - 圖 表 6 製 作 流 程 圖... - 18 - 圖 表 7 第 一 幕 場 景 圖... - 20 - 圖 表 8 關 上 的 窗 戶... - 21 - 圖 表 9 打 開 的 窗 戶... - 21 - 圖 表 10 烏 龜 的 製 作 圖... - 22 - 圖 表 11 說 明 烏 龜 擺 動 圖... - 23 - 圖 表 12 說 明 烏 龜 擺 動 圖... - 23 - 圖 表 13 沒 有 被 覆 蓋 的 背 景... - 24 - 圖 表 14 被 遮 罩 覆 蓋 的 圖... - 25 - 圖 表 15 打 字 效 果... - 25 - 圖 表 16 鉛 筆 的 圖 層... - 26 - 圖 表 17 痣 的 圖 層... - 27 - 圖 表 18 點 痣 動 作 完 成... - 27 - 圖 表 19 開 啟 動 作 面 板... - 29 - 圖 表 20 動 作 面 板... - 29 - 圖 表 21 進 入 遊 戲 畫 面... - 30 - 圖 表 22 開 始 遊 戲 畫 面... - 30 - 圖 表 23 遊 戲 結 束 畫 面... - 31 - - 3 -
第 一 章 概 述 1.1 專 題 動 機 1.1.1 政 府 政 策 政 府 於 民 國 九 十 一 年 五 月 核 定 通 過 加 強 數 位 內 容 產 業 發 展 推 動 方 案 ( 參 考 資 料 [6]) 推 動 我 國 數 位 內 容 產 業 發 展 外, 組 織 方 面 則 設 立 行 政 院 數 位 內 容 產 業 發 展 指 導 小 組, 統 籌 掌 理 數 位 內 容 產 業 發 展 之 規 劃 推 動 與 評 估 事 宜 同 時, 經 濟 部 成 立 數 位 內 容 產 業 推 動 辦 公 室 ( 參 考 資 料 [7]), 以 做 為 產 業 推 動 與 服 務 之 單 一 窗 口 行 政 院 於 同 年 五 月 核 定 通 過 挑 戰 二 八 國 家 發 展 重 點 計 畫 ( 參 考 資 料 [8]), 除 將 數 位 內 容 列 為 兩 兆 雙 星 產 業 中 之 一 明 星 產 業 外, 也 將 培 植 具 跨 領 域 專 長 之 數 位 內 容 人 才, 因 此 特 別 訂 定 設 立 數 位 內 容 學 院 計 畫 此 外, 在 數 位 台 灣 計 畫 中, 數 位 學 習 國 家 型 科 技 計 畫 數 位 典 藏 學 習 國 家 型 科 技 計 畫 及 數 位 娛 樂 計 畫 等 ( 參 考 資 料 [9]), 也 有 助 於 健 全 台 灣 整 體 數 位 內 容 之 發 展 環 境 從 政 府 如 此 積 極 的 動 作 下, 讓 我 們 發 現 數 位 內 容 未 來 的 發 展 應 該 有 相 當 的 潛 力 1.1.2 個 人 興 趣 現 在 的 社 會 上 如 何 找 到 一 項 有 競 爭 力 的 技 能 是 很 重 要 的, 由 於 影 音 動 畫 遊 戲 動 畫 及 電 影 動 畫 的 需 求 日 趨 成 熟, 動 畫 所 能 表 現 東 西 在 影 像 媒 體 這 方 面 是 最 多 的, 目 前 政 府 也 大 力 推 廣, 再 加 上 個 人 對 動 畫 的 興 趣 近 年 來 由 於 科 技 進 步 的 關 係, 我 們 見 到 的 動 畫 越 來 越 精 緻, 所 使 用 的 特 效 也 經 常 令 人 驚 豔, 其 應 用 也 相 當 廣 泛, 像 是 網 頁 製 作 電 視 節 目, 連 電 影 都 會 使 用 到, 而 Flash 正 是 學 習 動 畫 製 作 基 礎 的 最 好 軟 體 - 4 -
1.2 專 題 目 標 利 用 FLASH 軟 體 製 作 一 部 動 畫, 並 在 動 畫 中 放 入 使 用 Action Script 語 言 所 寫 的 小 遊 戲, 讓 人 在 欣 賞 動 畫 的 同 時 還 能 享 受 小 遊 戲 的 樂 趣 1.3 專 題 進 度 與 工 作 分 配 二 月 ~ 六 月 七 月 ~ 九 月 十 月 ~ 十 一 月 十 二 月 ~ 一 月 研 讀 相 關 資 料 製 作 動 畫 修 改 及 測 試 編 寫 報 告 圖 表 1 工 作 分 配 表 - 5 -
第 二 章 相 關 研 究 2.1 動 畫 動 畫 所 指 的 是 由 許 多 靜 止 的 畫 面, 以 一 定 的 速 度 連 續 播 放 時, 因 視 覺 暫 留 造 成 畫 面 活 動 的 技 術 為 了 得 到 活 動 的 畫 面, 每 個 畫 面 之 間 都 會 有 些 微 的 改 變 而 畫 面 的 製 作 方 式, 最 常 見 的 是 手 繪 在 紙 張 或 賽 璐 珞 片 (Celluloid) 上, 其 它 的 方 式 還 包 含 了 黏 土 模 型 紙 偶 沙 畫 等 由 於 電 腦 科 技 的 進 步, 現 在 也 有 許 多 利 用 電 腦 動 畫 軟 體, 直 接 在 電 腦 上 繪 製 出 來 的 動 畫, 或 者 是 在 動 畫 製 作 過 程 中 使 用 電 腦 進 行 加 工 的 方 式, 這 些 都 已 經 大 量 運 用 在 商 業 動 畫 的 製 作 中 通 常 動 畫 是 由 大 量 的 圖 片 所 產 生, 就 算 在 電 腦 動 畫 科 技 得 到 長 足 進 步 和 發 展 的 現 在 有 時 候 也 是 使 用 這 種 方 式 來 製 作 動 畫 ( 參 考 資 料 [4]) 2.1.1 動 畫 的 來 源 從 人 類 文 明 開 始 以 來, 人 類 就 使 用 各 種 圖 像 形 式 來 記 錄 物 體 動 作 和 時 間 的 過 程 法 國 考 古 學 家 普 度 歐 馬 (Prudhommeau) 在 1962 年 的 研 究 報 告 指 出, 兩 萬 五 千 年 前 的 石 器 時 代 洞 穴 上 就 畫 有 一 系 列 的 野 牛 奔 跑 分 析 圖, 是 人 類 試 圖 用 筆 ( 或 石 塊 ) 捕 捉 凝 結 動 作 的 最 早 證 據 同 樣 的 例 子, 出 現 在 如 埃 及 墓 畫 希 臘 古 瓶 上 的 連 續 動 作 分 解 圖 在 一 張 圖 畫 上 把 不 同 時 間 發 生 的 動 作 畫 在 一 起, 這 種 同 時 進 行 的 概 念 間 接 顯 示 了 人 類 動 的 慾 望 李 奧 納 多 達 文 西 有 名 的 黃 金 比 例 人 體 幾 何 圖 上 所 繪 的 四 隻 胳 膊, 就 表 示 雙 手 上 下 擺 動 的 動 作 十 六 世 紀 的 西 方 更 首 度 出 現 手 翻 書 的 雛 形, 這 和 動 畫 的 概 念 也 有 相 通 之 處 - 6 -
中 國 的 繪 畫 史 上, 藝 術 家 一 向 有 把 靜 態 的 繪 畫 賦 予 生 命 的 傳 統, 如 六 法 論 中 主 張 的 氣 韻 生 動 聊 齋 的 畫 中 仙 中 人 物 走 出 捲 軸 等, 大 抵 上 是 靠 想 像 力 來 彌 補 動 態 真 正 發 展 出 使 圖 上 畫 像 動 起 來 的 工 夫, 還 是 在 遙 遠 的 歐 洲 ( 參 考 資 料 [4]) 2.2 動 畫 的 分 類 現 今 動 畫 類 型 可 依 照 創 作 型 式 來 區 分 : 2.2.1 平 面 動 畫 是 指 在 平 面 上 所 製 作 出 來 的 動 畫, 透 過 圖 片 的 連 續 交 疊 ( 即 剪 接 當 中 的 " 動 態 圖 檔 ") 所 做 成 的, 例 如 : 早 期 迪 士 尼 動 畫 就 是 大 多 以 平 面 動 畫 形 式 來 創 作, 一 直 到 今 天 我 們 在 電 視 上 看 到 動 畫 卡 通 大 都 是 平 面 動 畫 的 方 式 創 作, 像 宮 崎 駿 大 友 克 洋 的 作 品 等 大 都 是 平 面 動 畫 2.2.2 立 體 動 畫 先 作 出 立 體 模 型, 上 好 材 質 貼 圖, 由 動 畫 師 設 計 動 作, 打 燈 光, 調 整 攝 影 的 角 度, 最 後 拍 攝 影 片 合 成 全 部 的 作 業 都 是 在 立 體 的 虛 擬 環 境 中 所 製 作 例 如 : 偶 動 畫 物 體 動 畫 黏 土 動 畫 真 人 單 格 攝 影, 還 有 提 姆 波 頓 的 聖 誕 夜 驚 魂, 利 用 實 際 存 在 的 人 偶 以 stop motion( 逐 格 拍 攝 ) 的 方 式 來 創 作, 讓 人 偶 像 是 真 人 般 動 起 來, 其 他 有 名 的 偶 動 畫 有 : 酷 狗 寶 貝 ( 阿 德 門 公 司, 曾 製 作 動 畫 電 影 落 跑 雞 的 公 司 ) - 7 -
2.2.3 實 驗 動 畫 以 實 驗 手 法 或 是 實 驗 題 材 創 作 的 動 畫 作 品, 動 畫 經 過 近 100 年 的 發 展, 已 經 發 展 出 許 多 種 創 作 形 式, 例 如 : 沙 動 畫, 真 人 動 畫 等 2.2.4 電 腦 動 畫 電 腦 動 畫 的 基 本 原 理 其 實 與 其 他 動 畫 ( 或 模 型 ) 的 製 作 原 理 不 相 同 傳 統 動 畫 的 技 巧 是 逐 格 拍 攝, 逐 格 變 化 電 腦 動 畫 則 是 每 一 格 動 作 與 下 一 格 動 作 之 間 沒 有 停 格 製 作 與 停 格 拍 攝 電 腦 動 畫 的 原 理 是 : 設 定 動 作 的 起 點 與 終 點 後, 若 給 予 足 夠 的 參 數, 電 腦 會 自 動 計 算, 自 動 完 成 連 續 的 動 畫 - 8 -
第 三 章 FLASH 系 統 的 架 構 3.1 FLASH Flash 是 一 種 編 寫 工 具, 從 簡 易 的 動 畫 到 複 雜 如 線 上 商 店 等 的 互 動 式 網 路 應 用 程 式, 都 可 以 用 它 來 製 作, 也 可 以 加 入 圖 片 聲 音 和 視 訊, 使 Flash 應 用 程 式 媒 體 的 內 容 更 豐 富 Flash 包 含 了 許 多 功 能, 使 它 功 能 強 大 而 又 容 易 使 用, 例 如 : 拖 放 式 使 用 者 介 面 組 件 內 建 可 以 將 ActionScript 加 入 文 件 的 行 為 指 令, 以 及 可 以 加 入 物 件 的 特 殊 效 果 ( 參 考 資 料 [3]) 3.2 FLASH 檔 案 的 組 成 3.2.1 元 件 元 件 是 在 Flash 中 最 基 本 的 單 位, 一 旦 建 立 之 後, 便 能 在 自 己 的 文 件 或 其 他 文 件 中 重 複 使 用 該 元 件, 元 件 可 以 包 括 從 另 一 個 應 用 程 式 匯 入 的 圖 像 在 Flash 中 建 立 的 所 有 元 件 都 會 自 動 成 為 目 前 文 件 之 元 件 庫 的 一 部 分, 建 立 元 件 時, 要 依 據 在 文 件 中 使 用 元 件 的 方 式 來 選 擇 元 件 類 型 元 件 的 類 型 可 分 為 下 列 三 種 : 圖 像 : 當 作 靜 態 影 像 使 用, 或 是 要 建 立 與 主 時 間 軸 相 結 合 並 可 重 複 使 用 的 動 畫 片 段 時, 就 可 以 使 用 圖 像 元 件 圖 像 元 件 會 與 主 時 間 軸 同 步 運 作, 而 互 動 式 控 制 項 及 聲 音 則 無 法 在 圖 像 元 件 的 連 續 動 畫 中 作 用 - 9 -
按 鈕 : 使 用 按 鈕 元 件 可 以 建 立 對 滑 鼠 按 鍵 滑 鼠 滑 過 或 其 他 動 作 產 生 回 覆 的 互 動 式 按 鈕 影 片 剪 輯 : 建 立 可 重 複 使 用 的 動 畫 片 段, 影 片 片 段 有 自 己 的 多 影 格 時 間 軸, 且 獨 立 於 主 時 間 軸 之 外, 也 可 以 將 影 片 片 段 實 體 放 在 按 鈕 元 件 的 時 間 軸 中, 以 建 立 動 畫 按 鈕 建 立 Flash 的 動 畫 通 常 需 要 包 含 大 量 圖 片 或 影 片 剪 輯, 使 用 元 件 可 以 降 低 檔 案 大 小 當 動 畫 具 有 重 複 或 週 期 性 的 動 作 時, 例 如 鳥 兒 翅 膀 的 上 下 拍 擊, 可 以 考 慮 將 動 畫 建 立 在 元 件 中, 也 可 以 利 用 編 寫 或 執 行 階 段 的 共 享 元 件 庫 資 源, 將 元 件 加 入 文 件 中 ( 參 考 資 料 [3]) 3.2.2 圖 層 圖 層 就 像 層 層 相 疊 的 透 明 底 片, 可 以 協 助 組 織 文 件 中 的 圖 像, 當 在 一 個 圖 層 上 繪 製 及 編 輯 物 件, 可 以 不 影 響 另 一 個 圖 層 上 的 物 件 在 圖 層 內 沒 有 物 件 時, 可 以 穿 透 看 見 下 方 的 圖 層 下 面 的 圖 片 說 明 圖 層 正 確 和 失 敗 的 放 置 - 10 -
圖 表 2 正 確 的 圖 層 放 置 圖 表 3 錯 誤 的 圖 層 放 置 - 11 -
建 立 新 Flash 文 件 時, 文 件 中 會 含 有 一 個 或 更 多 的 圖 層, 組 成 文 件 中 的 圖 像 動 畫 與 其 他 元 素 建 立 圖 層 數 目 的 唯 一 限 制 是 電 腦 記 憶 體, 圖 層 所 使 用 的 元 件 會 從 元 件 庫 產 生, 所 以 不 會 增 加 多 餘 的 檔 案 量, 我 們 可 以 隱 藏 鎖 定 或 重 新 排 列 圖 層, 也 可 以 建 立 圖 層 資 料 夾, 將 圖 層 放 入 其 中, 組 織 與 管 理 圖 層, 而 不 影 響 到 在 舞 台 上 所 看 到 的 內 容, 如 果 將 聲 音 檔 動 作 影 格 標 籤 和 影 格 註 解 放 在 不 同 的 圖 層 或 資 料 夾 裡, 當 需 要 編 輯 這 些 項 目 時, 就 能 快 速 找 到 它 們 3.2.3 關 鍵 影 格 當 在 動 畫 中 指 定 某 個 影 格 為 變 更 發 生 之 處, 該 影 格 即 成 為 一 個 關 鍵 影 格 ( 如 下 圖 所 標 示 ) Flash 可 以 製 作 補 間 動 畫 自 動 填 入 關 鍵 影 格 之 間 的 影 格, 創 作 流 暢 的 動 畫, 使 用 關 鍵 影 格 在 製 作 動 畫 時 不 需 要 繪 製 每 個 影 格, 使 得 製 作 動 畫 更 加 輕 鬆 容 易 圖 表 4 關 鍵 影 格 的 標 示 - 12 -
3.2.4.4 時 間 軸 時 間 軸 的 主 要 組 件 是 圖 層 影 格 和 播 放 磁 頭, 會 隨 時 間 在 圖 層 與 影 格 中 組 織 並 控 制 文 件 內 容, 就 像 影 片 一 樣,Flash 文 件 會 將 時 間 長 度 分 成 多 個 影 格 圖 層 就 像 是 多 張 底 片 層 層 相 疊, 每 個 圖 層 包 含 出 現 在 舞 台 上 的 不 同 影 像 如 下 圖 文 件 中 的 圖 層 會 在 時 間 軸 左 邊 的 欄 中 列 出, 每 個 圖 層 中 包 含 的 影 格, 會 出 現 在 圖 層 名 稱 右 邊 的 列 中 時 間 軸 頂 端 的 時 間 軸 標 題 會 顯 示 影 格 數 目, 而 播 放 磁 頭 會 指 出 目 前 在 舞 台 上 顯 示 的 影 格 顯 示 在 時 間 軸 底 部 的 時 間 軸 狀 態 欄 位, 會 顯 示 選 取 的 影 格 編 號 目 前 影 格 速 率, 以 及 目 前 影 格 的 經 過 時 間 圖 表 5 時 間 軸 - 13 -
時 間 軸 顯 示 動 畫 在 文 件 中 的 位 置, 包 括 逐 格 動 畫 補 間 動 畫 和 移 動 路 徑 時 間 軸 中 圖 層 區 段 的 控 制 項 可 以 隱 藏 顯 示 鎖 定 或 解 除 鎖 定 圖 層, 以 及 將 圖 層 內 容 顯 示 為 外 框, 也 可 以 在 時 間 軸 中 插 入 刪 除 選 取 和 移 動 的 影 格, 拖 曳 影 格 到 相 同 或 不 同 的 圖 層 中 的 新 位 置 在 時 間 軸 中, 可 以 處 理 影 格 與 關 鍵 影 格, 將 其 依 照 在 影 格 中 出 現 的 順 序 放 置, 我 們 還 可 以 對 影 格 或 關 鍵 影 格 執 行 下 列 修 改 : 1. 插 入 選 取 刪 除 和 移 動 影 格 或 關 鍵 影 格 2. 將 影 格 與 關 鍵 影 格 拖 曳 到 同 一 圖 層 或 不 同 圖 層 上 的 新 位 置 3. 拷 貝 和 貼 上 影 格 和 關 鍵 影 格 4. 將 關 鍵 影 格 轉 換 成 影 格 5. 從 元 件 庫 面 板 拖 曳 項 目 到 舞 台, 將 這 個 項 目 增 加 到 目 前 的 關 鍵 影 格 中 Flash 提 供 兩 種 在 時 間 軸 中 選 取 影 格 的 不 同 方 法, 在 影 格 式 選 取 範 圍 中, 可 以 選 取 時 間 軸 中 個 別 的 影 格 在 合 併 式 選 取 範 圍 中, 當 按 一 下 連 續 影 格 中 的 任 何 影 格 時, 會 選 取 整 個 連 續 影 格 ( 從 一 個 關 鍵 影 格 到 下 一 個 關 鍵 影 格 ) ( 參 考 資 料 [3]) - 14 -
3.3 用 FLASH 編 輯 的 動 畫 利 用 FLSAH 做 出 的 動 畫 大 致 可 以 分 成 下 面 兩 種 : 3.3.1 補 間 動 畫 補 間 動 畫 是 一 種 建 立 運 動 的 有 效 方 法, 不 但 會 隨 著 時 間 變 化, 還 能 將 檔 案 大 小 降 到 最 低 在 補 間 動 畫 中,Flash 只 會 將 影 格 之 間 發 生 變 更 的 數 值 儲 存 起 來, 若 要 快 速 地 在 文 件 中 準 備 好 補 間 動 畫 的 元 素, 必 須 將 物 件 分 散 到 圖 層 之 中, 我 們 還 可 以 將 補 間 動 畫 套 用 到 圖 層 遮 色 片 上 的 物 件, 建 立 動 態 遮 色 片 補 間 動 畫 的 類 型 : 1. 移 動 補 間 動 畫 : 在 某 個 時 刻 為 某 個 實 體 群 組 或 文 字 區 塊 定 義 位 置 大 小 和 旋 轉 等 屬 性, 然 後 在 其 他 時 刻 更 改 這 些 屬 性, 2. 形 狀 補 間 動 畫 : 在 某 個 時 刻 繪 製 形 狀, 然 後 在 另 一 個 時 刻 更 改 該 形 狀 或 繪 製 另 一 個 形 狀, 在 Flash 中 會 自 動 補 上 兩 者 之 間 的 影 格 值 或 形 狀, 藉 以 建 立 動 畫 3.3.2 逐 格 動 畫 逐 格 動 畫 會 更 改 舞 台 上 每 個 影 格 的 內 容, 因 此 最 適 合 用 於 每 個 影 格 中 的 影 像 都 會 發 生 變 更 的 複 雜 動 畫, 而 不 是 單 單 橫 越 舞 台 移 動 的 動 畫, 與 補 間 動 畫 相 比, 逐 格 動 畫 更 容 易 增 加 檔 案 大 小, 而 在 逐 格 動 畫 中,Flash 會 將 每 個 完 整 影 格 的 數 值 儲 存 起 來 ( 參 考 資 料 [3]) - 15 -
3.4 FLASH 動 畫 的 優 點 Flash 提 供 了 各 式 各 樣 的 方 法, 可 以 在 文 件 中 加 入 動 感 及 互 動 性, 製 造 出 令 人 讚 嘆 的 動 畫 效 果 舉 例 來 說, 可 以 讓 文 字 圖 像 按 鈕 或 影 片 片 段 等 視 覺 元 素 移 動 或 消 失 連 結 至 另 一 個 URL, 也 可 以 將 其 他 文 件 或 影 片 片 段 載 入 目 前 的 文 件 中 我 們 可 以 透 過 下 列 功 能 來 加 入 動 態 感 及 互 動 性 : 1. 時 間 軸 特 效 是 可 以 套 用 至 文 字 圖 像 點 陣 圖 及 按 鈕 上 的 預 建 動 畫, 產 生 特 殊 的 動 畫 效 果 2. 補 間 動 畫 及 逐 格 動 畫 是 利 用 在 時 間 軸 影 格 上 放 置 圖 像 的 方 式 所 建 立 的 動 感 僅 需 為 補 間 動 畫 建 立 起 始 及 結 束 影 格, 中 間 的 影 格 將 由 Flash 建 立 若 是 逐 格 動 畫, 則 必 須 為 動 畫 中 的 每 個 影 格 建 立 圖 像 3. 行 為 指 令 是 預 先 編 寫 好 的 ActionScript, 可 以 加 入 物 件 之 中, 對 物 件 進 行 控 制 行 為 指 令 可 以 將 ActionScript 編 碼 的 功 能 性 控 制 性 和 彈 性 加 入 文 件 中, 而 無 需 自 行 建 立 ActionScript 程 式 碼 可 以 使 用 行 為 指 令, 對 影 片 片 段 視 訊 檔 案 及 聲 音 檔 案 進 行 控 制 ( 參 考 資 料 [3]) - 16 -
第 四 章 實 驗 過 程 4.1 製 作 概 念 在 Flash 裡, 主 要 是 利 用 移 動 補 間 動 畫 來 製 作 的, 因 此 只 要 在 Flash 的 時 間 軸 上 設 定 好 演 員 角 色 的 兩 個 關 鍵 位 置 ( 影 格 ), 這 樣 Flash 就 能 自 動 在 關 鍵 影 格 之 間 產 生 變 化 過 程 中 的 其 他 影 格 以 這 樣 的 方 式 所 產 生 的 動 畫, 便 可 以 大 量 的 減 少 動 畫 檔 案 的 大 小, 讓 Flash 動 畫 作 品 適 合 在 網 路 上 傳 輸 若 使 用 的 元 件 不 只 一 個, 可 將 各 個 元 件 安 放 在 圖 層 中, 圖 層 越 多 則 表 示 使 用 的 元 件 越 多, 此 時 考 慮 的 則 是 元 件 所 擺 設 的 位 置 及 先 後 順 序, 不 要 把 主 要 的 圖 案 給 搭 配 的 圖 形 擋 住 了, 只 要 善 用 時 間 軸 和 圖 層 就 可 以 製 作 出 活 潑 生 動 的 動 畫 ( 參 考 資 料 [2]) 4.1.1 動 畫 製 作 流 程 - 17 -
企 劃 腳 本 建 立 元 件 與 場 景 製 作 動 畫 加 入 特 效 輸 出 影 片 圖 表 6 製 作 流 程 圖 企 劃 腳 本 是 製 作 動 畫 前 的 一 個 前 置 作 業 通 常 會 想 要 以 Flash 來 製 作 動 畫 一 定 有 動 機, 因 此 必 須 先 想 清 楚 是 什 麼 原 因 要 製 作 這 個 動 畫? 主 角 人 物? 想 表 達 的 內 容? 有 了 明 確 的 製 作 動 機 主 角 內 容 之 後, 再 來 擬 定 整 個 動 畫 的 故 事 情 節, 包 括 故 事 中 的 角 色 與 場 景 的 安 排 元 件 與 場 景 是 動 畫 所 必 須 的 基 本 要 素 不 管 是 繪 製 的 圖 像 輸 入 的 文 字 或 是 匯 入 的 聲 音 或 視 訊, 都 可 以 將 它 們 轉 換 成 Flash, 並 存 放 在 元 件 庫 中, 等 到 需 要 時 在 取 出 來 使 用 繪 製 多 個 場 景 可 以 互 相 做 轉 換, 以 增 加 動 畫 的 可 看 性, 讓 動 畫 不 落 於 單 調 - 18 -
動 畫 製 作 當 元 件 都 製 作 完 成 後, 接 下 來 就 是 根 據 企 劃 的 腳 本 來 製 作 動 畫, 製 作 動 畫 時 需 注 意 景 與 景 之 間 的 串 接, 以 及 鏡 頭 與 鏡 頭 之 間 的 轉 換, 只 要 腳 本 吸 引 人, 配 合 這 兩 者 的 交 互 運 用, 便 可 以 讓 動 畫 變 得 生 動 活 潑 加 入 特 效, 加 入 背 景 音 樂 旁 白 或 互 動 性 的 程 式, 可 以 讓 動 畫 更 具 吸 引 力, 強 化 觀 賞 者 的 視 覺 感 受 輸 出 影 片 動 畫, 當 影 片 完 成 時, 以 Flash 來 說, 其 輸 出 方 式 的 選 擇 性 相 當 多, 可 以 將 動 畫 匯 出 成 Flash 影 片 檔 AVI 視 訊 檔 QuickTime 影 片 檔 GIF 動 畫 檔 或 是 HTML 文 件 ( 參 考 資 料 [2]) 4.2 故 事 內 容 男 主 角 等 待 著 在 國 外 唸 書 的 女 主 角, 不 但 飼 養 了 女 主 角 最 愛 的 烏 龜, 甚 至 還 做 了 一 首 歌 來 表 達 他 的 心 意 而 女 主 角 為 了 捉 弄 男 主 角, 就 在 他 們 見 面 的 時 候 將 自 己 扮 醜, 讓 男 主 角 嚇 了 一 跳 4.2.1 製 作 元 件 過 程 有 了 故 事 之 後, 再 來 就 是 要 開 始 製 作 所 需 要 的 元 件, 製 作 元 件 看 似 容 易, 其 實 也 是 有 它 的 困 難 處 - 19 -
在 第 一 幕 的 場 景 中 ( 圖 ), 光 是 這 張 圖 就 用 了 七 個 圖 層, 這 表 示 要 做 七 個 圖 像 元 件, 要 把 圖 像 轉 換 成 元 件 的 型 態 這 樣 在 使 用 上 才 比 較 方 便, 每 個 圖 層 的 順 序 是 不 能 更 改 的, 要 是 背 景 的 那 一 層 被 移 到 桌 子 的 上 面 的 話, 這 樣 桌 子 就 會 不 見 在 這 張 圖 中 來 運 用 補 間 動 畫 的 效 果, 所 使 用 的 是 形 狀 補 間 ( 下 圖 有 標 示 ), 現 在 開 頭 位 置 跟 結 束 位 置 標 示 關 鍵 影 格, 在 開 始 的 位 置 放 置 窗 戶 管 上 的 圖 片, 在 移 到 結 束 的 位 置 放 上 窗 戶 打 開 的 圖 片, 最 後 在 窗 戶 那 個 圖 層 選 擇 補 間 動 畫 形 狀, 這 樣 在 播 放 的 時 候 就 會 產 生 窗 戶 自 己 打 開 的 效 果 圖 表 7 第 一 幕 場 景 圖 - 20 -
圖 表 8 關 上 的 窗 戶 圖 表 9 打 開 的 窗 戶 - 21 -
而 下 圖 中 的 烏 龜 也 是 利 用 七 個 圖 片 元 件 作 成 的, 因 為 烏 龜 是 會 動 的, 所 以 將 七 張 圖 片 分 別 放 在 七 個 圖 層 中, 這 樣 就 可 以 針 對 不 同 的 部 位 做 不 同 的 動 作, 像 是 頭 跟 尾 巴 可 以 是 左 右 擺 動, 四 肢 則 是 前 後 擺 動, 要 做 出 這 些 動 作 要 用 到 自 由 變 形 工 具 關 鍵 影 格 和 補 間 動 畫 首 先, 將 烏 龜 的 七 張 圖 片 製 作 好 後, 組 合 成 圖 中 完 整 的 圖 案, 接 下 來, 針 對 不 同 的 部 位 在 不 同 的 影 格 設 為 關 鍵 影 格, 利 用 自 由 變 形 工 具 把 選 擇 到 的 部 位 移 動 到 與 原 本 不 同 的 位 置 上, 然 後 在 下 一 個 關 鍵 影 格 把 剛 才 移 動 過 的 部 位 調 整 回 來, 之 後 使 用 補 間 動 畫 移 動, 就 會 產 生 動 作 的 感 覺 了, 最 後 選 擇 不 同 的 部 位, 重 複 上 面 的 步 驟, 依 照 自 己 的 感 覺 做 出 合 適 的 擺 動 圖 表 10 烏 龜 的 製 作 圖 - 22 -
圖 表 11 說 明 烏 龜 擺 動 圖 圖 表 12 說 明 烏 龜 擺 動 圖 - 23 -
下 面 的 圖 是 介 紹 打 字 效 果 的 作 法, 首 先, 準 備 了 下 面 這 張 背 景, 圖 中 可 以 知 道 這 是 由 四 個 圖 層 所 構 成 的, 先 把 背 景 的 螢 幕 製 作 好 後, 從 網 站 上 擷 取 寫 E-mail 時 的 畫 面, 將 畫 面 放 置 在 螢 幕 圖 層 上, 在 打 上 內 容, 製 作 完 這 個 影 片 片 段 後, 再 把 它 放 到 主 場 景 中, 分 別 用 四 個 圖 層 代 表 四 個 長 方 條, 將 E-mail 上 的 字 蓋 住, 之 後, 用 移 動 補 間 動 畫, 在 適 當 的 影 格 把 長 方 條 移 除, 這 樣 在 播 放 的 時 候, 就 可 以 感 覺 像 是 在 打 字 一 樣, 在 製 作 的 時 候, 要 注 意 四 個 長 方 條 的 間 距 要 排 好, 不 然 在 播 放 時, 就 會 出 現 字 被 遮 住 一 半 或 字 出 現 的 順 序 不 同 的 情 況 圖 表 13 沒 有 被 覆 蓋 的 背 景 - 24 -
圖 表 14 被 遮 罩 覆 蓋 的 圖 圖 表 15 打 字 效 果 - 25 -
下 圖 是 女 主 角 在 扮 醜, 在 臉 上 點 上 許 多 黑 痣, 一 開 始 女 主 角 的 臉 是 正 常 的, 利 用 兩 個 圖 層 來 做 出 女 主 角 在 化 妝 的 過 程, 圖 層 33 是 代 表 那 隻 鉛 筆, 圖 層 34 則 為 女 主 角 點 上 的 痣, 圖 中 影 格 1790 到 影 格 1796 做 出 點 痣 動 作 效 果, 在 影 格 1790 的 位 置 上 先 放 上 鉛 筆 的 圖 片 元 件, 在 影 格 1793 移 動 鉛 筆 的 位 置, 並 在 圖 層 34 畫 上 黑 痣, 最 後 影 格 1796 位 置 上 在 移 動 鉛 筆 的 位 置, 用 移 動 補 間 動 畫 作 連 結, 這 樣 在 播 放 的 時 候 就 會 有 女 主 角 拿 筆 在 臉 上 化 妝 的 效 果 了 圖 表 16 鉛 筆 的 圖 層 - 26 -
圖 表 17 痣 的 圖 層 圖 表 18 點 痣 動 作 完 成 - 27 -
4.3 遊 戲 製 作 4.3.1 Action Script 當 想 要 在 Flash 中 開 發 應 用 程 式 時, 便 會 使 用 ActionScript 語 言, 它 提 供 使 用 者 互 動 功 能 使 用 Flash 內 建 物 件 以 外 的 物 件 ( 如 按 鈕 與 影 片 片 段 ) 或 是 使 SWF 檔 案 具 有 更 穩 定 的 使 用 者 經 驗 ( 參 考 資 料 [3]) 4.3.2 製 作 過 程 首 先 要 打 開 編 寫 程 式 的 動 作 面 板, 把 已 經 構 想 的 遊 戲 程 式 輸 入 進 去, 在 Action Script 中, 可 以 針 對 場 景 或 是 元 件 去 編 寫 所 需 要 的 程 式, 下 面 所 製 作 的 烏 龜 賽 跑 的 遊 戲 裡, 我 先 將 所 要 用 到 的 元 件 擺 設 到 場 景 中, 之 後 先 對 場 景 寫 設 定 終 點 的 程 式 碼, 以 及 設 定 一 些 用 到 的 變 數 初 值, 再 來 便 是 對 遊 戲 的 主 角 -- 烏 龜, 設 定 一 些 判 斷 式 像 是 烏 龜 的 速 度, 要 是 每 隻 烏 龜 的 速 度 都 一 樣 的 話, 那 就 沒 有 意 義 了, 還 有 也 不 能 都 是 同 一 隻 烏 龜 獲 勝, 所 以 要 讓 遊 戲 的 勝 負 是 隨 機 的 - 28 -
圖 表 19 開 啟 動 作 面 板 圖 表 20 動 作 面 板 - 29 -
圖 表 21 進 入 遊 戲 畫 面 圖 表 22 開 始 遊 戲 畫 面 - 30 -
圖 表 23 遊 戲 結 束 畫 面 - 31 -
第 五 章 評 估 與 改 進 在 這 次 的 專 題 中, 有 下 列 須 改 進 的 地 方 : 1. 圖 片 的 精 緻 度 : 因 為 自 己 本 身 的 美 工 程 度 不 是 很 優 異, 在 元 件 的 製 作 上 表 現 不 是 很 好, 之 後 可 以 利 用 其 他 美 工 軟 體 來 修 改, 使 整 個 動 畫 在 視 覺 的 效 果 會 更 漂 亮 2. ActionScript 的 使 用 : 這 項 功 能 在 FLASH 中 是 相 當 有 用 的, 不 管 是 在 製 作 動 畫 或 遊 戲, 還 是 網 頁 上 都 是 一 項 利 器, 所 以 要 是 能 更 加 熟 練 它, 可 以 讓 製 作 出 來 的 東 西 更 加 的 生 動, 也 可 以 也 減 少 許 多 製 作 的 步 驟 之 後, 還 可 以 讓 動 畫 不 只 是 平 面 的, 利 用 現 在 很 流 行 的 3D MAXS 或 MAYA 這 些 軟 體 來 製 作 立 體 的 元 件, 製 作 更 精 緻 的 動 畫 - 32 -
第 六 章 結 論 FLASH 在 就 業 市 場 上 有 許 多 需 求, 譬 如 :104 網 站 也 招 募 許 多 具 備 這 項 技 術 的 人 員, 這 次 的 專 題 讓 我 能 學 習 這 項 技 能 有 很 大 的 幫 助, 雖 然 當 初 以 為 並 不 是 很 困 難 的 技 術, 可 是 在 自 己 動 手 去 研 究 時, 才 發 現 這 也 沒 有 想 像 中 的 簡 單, 因 為 有 些 資 料 對 初 學 者 是 不 容 易 了 解 的, 而 是 需 要 受 過 美 工 基 礎 的 相 關 訓 練 上, 所 以 在 製 作 會 遇 到 相 當 多 的 問 題, 但 還 是 靠 著 多 看 書, 從 基 本 的 功 能 上 一 個 一 個 去 研 究 熟 悉 它 從 這 次 實 驗 中, 讓 我 學 習 到 在 作 研 究 時, 不 管 遇 到 什 麼 問 題 或 困 難 的 地 方 該 如 何 獨 立 去 找 尋 答 案 和 解 決 的 方 式, 而 且 解 決 的 方 式 可 能 不 只 一 種, 所 以 要 試 著 從 各 種 不 同 的 角 度 去 思 考, 這 些 學 習 的 經 驗 對 我 之 後, 不 管 是 求 學 還 是 在 社 會 上 工 作 都 會 是 十 分 正 面 的 意 義 - 33 -
參 考 資 料 [1] FLASH 創 意 動 畫 易 上 手, 鄭 苑 鳳 著 [2] 電 腦 動 畫 概 論 與 實 務, 吳 權 威 編 著 [3] FLASH MX 2004 軟 體 的 說 明 書 [4] http://zh.wikipedia.org/wiki/%e9%a6%96%e9%a1%b5 維 基 百 科 網 站 [5] http://www.twisu.com.tw/ 軟 體 大 學 網 站 [6] http://www.nici.nat.gov.tw/index.php 行 政 院 國 家 資 訊 通 信 發 展 推 動 小 組 網 站 [7] http://www.dcipo.csd.org.tw/ 經 濟 部 數 位 內 容 產 業 推 動 辦 公 室 網 站 [8] http://www.edu.tw/edu_web/edu_mgt/secretary/edu9082001/e2008/index.htm 教 育 部 全 球 資 訊 網 [9] http://www.etaiwan.nat.gov.tw/group/application/etaiwan/index.php 數 位 台 灣 計 劃 網 站 - 34 -