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!
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.
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 :)
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 :) ).
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 :)
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.
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?
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?
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:
[ function startFlagMenu(id:Number){ var circleMenu:CircleMenu = new CircleMenu( 100, 20, 7 ); circleMenu.y = 300; addChild(circleMenu); for(k=0; k < xml.region[id].country.length() ;k++){ var item:MyMenuItem = new MyMenuItem(); item.txt.text = xml.region[id].country[k].name; item.addEventListener(MouseEvent.CLICK, onMenuItemClick ); circleMenu.addChild(item); } circleMenu.currentIndex = 4; stage.addEventListener( MouseEvent.MOUSE_WHEEL, onMouseWheel ); } function onMouseWheel( e:MouseEvent ):void { e.delta < 0 ? circleMenu.next() : circleMenu.prev(); } function onMenuItemClick(e:MouseEvent):void { circleMenu.scrollToItem(e.currentTarget as DisplayObject ); }it works but when clicking or using mouse wheel i get this error:
Cannot access a property or method of a null object reference.!!!!
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.
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
this is awesome. thank you! love this site!
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.