EnemyFire: Flash Tutorial

**iGuides** · #1 10-28-2007, 02:09 AM

This tutorial is to teach you how to make enemies shoot towards you and also how to make a ship rotate as if its always facing you. This tutorial was written in Flash MX 2004, so if you have that version or later, you can grab the files Here and follow along. The finished product will look like this:

Click Here to watch the Flash Video

Use your mouse to move your ship. No matter where you are the other ship will shoot at you and not some random direction.

So first, lets start off by drawing a basic spaceship. So draw a spaceship and then go to Modify-->Convert to Symbol-->Convert to MovieClip. Name the Movie Clip "heroship".

Now select the movie Clip, open the properties box and in the text box right below the dropdown box that currently says "movieclip" put "heroship" there as well. This is the name of this instance of the MovieClip.

While still selecting the Movie Clip, open up the actions box:

Put this code into the actions box:

Code:

onClipEvent(load)
{
    
}
onClipEvent(enterFrame)
{
    var xMouse = _root._xmouse;
    var yMouse = _root._ymouse;
    if(Math.abs(xMouse - this._x) < 1)
    {
       this._x = xMouse;
       this._y = yMouse;
    } 
    else 
    {
        this._x -= (this._x-xMouse) / 3;
        this._y -= (this._y-yMouse) / 3;
    }
    
}

OnClipEvent(load) is what happens when a movie Clip is first loaded and OnClipEvent(enterFrame) is what happens on each successive frame entry. A usual flash movie is about 20-25fps. So in this clip, we don't need anything to happen when the movie Clip first loads, which is why that is empty. In the enterFrame portion of the movie Clip, we need some code to tell the movie Clip to follow the mouse. First we set two variables xMouse and yMouse to _root._xmouse and _root._ymouse. The latter two variables are native variables in flash that determine the cursor position of your mouse. We then say that is the clip's x-distance from the mouse is less than 1, make the clip be equal to the mouse's position, otherwise move the clip towards the mouse by 1/3 of the distance between them. Thats basically all the code we need for our heroship movie clip. Now lets move on to the main enemy ship.

So draw an enemy ship, convert it to a movie clip and name it "greenenemy". Also open up the properties box and name the instance "greenenemy" also.

Open up the actions box of the greenenemy clip and type the following code in:

Code:

onClipEvent(load)
{    
  this.shotcounter=1; //counter for when shots will fire
  this.shot=1;    
}
onClipEvent(enterFrame)
{
    
    
       this.shotcounter++; 
       this._rotation = Math.atan2(_root["heroship"]._y - this._y, _root["heroship"]._x - this._x) * 180 / Math.PI;
       if(this.shotcounter%25==0)
       {
           _root.shipshot.duplicateMovieClip("shipshot"+this.shot,this.shot+1400,shipshot);
           _root["shipshot"+this.shot]._x=this._x;
           _root["shipshot"+this.shot]._y=this._y;
           this.shot++;
           if(this.shot>500)
           {
               this.shot=1;
           }
       }
    
    
}

So we have code in both the onClipEvent(load) and he onClipEvent(enterFrame) sections of the clip. The code in the load section of the clip simply sets shotcounter, the counter for the intervals which the enemy will shoot and the shot number(this.shot) to 1. The enterFrame section of the code has the code we really want to look at. First on each successive frame entry we will increment the shot counter by one. The next line of code makes it so the enemy always faces us and rotates to face us wherever we move. For this to work right, the enemy has to be situated correctly in the first place. Left-click on the enemy clip, hit edit. In the edit mode, center the enemy ship on the crosshair and orient it facing the right.

Now the Math.atan2 is a trigonometry function that takes the x and y distances of the ship to the enemy and calculates an angle to rotate the enemy ship.

The next line says that if the shotcounter divides evenly into 25, then the enemy ship will fire a shot. This means that every 25 frames(roughly 1.2 seconds at 20fps), the enemy ship will fire a bullet at you. We duplicate a bullet by using duplicateMovieClip and we place this new clip in the position of the enemy ship firing the bullet. We also increment the shot by 1 so the next shot that is fired will have a different name and depth. Flash does not permit two clips to have the same name or depth. Finally if this.shot is greater than 500, we set the shot to 1 to avoid taking up too much of a depth range and have it overlapping with other clips. Due to the movement and dynamics of the shot, there will never be 500 clips on the screen at a time. Now that we have an enemy that fires, lets take a look at the shot clip. Draw a dot for the shot clip, convert it into a Movie Clip, and call the MovieClip and the instance "shipshot". Now open the actions box for this clip and type in the following code:

Code:

onClipEvent(load)
{
    if(this._name=="shipshot")
    {
        this._visible=false;
    }
    else
    {
        this._visible=true;
    }
    this.xdis=this._x-_root["heroship"]._x;
    this.ydis=this._y-_root["heroship"]._y;
    this.totaldist=Math.sqrt(this.xdis*this.xdis+this.ydis*this.ydis);
    this.xspeed=(this.xdis/this.totaldist)*15;
    this.yspeed=(this.ydis/this.totaldist)*15;
}
onClipEvent(enterFrame)
{
    

    if(this._name<>"shipshot")
    {
    
       if(this.hitTest(_root["heroship"]))
       {
        this.removeMovieClip();
            }
        this._x-=this.xspeed;
        this._y-=this.yspeed;
        if(this._x>550||this._x<0||this._y>400||this._y<0)
        {
          this.removeMovieClip();
        }
    }
}

In the load event of this clip, we first say that if the clip's name is "shipshot" then we don't want the clip to be visible? Why? Because we don't want a random stray shot at the beginning of the scene. All of our shots are going to be duplicates of this clip so the original clip should never actually do anything. Next we calculate the X and Y distance of the shot from our heroship to get the trajectory of the shot.

First we get the separate X and Y distances but subtracting the x and y coordinates of the Heroship from the X and Y coordinates of the shot clip. Then we calculate the full distance by using the hypotenuse formula a^2=b^2+c^2 . Then we divide the x and y coordinates by the total distance to get the portion of the speed that should go to X and Y respectively. We multiply these X and Y values by 15 to get good speed on the shot. The enterFrame portion is very simple. We simply tell the shot clip to move by the speed we defined in the load section. Additionally we tell it to remove itself if it hits the heroship or if it goes out of the screen.

Thats it for this tutorial.

Source: iGuides.org Webmasters Talk