Over the next few days let’s take a look at mousetracking in actionscript. My task was to make a movieclip ‘point’ to the location of the mouse. The primary problem, as scripters will be aware is that as soon as the mouse tracks away from the bounds of the flash movie, the position of the mouse can no longer be tracked. One way to get around this is javascript, which can communicate the position of the mouse to Flash. Another is to use an invisible movieclip which overlays as much of the browser or screen as possible. In anycase, as soon as this issue is addressed there is a bit of maths involved to work out where the movieclip would point. I shall look at this tomorrow.

Today, let’s look at how to get a movieclip to point towards the mouse from a fixed location. This is a lot easier when tracking in one direction. For example, on my site, the TV is able to track the horizontal (x) coordinates of the mouse separate to the vertical (y) coordinates. All that happens is that one movieclip is nested in the other, both have a timeline, and the actionscript calculates a frame proportional to the position of the mouse for both movieclips respectively.

In a more recent project, it was an flv video that needed to track the mouse. Therefore, both x and y had to be tracked simultaneously. To achieve this it became necessary to establish the orientation, or angle of the mouse pointer in relation to the target. If we were to draw an imaginary triangle we can calculate the angle.

The three points to use are the mouse position, the target’s position and the point where the x value of the mouse hits the y value of the target, forming a right angle triangle. We can then establish the length of the adjacent and opposite sides of this triangle and use trigonometry to calculate the angle. In actionscript, inverse tan can be achieved with Math.atan(opposite/adjacent); After this, a little tinkering around is necessary. The result is in radians and needs to be converted to degrees.

Then the position on the timeline has to be worked out using a formula like this: Math.round((360/number of frames) * result). A final sprig of easing is the final touch for a very cool effect.