簡 易 Flash 小 遊 戲 製 作 Instructor: Mr. Bill Wu 輔 助 網 址 : www.microstyle.com/notes/flashgame
Flash 工 作 環 境 重 要 概 念 1. 時 間 軸 2. 圖 層 3. 移 動 (Motion) 動 畫 = 物 件 要 群 組 (Group) 4. 變 形 (Shape) 動 畫 = 物 件 要 打 散 (Break) 導 師 :Microstyle Computer billwu@microstyle.com 2 頁
1. 建 立 檔 案 建 立 檔 案, 按 鈕 或 執 行 File/New 指 令 若 要 更 改 動 畫 大 小 及 影 格 速 度, 可 執 行 Modify/Document 指 令 建 立 的 檔 案 預 設 值 : 1. 動 畫 大 小 (Dimensions):550x400 像 素 2. 影 格 速 度 (Frame Rate): 每 秒 12 格 3. 背 景 色 彩 (Background color): 白 色 繪 圖 工 具 :Flash 的 繪 圖 工 具 與 一 般 繪 圖 軟 件 如 Photoimpact 差 不 多, 用 法 亦 相 若 Arrow( 箭 頭 ) 一 般 選 取 Line( 線 ) 繪 畫 直 線 Pen( 筆 ) 貝 茲 曲 線 繪 圖 筆 Oval( 橢 圓 形 ) 畫 圓 及 橢 圖 Pencil( 鉛 筆 ) 自 由 畫 線 Ink( 墨 水 瓶 ) 線 條 上 色 擷 取 顏 色 Subselect( 副 選 擇 ) 編 輯 元 件 的 線 條 Lasso( 套 索 ) 分 割 元 件 Text( 文 字 ) 加 入 文 字 Rectangle( 矩 形 ) 畫 長 方 形 及 正 方 形 Brush( 筆 刷 ) 填 上 顏 色 Paint( 油 漆 桶 ) 範 圍 填 色 橡 皮 擦 導 師 :Microstyle Computer billwu@microstyle.com 3 頁
2. 製 作 背 景 : 背 景 通 常 繪 畫 動 畫 中 不 動 的 部 份 1. 按 一 下 矩 形 工 具 鈕, 2. 在 屬 性 工 具 列 選 擇 線 條 顏 色 及 風 格 之 類, 在 舞 台 畫 一 個 方 格 導 師 :Microstyle Computer billwu@microstyle.com 4 頁
3. 輸 入 文 字 1. 按 一 下 文 字 工 具 鈕, 2. 在 圖 像 的 適 當 位 置 按 滑 鼠 一 下, 輸 入 要 加 入 的 文 字, 3. 利 用 屬 性 工 具 列 設 定 文 字 的 特 效 4. 旋 轉 及 改 變 文 字 大 小 1. 按 一 下 變 形 工 具 鈕, 2. 所 選 物 件 會 出 現 在 八 個 控 制 點, 你 可 以 拖 曳 他 們 改 變 物 件 的 大 小 與 旋 轉 物 件 5. 加 入 相 片 我 們 也 可 以 在 網 上 尋 找 一 適 當 的 圖 片, 其 中 可 用 的 網 站 是 www.google.com.hk 導 師 :Microstyle Computer billwu@microstyle.com 5 頁
www.animfactory.com 不 過 當 然 要 注 意 版 權 了 1. 到 網 站 www.microstyle.com/notes/flash 選 取 你 喜 歡 的 圖 片 2. 在 圖 片 上 按 一 按 右 鍵 3. 選 擇 複 製 4. 返 回 Flash 按 一 按 右 鍵 選 貼 上 導 師 :Microstyle Computer billwu@microstyle.com 6 頁
4. 加 入 移 動 動 畫 背 景 圖 層 用 來 放 不 動 的 東 西, 那 麼 動 的 東 西 就 要 放 在 另 一 個 圖 層 了 1. 按 一 下 插 入 圖 層 鈕, 2. 為 免 不 小 心 移 動 了 背 景 層 的 物 件, 我 們 最 好 按 一 下 鎖 把 Layer 1 鎖 上 3. 我 們 重 複 加 入 文 字 的 步 驟 把 文 字 放 在 Layer2 上 (i) 本 動 畫 預 算 約 維 持 2 秒, 播 放 速 率 為 12 fps( 每 秒 12 格 ), 故 在 Layer 1 及 Layer2 的 第 24 格 影 格 按 右 鍵 選 插 入 關 鍵 影 格 導 師 :Microstyle Computer billwu@microstyle.com 7 頁
(ii) 點 選 第 24 格 影 格, 把 文 字 移 至 左 上 方 (iii) 將 滑 鼠 游 標 移 至 Layer2 的 兩 個 關 鍵 影 格 之 間 按 右 鍵, 選 擇 Create Motion Tween 導 師 :Microstyle Computer billwu@microstyle.com 8 頁
(iv) 按 Enter 可 直 接 預 覽 效 果 (v) 可 以 按 一 下 第 一 個 關 鍵 影 格 選 擇 更 多 不 同 的 動 畫 效 果 4. 加 入 變 形 動 畫 同 一 圖 層 不 可 同 一 時 間 有 兩 個 動 畫, 所 以 這 個 變 形 動 畫 又 要 放 在 另 一 圖 層 了 1. 按 一 下 插 入 圖 層 鈕, 2. 我 們 最 好 按 一 下 鎖 把 Layer 2 也 鎖 上 3. 在 Layer 3 輸 入 文 字 並 在 文 字 上 按 右 鍵 及 選 打 散 (Break Apart) 導 師 :Microstyle Computer billwu@microstyle.com 9 頁
(vi) 在 Layer 3 的 第 24 格 影 格 按 右 鍵 選 插 入 關 鍵 影 格 Insert Keyframe 導 師 :Microstyle Computer billwu@microstyle.com 10 頁
(vii) 點 選 第 24 格 影 格, 把 原 來 文 字 刪 除 (viii) 再 輸 入 新 文 字, 調 整 好 格 式 及 位 置 後, 在 文 字 上 按 右 鍵 及 選 打 散 (Break Apart) (ix) 按 一 下 Layer 3 第 一 格, 在 屬 性 選 擇 Create Motion Tween 並 在 Tween 屬 性 選 形 狀 shape (x) 按 Enter 可 直 接 預 覽 效 果 導 師 :Microstyle Computer billwu@microstyle.com 11 頁
6. 存 檔 及 輸 出 成 網 頁 : 1. Flash 存 檔 與 其 他 軟 件 沒 有 分 別, 按 檔 案 存 檔, 接 著 選 擇 位 置 及 輸 入 檔 名 即 可 要 留 意 的 是 存 檔 類 型 是 *.fla, 這 是 給 你 日 後 修 改 的 格 式 2. 想 要 把 它 放 到 網 頁 上, 或 寄 給 朋 友 欣 賞, 可 利 用 Flash 做 public 的 動 作 3. 請 點 選 檔 案 --> 發 佈 設 定 --> 格 式 即 出 現 下 圖 導 師 :Microstyle Computer billwu@microstyle.com 12 頁
4. 在 類 型 勾 選 Flash 及 HTML 兩 部 份 或 exe 5. 設 定 完 上 述 步 驟, 接 著 請 按 上 圖 中 的 Public, 即 出 現 下 圖 的 畫 面 6. 在 發 佈 完 成 後, 按 下 確 定, 即 完 成 此 一 發 佈 網 頁 的 動 作 導 師 :Microstyle Computer billwu@microstyle.com 13 頁
我 們 為 今 次 課 程 製 作 一 個 簡 單 的 按 鈕 來 控 制 動 畫 示 範 網 站 http://www.microstyle.com/notes/flashgame 先 按 右 鍵 來 下 載 所 需 圖 片 1. 建 立 檔 案 建 立 檔 案, 按 檔 案 開 新 檔 案 指 令 若 要 更 改 動 畫 大 小 及 影 格 速 度, 可 執 行 修 改 / 文 件 指 令 建 立 的 檔 案 預 設 值 : 1. 動 畫 大 小 (Dimensions):500x390 像 素 2. 影 格 速 度 (Frame Rate): 每 秒 12 格 3. 背 景 色 彩 (Background color): 白 色 導 師 :Microstyle Computer billwu@microstyle.com 14 頁
兒童趣味電腦班 2. 製作背景 背景通常繪畫動畫中不動的部份 1. 按一下 檔案Æ匯入至舞台 2. 把圖片放好置正中 3. 輸入文字 1. 按一下 文字工具 鈕 2. 在圖像的適當位置按滑鼠一下 輸入要加入的文字 導師 Microstyle Computer billwu@microstyle.com 15 頁
3. 利 用 屬 性 工 具 列 設 定 文 字 的 特 效 3. 放 入 主 角 1. 按 檔 案 匯 入 至 元 件 庫 2. 按 視 窗 元 件 庫 來 開 啟 元 件 庫 窗 格 3. 把 元 件 庫 中 的 bear.gif 拖 到 舞 台 中 導 師 :Microstyle Computer billwu@microstyle.com 16 頁
3. 在 熊 人 公 仔 上 右 鍵 轉 換 成 元 件 4. 在 名 稱 上 輸 入 bearwalk (i) 雙 按 熊 仔, 留 意 上 方 變 成 bearwalk, 即 進 入 了 bearwalk 的 元 件 編 輯 導 師 :Microstyle Computer billwu@microstyle.com 17 頁
(ii) 在 第 60 格 右 按 插 入 關 鍵 影 格. (iii) 把 熊 仔 拖 到 左 方 導 師 :Microstyle Computer billwu@microstyle.com 18 頁
(iv) 按 一 按 第 一 格, 在 屬 性 的 補 間 動 畫 選 移 動 (v) 按 一 下 動 作, 輸 入 stop(); (vi) 按 一 按 場 景 1 返 回 舞 台 導 師 :Microstyle Computer billwu@microstyle.com 19 頁
(vii) 按 一 按 熊 仔, 在 右 下 方 屬 性 的 實 體 名 稱 輸 入 bear1 (viii) 按 視 窗 內 建 元 件 庫 按 鈕 (ix) 把 喜 愛 的 按 鈕 拖 到 舞 台 導 師 :Microstyle Computer billwu@microstyle.com 20 頁
(x) 按 一 下 向 上 箭 咀, 然 後 按 一 下 動 作 (xi) 按 一 下 向 上 箭 咀, 然 後 按 一 下 動 作 輸 入 以 下 文 字 on (press) { p=getproperty("/bear1",_y) p=p-5 setproperty("/bear1",_y, p); 導 師 :Microstyle Computer billwu@microstyle.com 21 頁
} (xii) 按 一 下 向 下 箭 咀, 然 後 按 一 下 動 作 輸 入 以 下 文 字 on (press) { p=getproperty("/bear1",_y) p=p+5 setproperty("/bear1",_y, p); } (xiii) 按 一 下 向 左 箭 咀, 然 後 按 一 下 動 作 輸 入 以 下 文 字 on (press) { p=getproperty("/bear1",_x) p=p-5 setproperty("/bear1",_x, p); } (xiv) 按 一 下 向 右 箭 咀, 然 後 按 一 下 動 作 輸 入 以 下 文 字 on (press) { p=getproperty("/bear1",_x) p=p+5 setproperty("/bear1",_x, p); } 導 師 :Microstyle Computer billwu@microstyle.com 22 頁
(xv) 按 一 按 第 一 個 圓 型 按 鈕, 然 後 按 一 下 動 作 輸 入 以 下 文 字 on (press) { _root.bear1.gotoandplay(2) } (xvi) 按 一 按 第 二 個 圓 型 按 鈕, 然 後 按 一 下 動 作 輸 入 以 下 文 字 on (press) { _root.bear1._visible=false; } (xvii) 類 似 的 變 數 有 以 下 幾 種, 你 可 以 試 一 試 第 三 個 按 鈕 : _x 水 平 的 數 值 _y 垂 直 的 高 度 _xscale 水 平 比 例 _yscale 垂 直 比 例 _rotation 旋 轉 _alpha 透 明 值 _visible 能 否 觀 看 (xviii) 你 可 以 按 Ctrl-Enter 來 看 一 看 效 果 導 師 :Microstyle Computer billwu@microstyle.com 23 頁
抽 獎 遊 戲 先 從 互 聯 網 選 三 至 五 張 你 喜 愛 的 禮 物 圖 片 1. 建 立 檔 案 建 立 檔 案, 按 檔 案 開 新 檔 案 指 令 若 要 更 改 動 畫 大 小 及 影 格 速 度, 可 執 行 修 改 / 文 件 指 令 建 立 的 檔 案 預 設 值 : 1. 動 畫 大 小 (Dimensions):550x400 像 素 2. 影 格 速 度 (Frame Rate): 每 秒 12 格 3. 背 景 色 彩 (Background color): 白 色 2. 製 作 背 景 : 背 景 通 常 繪 畫 動 畫 中 不 動 的 部 份 1. 按 一 下 檔 案 匯 入 至 舞 台 2. 把 圖 片 放 好 置 正 中 3. 按 一 下 文 字 工 具 鈕, 4. 在 圖 像 的 適 當 位 置 按 滑 鼠 一 下, 輸 入 要 加 入 的 文 字, 4. 我 們 假 試 有 四 項 禮 物, 加 上 封 面 就 是 五 格, 所 以 在 第 五 格 按 右 鍵, 選 插 入 導 師 :Microstyle Computer billwu@microstyle.com 24 頁
影 格 5. 完 全 後 照 舊 把 圖 層 鎖 定 3. 加 入 禮 物 層 1. 加 入 新 圖 層, 打 上 封 面 文 字, 再 在 第 二 格 右 按 插 入 空 白 關 鍵 影 格 2. 在 第 二 格 影 格 放 入 文 字 及 頭 獎 圖 片 導 師 :Microstyle Computer billwu@microstyle.com 25 頁
3. 再 在 第 三 格 右 按 插 入 關 鍵 影 格, 製 作 二 獎 及 三 獎 及 安 慰 獎 導 師 :Microstyle Computer billwu@microstyle.com 26 頁
4. 完 成 後 在 每 個 關 鍵 影 格 加 入 動 作, 這 樣 可 以 令 動 畫 不 動 stop(); 5. 完 全 後 照 舊 把 圖 層 鎖 定 4. 加 入 按 鈕 1. 加 入 新 圖 層 2. 視 窗 內 建 元 件 庫 導 師 :Microstyle Computer billwu@microstyle.com 27 頁
3. 在 按 鈕 元 件 庫 選 兩 個 拖 曳 至 舞 台 4 雙 按 按 鈕 把 文 字 一 個 改 為 Start, 一 個 改 為 Try Again 5 按 回 場 景 1, 點 一 下 Start 按 鈕, 在 動 作 上 加 入 以 上 命 令 on (press) { a=random(4)+2 gotoandstop(a); } 6 點 一 下 Try Again 按 鈕, 在 動 作 上 加 入 以 上 命 令 導 師 :Microstyle Computer billwu@microstyle.com 28 頁
on (press) { } gotoandstop(1); 解 釋 : Random(4) 命 令 是 會 由 0,1,2,3 隨 意 選 一 個 出 來, 所 以 要 加 回 2, 確 保 我 們 不 會 走 到 第 1 格 想 一 想 這 樣 太 容 易 中 大 獎, 花 要 破 產 了, 如 何 是 好??? 試 試 看, 用 插 入 影 格 (F5) 把 時 間 軸 改 成 30 格, 分 佈 如 下 : 把 Start 的 動 作 命 令 改 為 : on (press) { a=random(28)+2 gotoandstop(a); 想 一 想 為 何 這 樣 中 第 一 獎 的 機 會 就 小 了 很 多? } 導 師 :Microstyle Computer billwu@microstyle.com 29 頁
Random 命 令 片 段 名 稱 : hand 實 體 名 稱 : hand1 Frame1 的 Action Script: startdrag(_root.hand1,true); 按 鈕 frog 的 Action Script: 按 鈕 名 稱 : frog 實 體 名 稱 : frog1 on (press) { a=random(100) _root.frog1._x+=a-50 _root.frog1._y+=a-50 } 導 師 :Microstyle Computer billwu@microstyle.com 30 頁
配 合 以 上 所 學, 我 們 試 做 一 個 飛 刀 遊 戲 本 遊 戲 可 學 習 hittest if. Else onclipevent 變 數 :text 影 片 名 稱 :target 實 體 名 稱 :circle 影 片 名 稱 :knife 實 體 名 稱 :knife1 Action Script: onclipevent (enterframe) { if (_root.knife1, hittest(_root.circle)) { _root.text = "Great"; _root.knife1.stop(); _root.circle.stop(); } else { _root.text = "Miss"; } } Action Script: on (press) { p=getproperty("/knife1",_y) p=p+10 setproperty("/knife1",_y, p); } Action Script: on (press) { _root.knife1.gotoan dplay(2); } Action Script: on (press) { p=getproperty("/knife1",_y) p=p-10 setproperty("/knife1",_y, p); } 導 師 :Microstyle Computer billwu@microstyle.com 31 頁