ActionScript 綜合應用 (二) ─打蟑螂遊戲

Slides:



Advertisements
Similar presentations
高中新课程思想政治(必 修 1 、 2 )的教学体会 北京师大二附中 李文燕 2008 年西城新课程教师培训的讲稿.
Advertisements

学习目标 第八章 制作遮罩层动画 掌握遮罩层动画制作眼镜反光效果的方法 。 掌握遮罩层动画制作流水效果的方法 。 掌握遮罩层动画制作瀑布效果的方法 。 掌握遮罩层动画表现镜面拼图效果的方法 。 掌握遮罩动画表现裂纹、断桥效果的方法 。
《饲料分析与质量检测技术》 说课 主讲教师:管建慧. 课程名称: 《饲料分析与饲料质量检测技术 》 课程编码:
商管群科科主任 盧錦春 年 3 月份初階建置、 4 月份進階建置、 5 月份試賣與對外營業。
2009/12/211 商務科技管理系 實 務 專 題 報 告 辦桌非難事 學生: 施雅雯 ( ) 張敬芝 ( ) 葉明臻 ( ) 黃怡琅 ( )
今天我们会去一个充满神秘色彩的地方 你知道是哪吗.
领舞者:聋人邰丽华 观看了聋人表演的《千手观音》,你想说点什么呢?.
项目五 高级动画 本章要点 本章导读 本章任务 上机实训.
成语乐园 成语乐园 执教老师:李道梅.
Flash动画制作 形状渐变动画 动作渐变动画 引导线动画 遮罩动画 动作按钮 动态文本.
詹天佑.
北师大版义务教育课程标准实验教科书 七年级上册讲义 第17课 先进的科学技术.
第22章 Flex应用程序开发 在本章以前的章节中,花了很大的精力来讲解组件、数据等内容,毕竟大部分的开发者使用Flex都是受因为其强大的表示层功能吸引。本章在前面的基础上,进一步介绍Flex应用程序的开发。与前面的章节相比,本章将从整体上把握如何开发Flex应用,侧重于设计模式问题、安全、性能优化等。
校园信息管理系统 河北科技大学网络中心 2000/4/10.
第 27 章 網頁動畫大集合 著作權所有 © 旗標出版股份有限公司.
立體四子棋 研究成員:謝旻諺、 鄭家鈞 指導老師:林屏森老師.
“三步式”网络学习法 《探究与发现》数学网络学习平台介绍
空間向量 朱泰吉 蔡宇翔 張力夫 莊孟霏.
初中思想品德 规范的教学设计与案例分析.
徵收苗栗市福全段147、1588及文心段10、11地號等4筆土地之
第 八 章 交互结构(2).
三創產業學程 學群主持人:袁國榮召集人.
讲 义 大家好!根据局领导的指示,在局会计科和各业务科室的安排下,我给各位简要介绍支付中心的工作职能和集中支付的业务流程。这样使我们之间沟通更融洽,便于我们为预算单位提供更优质的服务。 下面我主要从三方面介绍集中支付业务,一是网上支付系统,二是集中支付业务流程及规定等,
為孩子編織一個支持網  台北市家庭暴力暨性侵害防治中心.
“深入推进依法行政加快建设法治政府” -《法治政府建设实施纲要》解读
中国人民公安大学经费管理办法(试行) 第一章总则 第四条:“一支笔” “一支笔”--仅指单位主要负责人。负责对本 单位的经费进行审核审批。
上課囉 職場甘苦談 小資男孩向錢衝 育碁數位科技 呂宗益/副理.
第六节 可降阶的二阶微分方程 一、 型的微分方程 二、 型的微分方程 三、 型的微分方程.
小学语文第三册第八课 难忘的一天 生字 图片 朗读 词语 写字 音乐.
《体育与健康》说课稿 课题:新兴体育舞蹈 —踢踏舞教学 北师大泉州附中 陈玉慈.
第 7 章 文字、點陣圖與物件編輯 著作權所有 © 旗標出版股份有限公司.
第四章 多彩的光 第六节 眼睛与视力矫正.
選擇 運算式 邏輯運算 if指令 流程圖基本觀念 程式註解 巢狀if指令 switch指令.
影格的類型及相關操作 新增影格 播放磁頭與影格的關係 選取影格 移除影格 影格的類型 設定關鍵影格 設定空白關鍵影格 清除關鍵影格.
Flash摺紙藝術教學 這是韓國人製作的摺紙教學網站,運用flash講解每個步驟,非常實用,不妨多學習利用,也可播放步驟加上解說讓幼兒跟著做。 僅用於自己教學非營利用圖以尊重著作版權。
97學年度嘉義市教師資訊應用評鑑研習(南興國中)
Flash MX 研習 專題探討 畫基本圖 製作分隔線 筆順練習 文字分散應用 處理音效 製作指示按鈕 製作底圖 製作流動式選單
第 十六课 制作交互式动画 课前导读 课堂讲解 上机实战 课后练习.
如何在PowerPoint 2007中插入flash动画
第6章 元件、实例和库 本章主要内容: 元件 实例 库.
ActionScript 綜合應用 (一) ─自製滑鼠指標
ActionScript 綜合應用 (一) ─ 自製滑鼠指標
第10章 声音和视频 本章主要内容: 使用声音 使用视频.
动画制作.
主讲:陶建平 华中科技大学网络与计算中心
网页设计与制作 Dreamweaver CS6 标准教程
网页设计与制作 —— 学习情境三:flash动画网页的设计
Chapter 2 基本語法.
小朋友们好! 场景一:线索人物孙悟空自我介绍,配合自动语音。.
Chapter 1 了解Flash編輯架構.
第 6 章 元件、實體與 元件庫.
Action Script 使用介紹 第六組 張瀚之.
微信商城系统操作说明 色卡会智能门店.
第7章 Flash基础动画制作 本章主要内容: 逐帧动画 补间动画 形状补间动画.
第 15 章 遮色片(Mask) 效果應用─小偷越獄篇.
项目一 认识设计环境 《FLASH动画设计》精品课程组.
全台灣最美的日出好美…好美… 這就是傳說中的潑墨二寮,耳聞她的日出有如國畫般 所以稱為潑墨二寮
傻瓜化的动画制作软件Swish.
第 11 章 色彩形狀漸變動畫─超 Easy!.
第 14 章 濾鏡特效─ 迅速移動的飛碟.
Flash知识补充.
3-3 随机误差的正态分布 一、 频率分布 在相同条件下对某样品中镍的质量分数(%)进行重复测定,得到90个测定值如下:
大綱 一.受試者之禮券/禮品所得稅規範 二.範例介紹 三.自主管理 四.財務室提醒.
清明上河圖 於原作 原作者 擇端(北宋) 北宋風俗畫作品 中國十大傳世名畫之一,屬一级國寶 欲知詳情請點出口   清乾隆 摹本 清明上河.
专题网站的设计与制作 西北师范大学教育技术与传播学院 常薇.
6-5 元件編輯的環境 將圖形轉換為元件後, 想要編輯元件的內容, 必須切換到該元件的編輯模式下才能進行, 元件的編輯模式有下列 3 種, 以下分別為您介紹。
第 20 章 ActionScript 指令與語法.
指數、對數函數 數101乙 周文翔 朱哲明 張良聿.
李商隐诗两首 锦 瑟 马 嵬 夕阳无限好,只是尽黄昏。.
初识flash、绘制角色.
Presentation transcript:

