Warning: include() [function.include]: http:// wrapper is disabled in the server configuration by allow_url_include=0 in /home/vecpix/public_html/tutorials/flash/fl009.php on line 5

Warning: include(http://www.vecpix.com/include_leftnav.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/vecpix/public_html/tutorials/flash/fl009.php on line 5

Warning: include() [function.include]: Failed opening 'http://www.vecpix.com/include_leftnav.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/vecpix/public_html/tutorials/flash/fl009.php on line 5

Flash Game - Part 3

Now for part 3 of the shooter series.

You have to do some modification of the first fla, like adding some more layers to your game, so before anything else, open it up. It may seem like a lot, and if you don't want to, you don't have to, it just separates things, and like I said before, makes it easier to edit or change. If you look at the picture below, you'll see the new layers that need to be added - also you'll notice that the "garbage cans" layer and "enemies behind garbage cans" layer, have been divided into "garbage can 1" then "enemy behind garbage can 1" and "garbage can 2" with "enemy behind garbage can 2".

One garbage can is in the "garbage can 1" layer and the other is in the "garbage can 2" layer. There is also another layer called "speedy". In this layer I have an animated character - Speedy Gonzales from the cartoons, running across the screen. Shooting him will give you a bonus. Finally there is a layer called "actions".

So far, you should have re-arranged and inserted the layers as in fig. 1. Also, set your fps (frames per second) to 30.

Click on the first frame in "enemy behind garbage can 1" layer.

Press F - 11 to bring up the library. Then click on the plus sign in the bottom left hand corner:

This should bring up the Create New Symbol dialogue box. Select Movie Clip and give it a name then press OK. You will be taken to the time line of the movie clip. Here you can draw your character. For the purpose of this tutorial, the character would be a static one, ie he won't be "breathing", moving a weapon, looking around etc. Just a static image. Once you've drawn the character, return to the main time line. Drag the the character's movie clip onto the stage.
I have used an existing image and converted it into a movie clip. To do this, click on File - Import to Library, to import the image. Then drag the image on to the stage, right click on it and select Covert to Symbol.

Once you have your character movie clip on stage, you need to get it into position. Then you can do the popping up, going back down and getting shot motions.

Align the top of the character with the top of the garbage can. If you go to View then click on Rulers, then click on the top ruler and drag downwards, it will pull down a guide. You can use this to help with alignment (although in this particular case it's not that difficult without a guide).

Now double click or right click on the character movie clip and click on "Edit in Place". You should now be in the time line of the character, but you can see it's position on stage:

There should only be one layer and one frame in the time line. You can rename Layer 1 to "images" or "character" if you want. Insert another layer and call it "actions".

First of all, is the character's pop up motion. This is nothing more than a simple motion tween. So click in frame 5 and press F6. This inserts more frames and makes frame 5 a key frame. With the character selected, use the up arrow key to position it where it will appear when it's up and out of it's hiding place:

Then click on the first frame and in the frame properties, change the Tween settings to "motion":

So your time line should look like this:

Now depending on how long long you want the character to stay up for, insert additional frames. In this example, give it 21 frames, so click on frame 26 and press F6. This will insert 21 frames and make 26 a key frame. You can increase or decrease the amount of frames to increase the amount of time the character will stay up for. The fps you set also affects this. All frames inherit whatever was in the last key frame, so all 21 frames will be of the character, out of the hiding place.

Once this is done. Click on frame 31 and press F6. This should insert 5 frames and make 31 a key frame. The image in frame 31 should be the same as in 26 - that's not what you want. Click on the image in frame 31 and delete it. You want a tween of the character going back down. So:

Click in frame 1.
Select the image of the character in the hiding or down state and press CTRL+C.
Now click in frame 31 and press SHIFT+CTRL +V (paste in place). This will paste the image of the character in exactly the same position as it was in frame 1.

To tween the character going down, click on frame 26 and in the frame properties, change the Tween settings to "motion" like before.

Now that the up and down movements are taken care of, you need to do the character's getting shot sequence. This is simple. After the last frame, which, in this example was 31, insert another key frame. - which would be frame 32. Now this time in this key frame. there is an image of the character in the hiding state. You need an image of it in the up state, so delete the image. Click on a frame that shows the character in this state, 26 will do, then click on the image, press CTRL+C. Now click in frame 32 and press SHIFT+CTRL+V - the same process as you used before.


Once you've done this, change the look of the character to show that it's been shot. You can use the effect you want. I just used 2 key frames changing each time to show the character blowing up, and kept two frames at the end to keep the image on the screen for a while (look at the source files if you're confused).

On the first frame, insert a frame label called something like "gold1normal" - or "dudeReady". This is where the popping up out of the hiding place begins:

Now in frame 32 - where the character's getting shot sequence starts, insert a frame label, in this case I used "gold1shot". Depending on the delay effect you want, add a sound to the "gold1shot" frame, or another key frame after that. The first tutorial showed you how to import sounds and add it to a frame. There should be sounds in the source file. Search the net for WAVs - you may want to use a WAV editor to edit them.

Now for the actions:

In the actions layer click in frame 31 and press F7 (blank key frame.) and click in the last frame, in this example it's 35, and press F7. When you've done that, do the following:

Click in the first frame and press F9. Insert a

stop();

Stops the movie.

Click in the 31st frame, press F9 and enter:

gold1up = 0;
gotoAndStop("gold1normal");

Explanation:

gold1up = 0;
A variable telling us whether or not the character is up or not. In this case it is set to false, so it's not up (you can use 1 for true and 0 for false - I use 1s and 0s in this tutorial).

gotoAndStop("gold1normal");
Go and stop at the frame label "gold1normal".

Click in the last frame - 35, and press F9 and enter:

gold1up = 0;
this.enabled = 1;
gotoAndStop("gold1normal");

Explanation:

gold1up = 0
A variable telling us whether or not the character is up or not. In this case it is set to false, so it's not up.

this.enabled = 1
The movie clip is enabled - so it can be clicked - or shot. You'll see why this is needed later.

gotoAndStop("gold1normal");
Go and stop at the frame label "gold1normal".

Your timeline for the character should now look like this:

Return back to the main time line.

Click on the character movie clip. The position that you see it in, is the hidden state. You now want to move it behind the garbage can. There are different ways of doing this, but I think the easiest way is this:

Select the character movie clip and press CTRL X to cut.
Click in first frame of the "garbage can 1" layer and press CTRL + V to paste it. Now move the character over the garbage can, as though it was behind the can, and position it where it will "hide":

Once you've done this, select the character and press CTRL + X again. Now click in the first frame of the "enemy behind garbage can 1" layer and press SHIFT + CTRL + V (paste in place) which should paste the character exactly where it was before, except this time, it's in the layer behind the garbage can. If you click on the dot under the eye column of the "garbage can 1" layer, it will become invisible, allowing you to see the character:

Right, that's the first character done. Now for the actions for the character. These actions are the one's that go on the movie clip. Click on the character, and press F9. Add these actions:

onClipEvent (load) {
gold1up = 0;
}
onClipEvent (enterFrame) {
if (!gold1up) {
gold1yn = Math.floor(Math.random()*25);
if (gold1yn == 1) {
gold1up = 1;
this.gotoAndPlay("gold1normal");
}
}
}
on (press) {
this.gotoAndPlay("gold1shot");
this.enabled = 0;
}

Explanation:

onClipEvent (load) {
gold1up = 0;
}

When the clip loads, set gold1up to 0 or false. This means that the character is not up.

onClipEvent (enterFrame) {
if (!gold1up) {
gold1yn = Math.floor(Math.random()*25);

Every frame, gold1up is checked if it's value is 0 or false. If so, a random number is generated (in this case a number from 0 to 24.999 and rounded down, so 0 to 24). The number generated, is stored in the variable gold1yn.

if (gold1yn == 1) {
If gold1yn equals 1 then...

gold1up = 1;
Set gold1up to 1 (or true) - in other words, he's moving up now.

this.gotoAndPlay("gold1normal");
Go and play the frame labeled"gold1normal". This is where the pop up sequence starts.

on (press) {
this.gotoAndPlay("gold1shot");

When the character is clicked, or shot, go and play the frame labeled"gold1shot".

this.enabled = 0;
Set the enabled property of the movie clip to 0 or false, so it can't be clicked, or shot, again. Otherwise if you kept shooting the character it would keep looping back to "gold1shot". This is not as evident on the gold and blue characters, but try removing this line from the yellow character and keep shooting him repeatedly.

Just a quick note:

Before MX, if you had a movie clip that, when clicked on, you wanted to play an animation - for example, a character getting shot, this is what you'd use:

onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
this.gotoAndPlay("shot");
}
}

With MX you can just use:

on (press) {
this.gotoAndPlay("shot");
}

In MX you can use button event handlers on movie clips.

Now how does it fit together?

Firstly, every frame gold1up is checked to see if it's value is false (!gold1up means "not gold1up" - or check if it's false) in other words make sure that the character is not already up (in which case gold1up would be true). If gold1up equals 0 or false, a random number is generated from 0 to 24 which is stored in a variable called gold1yn. Then, the number is checked to see if it equals 1. If so, then gold1yn is set to true, because the character is now moving up, and the frame label "gold1normal" plays. This moves the character up, then it stays up, and eventually goes down. When it goes down, the action for that frame tells it to go back to "gold1normal" and stop. It also sets "gold1up" to false because the character is not up anymore. And the cycle continues, gold1up is checked, the random number is generated then checked to see if it equals 1... and so on.

The cycle will continue, unless of course the character is shot, in which case, the character plays the frame label "gold1shot" and set's it's enabled property to false. It plays through the frames including and after "gold1shot", then when it gets to the last frame, the actions for that frame set "gold1up" to false, as the character is not up anymore - it's been shot. Then the enabled property is set to true, to allow it to be clicked or shot again, and the frame label "gold1normal" is played so the sequence starts again.

The variables used in the characters movie clip apply only to it's time line so I could have used isUp or isShot for all the characters, but instead, used different variable names for clarity.

So that's the first character taken care of. You can now use the same principle for the other ones.

But what about Speedy? Now speedy uses the random number technique, but doesn't use a motion tween to move. This is the process for Speedy:

Speedy is an animated gif that I found on the net. When you import animated gifs into Flash, it converts it into a movie clip. The frames can be seen in the movie clip. I used the same principle as the first character. Once one cycle of the running animation has been done, Speedy is sent back to frame 1 to repeat the cycle, because the frames after the running cycle, are part of the shot sequence. Those frames are only supposed to play when Speedy is shot.

He's placed just off stage, out of sight. The y position is a random position from 150 to 170 - just between the two garbage cans. His speed is a random number between 8 and 13 pixels per frame stored in a variable called speed. A variable - speedyCalc - is used to check whether or not to generate the random number sequence. If speedyCalc is false, then a random number (a number from 0 to 199) is generated. If the number equals 1, then speedyCalc is set to true and speedy is moved across the stage depending on the random speed. Once speedy runs off the stage, speedyCalc is set to false, allowing the random number to be regenerated.

I have put the code to reset Speedy's settings in a function so, the function can be called whenever Speedy needs to be reset, instead of typing all the code again, also, when Speedy is shot, in his last frame of the shot sequence, the reset function is called.

onClipEvent (load) {
function resetSpeedy() {
this._x = 430;
this._y = Math.floor(Math.random()*21+150);
speed = Math.floor(Math.random()*6)+8;
speedyCalc = 0;
this.play();
}
resetSpeedy();
}
onClipEvent (enterFrame) {
if (!speedyCalc) {
speedyYn = Math.floor(Math.random()*200);
}
if (speedyYn == 1) {
speedyCalc = 1;
this._x -= speed;
}
if (this._x<-50) {
resetSpeedy();
}
}
on (press) {
speed = 0;
this.gotoAndPlay("speedyShot");
}

Explanation:

onClipEvent (load) {
function resetSpeedy() {

When the clip loads, we are defining a function called resetSpeedy.

this._x = 430;
Move Speedy to x 430.

this._y = Math.floor(Math.random()*21+150);
The y of Speedy is a random number between 150 and 170.

speed = Math.floor(Math.random()*6)+8;
The speed is a random number between 8 and 13

speedyCalc = 0;
Set speedyCalc to false.

this.play();
Start playing the clip.

resetSpeedy();
Now you've defined the function, it won't run until it's called. This calls it.

onClipEvent (enterFrame) {
if (!speedyCalc) {

Every frame speedyCalc is checked to see if it is false.

speedyYn = Math.floor(Math.random()*200);
If it is, then generate the random number.

if (speedyYn == 1) {
If the random number equals 1.

speedyCalc = 1;
Set speedyCalc to true.

this._x -= speed;
Start moving Speedy to the left depending on the speed (if it was to the right it would be += speed).

if (this._x<-50) {
If speedy goes off the stage - more specifically, past -50.

resetSpeedy();
Call the reset function.

on (press) {
speed = 0;

When Speedy is shot, the speed = 0 - because his shot sequence is Speedy jumping into the air. If speed was not 0, he would continue moving forward and jumping.

this.gotoAndPlay("speedyShot");
Go and play the shot sequence. Also note that at the end of the shot sequence, there is a call to the resetSpeedy function.

One other thing to note, that there is an addition to the code of the blue character in the source files:

onClipEvent (enterFrame) {
if (!blue1up) {
blue1yn = Math.floor(Math.random()*40);
newX = Math.floor(Math.random()*151+200);
if (blue1yn == 1) {
blue1up = 1;
this._x = newX;
this.gotoAndPlay("blue1normal");
}
}
}

The addition new X = Math.floor(Math.random()*151+200); means that along with the random number to decide whether or not the character should pop up, newX is a random number from 200 to 350, determining a random x position. And when the character does pop up, this._x = newX; sets the x to newX.

Finally in the actions layer on the main time line, put a stop();.

So that takes care of the first character, and Speedy. You can use the same technique for the character, to do other characters in your game. They don't all have to pop up from somewhere, they can run onto the screen or something else. You can have other characters doing their stuff too, like in the example at the top of the page, there's a small thing that runs in the opposite direction to Speedy, and when shot, runs back from where it came.

Play around with the source files and the techniques in the tutorial to come up with some ideas of your own.

The next one should be the final part - just to cover scoring and a timer. Also, putting a sound in a frame in the gun's firing animation works fine for a small game, however, when you need your sound synchronised with others sounds, this method can cause a delay in the gun firing sound. In the next tutorial, I'll include another way of doing this, which doesn't produce the delay.

After that, I may do some tutorials on adding effects like bullet holes, or an ammunition system where you have to reload the gun after a certain number of shots.


Warning: include() [function.include]: http:// wrapper is disabled in the server configuration by allow_url_include=0 in /home/vecpix/public_html/tutorials/flash/fl009.php on line 379

Warning: include(http://www.vecpix.com/include_useful.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/vecpix/public_html/tutorials/flash/fl009.php on line 379

Warning: include() [function.include]: Failed opening 'http://www.vecpix.com/include_useful.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/vecpix/public_html/tutorials/flash/fl009.php on line 379

 


Warning: include() [function.include]: http:// wrapper is disabled in the server configuration by allow_url_include=0 in /home/vecpix/public_html/tutorials/flash/fl009.php on line 384

Warning: include(http://www.vecpix.com/footer.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/vecpix/public_html/tutorials/flash/fl009.php on line 384

Warning: include() [function.include]: Failed opening 'http://www.vecpix.com/footer.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/vecpix/public_html/tutorials/flash/fl009.php on line 384