website promotion banner
Free Stock Images
  • Create A Free Account
  • Download High-Res Stock Images For Free
  • +5 Million Images
Your Ad Here
Flash & Swish  Home Flash & Swish Flash Tutorials Horizontal Follower
rss

Horizontal Follower

Author: FlashSandbox More by this author


First, decide how big you want the clickable area to be. My stage is 300x100. I set the frame rate to 24, but you can set it to anything that makes you feel sexy.

Next, create a movie clip that will 'seek' the mouse. Mine is a rectangle with a little arrow pointing down. This can be any shape but keep the size small or else it'll be overwhelming. Add it to the stage somewhere off to the left or the right but make the y coordinate where you want it to be. I put mine at y=45.

Finally, you need to add the code. Open the actions for your movie clip and add the following code: onClipEvent(enterFrame){

    //speed of the slider (higher number is a slower slide)
    rate=6;
    //move towards the target
    if ( Math.abs( target - _x) < 1 ) {
        _x = target;
    } else {
        _x -= (_x-target) / rate;
    }
}
onClipEvent(mouseDown){
    target=_root._xmouse;
}

Test your movie and click anywhere on the stage. Your movieclip should slide into position like magic.

This is what mine looks like (I've added a marker so you can see where you've clicked):

Source .fla (Flash 8 format)

Here's a breakdown of what the code does:

onClipEvent(enterFrame){

This line makes the code in the {} run every frame.

    //speed of the slider (higher number is a slower slide)
    rate=6;
    //move towards the target
    if ( Math.abs( target - _x) < 1 ) {
        _x = target;
    } else {
        _x -= (_x-target) / rate;
    }

In english, this is what happens:

If the current x coordinate of the slider minus the target coordinate is between -1 and 1 then set the slider's x coordinate to the target, otherwise, set the slider's x coordinate to it's current position minus 1/rate of the different between where it is and where it's going. By making the rate variable smaller, the slider will move more quickly to it's target.

onClipEvent(mouseDown){
    target=_root._xmouse;
}

This code executes whenever the user clicks and sets the target x coordinate for the slider.

Here's the effect when a user clicks on a button:

Source .fla (Flash 8 format)

In order to make the slider point at the the button, when each button is clicked, it sets the slider's target variable to the button's center, and then the slider will automatically move to it's new target.



Author's URL: flashsandbox.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Horizontal Follower"