ReviseICT.co.uk
Home / Macromedia Flash
Creating a Flash game

You are 1 of [an error occurred while processing this directive] current users

You are going to create your own version of the following game. You will design your own character and add the code to allow you to play a 'whack-attack' - type game. Marvellous!




Step 1 - creating your 'whack' character.

Firstly you need to design your character that you are going to 'hit'. You could use an image from the internet, or draw something yourself.

When you have found your image, cut and paste it into Flash. Click on your image and select Modify > Bitmap > Trace Bitmap.



Then customise your image, perhaps removing the edges until you have a 'head' to work with!



Convert this image to a symbol by selecting it all (use the mouse to draw an imaginary line around it all) and pressing Modify > Convert to Symbol. Turn it into a graphic symbol called 'head'.



OK - now we need to create a head that has been 'whacked'.

Press Window > Library to bring up the library with your new 'head' symbol showing.



In this Library panel right-click on your 'head' symbol. Select 'Duplicate'. Right-click and rename the new symbol 'headHit'.

You should double-click this new 'headHit' symbol. Edit it to make it look like it has been hit. You could stretch your image or draw something else on it. For example it could be a custard pie!



You should now have two symbols, one 'head' and one 'headHit'. We can now move onto the actual game.


Step 2 - animating the character

The next stage is to create our 'whacked' animation! We need the individual to appear and disappear quickly, but also change to 'whacked' if needed.

Drag the 'head' symbol onto the main stage and press F8. Create a new movieClip called 'whack_mc'.

Double click on the image. You are now editing the new 'whack_mc' movieClip.

Select frame 20, right-click and select 'Insert keyframe'.



With slide 20 still selected we need to type some actionscript into the Actions panel. If it isn't visible, press F9 to reveal it. In the actions panel type _parent.gotoAndStop(1);

We now need to add a small amount of animation. Dead easy really!

Now click on your image. Hold down the shift key and press the 'down' arrow key four times.

[Optional]
If you are feeling clever, you could tween this animation now - it would make the move smoother. However this isn't completely
necessary.


View the library again. [Scroll up to see how to do this - remember you did it before!]. Right-click on the 'whack_mc' symbol and select 'duplicate'.

Right-click the duplicated movie clip and call it 'whacked_mc'.

Double click the new 'whacked_mc' clip.

Select the first image. In the properties window (press Window > Properties if you cannot see it) click on the 'swap' button.



Swap this symbol so it becomes 'headHit'.

Click on frame 10 in the timeline and swap the symbol for 'headHit' - do the same in frame 20.

Click back to view the main game screen - click on the word 'scene 1' just above the timeline.




Now we put these two together to create our full animated figure.

Delete any symbols currently on your main screen. Click on them and press your delete key.

Now drag the 'whack_mc' movieclip from the Library onto your main screen.

Make sure it is select and press 'F8'.

Create a movie clip called 'appear_mc'.

Double-click this new movie-clip.

Right-click on your timeline and press 'Insert keyframe' twice to insert two new frames:



Click on the first keyframe and press your delete key. This frame will now become blank.

If you cannot see the 'Actions' panel on your screen, press 'F9' to open it up.

With the first frame selected, type 'stop();' into the actions panel.

Click on the second frame and type exactly the same into the actions panel: stop();
Do this again on the third frame.

With the third frame still selected, click on your movie clip and swap it for your 'whacked_mc' movie clip. Look back in these instructions for further help.

Now return to the top level again by pressing 'scene 1'.


Step 3 - putting the game together

You currently have one 'appear_mc' movie clip on the main stage. However, it will be tricky to see.

Click on the empty movie clip - you sould be able to see a small circle to select.

When selected, add a label in the properties section - call the movie clip 'hit1'



Now right-click your movie clip and select 'copy'.

You need to paste additional clips around the main screen. Each time you paste one, make sure you give it the correct label - call the second one 'hit2', the third 'hit3' and so on.

Continue doing this until you have 10 movie clips, all correctly labelled.


Step 4 - completing the basic game

On the main stage, just below the timetime, click on the insert layer button (far left in image below):



Drag this layer so it moves beneath the first layer.

Using the text tool, add some text to your game - perhaps the name of the game or just a word like 'Whack!' or 'Smash!'.

Convery this text to a symbol (remember - press F8). Make it a movie clip and call in 'title_mc'.

Position this text somewhere on your stage - where will it look best?

Click on this title movie clip and find the 'Actions' panel. Press F9 if it isn't visible.

Now you need to copy and paste the following actionscript directly into this actions panel:

onClipEvent (load) {
timeBetweenHit = 2000;
nextHit = getTimer()+timeBetweenHit;
}
onClipEvent (enterFrame) {
if (getTimer()>=nextHit) {
timeBetweenHit -= 10;
if (timeBetweenHit<1000) {
_root.gotoAndPlay("gameOver");
} else {
while (true) {
hit = int(Math.random()*10);
if (_root["hit"+hit]._currentFrame == 1) {
break;
}
}
_root["hit"+hit].gotoAndPlay("2");
nextHit = getTimer()+timeBetweenHit;
}
}
}
onClipEvent (mouseDown) {
x = _root._xmouse;
y = _root._ymouse;
for (i=0; i<10; i++) {
if (_root["hit"+i]._currentFrame == 2) {
if (_root["hit"+i].hitTest(x, y, false)) {
_root["hit"+i].gotoAndStop("3");
}
}
}
}

Game complete!

Save your flash game and then preview your work. Press F12 to preview.



Extending your game :

You could add a scoring system into your game very easily. Look through the actionscript attached to your title movie clip and add the sections in red:

... timeBetweenHit -= 10;
if (timeBetweenHit<1000) {
_root.gotoAndPlay("gameOver");
} else {

numHits ++;
_root.score = success + "/" + numHits;


while (true) {
hit = int(Math.random()*10);
....

...
if (_root["hit"+i].hitTest(x, y, false)) {
_root.success ++
_root["hit"+i].gotoAndStop("3");
}

Then add a textbox onto the main stage, and add the variable '_root.score' to the textbox properties:



Additional ideas:

Do you want your game to go quicker? Simply increase the frame rate (just below the timeline near the middle)
You could also add an entertaining background to make your game look as if the figure is appearing from a hole.
You might wish to adapt your animation so it works well with your background.
You could add a 'start screen' to introduce people to your game.



Download the sourcecode
304kb



Do any of these links not work? Do you know of any additional links or have resources to share?
Please let ReviseICT.co.uk know via our feedback page.

ReviseICT.co.uk
Page updated Friday, May 13, 2005

Valid HTML 4.01! Valid CSS!