This Flash tutorial is to show you how to make a turret(think a base defense game) point and shoot in the direction of your mouse. You simply move the mouse to turn the turret and click to shoot. To follow along in this tutorial, you can download the source files Here . Note that you must have flash 7 or greater to use this source file.
The finished product will look like this:
We will start with a blank document on a white background, standard 550*400 in size. First we will draw the turret base. After your done drawing it go to modify-->convert to symbol and convert it to a symbol of type move clip.
After this draw the actual cannon(its usually a long pipe with a barrel at the end). Also convert it to a movie clip and name it "gun". Select it and open the properties box. Under the dropdown box where it says "movie clip", there is a box indicating the instance name, put "gun" there also.
Now select the "gun" clip, right-click and hit "edit". This will bring you to the editing of the clip itself. Make sure the end of your turret that attaches to your turret base is the focus.
Now go back to the main movie and position your turret on top of your base where you like it.
Now you must draw the bullet to be fired. Usually this is just a ball or circle of some sort. Convert it also into a movie symbol and name it "shot". Then select it and in the box under thd dropdown box where it says "movie clip", put "shot" there too for the instance name.
Now its time for the actual code. Select the turret clip and open the actions box at the bottom.
onClipEvent(load) is what happens when the movie clip is first loaded.
OnClipEvent(enterFrame) is what happens on each successive frame entry(usually a game runs about 25-30 frames per second).
onClipEvent(mouseDown) is what happens when you click the mouse.
So when this turret first loads, it sets the original shot clip to false. We don't want a stray shot wondering places when the movie first loads so we make the shot invisible to start with.
onClipEvent(enterFrame) , this is the interesting part of the code. We have to use the trigonometry functions to determine the angle at which the mouse pointer is at in relation to the turret. We use the atan2 function which stands for ArcTan to do this. We take the ArcTan of the difference in y position with relation to the difference in x position and we get the radian measure of where the mouse pointer is in relation to our turret clip. Then we convert it to degrees by using the radian value, multiplying by 180 and dividing by PI. The next two lines of code are to detect the mouse's movement every frame. We want to detect how far x and y of the mouse has changed everyframe to keep track of the position better. Last of all, we set the _rotation proprety of the turret. Because of the focus we set we want it to be the rotation value(the degree measure of the mouse in relation to the turret) plus 90(the modifier because of the focus we set). A movie clip rotates when its _rotation property is changed.
OnClipEvent(mouseDown) is what happens when we click the mouse. In this case, we want it to fire a shot. We use the duplicateMovieClip() function in order to duplicate a shot. Since all clips need a different name, we set the name equal to shot plus a "shotcount" value which we set in the load event. We set the visibility of the new created shot to be true so it can be seen. We increment the shotcount so the next shot will have a different name and depth. We set shotcount equal to 1 if it gets greater than 100, because even at the fastest rate of fire, there won't be a chance of 100 shots on the screen at the same time and we do not want to take up too great of a range so it doesn't interfere with other movie clips.
Now that we've fired the shot. We need it to actually do something(like move) so select your shot movie clip, open up the actions box and type this code in:
On the load event of this clip we check if the name of this clip equals the original shot or not. We only want it to display if it is not the original shot.
We set the intial x and y position of the bullet to those of the turret so it will look like the shot is coming from the turret. Now, to make the bullet move in the direction of the turret, we need to define its x and y speeds. 40 is simply a modifier of how fast we want the shot to move. You can increase or decrease depending on what you want the speed of your bullet to be. The x speed is the sin of the degree measure of rotation of the turret while y is the cosine value. What this means is the the Math.sin produces the horizontal vector of the speed and Math.cos produces the vertical vector of the speed.
In the enterFrame event of the clip, we increment the x position by the x speed and the y position by the y speed. The next checks are just to check if the shot has moved off the stage or not. If it has, it removes itself from the movie.
