Task: Design a configurable dynamic animated menu system that supports nesting.

At first thought, this could mean anything. This could be anywhere from a simple tree menu to a 3D Wall with different depths. There are so many different possibilities for menus that it is hard to settle on just one. Knowing what direction you want to go is a problem half-solved. This menu may not look over-the-top at first glance, but it is not a dramatic presentation that creates a good menu.

Factors involved with this design:

• It has to be very easy to read. People do not like to squint at text on screen.
• It has to be fast to navigate. If you are in a hurry, you need to be able to get there.
• Easy to add / change / configure menu items for the developer.
• Ability to change look / feel with very little effort.
• Control actions however you see fit.

This menu is fast, sleek, and easily customizeable. You can add any number of sub-levels that you want. You have the ability to add custom icons, setup the items any way you like, change the size, change the colors, change the transition effects, and more. The only limitation is that the main menu scrolls vertically, so this cannot be turned into a horizontal menu.

See inside the FLA for documentation on the options available to you.
See inside the XML for structure / configuration notes.

When an action is invoked on this menu, it broadcasts an event. From that point, you can take it wherever you want. You can simply setup a function to pass the caption, setup a switch statement, or however you want to handle it. The point is to let the developer have some freedom, but also not to give the impression, "you might as well have just built it yourself".

The transitions in this particular menu are actually screenshots of the current menu. You can, from within the classes, alter the transition effect. The BitmapData is passed to a function called "items_killsnapshot". Right now, it is set to Blur / Fade with TweenFilterLite. You could create a mosaic, a pixel dissolve, a page turn, a cube rotation, or whatever you like, if so inclined. The point is that it gives you the resource and a default, but from that point, you can take it where you see fit. The BitmapData is not confined to a mask, so if you needed room for a pixel dissolve, you have it.

The XML is setup in such a way that it allows for multiple parents per structure. The items are not nested, but instead they are referenced. This way, you can actually setup one structure for a menu called Projects, and just reference it every time. It will save XML file size and organize. The parameters you have to work with are: caption, name, icons, and parent.

The menu system uses generic fonts (Arial) and does not use any extensions other than TweenLite (which is included). This should be ready to open and re-compile. If you run into any issues at all with recompiling or questions about the code, feel free to contact me immediately and I will be happy to walk you through it.

Download Source



Matt Kenefick
518.698.7990
http://www.mattkenefick.com   /   http://www.theroyaltymustdie.com   /   http://www.jureuxoris.com

Design: October 17th, 2008
Project Started: October 18th, 2008
Project Ended: October 19th, 2008





Planning - Design:


Planning - Structure:


Planning - Exploded View: