Expanding and Contracting Animated Menu In Flex

One thing that you can do is create a Menu using the mx:Menu tag or the Menu() class in flex. It's very nice, and convenient, and I have a couple blog entries on how to use the menu, that I've linked in at the bottom.

VIEW EXAMPLE - SOURCE

But what about when you want to conserve space, and you want your menu to just hover over everything else, but you don't want the same look and feel of the regular Menu Class?

The First thing you need to understand is the Timer Class... the timer class is a fantastic class. You can set repeat counts, delay it, you can find out the current Count... you can do allllll sorts of stuff with the Timer class...

Everything you need to know about the timer class is on live docs... CLICK HERE FOR LIVEDOCS

There are far far too many steps that I would have to write about in writing a tutorial for creating a menu, so i'm just giving you the source, and I'm going to let you go through it. but some of the important things I learned in this were that, you can't focus your mouse events on the menu, you have to focus them on your application. You need a couple of events in your application tag, rollOut, and rollOver, I use those events to tell what object in the application I'm rolling over. To find out what you are rolling over, you can trace(event.target) on those events... rollOut="trace(event.target)" this will tell you what the objects in your application are... I found my ROOT object which happens to be called 'animatedMenu0' in this example application. I can now determine what to do with my timers, and create more logical events in my application...

I created four instances of the sequence class, and they are all the animation I need.

• initMenuMoveOn
• initMenuMoveOff
• initContentMoveOn
• initContentMoveOff

Each one of these will animate the targets they are bound to.

Conserve Space

How do we do that?

One answer, is to overlay your menu on top of your content and to make it disappear when your not using it.

NOTE: if you try to do this on your own, and notice that background forms, and labels are showing throw your menu, you can just open up your code, and take your menu, and initializer button (the button I use use for my rollOver, to get my Menu visible), take that code, along with the menu, and make sure to place it at the end of your main application page, or at the end of whatever component you want it to show up on top of... this happens because of the AddChild Method... if you put the menu components above the viewstack in your application, the viewstack is added AFTER the menu.

Imagine working with glass, and you lay a BIG SQUARE piece down that is 8 inches by 6 inches (800 x 600 resolution, is what i'm getting at, but lets talk in real world terms)

So you have this big piece of glass, and you have small piece of paper representing your MENU COMPONENT, and you place that ON THE GLASS wherever you would like. By you putting the piece of paper on top of the glass, you are using your own version of the addChild method...

So you take another piece of paper (pretty decent in size, because it represents your CONTENT) and you lay it down on the glass (don't move the menu piece of paper). Now if the two don't occupy the same space, or they happen to be well enough sized that they both fit on the piece of glass, then you don't have a problem. The problem is when they overlap in size, and your content covers your menu. What you have to do is make sure and lay down all of your content first, and then lay down your menu, to make sure it ends up on top of everything else... in hence PUT THE MENU COMPONENTS LAST if you want them to hover over other things in your application. The addChild method will take care of the rest...

Remember the addChild method is you laying down your pieces of paper, to make sure the menu is on top, add it last....

There is one other thing that you might immediately notice with the menu that I'm using. It bounces! What makes it Bounce like that? There is a very simple class (set of classes) that you can use, they are called easing functions.

what you do to use them, is first import the class you want to use, then the effect Object (class) you are using, may or may not have an easing function... All you do is give that easingFunction the Name of the Class You want to use...

It's a little hard to figure out, but documentation is starting to catch up with this one... I know I'm not the first to do it... I think I learned about it from a post on Adobe quick starts.

You can actually open up the source to those classes, and the math is very awesome to see... I just wanna meet the person who originally wrote the stuff... just to call them a genius...

Luckily someone posted a comment this entry, saying who to thank! so I wanted to link to them, they are an absolute genious

Robert Penner!

VIEW EXAMPLE - SOURCE