ActionScript 綜合應用 (二) ─打蟑螂遊戲 第 24 章 ActionScript 綜合應用 (二) ─打蟑螂遊戲

本章提要 24-1 遊戲設計與流程分析 24-2 動畫元件與流程說明 24-3 設定蟑螂產生與移動的程式 24-4 判斷蟑螂被打中及蟑螂被打死而消失的程式 24-5 設定記分與判斷遊戲結束的程式 24-6 設定開始與結束場景中的程式

前言 現在請戴上耳機 (或打開喇叭), 雙按 24.swf 範例檔, 先來搶先試玩一下這個「打蟑螂遊戲」吧!

前言 在一段開場動畫後, 按下開始遊戲鈕, 就會進入遊戲畫面, 讓你拿起拖鞋打蟑螂 (打蟑螂時還會發出啪、啪的聲音), 當 100 隻蟑螂都爬過地板後, 遊戲就會結束, 隨即跳到結束畫面, 顯示打中幾隻蟑螂以及評語, 按下再玩一次鈕, 則可以重回開場動畫, 再玩一次遊戲!

24-1 遊戲設計與流程分析 在正式動手開始製作任何遊戲之前, 你都需要先想清楚這是一個怎樣的遊戲, 例如這遊戲是個什麼樣的故事?裡面有哪些角色?怎樣的背景?然後決定遊戲的整個流程要如何進行, 像是要不要有開場動畫?遊戲開始後要不要計時?是倒數計時還是一般計時?要用滑鼠還是鍵盤來控制?要有幾關?要怎麼記分 (怎樣才算得分)?最好繪製一個流程分析圖, 做為製作時的參考, 這樣真正進入實作階段時才會順利。

