I want to have a character on my new Flash based site be able to follow where the mouse is and have it so he is always looking in the direction of the mouse. I figured the best way is to have a bunch of frames of him looking in various directions and have the frames change according to where the mouse is at. Problem is I don’t know what Actionscripting would accomplish the task at hand.
Any help is much appreciated.
Even if you don’t spell it out with all the Actionscripting, if you could just tell me what functions to use that would be awesome. Although the more info you give the happier I’ll be.
The thing is, I don’t want anything to actually follow the mouse. I want it to look like the character in the lower left is watching where your mouse goes (his head will turn and look up or down depending on where the mouse is). I figured there had to be a way to have Flash figure out where on the stage the mouse was and in turn I could use that info to then tell the MovieClip what frame to be on so it looks like the character is looking in the direction of the mouse.
Understand what I’m trying to do?
Here are VERY simple drawings of what I’m trying to accomplish:
Basically I will have a bunch of frames in a MovieClip with the head of the character looking in a bunch of different directions and I need the frame to change according to where the mouse is so it looks like the character is watching the mouse as it moves around the website. Maybe like 12 different frames or so.
BTW, please noone look at those drawings in anyway other than to illustrate my point quickly. I’m embarassed to even post those because they are so far below my artist ability, but there is really no point in spending time making it pretty since I’m just trying to illustrate my idea to get help with it.
Problem is I’m not really hitting anything for it to test. I want it to change the movieclips frames by where the mouse is, not just if I’m over a button or something. I want him to be able to move his head around smoothly and if I do it by buttons on the stage he will snap from looking one direction to looking at the buttons, which isn’t really what I was looking for. If there is a way to use hittest w/o actually having to “hit” a movieclip or object then please explain.
Wow, thats complicated. :puzzle: I’m a complete “newbie” to Actionscripting and don’t understand most of that example. There isn’t a bit easier way than this?
Wow, thanks Adam! Can you explain what each part of that code does so I understand how its working? I notice it only works on the X axis…whys that? Any way to add the Y also? I want him to be able to watch the mouse cursor as it moves around.
I hate to just copy and paste code and not understand what its really doing.
is there any way you can upload the pics you have of the guy turning his head?..or if they are private, you can email them to me…I’ll see what I can do with them and send you the file with a full explanation.
[edit]though maybe not, actually. I thought you just wanted the eyes to follow. but once you have the angle, the rest shouldn’t be that hard with some if statements[/edit]
I’m actually in the process of 3D modeling the characters head right now. I could render out some frames for you if that would help…I’ll email them when I have some. I’d rather keep it private for now. Once the site is done everyone can see it. These pics I send will certainly not be the final frames though…I want this to be perfect. Really I can just replace what you have already done with my frames…I would just love an explanation of what each part means. like the _root part and the dif part.
function () { newx = _root._xmouse;_root.dif = Math.round(newx/500*10);_root.faceGuy.gotoAndStop(_root.dif);}
I already figured out the 500 is the width of the stage and the faceGuy is the name of the movieclip. And of course I know what the gotoAndStop part is for (controlling the movieclip). I’m not completely understanding the math behind the newx/500*10 part though. I get that the 10 is how many frames there are in the movieclip. Any explanations on the code would be awesome.
Thanks,
Shaun
ps. Sorry if I’m asking some dumb questions, I’m and artist, not a programmer. I just want my new website to be really cool and this is one of those things I wanted to get working.
didn’t look at adam’s file… probably should have though.
…
_root.onEnterFrame = function() {
//pretty self explanatory there... ball is the animated clip
ballX = ball._x;
ballY = ball._y;
mouseX = _root._xmouse;
mouseY = _root._ymouse;
/*figuring out the coordinates of a rectangle triangle whose hypothenuse is the line between your animation (my instance "ball") and the mouse*/
//length (absolute numbers, so that it's always positive)
line1 = Math.abs(mouseX-ballX);
//height
line2 = Math.abs(mouseY-ballY);
/*hypothenuse (not really necessary if you've listened in trig class, but still... that's what I'll be using here...*/
hypo = Math.sqrt((line1*line1)+(line2*line2));
//defining the small ANGLE of the triangle (the one that starts at the ball).
/*note: all angles are in RADIAN in any prog script. We'll convert that later on */
angle = Math.acos(line1/hypo);
//converting from radian to degrees
real_angle = (180*angle)/Math.PI;
trace(real_angle);
};
There you go. Now you have the angle. Let’s now say your animation is 90 frames long, depending on the angle of the imaginary rect between the mouse and the animated ball… It should click right into place.
Pomme, thanks for the help, but that is WAAAY over my head. Its been over 8 years since I took trig and I have forgotten every bit of it (got A’s and B’s in math too hehe).
Adams code is only like one line and is exactly what I was looking for. I just need an explanation of the code so I UNDERSTAND it, not just copy and pasting it. I want to learn Actionscripting and simply copying and pasting will do me no good in the long run. Man I should have paid more attention in Math!! :banghead:
1.makes it onEnterFrame so it continually updates
2. creates variable newx and sets it to the mouse’s x position
3. _root.dif is another variable that is set and it is set at Math.round(newx/500*10)…this basically means 500, which is the distance we want to track the mouse’s x position, divide it by 10, which is how many frames are in the faceGuy movieclip and then apply Math.round - get a round number instead of decimals…so as the mouse moves from 0-50, we divide it by 500(the total area to cover with the mouse) which gives us 0.1 and then we times it by 10 which gives us 1 - remember this number as _root.dif
4. we tell _root.faceGuy to go to “_root.dif” which is set at one, but if we move the mouse more to the right, _root.dif will increase to 2 and then 3 until it reaches 10.
Thanks for the explanation Adam, much appreciated. Is there a way to add the y into the equation somehow so it doesn’t just react to the mouses X position.
