5 Replies Latest reply on May 31, 2009 6:36 PM by SuperJAG

    how would i achieve this?

    esco1313

      Hey!

       

      Take a look at this site:

       

      http://www.unouplus.com/

       

      As you can see, depending on which menu item you choose, the menu moves to leave space for the content (if your resolution isnt very BIG).

      i'd like to know how i could achieve that...maybe a hint on what to look for?

       

      thanks!

       

      EDIT: if you resize the browser, you can exactly see what i'm talking about. I already did a website with the auto resize liquid layout, but i think thats diferent since it resizes depending on the menu item you choose...

        • 1. Re: how would i achieve this?
          SuperJAG Level 1

          There's not really any "secret" to the ever-moving menus on this site. They've obviusly got something like this happening in their on-release event for the menu buttons:

           

          slideMenuTo(100, 340);

          gotoAndPlay("frameLabel");

           

          There's nothing special about the slideMenuTo() command, its just something I made up. There are lots of ways to create a slideMenuTo() function, here's one I wrote:

           

          _global.slideMenuTo = function(x, y) {
              finalX = x;
              finalY = y;
          }
          onEnterFrame = function () {
              _root.menuContainer._x += (finalX - _root.menuContainer._x) / 10;
              _root.menuContainer._y += (finalY - _root.menuContainer._y) / 10;
          }

           

          To use this code, put it anywhere in your movie that will cause the onEnterFrame() event to fire each frame. Then put your entire menu inside a MovieClip symbol and place it on the main timeline, and give it the instance name menuContainer.

           

          You can then use the on-release code above to move the menu to any part of the screen depending on which button is pressed.

          1 person found this helpful
          • 2. Re: how would i achieve this?
            esco1313 Level 1

            Thanks i will certainly try this. it makes a lot of sense!

            • 3. Re: how would i achieve this?
              esco1313 Level 1

              i tried it, and it works. However i'd like to change the easing.. how would i do that?

               

              P.s.: on the website i've shown earlier, i doubt they use a similar method, because if you resize your browser window for a bigger size, sometimes the menu isnt animated. i guess it depends on where the contents are depending on the menu's position...

              • 4. Re: how would i achieve this?
                Ned Murphy Adobe Community Professional & MVP

                You can try adjusting the 10 to another value.  You can also use coded tweens instead which have different easing styles available.

                • 5. Re: how would i achieve this?
                  SuperJAG Level 1

                  Yes, Ned Murphy beat me to it.

                   

                  To adjust the behavior based on screen resolution, you can use Stage.height and Stage.width to detect the current size of the movie.

                   

                  EDIT: And your right, the site you linked to has a little bit more happening than the stuff in the code I posted.