Archive for September, 2007

Tracking the mouse outside Flash

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.

Tracking the mouse outside Flash part II

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.

Creating scrollbars

Creating scrollbars is simple, right? Well, building one from scratch requires some head scratching and a feeling of deja vu. The best advise is to do it once and never again. However, in a recent project, the graphics for the scrollbar were quite unique and didn’t easily fit into any prebuilt component. The thumb track was a fixed size and the gutter was a little bit…well… bendy.

The key thing in a scrollbar is to work out the ratio that is needed to move the target movieclip (which typically would sit underneath a mask with the same bounds of the scrollbox). This needs to account for the size of the scrollbox. When the thumb track is at the top of the box, we want the position to be relative to the top of the movieclip. However, when the thumb track is at the bottom of the scrollbox, we want it to be relative to the foot of the movieclip. So some maths is involved which I will run through tomorrow.