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

written by Surendar , September 08, 2008

I am Surendar. Thank you for Your Help.
I(We) need Script based world clocks. But Don't draw in any object in flash work space.

written by suvarna , November 14, 2008

Hi!
when i use code i get errer

written by patilujjwala , December 03, 2008

more about the script give detals it

written by desingurajan , February 20, 2009

hi i cloud not understand this action and how to start?

written by desingurajan , February 20, 2009

hi! am work in flash designer,but i don't no action script,so,i want basic action script yeah!please help me.

written by aerg , August 18, 2009

People can consistently write such stupid comments!

written by Tutorials99 , May 26, 2010

Just brilliant. Awesome tutorial. keep it up
i found another site having Fantastic Page Rank Professional tutorials
see link below

tutorials99

written by letuhanh , June 04, 2010

Good

written by Bridget Coody , June 07, 2010

hey Tutorials99---it obviously did not show the link. I would love to know the link. I learn much more from internet than school. Will you please email me.

This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
bridgetparks at gmail

written by Bridget Coody , June 07, 2010

never mind--it worked now

written by ghd , July 26, 2010

hi i cloud not understand this action and how to start?

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (12)