how to create a quick and messy flash game.

[shaunak]

Flash: Create your very own game

Create a quick and messy Flash game.
First start off by creating a button. To do this you need a basic shape. I take a circle, a yellow circle.
Now to convert this to a button you neer to declare it as a symbol. to to that select the graphic and press F8. I named by button "target". You can also do this by following this path: Insert>convert to symbol
*img462.imageshack.us/img462/9649/tut1ug8.th.jpg
Choose symbol type as "button" an confirm.
Now double click you new button to enter this screen:
*img462.imageshack.us/img462/7481/tut2do3.th.jpg
You will see that the button has 4 states. up, over down and hit. Each state is for each type of conditions of input the button can encounter.
Up: normal state of the button
Over: mouse over condition
Down: clicked button
Hit: Area along in which the button is active and will work. Not visible if rendered scene. usefull for creating invisible buttons, or buttons that work even if you click slightly outside.
I will modify the button states a little so that the user knows if he has clicked it or not.
*img462.imageshack.us/img462/192/tut3hq7.th.jpg *img462.imageshack.us/img462/2737/tut4cu2.th.jpg *img462.imageshack.us/img462/522/tut5dc3.th.jpg.
To do this click on the white box below each state and press F6 [right click> insert keyframe]
Then modify the button as you like i have just changed colours and added a small animation. leave the hit area as it is.

Now go back to the main screen by clicking the scene 1 button :
*img462.imageshack.us/img462/9606/tut6qb5.th.jpg

Lets add a score board. Add a layer [i havent in the screen shot because i plan to move it to another layer later] then simply create a text box and type in a 0 [zero]. Modify its size and font using the charecter box. If the box isnt showing by default the add it using: windows>panels>charecter. [Or CTRL T]
*img462.imageshack.us/img462/9566/tutmidbm9.th.jpg
Now to make the score "updatable" go to the charecter box and click on "text options". Change the text type from "static" to "dynamic text" as shown:
*img462.imageshack.us/img462/5673/tutshowro5.th.jpg
As soon as you do that you will get entry box to enter the variable name. Assign it any variable name you like. we will use this later to change the text depending on the users clicks. Imm calling it "score".
*img462.imageshack.us/img462/5863/tutmid2ky0.th.jpg

 

[shaunak]

Now to add a bit of action script.
Right click on you button "target" and select "Actions".
*img462.imageshack.us/img462/7011/tut7ri1.th.jpg
The actionscript window opens up.
*img462.imageshack.us/img462/1377/tut8nn3.th.jpg
Now navigate to "actions>on" in the left pane. By default relese will be selcted. This is the control syntax for the button.
Now we add to it.
We add the action to the event. Go to actions>evaluate on the left pane and double click it. This adds a blank line to the code. we shall use it to increment the value of variable "score". To do that type in "score++" in the expression field. This basicaly adds 1 to the value of score. Something like [score]=[score]+1.
*img463.imageshack.us/img463/1959/tut9wz5.th.jpg

You can also do the whole coding by going into expert mode [CTRL+E] and directly typing in the following:

on (release) {
    score++;
}

in the right pane.

Now close the action window and go back to the main screen.

Now you can preveiw you efforts by pressing CTRL+ENTER. Close the preveiw to go back to the main screen

So far you have got a button that increments a scoreboard. Now to make it move a bit.

In the main screen click on the 30th frame in the time line:
*img463.imageshack.us/img463/6946/tut10pp0.th.jpg
Press F6 to insert a new keyframe. Click on the empty part of the stage to deselect everything then click on the cicle to select it. Move the circle as you like, once it is far enough, go to the timeline, right click the 30th frame and select create motion tween. this will cause you circle to be auto animated to the new spot from the old spot. Do this 5-6 time chancing directions repetedly.

Now to make your score board visible through out click on the last flame of you scoreboard layer and press F6. You should end up with something like this:
*img463.imageshack.us/img463/9501/tut11tv2.th.jpg

Finishing.
Create a new layer and go straight to one frame ahead of the last frame of your clip.

Now lets add a basic stop action to prevent the game from looping.
Right click on the last frame of the layer select actions
*img463.imageshack.us/img463/2613/tut12nm6.th.jpg
Finaly doubleclick on basic actions>stop
*img463.imageshack.us/img463/3811/tut13bp5.th.jpg
Now on reaching the last frame the clip will stop.

For the finishing lets add a play again button.
Create a new keyframe by presing F6. Add a Rectangular shape and place a text box over it. Type in "play again". Now select both and convert it to a button by pressing F8. Right click on the button and select "action". Now go into advanced mode [CTRL+E] and type in:

on (release) {
	gotoAndPlay (1);
}

*img463.imageshack.us/img463/7183/tut14tq4.th.jpg

To refresh the scoreboard right click on the last frame, choose actions and go to advanced mode and type in:
score=0;
Your final last frame actions should be:
*img463.imageshack.us/img463/5265/tutlastou9.th.jpg

Heres the clip:
*img463.imageshack.us/my.php?image=gameza8.swf
Click to play.
Click on the ball as many times as possible before the time runs out.

My high score:
*img463.imageshack.us/img463/4189/hehekm0.th.jpg

How it did it? ive included a cheatcode. press and hold 'q'.

Here's the sourcecode:
*rapidshare.com/files/332634/game.fla.html

Add a little time and creativity and you can create your very own shoot em up'.



-----------------------------------------------------------------------------------------
I have split the above into 2 parts because there is a limit on the number of images that can be included in one post and immages were absolutely vital to the tutorial.
I you liked the tut jump once. If you didnt jump a hundred times.
Total time taken to upload immages and write the tut: 48mins.

 

[Third Eye]

Thanks man !

 

[satyamy]

Thanks Nice Tut.
My High Score for this game is 15 clicks

 

[thewisecrab]

Thanx i wanted 2 learn how 2 create a flash game 4 a long time......

 

[shaunak]

Thanks guys. I have created a little longer game using this same method. Try It out.
*img137.imageshack.us/my.php?image=digitgamev1vi2.swf

Heres a screenie:
*img93.imageshack.us/img93/9590/killvh4.th.png

How's it?