- 相關推薦
怎么用flash制作簡單拼圖游戲
可能有很多玩Flash的朋友都曾和我一樣想自己動手制作一個拼圖游戲，但是苦于不知道實現的方法或不了解ActionScript(以下簡稱AS)而心存遺憾。別急,今天小編就告訴你如何利用Flash常用的AS制作一個簡單的拼圖游戲，小編所說的簡單可不是將圖片簡單的拼湊到一起的那種簡單拼圖啊。
做好的成品如下：大家可以用鼠標將上面的圖像碎片拖到下面的方框內的合適位置，為方便大家找位，游戲給出了有一定透明度的原圖作為參考。大家可以發現這個游戲還設計了一個“吸附”功能，能夠讓你將拼圖片輕松地整齊排列，同時游戲還會自動判斷拼圖是否全部正確完成。
第一步:圖片的準備工作
既然是拼圖,當然首先就要有圖片了,我找到的是一幅320*240象素的jpg圖片,通過Fireworks將其切割成12塊(每塊80*80px),然后分別保存成12個jpg小圖片備用，名稱最好有一定規律，比如我將他們分別命名為pic1～pic12，當然你也可以利用其他圖象處理工具來實現這一步。
第二步:建立Flash文件
打開今天的主角――Flash,通過菜單Modify Document...或Ctrl+J打開Document Properties面板(由于盜匪使用的是Flash MX,一些快捷鍵可能與Flash 5的有所不同,不過盜匪會盡量給出Flash 5中相應的快捷鍵的,這個在Flash 5中的快捷鍵是Ctrl+M),將畫面大小改為400*600px,其他可以保持默認值。
第三步:制作用來判斷位置的Movie Clip
在場景中通過菜單File Import或Ctrl+R導入12塊已經處理好的小圖片,然后按照原圖順序擺放在場景的下半部,選中左上角第一塊,選擇菜單Insert Convert to Symbol或按F8鍵,在彈出的Convert to symbol面板中選擇Movie Clip(以后簡稱MC),控制點選擇在圖片中心(這一點很重要,Flash 5中可能沒有這個選項,不過好在Flash 5的默認值就是中心),name為check1(也可以根據自己的習慣取名),其余的圖片用同樣的方法處理。
然后選擇菜單Window Properties或Ctrl+F3,打開Properties面板,按順序為這些圖片分別填寫Instance Name為b1～b12,以便以后在Action中調用.選中所有MC(Ctrl+A),將他們的Alpha屬性設置為30%,這樣做只是為了使MC看上去模糊,讓玩家不能清楚地辨認出是哪部分,以增大游戲難度。
第四步:制作用來拖拽的MC
這是比較重要的一步,我們將利用這個MC來實現圖塊的拖拽以及位置的判斷,在這里我們運用了MC中嵌套Button的方法以實現代碼重用,這是個很重要的方法,希望大家加以重視.
選擇菜單Insert New Symbol...或Ctrl+F8新建Button(以下簡稱BT),取名為button_body,確定后進入編輯界面,在Timeline(時間線)中右鍵單擊Hit幀,在快捷菜單中選擇New Keyframe建立關鍵幀 ,選擇矩形工具(R),繪制一個矩形,選擇選取工具 (V),雙擊矩形,在Properties面板中將寬、高、X坐標、Y坐標分別設置為80、80、0、0;新建MC 取名button_action,確定后進入MC編輯窗口,Ctrl+L打開Library(庫),將剛剛建立的button_body拖進來,同樣將X、Y坐標設置為(0,0).
下面開始為BT(按鈕)添加AS,選中剛才拖進來的button_body,通過菜單Window Actions或F9鍵(Flash 5中為Ctrl+Alt+A)打開Actions面板,利用快捷鍵Ctrl+Shift+E(Flash 5 中為Ctrl+E,前提是選中了Actions面板)轉換到Expert Mode(專家模式,這個模式下編寫AS比較靈活,建議使用),填入下面的代碼:
on (press) {//按下鼠標 startDrag(_parent, false, 50, 50, 350, 550);//使圖塊可以在一定范圍內被拖拽 } on (release) {//釋放鼠標 stopDrag();//停止拖拽 for (i=1; i<=12; i++) {//判斷圖塊所在位置 if (_parent._x<=eval_r("_root.b"+i)._x+40 and _parent._x>=eval_r("_root.b"+i)._x-40 and _parent._y<=eval_r("_root.b"+i)._y+40 and _parent._y>=eval_r("_root.b"+i)._y-40) { //如果被拖拽的圖塊中心點進入某個判斷位置的MC的范圍內時 _parent._x = eval_r("_root.b"+i)._x;//設置圖塊的坐標,使其吸附到相應的位置 _parent._y = eval_r("_root.b"+i)._y; } } }
這樣,拖拽組件button_action就制作好了,在下面的制作中將重復用到這個MC.
第五步:制作被拖拽的圖塊
新建MC,命名為pic1(這個名稱無關緊要),確定后進入編輯窗口,在Library中將button_action拖入,設置坐標為(0,0),再從Library中將最初導入的圖片pic1.jpg拖入,坐標(0,0),重復這個步驟,直到所有圖塊都擁有自己相應的MC.
順便再做一個按鈕，命名為button_back,用來在游戲完成后開始新的游戲.
第六步:游戲的完成工作
回到場景中,將TimeLine中已存在的層命名為"位置判斷層"，點擊TimeLine左下角的Insert Layer按鈕 ,新建三個層,分別命名為"圖塊層"、"AS層"和"按鈕與提示層".選擇"圖塊層",將Library中的pic1～pic12這幾個MC拖入該層。特別注意:這里是MC,而不是圖片,我們可以按住Ctrl鍵同時選擇不連續的多個Symbol。按順序在Properties面板中分別填寫Instance Name為p1～p12。
選擇"按鈕與提示層",將第二幀設為關鍵幀(如果你使用的是flash 5請選擇第四幀,并順便用F5將"圖塊層"添加兩幀內容幀),并在Properties面板(flash 5中為Frame面板)中填寫Frame Label為"over",選擇文字工具(A),在中間位置寫入勝利后的提示,如:"Good You Win !!",再拖入button_back到合適位置,并捆綁AS:
on(release){ prevFrame();//回到前一幀,開始新游戲 //Flash 5中應該是gotoAndPlay(1) }
現在進入沖刺階段,選擇"AS層",選擇第一幀,捆綁AS:
stop();//flash 5中請將這句去掉 for (i=1; i<=12; i++) {//游戲初始化 eval_r("p"+i)._x = random(240)+80;//隨即設置圖塊的位置于場景上半部的一定區域內 eval_r("p"+i)._y = random(160)+70; } _root.onEnterFrame = function() { //flash 5中請去掉這句和最后一個"}",將下面的AS捆綁到該層的第二幀,并在第三幀捆綁gotoAnfPlay(2) b = 0; for (j=1; j<=12; j++) { if (eval_r("p"+j)._x == eval_r("b"+j)._x and eval_r("p"+j)._y == eval_r("b"+j)._y) { //判斷圖塊是否在正確的位置上,如果是 b += 1;//變量加一 } } if (b == 12) {//如果所有圖塊的位置都正確 gotoAndStop("over");//顯示勝利信息 } };
至此,拼圖游戲就制作完成了,趕快Ctrl+Enter測試一下吧!
動動腦筋,還可以為游戲添上時間限制,加大游戲的難度,或者在游戲過程中用一個按鈕來隱藏/顯示測試圖片等
【怎么用flash制作簡單拼圖游戲】相關文章：
flash怎么制作動畫08-20
flash怎么給圖片制作伸縮動畫效果09-13
Flash怎么制作滾動的方塊GIF動畫09-12
制作flash課件的方法10-16
flash怎么制作一輛汽車開過的動畫07-21
flash動畫的詳細制作流程10-01
flash動畫制作的廣告優勢05-09
Flash動畫制作學習的心得08-01
flash動畫制作流程簡介10-07