Skip to main content
May 8, 2009
Question

smooth scrolling...

  • May 8, 2009
  • 2 replies
  • 1053 views

I'd like to create a smooth "mouseover" effect that "snaps" on to the submenu button when you go over it...

Here's an example:

http://www.morganshotel.com

How would i be able to get to this?

This topic has been closed for replies.

2 replies

clbeech
Inspiring
May 8, 2009

to do something like this you would want to use the Tween class and on rollover of each menu item, tween the highlighter to the position of the item.  here's a demo file

edit: sorry kg - had this up for awhile while away - LOL didn't think anyone had posted yet

note:  was also trying to post the FLA file here for you - but it wont accept it; so here is the code in the file:

import mx.transitions.Tween;
import mx.transitions.easing.*;

//construct menu items
for(var i=0; i<10; i++) {
    attachMovie('Item', 'item'+i, i, {_y:(i * 20)});
    this['item'+i].onRollOver = function() {
        new Tween(hlt, '_y', Strong.easeOut, hlt._y, this._y, 10, false);
    }
}

//construct highlight
attachMovie('Highlight', 'hlt', 20, {_y:-20});

May 8, 2009

thanks!! thats exactly what i want!! do you think you could send me the fla by email instead??

esco1313@hotmail.com

much apreciated!!!!

May 8, 2009

Thanks!! i got the email!one thing though.... this might be funny and stupid, but... is it normal that NOTHING is ON the scene?? (and yet, working??) i mean...the 2 movieclips...

??

kglad
Community Expert
Community Expert
May 8, 2009

the mouseover (of the main menu items) at that link starts a loop that animates the _y,_width and _height properties of a white box movieclip.  mouse does the same (with different _y,_width and _height properties).  that would be about one additional (to a rollover/rollout) line of code using a tweening class.

May 8, 2009

ok seems logic!

...any idea on how to do that?:(

i'm not a genius in AS

kglad
Community Expert
Community Expert
May 8, 2009

with tweenlite it would be something like:

startY=boxMC._y;

startW=boxMC._width;

startH=boxMC._height;

menuitem1.onRollOver=function(){

gs.TweenLite.to(boxMC,1,{_y:this._y,_width:this._width,_height:this._height});  // or you might want to use a fixed width instead of this._width

}

menuitem1.onRollOut=function(){

gs.TweenLite.to(boxMC,1,{_y:startY,_width:startW,_height:startH});

}

// similiarly with the other menu items.