AS3 G94 Circular Menu

Please update your flash player

Download the source code (Demo included)

I’ve received quite a few requests to update my circular group94 style menu to AS3 (I’m not really sure why I’m still calling it a “Group94 menu”, but it’s a tribute to them that this style of scrolling navigation is often referred to as a “group94 menu” and not an “offset scrolling menu” or something of that nature).

Anyway, I have been thinking for some time that I should revisit this script and build a more complete version, where horizontal, vertical or circular are simply parameters for the menu, but for now, this is both an update and a massive enhancement of the AS2 G94 circular menu.

If you play with the demo, you’ll notice I’ve added some new features, such as the ability to easily change (at runtime of desired) aspects of the menu like the inner radius, item spacing, visible items and much more.

The other big enhancement is that the CircularMenu class actually overrides the addChild, addChildAt, setChildIndex, removeChild (etc) methods, so if you treat it as a regular DisplayObjectContainer and add children to it, these items will be treated as menu items and automatically scroll -cool! This also means that you can easily change an items index, or insert and remove items dynamically, all using the standard DisplayObjectContainer API. The benefit of this is that you can use any DisplayObject as a menu item; Bitmaps, Sprites and Movieclips, so there is no limit to what you can put into the menu – you can even mix it up and add custom classes or library items.

There are also some easy methods for scrolling the menu. For example:

// Will scroll the menu to item 4
myCircleMenu.currentIndex = 4;
 
// Similar to above, scrolls the menu to a given index 
myCircleMenu.scrollToIndex(  10  );
 
// Scrolls the menu to any given child DisplayObject
myCircleMenu.scrollToItem(  someDisplayObject  );
 
// Scrolls the menu to the next available item
myCircleMenu.next();
 
// Scrolls the menu to the previous item
myCircleMenu.prev();

Additionally, there are getters and setters for the properties I mentioned earlier, such as innerRadius, itemSpacing, visibleItems etc, which will dynamically tween the menu to whatever you set one of these properties to.

If you download the source code and look at the demo, hopefully all will become clear if it’s not already.

Download the AS3 Group94 style circular menu source code
The above demo is included in the zip

Enjoy!