填色游戲?qū)嶒?yàn)報(bào)告

1、信息技術(shù)學(xué)院Flash演示媒體動(dòng)畫設(shè)計(jì)性實(shí)驗(yàn)報(bào)告專 業(yè)：13 級(jí)計(jì)算機(jī)科學(xué)與技術(shù)班 級(jí)：姓 名：學(xué) 號(hào)：設(shè)計(jì)題目：填色游戲指導(dǎo)教師：2014 年05月17日信息技術(shù)學(xué)院Flash演示媒體動(dòng)畫設(shè)計(jì)性實(shí)驗(yàn)報(bào)告Flash CS6填色游戲設(shè)計(jì)一、作品設(shè)計(jì)的目的意義Adobe Flash CS6是用于創(chuàng)建動(dòng)畫和多媒體內(nèi)容的強(qiáng)大的創(chuàng)作平臺(tái)。AdobeFlash CS6設(shè)計(jì)身臨其境，而且在臺(tái)式計(jì)算機(jī)和平板電腦、智能手機(jī)和電視等多 種設(shè)備中都能呈現(xiàn)一致效果的互動(dòng)體驗(yàn)。新版Flash Professio nal Cs6 附帶了可生成sprite 表單和訪問專用設(shè)備的本地?cái)U(kuò)展?？梢枣i定最新的Adobe Flash

2、Player和AIR 運(yùn)行時(shí)以及 An droid 和iOS 設(shè)備平臺(tái)。二、作品分析1 設(shè)計(jì)目的、設(shè)計(jì)內(nèi)容分析目的：通過本游戲的制作，可以了解如何用程序控制影片剪輯的顏色，怎 樣隱藏和顯示鼠標(biāo)。內(nèi)容：本文檔講解了“填色游戲”的制作過程，玩家通過控制吸管單擊顏 色按鈕，吸取所點(diǎn)擊的顏色，然后再用吸管單擊圖片中某一區(qū)域， 此區(qū)域就會(huì)填 充相應(yīng)的顏色。如果感覺選取的顏色不合適，可以單擊“清除”按鈕，清除圖片 的顏色。2 開發(fā)工具：本次多媒體的制作運(yùn)用Flash CS6軟件。三、作品功能模塊結(jié)構(gòu)設(shè)計(jì)介紹多媒體作品的總體結(jié)構(gòu)及功能：此填色游戲主要由個(gè)模塊構(gòu)成。四、作品設(shè)計(jì)與實(shí)現(xiàn)1. 素材準(zhǔn)備1.1聲音素

3、材在這個(gè)游戲中只用到了 4個(gè)音效，分別是“上一張”和“下一張”兩個(gè) 按鈕上的翻頁(yè)音效“聲音1”和“聲音2”、吸管吸取顏料時(shí)的音效“聲音3”、 “清除”按鈕上的清除音效“聲音 4”。1.2元件素材1）用到了兩個(gè)圖形元件，分別是背景圖形元件和顯示區(qū)圖形元件。按 Ctrl+F8組合鍵新建“背景”圖形元件，作為游戲的整體背景。新建“顯示區(qū)”圖形元件，用來放置需要填色的影片剪輯。2）制作一個(gè)Play按鈕，作為游戲的開始按鈕。按 Ctrl+F8組合鍵新建 按鈕，然后在“彈起”幀繪制一個(gè)“ Play ”字樣的圖形。同時(shí)在“指針經(jīng)過” 幀和：按下“幀”加入聲音“聲音 T和“聲音2”。3）制作一個(gè)翻頁(yè)按鈕，用于

4、主時(shí)間軸的控制。在“指針經(jīng)過”幀和“按 下”幀加入聲音“聲音1”和“聲音2”，然后用同樣的方法制作“上一張” 按鈕。4）制作清除按鈕，用于清除圖片上添加的顏色。在“按下”幀加入聲音“聲音4”。5） 制作一個(gè)顏色按鈕，用于選取顏色。在“按下”幀加入聲音“聲音3”， 然后用同樣的方法制作其他9個(gè)顏色按鈕。6）按Ctrl+F8組合鍵新建“ boy”影片剪輯。把圖層名稱改為“底”， 然后繪制一個(gè)大一點(diǎn)的白色圓形，分成均勻的 4份并轉(zhuǎn)換影片剪輯。再新增 一個(gè)圖層，命名為“輪廓”，在這個(gè)涂層上繪制一個(gè)小男孩的輪廓。在“底” 層上新增多層，在每層上分別繪制小男孩的頭發(fā)、衣服、鞋等，并轉(zhuǎn)換為影 片剪輯，用同樣

