
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!
47 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:
Then i add my XML listeners and also a MovieClip that holds text fields and an image container
Now that i have declared my arrays, i then add the information from my XML into the arrays:
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
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:
2. When looping through your XML, pass the values to the appropriate menu item:
3. Inside the click handler, just refference the menu items properties:
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:
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
Marijke
Jan 14th 2009
12:28 am
Hi Soulwire,
I love your circular menu and I am trying to create something with it. But it seems that I not fully understand the code. I want to make a circle with your code with 12 items, which are all visible and clickable at all times.
Can you give me a hint what i should change to accomplish this?
Soulwire
Jan 14th 2009
11:23 am
Hi Marijke,
You might have to modify the CircleMenu class slightly to achieve the effect, only because it was designed to use the feature where items with a certain offset disappear.
To start with, create your menu, then set up its properties so that the visible items is equal to the total items, and the angle spacing is the same as a full circle divided by the number of items:
Also make sure your alpha and scale offset are 1.0 (no change):
However, at this stage you will have problems for 2 reasons…
1) Tweenlite has a rotation bug due to flash using radians to rotate. I won’t go into why now, but there is a fix if you check the Tweenlite page.
2) Because the CircleMenu class sets a target x and y position for menu items, they tween to that position directly - not around a circle - so the movement will look strange if the user clicks an item on the other side to the currently active item.
I would suggest building a simpler menu system, where all items are inside containers with a certain x offset (being the inner radius of the circle around which they rotate). Set each of their rotation properties to ‘(360 / totalItems) * itemID’ and then just rotate the whole menu around its centre point.
If that’s not clear, let me know and maybe I can find some time to do a quick example.
Hope that helps…
Marijke
Jan 14th 2009
4:06 pm
Hi Soulwire,
thanks for your quick reply. I followed your instructions but got the problems you described.
I am trying to make my own menu now but have to say it’s harder than I thought.
I will probably figure it out in the end but it would be great help if you could make an example, of course only if you have the time.
Either way, thanks.
Marijke
Jan 14th 2009
10:08 pm
Right,
I have made something which resembles your menu but misses the most important part: the rotation. I have created now 12 movieclips in a circle which are called particles. When the are clicked they respond exactly as should but i can’t get it to rotate.
Do you have an idea how to put the rotation function in the class?
Here is my code:
yoyo
Jan 27th 2009
8:03 pm
Hi !
I am trying to use your example in order to do the same but…. actually not exactly the same. For example if the fourth item is selected i would like that item0 … item3 draw a curve of the left and item 5 to itemN draw a curve on the right side…. It is like you rotate your example to -90° and all the item are rotate to 90….
I am a little bit lost width mathematic parameters (angle) you know… Could tell me something simple to help me?
Thanks by advance..
yoyo
Jan 28th 2009
11:43 am
hey, I made it… thanks anyway to built this menu ;-)
Soulwire
Jan 28th 2009
11:46 am
Hey Yoyo,
Glad you got it sorted :)
Peggy
Feb 4th 2009
2:59 pm
I can´t make it work. It couldn´t find the as file main.as. I try to write src.Main under the properties settings in the fla files. But it still dont work.
Peggy
Feb 5th 2009
10:00 am
Now i got the linking to the Main.swf working. But i got this error instand.
1120: Access of undefined property btnUp.
Soulwire
Feb 5th 2009
9:08 pm
If you download the demo above and publish the FLA as is you should get no problems. btnUp appears anywhere in the source of the demo or the menu class.
What code have you put inside your Main.as file?
Michael
Feb 5th 2009
9:42 pm
I’m with Peggy. All I did was download the file, unzip it, open the fla file, and test the movie (command-return on a Mac). I got a blank swf with “Menu Settings” that are on the stage, but nothing where the circular menus should be. Stange though, I don’t get any errors in the Output window.
I also couldn’t get the other menu (the Group94 scrolling menu you have on a different page) to load properly, but thought it was something I was doing wrong.
Is this an issue between CS3 and CS4? (I’m on the latter). I’m not knew to Flash, but am new to ActionScript. I’ve been able to follow some basic tutorials, but am starting to get a little deeper. From what I’ve been able to infer I thought the solution was the same thing Peggy tried (change the Class in the Properties window to “src.Main” as the Main.as file resides in the ’src’ folder, but that gave me even screwier output.
Thanks for any help.
Michael
Feb 5th 2009
10:03 pm
Fixed it.
Something about CS4 (and the paths as written) doesn’t like that ’src’ folder. I simply pulled the “Main.as” file as well as the folders named “gs” and “soulwire” out of that “src” folder and into the same folder/directory where the .fla file was located.
Went to Test Movie and everything was written out to the .swf file just fine.
Just FYI, I first tried to go through the individual .as files and account for the ’src’ folder in the path, but kept getting errors. Can’t believe I didn’t think of this more elegant solution (ie: just remove the “src” file from the equation). Again, not sure if this is a CS3/CS4 issue, but on CS4 I was first getting nothing, made this little change, and now things work.
Soulwire
Feb 5th 2009
10:29 pm
Hey Michael,
Glad you got it working.
Nothing is wrong with the configuration, however Flash does seem temperamental when it comes to class paths. If you open up your document properties, edit the profile then click ’settings; next to Actionscript 3.0 you’ll see the source path. I’ve set this to ’src’ in the demo, meaning that Flash should start looking for code in that folder. However, src is a path relative to the FLA document, but sometimes Flash decides it can’t find it, and so you need to specify an absolute path to the src folder (click the folder icon and browse to the src folder)
You can certainly do what you did and move the source files to the document root. However having class paths is useful as you can use more than one. To give you an example, I have a library of classes in a location on my hard drive containing libraries that I use such as Papervision, Tweenlite and my own library. This means that instead of copying all of these files into a project folder every time I use them, I can just specify multiple classpaths for the project, i.e. D:/Library/AS3/Tweening and D:/Library/AS3/Papervision. The other advantage of this is that if I update these classes all projects that use them will be referencing the latest version. Using a folder called src is not necessary, but is a good convention as it keeps as files out of the root, just as you would do when building a site by putting images in a folder ‘img’, css in a ‘css’ folder, javascript in ‘js’ and so on.
When Peggy set the document class to ’src.Main’ this was incorrect because the Main class was not in the src namespace, in fact src is not a namespace at all. Once the classpath is set to src, this folder essentially becomes the root path for all code, so when defining a classes namespace you can ignore it (you would use ‘package soulwire.ui’ rather than ‘package src.soulwire.ui’…
Hope I’ve explained that in a way that makes sense! Good luck with the menu :)
Michael
Feb 5th 2009
11:28 pm
Well, I am the newbie here, so I certainly am not sure of all the nuances for setting paths. The reason though that I thought it might be a CS3 v. CS4 issue is that there is no “Settings” button in the Properties window in CS4 (there actually seem to be a number of subtle changes with paths and their settings which have been causing me confusion on tutorials I’ve been trying to work through all over the web).
In CS4, I think you might be able to set a default folder path for all of your classes through the Preferences. But any such settings don’t seem to carry over between files created in CS3 and those read in CS4. So if there was something designating the ’src’ folder as the ‘root’ (and I’m guessing you did your files in CS3) in the original version it didn’t translate once I opened it up in CS4. So I just moved the files to the same root as the .fla file (as I believe that’s where Flash looks as a default unless you set another value).
I should actually first say thanks. I love this menu and am grateful you made it available for free. Also, again, I’m the newbie and don’t understand plenty about ActionScript and class paths. I just wanted to to post my workaround in case it helps others (or at least helps Peggy :) ).
Soulwire
Feb 5th 2009
11:46 pm
I’m not sure whether classpaths from a CS3 document are ignored in CS4, though it wouldn’t surprise me as there often seems to be little rhyme or reason behind when Flash accepts a relative classpath and when it prefers an absolute one!
Thanks though for posting the workaround, and its definitely worth using if you’re having problems and want to get up and running. Thanks also (to Peggy too) for bringing this up - I’ll put code in the root folder in future demos and leave it to the developer to organise the classpaths etc.
I hope the explanation as to when and why to use classpaths was useful though. And you’re more than welcome for the source - I hope you find a good use for it :)
Michael
Feb 6th 2009
12:33 am
No, the reply was very helpful. Once I get from tutorials to projects I’ll definitely set up a absolute path where all of my class documents (.as) reside. Again, thanks.
ideesh
Feb 17th 2009
2:16 pm
hello, i have a problem ..i get this error all the time
Cannot access a property or method of a null object reference.!!!!
can u help me?
Soulwire
Feb 18th 2009
12:48 am
Is this with the downloaded demo ‘as is’, or have you changed something?
Any more information provided with this error, like the function which is throwing it?
ideesh
Feb 18th 2009
9:24 am
the demo as is …is working ..
but i need to use the circular menu but without using ur Main.as so i used the same code as follows:
it works but when clicking or using mouse wheel i get this error:
Cannot access a property or method of a null object reference.!!!!
Free Flash Menus & Animations From SoulWire by Make Money Online
Mar 2nd 2009
4:40 am
[...] AS3 Circular Group94 Style Scrolling Menu [...]
Top Gossips » Blog Archive » Free Flash Menus & Animations From SoulWire
Mar 3rd 2009
2:12 am
[...] AS3 Circular Group94 Style Scrolling Menu [...]
Constantinos
Mar 4th 2009
1:41 am
Cheers for this great menu. Being Greek myself and a complete newbie with Flash, it’s all greek to me when it comes down to fiddling with flash code.
However, I would really like to use the menu on my site. Is there not a fill-in-the-menu-items-link-them-and-publish way?
Cheers again.
awais
Mar 4th 2009
7:24 am
Hi, like your menu very much but I am little new to actionscripting especially as3 so can you give any simple text with your circular effects on it.
Thanks
Awais Ahmed
liz bucher
Mar 9th 2009
10:43 pm
this is awesome. thank you! love this site!
Free Flash Menus , Animations and source codes From SoulWire |
Mar 15th 2009
8:30 am
[...] AS3 Circular Group94 Style Scrolling Menu [...]
Nasıl Yapılır? » Ücretsiz Flash Menü Nasıl Yapılır?
Mar 18th 2009
10:28 pm
[...] SoulWire adlı bloga buradan ulaşabilirsiniz. BENZER YAZILAROnline Slayt ve Sunum Nasıl Yapılır? [...]
Nati
Apr 9th 2009
5:06 am
Hi there,
This is an awesome menu. I love it! I downloaded the source the other day and I’ve managed to load in images and text via XML but seem to be having a bit of trouble creating any depth swapping action using setChildIndex. I just want to make the selected item come to the front but have had no luck. I have tried to make it run from within the onMenuItemClick function but it doesn’t seem to like that either. Any suggestions?
If you could help me out that would be sweet…
..and please excuse me - I’m pretty new to AS3.
Robin van Emden
Apr 19th 2009
7:21 pm
Besides saving me a lot of time with your “regular” Group94 menu, today I used your circular version for an improvised little Twitter demo, once again, easy to use, and especially easy to adapt :D Thanks!!
MC
Apr 25th 2009
3:38 pm
Hello, I just found your navigation and it’s very graphical. Is it possible to add submenus, 1 or 2 levels ?
Bye, MC
joe
May 5th 2009
4:25 am
Great website! i’m a flash noob here. i’m taking As3 class and i have a project due next week. i think i’m going to use this menu for my project.. i played around with the demo and i can’t seem to figure out how to add menu names instead of item1, item2 and etc.. please help me out! i’m a very slow learner, and it would take days for me to figure it out.. thanks in advance!
tabela
Jun 19th 2009
12:29 am
teşekkürler
Soulwire
Jun 19th 2009
11:09 am
Bir şey değil! ;)
Kim
Jun 21st 2009
3:00 am
Hey J,
Im on nights and thought I would google you to see what you were working on! I have been a little blown away, its all too much for my little brain to take it but it is awesome! Especially love your Iching stuff, but you already knew that!
Hope youre well, keep up the good work
Mucho loves as always kx
Leave a Reply