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.
Download: Group94 Style Circular MenuEnjoy!
Very nicely done. The flexibility of the class is also extremely helpful. Good work.
Cheers Matt. Good work on your site too!
This is awesome !
I made it work with some XML and it works beautifully. With sounds on the buttons its also really nice.
Great work !
Hello,
So i have been trying to create a news box with this menu.
I have been getting some problems:
When I click on a tab, the circleMenu always returns me a value of 0.
Therefore when I click on any give item of the circleMenu, it will not access the appropriate information from my XML file.
Here is the description of what I have done:
Then i add my XML listeners and also a MovieClip that holds text fields and an image container
[ xmlLoader.addEventListener(Event.COMPLETE, LoadNewsTitlesXML); xmlLoader.load(new URLRequest("newsTitles.xml")); circleMenu = new CircleMenu( 80, 15, 9 ); circleMenu.x = -10; circleMenu.y = 250; addChildAt( circleMenu, 0 ); mainTextField = new mainText(); addChild(mainTextField); mainTextField.x = 477.8; mainTextField.y = 35.5;]Now that i have declared my arrays, i then add the information from my XML into the arrays:
[ function LoadNewsTitlesXML(e:Event):void { xmlNewsTitles = new XML(e.target.data); ParseNewsTitles(xmlNewsTitles); } function ParseNewsTitles(newsInput:XML):void { trace("XML Output"); trace("------------------------"); numberTitles = newsInput.newsTitle.length(); trace(numberTitles); for (var i:int = 0; i<numberTitles; i++) { var item:MyMenuItem = new MyMenuItem(); var textLength:Number; titles_array.push( newsInput.newsTitle[i].title.toString() ); date_array.push( newsInput.newsTitle[i].date.toString() ); description_array.push( newsInput.newsTitle[i].description.toString()); image_array.push( newsInput.newsTitle[i].img.toString()); item.txt.text = newsInput.newsTitle.title[i]; item.txt.mouseEnabled = false; textLength = item.txt.text.length / 28; item.bg.scaleX = textLength; item.buttonMode = true; item.addEventListener( MouseEvent.CLICK, onMenuItemClick ); circleMenu.addChild( item ); } trace("----------------------"); }]finally I go to the MouseEvent function where I want to tell to add the appropriate XML information to my movieClip with all the text fields and the image container
[ private function onMenuItemClick( event:MouseEvent ):void { circleMenu.scrollToItem( event.currentTarget as DisplayObject ); var s_no:uint = parseInt(this.name.slice(0,100)); trace(this); trace(s_no); mainTextField.titleArea.text = titles_array[s_no]; mainTextField.dateArea.text = date_array[s_no]; mainTextField.txtArea.text = description_array[s_no]; trace(circleMenu.scrollToItem); }]the problem here is that my mainTextField can only get information from parent 0 from my XML
Thank you for the help
Aurel
Hey Aurel,
When you set the s_no property in the mouse click event handler, you’re setting it using ‘this.name.slice…’ – ‘this’ would be reffering to your document class, or the owner of the event handler, though I presume you want to reference the clicked menu item so that you can set the new title right?
Why not create a class for MyMenuItem, then when you load your XML and loop through the content, thus creating the menu items, pass the title, date, description and id (the loop index) to the class so that the menu item OWNS this information. This means that you can just reference it in the click handler. eg.
1. Create a class for the menu items:
package { import flash.display.MovieClip; public class MyMenuItem extends MovieClip { public var id:int; public var date:String; public var title:String; public var description:String; } }2. When looping through your XML, pass the values to the appropriate menu item:
// ...Load xml code omitted for (var i:int = 0; i < numberTitles; i++) { var item:MyMenuItem = new MyMenuItem(); item.id = i; item.date = newsInput.newsTitle[i].date.toString(); item.title = newsInput.newsTitle[i].title.toString(); item.description = newsInput.newsTitle[i].description.toString(); item.buttonMode = true; item.addEventListener( MouseEvent.CLICK, onMenuItemClick ); circleMenu.addChild( item ); }3. Inside the click handler, just refference the menu items properties:
private function onMenuItemClick( event:MouseEvent ):void { var clickedItem:MyMenuItem = event.currentTarget as MyMenuItem; circleMenu.scrollToItem( clickedItem ); mainTextField.titleArea.text = clickedItem.title; mainTextField.dateArea.text = clickedItem.date; mainTextField.txtArea.text = clickedItem.description; }Thank you for the really quick reply !
It works exactly the way I wanted.
Thank you very much. I learned quite a bit with all this. Even though I am still learning AS3, it is lots of fun when the code works ;).
Best
Aurel
No problem ;)
really cool :]
i may use it soon, thanks a lot :)
hello there!!
i’m having trouble with this menu…..
i want to attach each btn from the library as the “3d carrousel ++i”
like “item1,item2,item3″ and then do a function on stage…..
what is the best way to do this???
Alejandro – that’s the beauty of the API I created for this menu – you can add any DisplayObject to it just by using the addChild method, which abstracts the addChild method of a normal DisplayObjectContainer. So, first create a new instance of any class that extends DisplayObject (Shape, Sprite, MovieClip, etc, or a Class in your library that extends one of these, e.g. MyButtonClass), then add it to the menu using addChild.
If you want to do this dynamically (for example inside a loop) and your item classes have a sensible order to them (item1, item2, etc… as you mentioned in your comment), then you can use getDefinitionByName to help.
Here’s an example:
import flash.utils.getDefinitionByName; import soulwire.ui.CircleMenu; // Your CircleMenu instance var myMenu:CircleMenu = new CircleMenu( 100, 20, 7 ); for( var i:int = 0; i < 10; i++ ) { // This will return classes like: Item0, Item1, Item2... var MyClassRef:Class = getDefinitionByName("Item" + i) as Class; // Instantiate these classes and add them to the menu myMenu.addChild( new MyClassRef() ); }Hope that sheds some light on the matter!
its kind hard to understand…….
can you send me the as file
because i can’t make it work :(…sorry i’m kind new in the as3 and this classes
OK I MAKE IT WORK!
BUT THEY ARE NO BUTTON ENABLED….
I CAN’T SCROLL THEM BY CLICKING THEM ONLY WITH MOUSE WHEEL
WHAT CAN I DO HERE??