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!

« BitmapData Colour PaletteMasking Transparent Bitmaps »

14 Responses to AS3 G94 Circular Menu

Matt Przybylski
Nov 6th 2008
6:33 pm

Very nicely done. The flexibility of the class is also extremely helpful. Good work.
Soulwire
Nov 6th 2008
7:40 pm

Cheers Matt. Good work on your site too!
G94 Circular Menu
Nov 6th 2008
7:47 pm

[...] Comments AS3 G94 Circular Menu 27% similar AS3 version of the Circular Group94 menu [...]
aurelplouf
Nov 7th 2008
6:42 am

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 !

aurelplouf
Nov 7th 2008
9:48 am

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:



 [ 
 
		public var circleMenu:						CircleMenu;
		public var xmlLoader:URLLoader = new URLLoader();
		public var xmlNewsTitles:XML = new XML();
		public var numberTitles:Number;
 
		public var titles_array:Array = new Array(); //These are children from my XML document
		public var date_array:Array = new Array(); //These are children from my XML document
		public var description_array:Array = new Array(); //These are children from my XML document
		public var image_array:Array = new Array(); //These are children from my XML document
 
		public var mainTextField:mainText; ]

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&lt;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

Soulwire
Nov 7th 2008
10:35 am

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;
}

aurelplouf
Nov 7th 2008
11:19 am

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
Soulwire
Nov 7th 2008
12:28 pm

No problem ;)
ynk
Nov 16th 2008
4:45 pm

really cool :]

i may use it soon, thanks a lot :)
alejandro
Dec 18th 2008
5:35 pm

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???
Soulwire
Dec 18th 2008
7:20 pm
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!
alejandro
Dec 18th 2008
8:19 pm

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
alejandro
Dec 19th 2008
7:22 pm

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??
Vinit Kulkarni
Dec 24th 2008
8:01 am

Hey Great Work ! Will you please help me ? I have to create a cirular menu for my office site ? But the difference is that it should be completely cirular. i.e. There will be home, about us like buttons If we create any link it should come on a specific place in the same cirular manner with some spring effect of jerk.

Can you help me please ?

Vinit Niphadkar
svinit_life@yahoo.co.in

Soulwire - Illustration, Actionscript and Stuff...

AS3 G94 Circular Menu

AS3 version of the Circular Group94 menu

Actionscript 3.0
06 Nov 2008

14 Responses to AS3 G94 Circular Menu

Leave a Reply

Categories

Tags

Archives

Friends

Artists

Flashers

Soulwire

Bookmark

Popular Content

About Soulwire

Soulwire - Illustration, Actionscript and Stuff...

AS3 G94 Circular Menu

AS3 version of the Circular Group94 menu

Actionscript 3.006 Nov 2008

14 Responses to AS3 G94 Circular Menu

Leave a Reply

Categories

Tags

Archives

Friends

Artists

Flashers

Soulwire

Bookmark

Browse All Tags

Popular Content

About Soulwire

Actionscript 3.0
06 Nov 2008