5、的方法制作“ girl ”和“ ma6兩個(gè)影片剪輯。7）新建“吸管”影片剪輯，在第 1幀制作一個(gè)吸管吸取的“顏料”影片剪輯。在第4幀插入關(guān)鍵幀，把“顏料”影片剪輯縮小一點(diǎn)，并在第 1幀 與第4幀之間創(chuàng)建補(bǔ)間動(dòng)畫。新增圖層 2,在這層上制作一個(gè)吸管，在第 2 幀插入關(guān)鍵幀，把吸管縮小一點(diǎn)。新建圖層3,選擇圖層層3的第1幀，打開其動(dòng)作面板添加“ stop（）; ”語句。選擇第4幀插入關(guān)鍵幀，在動(dòng)作面板 上添加以下代碼：gotoA ndStop（1）;8）新建“小圖標(biāo)1”影片剪輯，在第1幀繪制一個(gè)boy圖像。為了美觀，在boy圖像下面添加一個(gè)北京。同樣制作“小圖標(biāo)2”和“小圖標(biāo)3”。9) 新建“ s

6、ou nd”影片剪輯，在第一幀繪制一個(gè)小矩形， 打開動(dòng)作面板, 添加“ stop(); ”語句。在第2幀添加“聲音3”，并且在第3幀插入插入若 干幀直到波形全部顯示。10) 新建“控制吸管”影片剪輯，在第1幀繪制一個(gè)小矩形，用來添加 程序控制吸管。2. 顏色控制1) 新建Flash文檔，舞臺(tái)大小設(shè)置為550*400像素，顏色設(shè)置為灰色， 幀頻默認(rèn)，保存文檔為“顏色控制”。2) 將素材準(zhǔn)備中的boy影片剪輯和兩個(gè)顏色按鈕拖入舞臺(tái)。設(shè)置boy 影片剪輯的實(shí)例名稱為“ boy”。3) 選中第1幀打開動(dòng)作面板添加“ var sezhi; ”語句，定義色值變量。 選中黃顏色的按鈕打開動(dòng)作面板，添加如下代

7、碼：on( release)_root.sezhi = 16765734;選中藍(lán)顏色的按鈕打開動(dòng)作面板，添加如下代碼：on( release)_root.sezhi = 3368703;4) 打開boy實(shí)例，設(shè)置他的“發(fā)”影片剪輯的實(shí)力名稱為“a1”，以此類推，設(shè)置boy實(shí)例中其他影片剪輯的實(shí)力名稱為“a2”、“a3”。選中a1打開動(dòng)作面板，添加如下代碼：on( release)_root.boy.a1color = new Color(_root.boy.a1);新建作用于影片剪輯a1的顏色對(duì)象 _root.boy.a1color.setRGB(_root.sezhi);設(shè)置影片剪輯a1的顏

8、色5）將步驟（4）中al中的代碼分別復(fù)制到其他的a2、a3實(shí)例中。需 要注意的是，將語句中的顏色對(duì)象改為與他對(duì)應(yīng)的實(shí)例名稱相對(duì)應(yīng)。6）測(cè)試影片。3. 游戲?qū)崿F(xiàn)1）新建Flash文檔，舞臺(tái)大小設(shè)置為550*400像素，顏色默認(rèn)，幀頻設(shè) 置為30幀/秒，保存文檔名為“丁曉薇的填色游戲”。2）文檔的整個(gè)時(shí)間軸如圖：時(shí)同韜 Wl d_動(dòng)畫扁看鐸 ft 15 ID IfI 卩 N I * 1 |i 可標(biāo)菱口atifctJ* * a oO 口 匚匸IQ c ! Co亡r t吸宜* * p 囹* * nOiIOI殆區(qū)丿口l.!顯帀區(qū)口orrw杲口3）為了方便舞臺(tái)時(shí)間軸幀的跳轉(zhuǎn)，在“標(biāo)簽”圖層的第2幀、第4幀

9、、第6幀分別添加tu1、tu2、tu3幀標(biāo)簽。4）選擇“背景”圖層的第1幀，從素材中將“背景”圖形元件拖入舞臺(tái), 然后在舞臺(tái)上添加游戲的名稱。選擇“按鈕”圖層的第 1幀，從素材中將按鈕 剪輯拖入舞臺(tái)。選擇“圖”圖層的第 1幀，從素材中將3個(gè)小圖標(biāo)拖入舞臺(tái)， 并將它們排列整齊。5）選中Play按鈕打開其動(dòng)作面板，添加如下代碼：on( release)play();選擇“小圖標(biāo)1”，在其動(dòng)作面板上添加如下代碼:on ClipEve nt (e nterFrame) 反復(fù)執(zhí)行下面的語句this. on RollOver = fun cti on() 鼠標(biāo)指針移至該影片剪輯上時(shí)this.o nEn t

10、erFrame = function。/反復(fù)執(zhí)行下面的語句if (this._xscale80) 如果這個(gè)影片剪輯的橫縮放比例小于80this._xscale = this._yscale -= 5;/則橫縱縮放比例遞減;this. on Release = function。單擊該影片剪輯時(shí)_root.gotoA ndPlay(tu1);跳轉(zhuǎn)到tu1幀，并且播放;這些代碼實(shí)現(xiàn)的效果是鼠標(biāo)移動(dòng)到小圖標(biāo)上，小圖標(biāo)逐漸增大，而鼠標(biāo) 移開時(shí)，小圖標(biāo)又恢復(fù)到原來的狀態(tài)。單擊小圖標(biāo)會(huì)調(diào)轉(zhuǎn)到相應(yīng)的幀播放。6) 將步驟(5)中在“小圖標(biāo)1”上添加的代碼分別復(fù)制到其他兩個(gè)小 圖標(biāo)的動(dòng)作面板上，需要注意的是，他

