9 Replies Latest reply on May 8, 2009 12:59 PM by esco1313

    smooth scrolling...

    esco1313 Level 1

      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?

        • 1. Re: smooth scrolling...
          kglad Adobe Community Professional & MVP

          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.

          • 2. Re: smooth scrolling...
            esco1313 Level 1

            ok seems logic!

             

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

             

            i'm not a genius in AS

            • 3. Re: smooth scrolling...
              kglad Adobe Community Professional & MVP

              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.

              • 4. Re: smooth scrolling...
                clbeech Level 3

                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});

                • 5. Re: smooth scrolling...
                  esco1313 Level 1

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

                   

                  esco1313@hotmail.com

                   

                  much apreciated!!!!

                  • 6. Re: smooth scrolling...
                    esco1313 Level 1

                    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...

                     

                    ??

                    • 7. Re: smooth scrolling...
                      esco1313 Level 1

                      do i need to write the code for EACH button? And does that mean that they wont be on the scene? ..hum.. am i getting lost?:P

                      • 8. Re: smooth scrolling...
                        clbeech Level 3

                        LOL!   yeah this file works by propagating the instances dynamically via the FOR loop in the code, that loop also assigns the onRollOver handler to each instance of the 'item' - but in this case I've used MCs as buttons.  I've also included the 'highlight' dynamically - so this is why there is nothing on the stage when you view the file - the symbols are in the Library but are constructed at runtime.  one can certainly place the symbols on the stage and then assign instance names and handlers to each - i did it this way for speed and efficiency in producing this demo.

                         

                        to make 'individual' button instances that are placed on the stage, create a 'box' that has a fill with alpha of 0 - in this way the entire button area is used as the 'hit' area - in this case the button size is 200x20 - then it has a simple static textfiled on the top (well i actually broke the text into a shape so that the field wasn't beyond the size of the 'box')  you could make a symbol for each button and place them in this way, then you 'would' need to assign the onRollOver handler to each individually - similar to what you find in the FOR loop, where the Tween is triggered by the handler - in this case you would not need to use the attachMovie statement (this is what brings the instance to the stage)  you could also 'set' the highlight 'above' the mc - but this will also depend on how this is 'viewed' or placed within your file - you may need to mask the clip that contains the sub menu buttons in order to show only the menu as you want it seen.

                         

                        the important thing to get from this demo is that the Tween uses the _y position of the 'button' instance to position the 'highlight' as kglad had mentioned previously - so you tween the highlight from it 'current' position to the position of the 'button'.

                        • 9. Re: smooth scrolling...
                          esco1313 Level 1

                          i sent you an email ClBeech