遊戲設計 遊戲設計的說明沒有規定的格式, 重點只是要把整個遊戲說明清楚, 以便製作。如果這個遊戲只有你一個人製作, 那麼遊戲設計可以寫得簡略一點, 要是這個遊戲是一組人馬在製作, 那麼遊戲設計的說明就必須夠清楚、夠完整, 讓每個參與的人都明白才行喔! 以下就是本章範例「打蟑螂遊戲」的遊戲設計說明:

遊戲設計

遊戲設計 企劃大型的遊戲時, 甚至需要撰寫完整的劇本、角色分析, 這樣才能讓遊戲充滿趣味, 讓玩家愛不釋手。而本章的「打蟑螂遊戲」僅是簡易的小型遊戲, 所以遊戲設計也比較陽春。

遊戲流程分析

遊戲流程分析

24-2 動畫元件與流程說明 完成了遊戲設計與流程分析後, 我們就可以正式進入製作階段了。你可以開啟練習檔 24-learn.fla , 直接利用我們幫你準備好的場景和元件來練習。

元件介紹 本範例所使用元件如下:

元件介紹

元件介紹 在元件庫的聲音資料夾中還有啪啪、尖叫、蟑螂聲 3 個聲音元件, 分別用做揮拖鞋打蟑螂時的聲音、開場動畫的聲音、蟑螂出現時的聲音。另外還有 2 個元件, 因做法較複雜, 我們特別提出來說明。

「被打蟑螂」 影片片段元件 被打蟑螂影片片段元件, 是實際做為遊戲中逃竄的蟑螂之元件, 裡面包含蟑螂聲, 和蟑螂死掉的動畫, 你可以在元件庫中雙按被打蟑螂影片片段元件來看動畫的安排:

「被打蟑螂」 影片片段元件

「開場動畫」影片片段元件 開場動畫影片片段元件是一段有 55 格影格的簡單動畫:

設定文件屬性與場景、圖層 本範例之文件屬性均採預設, 即 550 px× 400 px, 背景色為白色, 12 fps 的播放速率。而場景則有 3 個, 依序命名為開始、遊戲、結束, 各場景的圖層分配如下:

設定文件屬性與場景、圖層

設定文件屬性與場景、圖層

遊戲製作流程

24-3 設定蟑螂產生與移動的程式 為了讓你能體會依所需功能不同而一層層加入 ActionScript 的過程, 我們的程式設定是依遊戲所需機制來一一加入的, 而不是依設置位置一次解說完畢, 請特別注意! 首先從最重要的遊戲場景開始著手。我們要在此場景的 Actions 圖層的第1 格影格中設定蟑螂產生的 ActionScript, 以及在舞台中被打蟑螂元件之實體上設定蟑螂移動的程式。

設定蟑螂產生的程式 請點選遊戲場景 Actions 圖層影格 1 後開啟動作面板, 我們要使用 function 指令 (在類型類別下) 加入一個自訂函數, 這個函數等於是一個「蟑螂產生器」, 每執行一次就會產生 1 隻蟑螂;另外再配合使用 setInterval 指令 (全域函數 / 其他各種函數類別下) , 讓「蟑螂產生器」自動在每 0.5 秒就執行一次。以下是此階段所要設置的所有程式碼:

