| Space Invaders in Flash MX |  |
This has been 'adapted' from the excellent tutorials found at www.video-animation.com/flash_12.shtml - there are many more well worth investigating.
Start Flash, Create a new Movie 700 x 400 pixels. Other sizes might cause problems with the code later... Set the frame rate at 12 frames per second.
1. The Defender (You!)
Draw a suitable defender to your own design about 60 pixels wide (a little under 10% of the width of the screen. If it is much bigger, you are a bigger target!
Then select your defender and hit key F8 (or use the menu to convert to to symbol). Call it Defender. This needs to be a Movie Clip.
In the "properties" window, type "defender" in the instance name box.
Now we want it to move with the mouse. Select your defender and hit the F9 key or use the menu to open the Actions window. Make sure that you switch to Expert Mode in Flash MX, otherwise you can only work with pre-made code snippets from the library on the left, which is not what we need for this tutorial.
The following code needs to be added to your "defender" Movieclip. Type or copy and paste this in to hide the mouse:
onClipEvent(load){
Mouse.hide();
}
onClipEvent(enterFrame){
this._x = _root._xmouse;
this._y = 385;
}
The second 'onClipEvent' moves the defender with the mouse. We only want the x-direction to follow the mouse and we want the y-direction to stay constant.
You may need to change the y value according to your defender MC so that it is at the bottom of the screen. Save the file and then press Apple-Enter to preview the movie so far. (on Windows hit Ctrl/Enter to test that it works).
2. Your Bullets
Now to make a Bullet. Draw a oval or whatever shape. Select it and press f8 (convert to symbol). Call it "Bullet" and make it a movieClip. In the properties window for Bullet, give it the instance name of "bullet". What we need to do is create a bullet everytime the mouse is clicked and when it goes offstage to destroy it or re-use it.
We need to write an algorithm to describe the sequence of events for moving a bullet.
// move the bullet at 30 pixels per frame towards the top of frame
// when the bullet hits the top of stage, destroy it or re-use it.
Select your bullet on the stage and open the Action window and put in this code:
onClipEvent(enterFrame){
// move it 30 pixels towards the top of screen
this._y -= 30;
// if bullet goes offstage , destroy it
if(this._x<0 || this._x>Stage.width || this._y < 0)
{
this.removeMovieClip();
}
}
Select your defender MovieClip and add this code after the enterFrame code:
// when the mouse clicks
onClipEvent(mouseDown)
{
// duplicate the bullet mc
_root.bullet.duplicateMovieClip("bullet"+bulletNum,bulletNum);
// set the coords to the mouse clik
eval("_root.bullet" + bulletNum)._x = this._x;
eval("_root.bullet" + bulletNum)._y = this._y;
// increment the bullet number
bulletNum++;
// if more than 50 bullets , start again at 0
if(bulletNum>50)
bulletNum = 0;
}
The above code
* duplicates the bullet mc and gives it a number of "bulletNum"
* It then sets the start x and y coords of the bullet to the x and y coordinates of where the mouse was clicked.
* The bulletNum is incremented so that the next bullet created by a mouseclick has a number of bulletNum+1.
* Then if the bulletNum is greater than 50, the bulletNum is reset to 0 and starts the count again.
By now our defender should move from left to right following the mouse and should shoot bullets when the left mouse clicks.
3. The Advancing Aliens
Draw some sort of scary alien monster and make a MovieClip out of it and call it "Alien". In its properties window give it the instance name of "alien". In its Actions window, put this code :
onClipEvent(load){
this._y =0;
speed=10;
}
When the alien loads we want to set its y position to 0 for the time being. And we need to set its speed to 10. Later we will change this according to the direction it will need to travel. If the alien hits the left side we need to make it drop down (_y +=30) and change direction by giving the increment value or speed a positive number . x value will increase and make it go right. When it hits the right wall/side then the speed value needs to be negative and this will make it go left. So every time it hits a side, it drops and changes left/right direction. Later on we will need to have 2 or 3 rows of aliens and it will get much more complex. For now, just get one alien to move down.
Select your alien MovieClip and add this code after the load event :
onClipEvent(enterFrame){
if(this._x <0)
{
// set direction to right
speed=10;
// drop down
this._y +=30;
}
if(this._x > Stage.width)
{
// set direction to left
speed=-10;
// drop down
this._y += 30;
}
// move horizontal
this._x += speed;
}
4. Lots of Aliens
First open your actionscript window and select the alien. Delete all the code that you wrote above. Create a new layer and call it "actions" select the frame in that layer. In the ActionScript window write this code :
depth=0;
for(var i=0;i<3;i++)
{
for(var j=0;j<10;j++)
{
duplicateMovieclip("alien", "alien"+i+"_"+j, 100+depth);
_root["alien"+i+"_"+j]._x = j*40;
_root["alien"+i+"_"+j]._y = i*40;
depth++;
}
}
Now what does this do? First we set the variable depth, which is the argument for the duplicateMovieClip method.
duplicateMovieClip("oldName", "newName",depth) - takes 3 arguments :
1. the original name of the mc that we are copying - e.g "alien"
2. the name that we are giving the copy - e.g. "alien"+i
3. and the depth or layer that we draw it to.
Each duplicated movie must have a unique depth number. The bullets above were given the depths of, what ? Work it out... That is right. 0 to 50. If we made our alien depths from 0 to 30, when the bullets were being duplicated each time they go out of the screen, then they would overWrite the alien movieclips. So, we have made the depths on our aliens from 100 to 130. The next time we duplicate a whole bunch of mc's (the bombs) then we will give them a depth number starting from 200 to 210 for example. So whenever duplicating a whole bunch of mc's be very aware of the depth numbers and make sure they are all different. Do what we are doing (giving each set of mc's numbers starting with 100, 200, 300, 400, etc etc) and you should stay out of trouble.
Next to move our aliens. We moved our single alien by moving 10 pixels each frame in the x or horizontal direction and when we hit the side we changed direction and moved it down 30 pixels( _y += 30). We need to move all of our aliens. We have 3 rows and 10 columns. So let's loop through each alien and increment the x-value by 10 pixels and check that the sides of the screen have not been hit.
Make a new mc in its own layer. Just a square will do. and call it Control_mc. Drag it off to one side out of the screen. Put this code in its ActionScript window:
onClipEvent (load) {
dropdown = false;
speed = 10;
}
onClipEvent (enterFrame) {
for (var i = 0; i<3; i++) {
for (var j = 0; j<10; j++) {
// move horizontal
_root["alien"+i+"_"+j]._x += speed;
if (_root["alien"+i+"_"+j]._x<0) {
// set direction to right
speed = 10;
// drop down
dropdown = true;
break;
}
if (_root["alien"+i+"_"+j]._x>Stage.width) {
// set direction to left
speed = -10;
// drop down
dropdown = true;
break;
}
}
}// end for loops
// drop down all the rows
if (dropdown) {
for (var i = 0; i<3; i++) {
for (var j = 0; j<10; j++) {
_root["alien"+i+"_"+j]._y += 20;
}
}
}
dropdown = false;
}
What does it do? In the load method, we need to initialise the speed to 10 because when we drop down into our formation the first time, it has yet to be set. Same for dropdown, our flag for the rows to drop.
In the enterFrame method, inside our for loops, we first increment our x-value( blah._x +=speed) and then check if we have hit the edge. If we have hit an edge ,
* we set our speed to plus or minus
* Set the dropdown flag to true
* and break because we don't need to check any more
The aliens come out of the for loops then and this is where we actually move them all down. If our dropdown flag is true, then we loop through all the aliens and increment the y value by 20 pixels.
Once we are out of the dropdown loop, we need to reset our dropdown flag to false, otherwise the aliens would just continue to keep dropping. Try it by commenting out the line
// dropdown=false;
Rewind and play, or Save and then press Apple Return (Ctrl Return on Windows).