11、們跳轉(zhuǎn)的幀分別為“tu2 ”和“tu3 ”。7) 選擇“顯示區(qū)”層的第 2幀，從素材中將“顯示區(qū)”圖形元件拖入 舞臺(tái)的左側(cè)。選擇“按鈕”層的第 2幀，從素材中將10個(gè)顏色按鈕、兩個(gè) 翻頁(yè)按鈕、一個(gè)清除按鈕和一個(gè)返回按鈕拖入舞臺(tái)，放到適當(dāng)位置。8) 選擇白顏色按鈕，在其動(dòng)作面板上添加如下代碼：on (press) _root.sezhi = 16777215;賦予變量sezhi的值為16777215on (press, release) myColor = new Color(_root.xigua n.yan liao);新建作用于吸管里顏料的顏色對(duì)象myColor.setRGB(_root.

12、sezhi);設(shè)置影片剪輯yanliao的顏色將這些語句復(fù)制到其他9個(gè)顏色按鈕的動(dòng)作面板上，需要注意的是，給 變量_root.sezhi賦的值要與按鈕顏色的色值相對(duì)應(yīng)。9) 選擇“下一張”按鈕，在其動(dòng)作面板上添加如下代碼：on (rollOver) 鼠標(biāo)指針移至該按鈕上時(shí)Mouse.show();鼠標(biāo)顯示setProperty(_root.xigua n, _alpha, 0);實(shí)例xiguan ”的透明度為0on (rollOut) 鼠標(biāo)指針移開該按鈕上時(shí)Mouse.hide();鼠標(biāo)隱藏startDrag(_root.xigua n, true);實(shí)例xiguan ”隨鼠標(biāo)setPrope

13、rty(_root.xiguan, _alpha, 100);實(shí)例xiguan ”的透明度為100on (release) _root.gotoA ndPlay(tu2);10) 選擇“清除”按鈕，在其動(dòng)作面板上添加如下代碼：on (rollOver) Mouse.show();setProperty(_root.xigua n, _alpha, 0);on (rollOut) Mouse.hide();startDrag(_root.xigua n, true);setProperty(_root.xiguan, _alpha, 100);on (release) _root.gotoA n

14、dPlay(tu1);11) 選擇“返回”按鈕，在其動(dòng)作面板上添加如下代碼：on (release) _root.gotoA ndPlay(1);12) 選擇“圖”圖層的第3幀，從素材中將boy影片剪輯拖入舞臺(tái)的左 側(cè)，實(shí)例名稱命名為“ boy”。打開boy實(shí)例，設(shè)置它的“發(fā)”影片剪輯的實(shí) 例名稱為“ a1”，以此類推，設(shè)置boy實(shí)例中其他剪輯的實(shí)例名稱為“ a2”、“a3”。選中a1打開動(dòng)作面板，添加如下代碼：on (release) _root.boy.a1color = new Color(_root.boy.a1);_root.boy.a1color.setRGB(_root.sezh

15、i);_root.so un d.play();a1中的代碼分別復(fù)制到其他的a2、a3實(shí)例中。需要注意的是，要將語句中的顏色對(duì)象改為與他們各自的實(shí)例名稱分別對(duì)應(yīng)。13) 選擇“吸管”層第2幀，從素材中將“吸管“影片剪輯拖入舞臺(tái)實(shí) 例名稱命名為“ xiguan ”。14) 選擇“顯示區(qū)”層的第2幀，從素材中將“控制吸管”和sou nd兩 個(gè)影片剪輯拖入到場(chǎng)景中但不要放到舞臺(tái)上，sou nd影片剪輯實(shí)例名稱命名 為“ sou nd”。選擇影片剪輯“控制吸管”的的實(shí)例，在其動(dòng)作面板上添加如下代碼：on ClipEve nt(mouseDow n)當(dāng)鼠標(biāo)按下時(shí)_root.xigua n. gotoA ndPlay(2);實(shí)例xiguan ”跳轉(zhuǎn)到第2幀，并開始播放15) 選擇“程序”圖層的第1幀，在其動(dòng)作面板上添加“stop();varsezhi; ” 語句。選擇第2幀，在其動(dòng)作面板上添加“ stop(); ”語句。16) 在第4幀到第7幀制作其他兩張圖的填色游戲，制作過程與第一張 圖的制作過程相同，就不再介紹。17) 測(cè)試影片。效果如圖：五、總結(jié)通過這次試驗(yàn)使我更加熟練地掌握了對(duì) Flash的操作和使用。剛開始時(shí)使用 還不是很熟練，然后通過咨詢老師和同學(xué)以及參考書，慢慢摸索，逐漸完成了整個(gè)制作。首頁(yè)面