設定蟑螂產生的程式

設定蟑螂產生的程式

設定蟑螂產生的程式 首先我們要宣告一個變數, 代表蟑螂的數量。請雙按陳述式/變數類別下的var, 然後在變數欄中輸入變數名稱及初始值:"amount=0"。

設定蟑螂產生的程式

設定蟑螂產生的程式 接著再次雙按陳述式/變數類別下的var, 在變數欄中輸入 roachShow, 用來儲存定時執行的 setRoach( ) 函數 (待會兒會定義)。

設定蟑螂產生的程式

設定蟑螂產生的程式 自訂一個函數用來產生蟑螂。請雙按陳述式/使用者定義的函數類別下的function, 然後在名稱欄中輸入 setRoach。

設定蟑螂產生的程式

設定蟑螂產生的程式 在 setRoach 函數中加入一行程式碼, 讓 amount 變數在每執行過一次 setRoach 後就加上 1。請雙按運算子/指定類別下的 =, 然後在運算式欄位中輸入 amount=amount+1。

設定蟑螂產生的程式

設定蟑螂產生的程式 接著要在 setRoach 函數中加入一個 if 判斷式, 判斷當 amount 的數量大於 100 時, 要執行的工作。請雙按陳述式/判斷條件/迴圈類別下的 if, 在判斷條件欄中輸入 amount>100。

設定蟑螂產生的程式

設定蟑螂產生的程式 繼續加入全域函數/其他各種函數類別下的 clearInterval 動作, 然後在間隔 ID 欄中輸入:roachShow, 表示若 amount 變數大於 100 (表示蟑螂產生 100 隻以上), 就清除 roachShow 變數中的 setInterval 動作 (稍後會加入此動作), 也就是不再產生蟑螂。

設定蟑螂產生的程式

設定蟑螂產生的程式 接著請雙按陳述式/判斷條件/迴圈類別下的 else, 設定 amount 沒有大於100 時要執行的動作。請雙按全域函數/ 影片片段控制類別下的 duplicateMovieClip, 複製 roach 的影片片段實體。

設定蟑螂產生的程式

設定蟑螂產生的程式 決定複製出來的蟑螂要出現在何處 (設定 x 與 y 軸的座標)。請雙按全域函數/影片片段控制類別下的 setProperty 指令:

設定蟑螂產生的程式

設定蟑螂產生的程式

random( ) 函數 random( ) 函數可以隨機方式取出一整數值, 例如寫成「random(10);」, 就表示從 0〜10 中隨機取一整數。雖然 Flash 不建議使用此指令, 不過由於不影響執行結果, 而且比標準的 Math.random( ) 簡單好用, 所以我們還是採用此指令。

設定蟑螂產生的程式 加入 function 動作只是自訂函數, 不代表這個函數會被執行。所以接下來我們要加入 setInterval 動作, 規定要每隔多久 (以千分之一秒為單位) 執行一次函數。進一步把這個 setInterval 動作存到前面宣告的 roachShow 變數中, 這樣之前的 clearInterval 動作才有作用, 請在 function 函數外加入這行程式碼:

設定蟑螂產生的程式

設定蟑螂產生的程式 由於此遊戲前後都有場景, 所以我們要下一個 stop 指令, 讓動畫暫時停在第 1 格影格。請在程式碼的最後雙按全域函數/時間軸控制項類別下的 stop。

設定蟑螂產生的程式

設定蟑螂移動與離開畫面就消失的程式 接下來這一階段的程式要設在舞台中的蟑螂 (被打蟑螂元件之實體, 已命名為 roach) 上, 這是因為所有的蟑螂都是複製自此蟑螂, 所以若將程式設在此蟑螂上, 則所有複製出來的蟑螂都會擁有同樣的程式, 也能自動依程式內容動作喔!以下是此階段需要設置的所有程式碼:

設定蟑螂移動與離開畫面就消失的程式

設定蟑螂移動與離開畫面就消失的程式 請開啟練習檔 24-learnl.fla, 點選舞台中的蟑螂 (roach 實體), 開啟動作面板如下操作:

設定蟑螂移動與離開畫面就消失的程式

設定蟑螂移動與離開畫面就消失的程式

