Making a Movieclip face another Movieclip or point on the stage

In this tutorial you will learn how to make a Movieclip face another Movieclip or point on the stage.

1) First open Flash and draw your objects

I have used a simple arrow and circle though if you are feeling creative draw something else. Though make sure your first object faces UPWARDS! Once you have done so convert them both into MC's (by selecting them and pressing F8). Call the arrow "arrow" and the circle "circle". Make sure to give them the instance name of arrow and circle as well.

2) Now let's make the arrow face the circle

For this we are going to use some mathematical trigonometry. If you can't be bothered with how it works skip to part 3. Trigonometry is triangle maths; we can use it to find lengths and angles in a triangle. But where is our triangle you might ask? well let’s look at what we have:

We have two objects and their coordinates. Using the x point of one and the y of the other we can find the 3 points of the triangle AND use these points to find the length of the two straight sides! These sides are called the Opposite and the Adjacent. In trigonometry we know that Opposite/Adjacent = Tangent. Using this we know that Atan (opposite/Adjacent) = angle. The picture below shows this:

Now we know the angle INSIDE the triangle all we have to do to find the angle OUTSIDE the triangle is to do 90 – the inside angle. Now let’s look at how to use this in flash:

3) Click on the frame and type in this code:

this.onEnterFrame = function() {
o = _root.arrow._y-_root.circle._y;
a = _root.circle._x-_root.arrow._x;
if (_root.arrow._x<_root.circle._x) {
_root.arrow._rotation = (90-(Math.atan(o/a)/(Math.PI/180)));
} else {
_root.arrow._rotation = -(90+(Math.atan(o/a)/(Math.PI/180)));
}
};
_root.circle.onPress = function() {
startDrag(_root.circle, true);
};
circle.onRelease = circle.onReleaseOutside=function () {
stopDrag();
};

The onPress and onRelase functions make the circle dragable. The signs are flipped around if the triangle goes negative (this is when the circles x axis is less) and the reason we divide by (PI/180) is because flash has been working in something called radians. And if you divide radians by (PI/180) you get degrees, which is what you want.

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by mazhar , July 26, 2008

thanx for help me

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (1)