Expanding and Contracting Animated Menu In Flex

Space is a big deal in flex… or any kind of interface development. A lot of times you have a menu, with navigation, that takes up a good portion of your screen, and frankly… it sucks… it’s like… “where did all my space that I started with go? How did I end up so constrained?” 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 EXAMPLESOURCE

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

The goal of what we want is 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.

Page 1 of 2 | Next page