Coolis® Posted April 23, 2009 Share Posted April 23, 2009 Hello, I show you how you can create This flash game! 1. Create a new movie with dimensions of 150px. X 280px. and fps = 29 with White color as Background Color 1. Select frame 1 on Layer 1 2. Create a rectangle with dimensions of 150px. X 280px. and apply 3 colors with white lines as shown in the image. The major portion of the rectangle should be of 150px. X 205.5px. 3. Choose Insert > Layer to insert a new layer above Layer 1. 4. Create an Orange rectangle with dimensions of 138px. X 190px. 5. Insert one more layer for texts like Highest and Previous Scores and with the help of Text Tool type Highest Score and Previous Score as shown in the image. 6. With the help of Text Tool type text 'Chances' as shown in the image. 7. Choose File > Import to import any small graphic as a name of the game. Here we have imported speedball.png (To import Choose File > Import) 8. Select frame 1 of all layers and choose Insert > Convert to Symbol. Convert it into a Movie Clip (Choose Insert > Convert to Symbol) with the center Registration point selected and name it as 'background1' 1. Select background1 movie clip, convert it into a Movie Clip (Choose Insert > Convert to Symbol) with the center Registration point selected and name it as 'game' 2. Rename the layer as 'Game' and delete other blank layers. 3. Double click the game movie clip to go inside it. 4. Rename the layer as 'Background 1' 5. Insert a new layer and name it as 'Highest Score' 6. Select the Text Tool and in the Properties panel make the settings as shown in the image with Center Justify option 'ON'.(If Properties panel is not opened then choose Window > Properties) Create a text field below the text 'Highest Score' 7. In Properties panel type Variable as '_root.highscore' 8. Similarly, insert a new layer for 'Previous Score' and make a separate text field with Variable name as '_root.prevscore' 9. Insert a new layer above 'Previous Score' layer and rename it as 'Click Button' 10. Using Text Tool type 'click to play' with 'Static Text' as Text type in the Properties panel. 11. Select the text and convert it into a Button (Choose Insert > Convert to Symbol) with the center Registration point selected and name it as 'click play' 12. Double click the click play button to go inside it and rename the layer as 'Click Play' 13. Select frame at 'Hit' stage and choose Insert > Frame 14. Insert a layer over Click Play layer and drag it downward so that it appears below Click Play layer 15. Select frame at 'Hit' stage and choose Insert > Keyframe 16. Draw a rectangle patch as a 'hit area' of the button 17. Come back into game movie clip. 18. Select click play button and choose Window > Actions 19. In the Actions panel type the following actions on (release) { gotoAndPlay(2); } // This action will start the game as soon as 'Click to Play' button is clicked. 1. Insert a new layer above Click Button layer and rename it as 'Life' 2. Create a gradient ball and convert it into a Graphic (Choose Insert > Convert to Symbol) with the center Registration point selected and name it as 'life ball' 3. Select the life ball graphic and convert it into a Movie Clip and name it as 'life' 4. Double click the life movie clip to go inside it and rename the layer as 'Life Ball' 5. Select frame 8 and choose Insert > Keyframe 6. Select life ball graphic at frame 8 and in the Properties panel set 'Alpha=0' 7. Choose Window > Transform and in the Transform panel, type 10 in Width or Height field keeping Constrain option 'ON' 8. Select any frame between 1 and 8 and choose Insert > Create Motion Tween 9. Insert a new layer and name it as 'Actions' 10. Select frame 8 on Actions layer and choose Insert > Keyframe 11. Select keyframe at 8 and choose Window > Actions 12. In the Actions panel type the following actions stop(); 13. Now come back into game movie clip. 14. Select the life movie clip, convert it into a movie clip and name it as 'lives' 15. Double click the lives movie clip to inside it and select the life movie clip at frame 1 16. In the Properties panel change the Symbol Behavior to 'Graphic' and set Options for graphics as 'Single Frame' 17. Choose Edit > Duplicate to make a copy of the life movie clip. Make total 5 of them and place them in a row. 18. Select frame 3 and choose Insert > Keyframe 19. At frame 3 select the fifth life graphic and in the Properties panel change the Symbol Behavior to 'Movie Clip' 20. Select frame 5 and choose Insert > Keyframe 21. At frame 5 select the fifth life movie clip and in the Properties panel change the Symbol Behavior to 'Graphic' and set 'Alpha=0' 22. On the same frame select the fourth life graphic and in the Properties panel change the Symbol Behavior to 'Movie Clip' 23. Select frame 7 and choose Insert > Keyframe 24. At frame 7 select the fourth life movie clip and in the Properties panel change the Symbol Behavior to 'Graphic' and set 'Alpha=0' 25. On the same frame select the third life graphic and in the Properties panel change the Symbol Behavior to 'Movie Clip' 26. Similarly add keyframes on frame 9 and 11. Make necessary changes for these frames as per shown in previous two cases. 27. Insert a new layer for actions and select frame 1 28. Choose Window > Actions 29. In the Actions panel type the following action. stop(); 30. Similarly add keyframes on frame 3,5,7,9,11 and assign the same action on all these frames. 31. Now come back into the game movie clip 32. Select the lives movie clip and in the Properties panel type the Instance Name as 'life' 33. Insert a new layer above Life layer and name it as 'Actions' 34. Select frame 1 and choose Window > Actions 35. In the Actions panel type the following actions Mouse.show(); stop(); 1. Choose Window > Library > background1 2. In the Library window click the Options tab to open the menu and choose Duplicate... 3. In the Duplicate Symbol type 'background2' and create a copy of background1 movie clip 4. Double click the background2 movie clip in the Library to go inside it. 5. Delete the 'speedball' graphic and change the patch color from Orange to Green. 6. Choose Window > Library > game 7. Double click the game movie clip to go inside it. 8. Select frame 2 on background 1 layer and choose Insert > Keyframe 9. At frame 2 select the background 1 movie clip. In the Properties panel with the help of Swap Symbol button, swap background 1 movie clip with background 2 movie clip 10. Select frame 2 on Previous and Highest Score layers, choose Insert > Frame 11. Select frame 2 on Click Button layer and choose Insert > Blank Keyframe 12. Select frame 2 on Life layer and choose Insert > Frame 13. Select frame 2 on Actions layer and choose Insert > Keyframe 14. Choose Window > Actions 15. In the Actions panel type the following actions _root.numx=12; _root.numy=6; _root.score=0; _root.hit=5; // numx, numy, score and hit are the variables which are initialized here at the start of the game. 16. Select frame 3 on all the layers and choose Insert > Frame 17. Insert a new layer above Background 1 layer and rename it as 'Score' 18. Select frame 3 on Score layer and choose Insert > Keyframe 19. With the help of Text Tool create a 'Dynamic' text field. In the Properties panel type Variable as '_root.score' 1. Insert a new layer above Score layer and rename it as 'Walls' 2. Select frame 3 on Walls layer, choose Insert > Keyframe and create a horizontal patch with two colors and Width = 142. The inside color should be of the same color of the background 2 movie clip's Green color and another should be Black. 3. Select these two color patches and convert it into a Movie Clip with the bottom center Registration point selected and name it as 'wall1' 4. Choose Edit > Duplicate to make another copy of wall1 5. Select the copy of wall1 and choose Modify > Transform > Rotate 90 degree CW 6. Choose Window > Info 7. In the Info panel type Height of instance as '190' and set both walls as shown in the image. 8. Duplicate the vertical wall and place it on the left side. 9. Choose Modify > Transform > Flip Horizontal 10. For the floor we want to create another movie clip. 11. Choose Window > Library > wall1 12. In the Library duplicate the wall movie clip and name it as 'wall2' 13. Select frame 3 on Walls layer and drag wall2 movie clip from the Library to the stage. 14. Choose Modify > Transform > Flip Vertical 15. Set the wall2 in such way that the walls create a complete rectangle. 16. Double click the wall2 movie clip to go inside it. 17. Insert 4 keyframes upto frame 5 18. On frame 2 and 4 change the color of the Black patch to Red. 19. Insert a new layer and at frame 1 assign the following action stop(); 20. Select frame 4 and choose Insert > Keyframe 21. Select keyframe 4 and choose Window > Actions 22. In the Actions panel type the following action: gotoAndStop(1); 23. Similarly insert a keyframe at frame 5 and assign the following action tellTarget (_parent) { gotoAndStop(5); } // this action will jump back into the game movie clip and stop at frame 5. 24. Now go back into game movie clip 1. Insert a new layer above Walls layer and rename it as 'Bat' 2. Select frame 3 and choose Insert > Keyframe 3. At frame 3 create a small Black rectangle with dimensions of 40px. X 5px. 4. Convert it into a Movie Clip with the top center Registration point selected and name it as 'bat' 5. In the Properties panel type Instance Name as 'bat' 6. Insert a new layer above Bat layer and name it as 'Ball' 7. Select frame 3 and choose Insert > Keyframe 8. At frame 3 create a small Black circle with dimensions of 7px. X 7px. 9. Convert the circle into a Movie Clip with the center Registration point selected and name it as 'ball' 10. In the Properties panel type Instance Name as 'ball' 11. Select frame 4 on all layers and choose Insert > Frame 12. Select frame 4 on the Actions layer and choose Insert > Keyframe 13. Select keyframe 4 and choose Window > Actions 14. In the Actions panel type the following action gotoAndPlay(3); // This action helps the actionscript to run continuously between frame 3 and 4. Quote Link to comment Share on other sites More sharing options...
Coolis® Posted April 23, 2009 Author Share Posted April 23, 2009 For Game Over we need to create another background. 1. Choose Insert > New Symbol 2. In the Create New Symbol type name as 'background3' and convert it into a Movie Clip. 3. Create a dual colored patch with dimensions of 150px. X 280px. and a curved white line between two colors. 4. Insert a new layer and type text as 'Highest Score' and 'Previous Score' 5. Choose Window > Library > game 6. Double click the game movie clip to go inside it. 7. Select frame 5 on Background 1 layer and choose Insert > Keyframe 8. Select background2 movie clip and in the Properties panel swap it with background3 movie clip 9. Select frame 5 on Highest and Previous Score layer 10. Choose Insert > Keyframe 11. At frame 5 shift the score text fields to bottom and place them in front of respective titles. 12. Insert a new layer above Previous Score layer and name it as 'Last Score' 13. At frame 5 insert a keyframe and create a Dynamic Text Field 14. In the Properties panel type Variable name as '_root.score' 15. On the same frame type text as 'You Scored' 16. Insert a new layer above Last Score layer and name it as 'Game Over' 17. Select frame 5 and choose Insert > Keyframe 18. With the help of Text Tool type 'GAME OVER' 19. Select the text, convert it into a Movie Clip and name it as 'game over' 20. Double click the game over movie clip to go inside it. 21. Select frame 5 and choose Insert > Blank Keyframe 22. Select frame 8 and choose Insert > Frame 23. Come back into game movie clip. 24. Insert a new layer above Game Over layer and name it as 'Play' 25. Select frame 5 and choose Insert > Keyframe 26. Create a button or import any graphic and convert it into a button. Here we have imported 'play button.png' graphic. (To import Choose File > Import) 27. Select the graphic on the stage, convert it into a Button with the top left Registration point selected and name it as 'play' 28. Double click the play button to go inside it and rename the layer as 'Play' 29. Select frame at 'Hit' stage and choose Insert > Frame 30. Insert a new layer over Play layer and drag it downward so that it appears below Play. 31. Select frame at 'Hit' stage and choose Insert > Keyframe 32. Draw a circle of same size of play button graphic as a 'hit area' of the button 33. Select frame at 'Hit' stage on Play layer and choose Insert > Blank Keyframe 34. Come back into game movie clip. 35. Select play button and choose Window > Actions 36. In the Actions panel type the following action on (release) { gotoAndStop(1); } 37. Select frame 5 on Actions layer and choose Insert > Keyframe 38. Select keyframe 5 and choose Window > Actions 39. In the Actions panel type the following actions Mouse.show(); _root.prevscore = _root.score; if (_root.prevscore>_root.highscore) { _root.highscore = _root.prevscore; } stop(); // _root.prevscore = _root.score; This action assigns the value of 'score' variable into 'prevscore' // if (_root.prevscore>_root.highscore) { _root.highscore = _root.prevscore; } This action checks whether value assigned to 'prevscore' is greater than 'highscore'. And if it is true, then the new value of 'prevscore' is assigned to 'highscore'. 1. At frame 3 of Walls layer select the top wall 2. Choose Window > Actions 3. In the Actions panel type the following actions onClipEvent (enterFrame) { if (this.hitTest(_parent.ball)) { _root.numy = 12; _root.go=1; } } // This action checks the collision of ball with the wall and assigns a new value '12' to 'numy' variable. It also assigns value '1' to a new variable 'go' which is not initialized yet. When any variable is not initialized then its default value is considered as '0' 4. Now select the wall on the right hand side 5. In the Actions panel type the following actions onClipEvent (enterFrame) { if (this.hitTest(_parent.ball)) { _root.numx = -random(10); _root.go=1; } } // This action checks the collision of ball with the wall and assigns a new value '-random(10)' to 'numx' variable. '-random(10)' generates any number from 0 to -9. 6. Select the wall on the left hand side 7. In the Actions panel type the following actions onClipEvent (enterFrame) { if (this.hitTest(_parent.ball)) { _root.numx = random(10); _root.go=1; } } // This action checks the collision of ball with the wall and assigns a new value 'random(10)' to 'numx' variable. 'random(10)' generates any number from 0 to 9. 8. Select the floor (wall2 Movie Clip) 9. In the Actions panel type the following actions onClipEvent (enterFrame) { if (this.hitTest(_parent.ball)) { _root.hit--; _root.go=2; _parent.life.play(); _root.numy = -12; gotoAndPlay(2); } if (_root.hit == 0) { gotoAndStop(5); } } // _root.hit--; Everytime when ball hits the floor, this action reduces the value of variable 'hit' by 1. // _root.go=2; This action assigns value '2' to variable 'go' // _parent.life.play(); This action targets the life movie clip and starts playing it. // _root.numy = -12; This action assigns a new value '-12' to variable 'numy' // if (_root.hit == 0) { gotoAndStop(5); } } This action checks whether the value of variable 'hit' is exactly '0' then the actionscript will stop at frame 5. 10. At frame 3 of Bat layer select the bat movie clip. 11. In the Actions panel type the following actions onClipEvent (load) { startDrag("", true, -46, 120, 46, 120); Mouse.hide(); } onClipEvent (enterFrame) { if (this.hitTest(_parent.ball) && _root.go == 1) { _root.numy = -12; _root.score++; } } // onClipEvent (load) { startDrag("", true, -46, 120, 46, 120); Mouse.hide(); } This action helps the bat movie clip to drag in a specific area with the help of mouse. At the same time it hides the mouse. // if (this.hitTest(_parent.ball) && _root.go == 1) This action checks two conditions at a time. It checks whether ball hits bat and the value of variable 'go' is exactly '1' // _root.numy = -12; This action assigns a new value '-12' to variable 'numy' // _root.score++; Everytime when ball hits bat, this action increments the value of variable 'score' by '1' 12. At frame 3 of Ball layer select the ball movie clip. 13. In the Actions panel type the following actions onClipEvent (enterFrame) { setProperty(this, _x, getProperty(this,_x)+ _root.numx); setProperty(this, _y, getProperty(this,_y)+ _root.numy); } // setProperty(this, _x, getProperty(this,_x)+ _root.numx); This action determines the x position of ball. // setProperty(this, _y, getProperty(this,_y)+ _root.numy); This action determines the y position of ball. Both these actions determines the movement of the ball. 14. Select the wall2 movie clip (floor) and shift it slightly down so that it creates some space between the bat and itself. Now come back into Scene 1 and on a new layer create an outline to the game. Note: After finishing upto here you can place the ball anywhere in the game. When the game will start the ball will start falling from that point. Choose Control > Test Movie and see how the game works. If you wish to increase the speed of the game, change the frame rate (fps) of the flash movie (Choose Modify > Document). Make it 35 or 40. It will increase the speed of the ball and the game will become more difficult to play. Ok what't it... Credits: To layoutgalaxy and me :) Quote Link to comment Share on other sites More sharing options...
RєVєnGeR^ Posted April 23, 2009 Share Posted April 23, 2009 AWESOME .. Respect that is so cool!!!! Quote Link to comment Share on other sites More sharing options...
MaestroLuke Posted April 23, 2009 Share Posted April 23, 2009 it rock's good job buddy last days u make crazy guides Quote Link to comment Share on other sites More sharing options...
Fя0zenInside™ Posted April 23, 2009 Share Posted April 23, 2009 RESPECTwhat else can i say? very detailed guide i think that it cant be more detailed guide from this thx for the share dude.... Quote Link to comment Share on other sites More sharing options...
ZeRo* Posted April 23, 2009 Share Posted April 23, 2009 Amazing guide!!!! I think you deserve karma for this ;D Keep up! Quote Link to comment Share on other sites More sharing options...
Emrys Posted April 23, 2009 Share Posted April 23, 2009 Great job!!!! Keep Up!!!!! Its very difficult... Quote Link to comment Share on other sites More sharing options...
Jigsaw* Posted April 23, 2009 Share Posted April 23, 2009 nC share man....it takes a lot of time ...one day i will test it.. :) Quote Link to comment Share on other sites More sharing options...
Morian Posted April 24, 2009 Share Posted April 24, 2009 Is Awesome! I suggest sticky! Realy it's very good! Keep up m8! Quote Link to comment Share on other sites More sharing options...
CalyXTen Posted April 25, 2009 Share Posted April 25, 2009 its rock, thanks for share i try Quote Link to comment Share on other sites More sharing options...
Coolis® Posted April 25, 2009 Author Share Posted April 25, 2009 nC share man....it takes a lot of time ...one day i will test it.. :) No ;D In my first time i create it for 1 hour ;D Quote Link to comment Share on other sites More sharing options...
Enable^^ Posted April 28, 2009 Share Posted April 28, 2009 ITS crunk maaan senk wooooowwww Quote Link to comment Share on other sites More sharing options...
Intrepid Posted April 28, 2009 Share Posted April 28, 2009 Really impressive guide :D i give you +1karma for that :P Quote Link to comment Share on other sites More sharing options...
Awaken Posted April 28, 2009 Share Posted April 28, 2009 Omg nice and hard guide :) meaby im make some game , thaanks nice very nice:) Quote Link to comment Share on other sites More sharing options...
Coolis® Posted April 28, 2009 Author Share Posted April 28, 2009 Really impressive guide :D i give you +1karma for that :P Thx =) Omg nice and hard guide :) meaby im make some game , thaanks nice very nice:) good luck with your game =) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.