[Guide]How to create your flash game!

[Coolis®]

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.

[Coolis®]

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 :)

[RєVєnGeR^]

AWESOME .. Respect that is so cool!!!!

[MaestroLuke]

it rock's good job buddy last days u make crazy guides

[Fя0zenInside™]

RESPECTwhat else can i say? very detailed guide i think that it cant be more detailed guide from this thx for the share dude....

[ZeRo*]

Amazing guide!!!! I think you deserve karma for this ;D Keep up!

[Emrys]

Great job!!!! Keep Up!!!!! Its very difficult...

[Jigsaw*]

nC share man....it takes a lot of time ...one day i will test it.. :)

[Morian]

Is Awesome! I suggest sticky! Realy it's very good!

Keep up m8!

[CalyXTen]

its rock, thanks for share i try

[Coolis®]

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

[Enable^^]

ITS crunk maaan senk wooooowwww

[Intrepid]

Really impressive guide :D i give you +1karma for that :P

[Awaken]

Omg nice and hard guide :) meaby im make some game , thaanks nice very nice:)

[Coolis®]

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 =)