The front page All those lovely tutorials Other sites of interest More info about Stickman
Stickman

Mouse-following crosshairs

<IMG SRC="graphics/default.gif" WIDTH=210 HEIGHT=160 BORDER=0>

 TUTORIAL INFO 

Version Flash 3
Difficulty Intermediate

 DOWNLOAD 

ZIP

FLA

In response to a question on Flashpad and Flashzone, regarding an effect on www.i2f.org

Here's the .fla file in .zip form.

Huh?

Okay, here's the scoop...

There are four dovetail-shaped invisible buttons (ButtonUpFlip, ButtonDownFlip, ButtonLeftFlip, ButtonRightFlip) only they're movies. This is a techinque to achieve 'constant feedback' - with a normal button, On RollOver only triggers an action once. By placing that button in a movie where it is constantly flipping to a state where the mouse is alternately inside and outside the button, the On Rollover is constantly re-triggered.

So you've got your four buttons, and a very small gap at the centre where they meet. The buttons are in a movie clip (MovieButtonsLeftRight), in which they are moved from the left of the screen to the right, once (there's a stop action in the first frame to prevent the movie clip playing immediately). This movie clip is inside another movie clip MovieButtonsUpDown (and given the Instance name ButtonLeftRight) in which it moves once from the top of the screen to the bottom (again, there's a stop action in the first frame). This up/down movie is then placed on the stage, with the Instance name ButtonUpDown.

What do the buttons do? Let's take an example. Say you move the mouse to the right, until it's over the button ButtonRightFlip. There's an On Rollover action on this button, which uses Tell Target to make the movie clip instance /ButtonUpDown/ButtonLeftRight (the left/right movie is 'nested inside' the up/down movie) to go to the next frame -- in which the four buttons move to the right. If the mouse is back in the gap between the buttons, nothing else happens. If it's still over the 'move right' button, it goes to the next frame -- and this continues until either a) the mouse is back in the gap between the buttons or b) it moves over another button.

The other buttons work in much the same way - either going to the next frame or previous frame of the appropriate movie (of course, the 'up/down' buttons use Tell Target on /ButtonUpDown).

The crosshair (and flickering text movie clip, babble) is just placed on another layer in MovieLeftRight.

I still don't get it

Here's another version of the file, with the buttons coloured to make them visible:

<IMG SRC="graphics/default.gif" WIDTH=210 HEIGHT=160 BORDER=0>

If you still don't get it, well I suggest you look more closely at the .fla file. The stuff about 'nesting' movie clips isn't the easiest concept to grasp -- you might try checking out the Tell Target tutorial at Enetserve.

So that's how it's done. The i2f version is prettier of course and it moves faster - there are less frames in the left/right and up/down movement of the buttons, so each jump is bigger. However, I've found that reducing the number of frames can cause a weird sort of 'skipping' effect where the crosshair 'wobbles' back and forth if you have the mouse in certain positions. By increasing the number of frames you eliminate this, but I'm not sure why.

PS...

Some people have suggested it's done (on i2f) with rows and rows of buttons, like this:

<IMG SRC="graphics/default.gif" WIDTH=210 HEIGHT=160 BORDER=0>

If you compare the behaviour of this (check out the .fla file in zip format) and the original at i2f, you'll notice that on theirs, there's delay while the crosshair 'catches up' with the mouse (if you move the mouse quickly). In the above 'rows of buttons' example, there is no delay at all. Now compare the i2f version with the 'moving buttons' example. Notice the similarity?

I'm not saying the 'moving buttons' way is better, but the question was, "how is it done at i2f"?

Happy Flashing.

Stickman

All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.