In this tutorial, I'm going to show you how to program the tank rifle so that it changes its rotation according to where your mouse is. It's good to know the little piece of code that makes the effect possible since it comes in really handy in many kinds of Flash applications, mostly in games, but not only. For instance, I saw an example of this code "in action" on one Flash website on which there was an object that kept turning towards my mouse.
Anyway, to achieve this effect, I'm not going to need to use Sine or Cosine. Rather, I'm going to go a much simplier way using atan2 function. To evaluate an angle using this function, you only need to provide Flash with y and x coordinates. After that, Flash will compute and return the angle, measured in radians. Our job then will be only to convert these radians to degrees. Alright, why not have a look at how the atan2 function looks before we start?
- atan2(y:Number, x:Number) : Number
As you can see, it's super short and easy. The important thing to remember about it is that the first parameter is always the y coordinate - not x.
And, of course, below is the finished effect. As I've mentioned, you will most likely use this code for your games, that's why the below effect is in fact a little game in which you can control the tanks barrel. The rest of the tank is static. Well, I hope to change that in one of my future tutorials. :-)
Here is how to create the above effect:
i. First off, create a new Flash document. The dimensions do not matter, you can set them to whatever you what, except that it's usually a good idea to make the width bigger than height.
ii. Draw tank barrel and convert it to a Movieclip (F8).
Also, draw the rest of the tank and convert it to a symbol. I won't get into details as to how to draw these elements. If you're interested in learning to draw in Flash, you should definitely see some of these great tutorials.
iii. Now, select the barrel and press F9 to open your Actionscript window. Copy and paste the following code there:
- onClipEvent (enterFrame) {
- radians = Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x);
- degrees = (radians/Math.PI)*180;
- this._rotation = degrees;
- }
Even though the code itself isn't that difficult, I'm going to try and do my best to explain it if something is unclear to you.
Explanation of the code
- onClipEvent (enterFrame) {
We begin with a onClipEvent handler. The handler executes the code between its opening and closing curly brackets every frame.
- radians = Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x);
In the first line, we equate the variable radians to that long code on the right side of the equation. Well, what this code does is in fact evaluate the angle between the mouse and tank barrel measured in radians. As you can see, we substract the y and x coordinate of the mouse from the y and x coordinate of the barrel. We're doing that because the function acos2 requires the difference between these two coordinates to evaluate the angle, in radians.
Here's picture that illustrates how it works.
In the above case, the angle measured in radians will be equal to approx. 0.92.
- degrees = (radians/Math.PI)*180;
Now, it's time to convert radians to degrees. The code isn't that difficult - actually, I'm sure some of you know it by heart.
Using this piece of code, we can easily evaluate the angle measured in degrees in the above picture we've discussed. Just type 0.92 in the place of radians.
My output window says that it is roughly 53 degrees.
- this._rotation = degrees;
- }
And, finally, we set the rotation of the barrel. We can do that simply by assigning the rotation property of the barrel to the variable degrees.
Alright, looks like this is it. I hope you've enjoyed this tutorial and found the information useful.
Have a nice day,
Cheers
