This tutorial will show you how to draw a basic spaceship and make it fire. It even includes a powerup for double fire!
This tutorial was written in Flash MX 2004(Flash 7) and may not work for earlier versions(the source won't work for any version of flash older than 7).
The end product will look like this. Arrows to move space and fire, the green ball is the powerup.
First you will need to open a new flash document 550*400, the default size, and make the background black.
You need to draw three pictures. Pretty much an orange dot for the shot and a spaceship for the actual ship. If you don't
want to draw it, you can use mine in the source code(download at bottom of he page). You should also draw a triangle or something
for the powerup. Now, select each graphic individually and go to modify-->Convert to symbol and convert each of them to a movie clip.
So far your document should look something like this:
Now we need to name the symbols and name the instances of the symbols we are using. For this tutorial we will call the ship "ship", the shot "shot", and the
powerup "powerup". When it asks you to give a symbol name, use those names. We also need to name the instances. So select each symbol and open the properties box below and you will see an "instance name" field. Use the "ship", "shot", and "powerup" for the instance names also. An example is shown
below.
Now we need to set an initial variable. So got to click on the first frame and open the actions box like so:
In the actions box type this:
Code:
shotlevel=1;
Thats our only pre-defined variable, it says that the level of shot is 1, or only fire one bullet when the fire button is pressed(we will see how this works
when I explain the powerup).
Now we will make the ship move, so select the ship symbol you created and open the actions box and type in this code:
Code:
onClipEvent(load)
{
this.speed=11;
}
onClipEvent(enterFrame)
{
if(Key.isDown(Key.LEFT))
{
if(this._x>20)
{
this._x-=this.speed;
}
}
if(Key.isDown(Key.RIGHT))
{
if(this._x<530)
{
this._x+=this.speed;
}
}
if(Key.isDown(Key.UP))
{
if(this._y>20)
{
this._y-=this.speed;
}
}
if(Key.isDown(Key.DOWN))
{
if(this._y<380)
{
this._y+=this.speed;
}
}
}
When the clip first loads, it sets the move speed as 12 pixels, if you want the speed to be faster or slower, you can adjust this.
Next, every time it enters a frame(flash's default is 12 frames per second and can be set in document properties), it will run the OnClipEvent(enterFrame) code. The Key.isDown command makes a key as a parameter and executes the code when that key is pressed or held down. As you can see here when Left, Right, Up,or down is pressed, the ship gets moved left, right, up, or down 20 pixels by a command such as:
Code:
this._x+=this.speed;
this._x is the X position of ship on the flash document and this._y is the y position of the ship on the document.
We don't want the ship to move off the screen so we only adjust it 20 pixels if it isn't already on the side of the screen. For instance, since the document
is only 400 in height, we write an if statement:
Code:
if(this._y<380)
{
this._y+=this.speed;
}
So that it only moves the clip 20 more pixels if the y position is less than 380.
So now we have to get the ship to fire, so select your ship again and open the actions box. Modify your code so now the code in the actions box should look like this for the onClipEvent(load) part:
Code:
onClipEvent(load)
{
this.speed=11;
this.shotcount=1;
this.isshot=0;
}
Besides the speed now, we have two more initial variables for the ship. Shotcount is the shot counter, this is important for defining the depth of the shot.
isshot is something that we do to prevent shots so fast that they become one continous line.
Now you need to add the following code to your onClipEvent(enterFrame) below the code that is used to move the ship.
Now this code says that if spacebar is pressed then duplicate the shot clip that is on the stage and give it a name of "shot" and the number in shotcount.
This is why shotcount is important, you do not want two instances of the same name. Shotcount also helps us set the depth so each shot will be in a different
depth. Two clips on the same depth will tend to remove each other. The spacebar is hit, isshot is set to 1, and it takes a frame to reset it to 0 for the fire shot to trigger again. This is done so the shots don't become one long line when spacebar is pressed. Now to make the shot actually move across the stage, you need to select your shot symbol and add the following code:
Code:
onClipEvent(load)
{
if(this._name=="shot")
{
this._visible=false;
}
else
{
this._visible=true;
}
this.speed=25;
this._x=_root.ship._x+10;
this._y=_root.ship._y;
}
onClipEvent(enterFrame)
{
this._x+=this.speed;
this._y+=this.yspeed;
if(this._x>580)
{
this.removeMovieClip();
}
}
When the shot loads we want to check if its name is the original shot, if it is,we want to hide it because we don't want a random shot at the beginning
coming off the ship. We also set the shotspeed to 25 and we set the initial position of the shot 10 pixels to the right of the ship so it looks like its coming from the front of the ship(to make sure your ship is centered right, select the ship, right click and choose edit. Make the ship's center to the corsshair). Then in the onClipEvent(enterFrame) we move the clip right by the number of pixel in speed(25). We also tell it to move up by the defined yspeed.
Yspeed is not defined here, it is defined in the initial generation of the shot after the powerup has been collected(explained in the next part of the tutorial.) Finally, we tell it to remove the movie clip if the x position in greater than 580, when it is well off the screen.
By now you should have a function ship that shoots. Now we move on to the extras, the power up!
First we need some code in the powerup clip to move it onto the screen and have it trigger some events when it makes contact with the ship. Select the powerup symbol and open the action box and paste this code in:
Code:
onClipEvent(load)
{
function reset()
{
this._x=random(300)+800;
this._y=random(300)+50;
this.xspeed=8;
}
this.reset();
}
onClipEvent(enterFrame)
{
this._x=this._x-this.xspeed;
if(this.hitTest(_root["ship"]))
{
if(_root.shotlevel==1)
{
_root.shotlevel+=1
}
this.reset()
}
}
This code has a reset function in the load event, it calls this function to reset the powerup when it goes off the stage or when it comes in contact with the
ship. This is handy when you want an object to reset after something happens to it. When also set the speed of this powerup to 8 and the initial x and y positions of this powerup. Note that this powerup starts off-stage and then slides in. This is because we set the initial x position greater than the 550 of the stage. random() takes a paratmer and returns a value between 1 and the number given as a parameter.
In the onClipEvent action, we move this clip 8 pixels every frame as defined in the load function. The this.hitTest tells the flash to trigger an action when this object collides with out "ship" object. In this case it tells it to increment the shotlevel by 1 if the shotlevel is currently 1. Then it tells it to reset this clip.
Now to actually make two shots we have to make modifications to the code in the ship object, the code that executes if spacebar is pushed, so select the ship object and modify the spacebar trigger code to this:
This says if the shotlevel is greater or equal to two(IE, if a powerup has been collected) then make another clip of shot but give it a vertical speed of 7.
You must also increment shotcount for instance naming and depth reasons. So this shot is the same as the other one, except it has a downward movement speed
of seven. So how if you hit spacebar after grabbing the powerup(the green ball in this example), it will shoot 2 shots in a spreadfire fashion.
Thats it for this tutorial! If you want to download the source file for this tutorial click Here
Need help on this tutorial, have more tips for this, please post in the forum discussion on this tutorial Here
