[CS3] Buttons

[met4tron]

Hi all

I have a row of buttons in a movie clip. does anyone know how to make it so that a square or something will follow the mouse along the buttons highlighting each one along the way? eg

home faq contact us gallery

when mouse is moved over home a square appears highlighting the whole thing but if you stay on the button movie and move over to faq the square moves along and highlights faq. hope this makes sense its hard to explain...

thanks

[whispers]

use the TWEEN CLASS to accomplish this...

here is an example: (all code in frame 1 in timeline) 3 buttons, 1 highlight_mc clip

//import the tween class os you can use it
import mx.transitions.Tween;

//create a tween function so you can re-use it

function highlightMe(targetClip, targetPos){
        var myTween:Tween = new Tween(targetClip, "_x", mx.transitions.easing.Strong.easeOut, targetClip._x, targetPos, .5, true);
        //var myTween:Tween = new Tween(targetClip, "_x", mx.transitions.easing.Elastic.easeOut, this._x, targetPos, .5, true);
}
    

home_btn.onRollOver = function(){
    highlightMe(highlight_mc, 132);
}

gallery_btn.onRollOver = function(){
    highlightMe(highlight_mc, 335);
}

contact_btn.onRollOver = function(){
    highlightMe(highlight_mc, 581);
} 

this is using AS2..you didnt specify what you are using.

[met4tron]

hey whispers... thanks so much for that you nailed it!

[met4tron]

hi whispers an anyone else looking at this post

thanks for the code. i was wondering if it was possible for when the mouse is not hovering over the button make your triangle for example disappear as when the mosue leaves the movie area on my webpage the triangle stays on the last position it was at. thanks again

[met4tron]

heres the code



//import the tween class os you can use it
import mx.transitions.Tween;

//create a tween function so you can re-use it

function highlightMe(targetClip, targetPos){
var myTween:Tween = new Tween(targetClip, "_x", mx.transitions.easing.Strong.easeOut, targetClip._x, targetPos, .5, true);
//var myTween:Tween = new Tween(targetClip, "_x", mx.transitions.easing.Elastic.easeOut, this._x, targetPos, .5, true);
}


home_btn.onRollOver = function(){
highlightMe(highlight_mc, 66);
}

faq_btn.onRollOver = function(){
highlightMe(highlight_mc, 195);
}

pricing_btn.onRollOver = function(){
highlightMe(highlight_mc, 324.5);
}

gallery_btn.onRollOver = function(){
highlightMe(highlight_mc, 454.5);
}

process_btn.onRollOver = function(){
highlightMe(highlight_mc, 584);
}

contact_btn.onRollOver = function(){
highlightMe(highlight_mc, 714.5);
}

[whispers]

well..you 'can' but Im not sure if this is the effect you'd want.. it looks kinda 'choppy' or something..

home_btn.onRollOver = function(){
    highlight_mc._visible = true;
    highlightMe(highlight_mc, 132);
}
home_btn.onRollOut = function(){
    highlight_mc._visible = false;
}
gallery_btn.onRollOver = function(){
    highlight_mc._visible = true;
    highlightMe(highlight_mc, 335);
}
gallery_btn.onRollOut = function(){
    highlight_mc._visible = false;
}
contact_btn.onRollOver = function(){
    highlight_mc._visible = true;
    highlightMe(highlight_mc, 581);
}
contact_btn.onRollOut = function(){
    highlight_mc._visible = false;
} 

[sportzguy933]

You could use the tween class to make the triangle fade out (by controlling the _alpha instead of _x or _y positions).

-Sportzguy933

[whispers]

lol... yeah that is another option as well..LOL

[met4tron]

cheers.. this menu bar is just a line of buttons on an html page. what i want is when the mouse leaves the flash movie the triangle disappears.. not individual rollouts for each button because like you said it looks jerky and kind of pointless cos i could just put a triangle in the over frame of each button to achieve a similar effect. is there anyway to define the area the mouse is in and if it leaves this area highlight_mc alphas to 0? the dimensions of the stage are 779x28. thanks again

[whispers]

I think using AS3 there is a new option to check if the mouse is on the stage...

but I do NOT think there is one in AS2.

[sportzguy933]

Why not just leave more space around the buttons so that Flash detects when the user rolls out?

-Sportzguy933