24-4 判斷蟑螂被打中及蟑螂被打死而消失的程式 前面我們設定過一個判斷式, 讓蟑螂在跑出畫面後 (也就是當其 Y 軸位置小於或等於 –24 時) 就自動刪除自己。這是蟑螂消失的其一狀況, 另一個狀況是蟑螂被打中後, 不僅要播放出被打到的死狀 (在被打蟑螂元件中 killed 影格標籤處可以看到), 還要移除該蟑螂才行。

判斷蟑螂被打中及蟑螂被打死而消失的程式 因此本節要做的, 就是撰寫「判斷蟑螂有沒有被打中」 , 以及「被打中後, 播放出死狀後消失」的程式。

判斷蟑螂被打中的程式 關於 hitTest 指令 撰寫判斷蟑螂被打中與否的程式

關於 hitTest 指令 「判斷蟑螂是否被打中」 的程式需要應用到一個重要的指令-hitTest。這個指令在製作 Flash 遊戲時經常使用, 它有兩種寫法, 一種可以判斷兩個實體有沒有重疊;另一種比較精確, 可以判斷一個實體與一個座標點是否有重疊, 而且可選用兩種精確度不同的判定方式。若有重疊就會傳回布林值 true , 若否則傳回 false, 因此許多常見的遊戲如打地鼠、射擊遊戲都可以利用 hitTest。

關於 hitTest 指令

關於 hitTest 指令

關於 hitTest 指令

撰寫判斷蟑螂被打中與否的程式 被打中與否的 ActionScript 也要設在舞台中的蟑螂-roach 實體上, 這樣每隻複製出來的蟑螂就都能自行判斷自己是不是被打中了。以下就是此階段需要設置的所有程式碼:

撰寫判斷蟑螂被打中與否的程式

撰寫判斷蟑螂被打中與否的程式 點選舞台中的 roach 實體, 然後開啟動作面板。首先要宣告一個變數來記錄 hitTest 指令傳回來的布林值, 再用 hitTest 指令判斷自己本身是否被滑鼠指標的座標點給按到了:

撰寫判斷蟑螂被打中與否的程式

撰寫判斷蟑螂被打中與否的程式 由於蟑螂被打中與否的布林值已經存入 hitRoach 變數中, 所以接下來我們只需使用 if 判斷式來判斷 hitRoach 的值, 然後決定如何動作即可:

撰寫判斷蟑螂被打中與否的程式

蟑螂被打死而消失的程式 到此為止, 蟑螂已經能判別自己是否被打中, 而且在打中後能主動播放出死狀了。不過顯示出死狀還不夠, 它得在死後消失掉才行, 因此我們要到被打蟑螂元件中, 加入 ActionScript 來讓蟑螂死後自動消失。以下是此階段所要加入的程式:

蟑螂被打死而消失的程式 請進入被打蟑螂元件的編輯狀態中, 我們來加入本階段的 ActionScript:

蟑螂被打死而消失的程式

蟑螂被打死而消失的程式

蟑螂被打死而消失的程式 現在遊戲的基本機制都完成了, 你可以回到遊戲場景, 執行『控制/測試場景』命令試試看, 已經可以用拖鞋開始海扁蟑螂, 而蟑螂被打中後也會死掉並消失囉!

24-5 設定記分與判斷遊戲結束的程式 既然是遊戲, 就得記分, 也得有個結束, 不然打蟑螂打得滿頭大汗卻不知道成績如何, 或是蟑螂跑得沒完沒了, 可是會讓玩家失去耐性的!本節要加入的就是記分的程式, 以及判斷遊戲結束的程式。

設定記分的程式 記分的程式很簡單, 我們只要在遊戲一開始時多宣告一個用來儲存分數的變數, 然後在每隻蟑螂被打死時都讓它的值加 1, 就可以知道玩家打死多少隻蟑螂了! 由於這個階段的程式很簡單, 以下我們就不將程式碼列出, 直接說明加入的步驟。

設定記分的程式 請回到遊戲場景, 點選 Actions 圖層的第 1 格影格後開啟動作面板。我們先前在此加入很多 ActionScript 了, 現在要再補充一些, 首先宣告 3 個變數:

