Making a MovieClip Face the Cursor
In this tutorial you will learn how to make a movieclip face the cursor with some simple trigonometry. I am expecting you already know some trig and some Actionscript, but if you dont I will quickly give you some examples.
This is what you will end up with when you finish.
That is just a basic triangle, but you should get used to it because you use it for nearly every thing in trig (unless you want to get advanced).
You will have noticed that I have placed letters around the sides. Well they all stand for something.
H = Hypotenuse - The longest side on the triangle.
O = Opposite - The side opposite to the angle. (Not the right angle).
A = Adjacent - The side adjacent the the angle.
You will also notice there is a symbol inside the angle (θ). That is theeta, it is a letter out of the Greek alphabet. I will use it for the angles.
Now, the most important thing you need to know is SOH CAH TOA. Think about it all day until it is permanently stuck in your brain. But what is that supposed to mean? sine-opposite-hypotenuse cosine-adjacent-hypotenuse tangent-opposite-adjacent. I know, it looks like a lot but you can find out more about it from here: http://en.wikipedia.org/wiki/SOH_CAH_TOA
Now that we have that out of the way, open a new flash document and set the Frame Rate to 30.
Make what you want to face the cursor, and make a MC.
Make sure its registration point is set to the center and that it is facing the right. Give it an instance name of “man”.
Now place this code on the frame
degrees = radians*(180/Math.PI);
return degrees;
}
man.onEnterFrame = function() {
var adjacent:Number = this._x-_xmouse;
var opposite:Number = this._y-_ymouse;
var angle:Number = Math.atan2(opposite, adjacent);
this._rotation = convert(angle);
};
I know I usually tell you to put the code on the MC, but because of Flash 9 coming out soon, I have chosen to get you used to it and ready for AS3.
degrees = radians*(180/Math.PI);
return degrees;
}
All that is is a function that converts an angle from radians to degrees, since flash uses radians but the _rotation property is in degrees. Dont ask me why they did that. The function has one parameter, then outputs the result.
var adjacent:Number = this._x-_xmouse;
var opposite:Number = this._y-_ymouse;
var angle:Number = Math.atan2(opposite, adjacent);
this._rotation = convert(angle);
};
Although this code probably looks confusing to a lot of you, it is actually quite simple. The first line is exactly the same as if I put onClipEvent(enterframe){ on the man MC. So why do it on the frame? Well imagine if you had 20 MC’s on the stage, each with a seperate block of actionscript. It would be hard to fix the bugs in the code. But if it is all on the frame it is alot easier and organised. Adobe have made you do this in AS3, no more code on MCs or buttons.
The next three lines are declaring variables, which are what we learnt about at the start.
The first variable is the adjacent, the second is the opposite and the third is theeta/angle.
The next line is just making the MCs rotation the same as the angle we figured out, but it is using the convert function we made so it isnt in radians. Otherwise it wouldnt work.
Now you know how to make an MC face the cursor 
Loading ...
nice tute… also taught me some trig ( although i hate trig)
Will we be able to upgrade to flash 9 from 8 for a smaller price?
is that vista, or just flash 9? and ya, can u make a part two of how to make things shoot towards your point, cause its a pain in the ass from other sites…. u kik ass
Thats easy, just make whatever u want to shoot a button. When the player moves the mouse over it, the character obvisouly points towards it.
@Bob: I think that is usually how it works.
Big al: Its windows XP, flash 8. I just have a visual style.
Hey Awesty,
The tutorial’s great but i just need to say this NOOOOOO I HATE YOU WHEN YOU MADE THIS TUTORIAL!!! I SPENT MY WEEKEND ON THE INTERNET TRYING TO FIND SOMETHING LIKE THIS NOW I SHOW UP TO DAY AND YOU MADE IT!!!!!! AHHHHHHH!!!! I WASTED MY WEEKEND NOOOOOOOOO!!!!!! Okay but it’s not your fault good work.
Okay now that that is out of the way (im sorry if i offended you in any way just takin a stab at humour) However, I need some help how do i say
when this is on frame 7 mouseDown wont work
(hope that makes sence)
Haha im not offended
It is pretty hard to offend me.
Try using onRealse or onPress. Otherwise, if you use mouseDown or something you have to use listeners, which makes it a bit more complicated and I dont really feel like getting into it right now.
never understood the trig thingy… but it still works
okay, when this is on frame 7 pressing doesn’t work
(same thing)
okay heres wut i was doing (to kill orange monster shoot it in the eyeball the eyeball is in its mouth he will jump up and attack you) (to kill the green monster shoot its green like boil)(and the hole is just random) If you notice the reloading on the gun doesn’t work you can keep clicking even though it is reloading thats wut i need help with. http://www.swfup.com/swf-view.php?id=6618
hmm… im not such of a good flash actionscripter but… i think this will work (just a quese)… try putting that on an
if(_root.my_bullet_mc (GREATERTHAN) 0){
}
statment
or something like that
okay i fixted the problem http://www.swfup.com/swf-view.php?id=6788
this ones a bit better.
Press X to reload
And awesty to let you know you put a wrong link to your one in tutorials cause it takes you to draw movieclip in actionscript.
Hey Awesty,
I just read your TUT i was so involved working with my other gun game. But wow i do not even get a clue wut all this actionscript means i hate actionscript on frames cause i dont have a clue.
hi byrce, i looked at your game. It’s alright. Theres a bug though - they die if you don’t shoot them, and if you shoot them or not you get the same ammount of health taken off each time, and nothing really happens when you shoot them. I’m working on a first person shooter but i don’t know when it will be out, but i’ll tell you when ive finished it and you can learn a bit from it.(I had the same problem when i started making them)
HEY I CAN’T BELIEVE I FOUND OUT ALIEN HOMINID WAS MADE BY A GUY ON NEWGROUNDS! HOW COULD HE MAKE IT A CONSOLE GAME? DID SONY AND XBOX ASK HIM OR SOMETHING………?
dude, how do u embed flash into wordpress.
Heh Dude Alien Himinid was made by the guy who CREATED New Grounds.
RDB2007 There is no glitch ur just shooting them wrong…. lol
oops sorry, i just releaised you had to shoot them in the eye lol. Btw how do you get the gun effect? When you move the mouse the tip of the gun only moves sideways
kool. But still, how can he make a flash game into a console game?
ha RDB2007 it’s pretty simple really. Took me along time to figure out though. On your cursor make a gunshot animation on it and put this code on it
onClipEvent (load) {
startDrag(”", true);
Mouse.hide();
}
onClipEvent (enterFrame) {
_root.gun._x = _root.aim._x;
}
//see easy
@Bryce K
Thanks, didn’t really think about that.
Hi, i have a problem Awesty.
On my flash movies sometimes it stops playing, and i have to right click and play, ive had this problem for a while now and won’t go away. I submitted the project i was working on on newgrounds. The preloader wouldn’t work, and people had to right click and play just like i did. Is there a problem with my project or something? Whats puzzling me is its managing to effect other people’s computer whos watching my bugged animation. Any help here?
Thanks.
theres an error, when i put the cursor down, the mc will face up, etc. it moves the opposite way of my cursor.
@no1jock
Maby you draw the man_mc looking left… it should look right when you draw it
i think…
@Bryce: Well, you should get used to putting AS on frame because it is compulsory for AS 3.
@dragonguy: Tom Fulp, the creator of newgrounds, created alien hominid in flash with another guy. The other guy knew someone who worked in the game industry who loved the game and offered to them if they would like to put it onto playstation/xbox etc… or something along those lines
@no1jock: Make sure you drew your MC facing right. Not drew it facing left or up and then rotated the MC to face right.
@RBD2007: Could you please give me a link or something so I can have a look and try and find the problem?
Would it help if i sent you the fla file? It is kinda messy at the momment though, with a few glitches because of the play error.
well AS3 just f0cked my style…usually i have an “engine” movieclip, makes things easier to visualize.
dammit adobe.
anyway, this is useful as hell and it’s well appreciated. :3
i dont get how to paste the code in
whenever it is an actionscript code i get an error message help
@RBD07: Yes.
@redfeatherraven: Yea, I took a while to get used to coding on the frame, but it is so much easier then clicking all over the stage. Now alot of the time I dont even have any MC’s on the stage, I just attach them all through AS so all I have to worry about is that one frame.
@akskater100: When you post the code in some # might show up so get rid of them.
Otherwise just type the code into flash.
hello,
i did your tut. and made a nice bee wich follow the mouse. thank you.
and now, i would like the MC replace the cursor.
then, when the mouse go to right or left, the bee seems to go in the same direction…
i tried to put a startDrag on the clip, but it cancel the action of your code…
do you have an idea to make it works?
thank you
(i have flash mx2004, soon flash8)
(i’m from france, that’s why, my strange english…)
You could hide the cursor, with mouse.hide();
I pasted the code and made exactly what you told. my man moves but it looks to the opposite direction of the cursor. he looks left when cursor is on the right
its funny lol.. thanks
i am makng a shooting game
so how would you make it shoot in the direction of the gun
(the movieclip facing the cursor)
I will try and make a tutorial for that soon.
Have I just done something wrong or does this not work on Flash for Pocket PC… think its flash 7. I get errors about the { and } signs.
I have never tried it on a pocket PC but I think you need to use AS Lite, which is not what I used in this tutorial.
Thanks Awesty I’ll mention you and this code in the credits.