設定記分的程式

設定記分的程式 接著要在 roach 實體 (即舞台中的蟑螂) 上設定加分的程式。因為判斷蟑螂被打中與否的程式在此, 因此只要在蟑螂被打中時替玩家加分即可。請點選 roach 實體後開啟動作面板:

設定記分的程式

設定判斷遊戲結束的程式 我們剛剛已經多宣告了 1 個 finish 變數, 所以接下來就可以利用這個變數來計算蟑螂消失的數量, 一旦蟑螂消失的數量達到 100 隻, 遊戲就可以結束了(因為我們一開始就限制產生的蟑螂只會有 100 隻)。當然, 必須把「因被打中而消失」和「因跑離畫面而消失」的蟑螂都算進去。為了達到這個目的, 利用取消載入這個影片片段事件是最合適不過的了。

設定判斷遊戲結束的程式 因為不論此蟑螂是被打中而移除, 還是跑出畫面而移除, 都屬於取消載入的事件, 這個事件會在指定的影片片段實體被移除後產生。也就是說, 假設一影片片段實體在影格 1 被移除, 則在播放到影格 2 時, 就會啟動取消載入事件。 同樣地, 由於這個階段的程式很簡單, 故我們就直接說明加入的步驟。

設定判斷遊戲結束的程式 由於要利用蟑螂被取消載入的事件, 所以 ActionScript 要設在 roach 實體上, 故請點選 roach 實體後開啟動作面板 ,我們先設定計算蟑螂消失數量的程式:

設定判斷遊戲結束的程式

設定判斷遊戲結束的程式 接著重新點選遊戲場景中 Actions 圖層第 1 格影格, 這裡需要再加入判斷 finish (亦即蟑螂消失數量) 是否達到 100, 以決定遊戲是否結束的程式:

設定判斷遊戲結束的程式

設定判斷遊戲結束的程式 遊戲場景的設定到此完成, 遊戲基本上已經可以玩了, 你可以在遊戲場景執行『控制/測試場景』命令, 搶先試玩看看!

24-6 設定開始與結束場景中的 程式 最後我們要替這個遊戲收個尾, 幫它把開始的等待畫面跟結束畫面處理一下。

設定開始場景 請切換到開始場景, 我們一開始就計畫要在此場景先播放一段開場動畫後, 等待玩家按鈕, 等玩家按下開始遊戲鈕後才進入遊戲場景, 而開場動畫元件之實體我們已經在練習檔中放置好了:

設定開始場景

設定開始場景 請雙按開場動畫元件 (就是舞台中的蟑螂實體) 進入編輯狀態, 為開始遊戲鈕加上 ActionScript:

設定開始場景

設定開始場景 須注意的是此處我們是在元件實體中設置 ActionScript 來控制上一層的時間軸主動畫, 所以必須使用 ActionScript 2.0 類別/影片/MovieClip/方法類別下的 gotoAndStop 語法。

設定結束場景 接下來是整個遊戲製作的最後階段-設定結束場景。在結束場景中必須顯示分數、評語和再玩一次鈕, 所以我們必須分別在結束場景中 Actions 圖層之第 1 格影格裡, 和再玩一次鈕上分別設置 ActionScript。其中又以前者的程式較複雜, 以下是該影格完整的 ActionScript:

設定結束場景

設定結束場景 以下我們就開始一步步完成結束場景中的程式設定。 首先要在結束場景中讓滑鼠指標重新顯現, 並移除小拖鞋自製滑鼠指標。請點選結束場景中 Actions 圖層之第 1 格影格, 然後開啟動作面板:

設定結束場景

設定結束場景 接著在同樣的位置繼續加入 ActionScript, 這次要加入依分數多寡來顯示不同評語的程式:

設定結束場景

設定結束場景 剩下最後一個程式設定, 就是在結束場景中, 再玩一次鈕圖層中點選再玩一次按鈕元件之實體, 然後設定如下 ActionScript , 讓玩家按下此鈕後可以跳到開始場景即可。

設定結束場景

設定結束場景 打蟑螂遊戲就這樣完成了!你可以匯出 Flash 影片檔, 享受完整的遊戲囉!