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!
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
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?
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…
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.
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:
[ package { import flash.display.* import flash.events.* import gs.easing.Expo; import gs.TweenLite; public class circular extends MovieClip{ // drawing circle with items public var numItems:int = 12; public var angleStep:Number = 360 / numItems; public var circleMenu = new MovieClip private var radius:Number = 150 private var angle:Number = 0 private var centerX:Number = stage.stageWidth/2 private var centerY:Number = stage.stageHeight/2 var particlesArray:Array = new Array(); // adding and deleting items public var item1:MovieClip = new Step1() public var item2:MovieClip = new Step2() public var item3:MovieClip = new Step3() public var item4:MovieClip = new Step4() public var item5:MovieClip = new Step5() public var item6:MovieClip = new Step6() public var item7:MovieClip = new Step7() public var item8:MovieClip = new Step8() public var item9:MovieClip = new Step9() public var item10:MovieClip = new Step10() public var item11:MovieClip = new Step11() public var item12:MovieClip = new Step12() public var stepScale:Number = 1.2 public var number:Number public var addedContent:Boolean = false var addContent:Array = [item1,item2,item3,item4,item5,item6,item7,item8,item9,item10,item11,item12] public function circular() { createCircle (); } function createCircle ():void { for (var i=0; i < numItems; i++) { var particle:MyMenuItem = new MyMenuItem(); //Set the starting position (we must convert angles to radians) particle.y = centerY + Math.sin(angle* Math.PI/180)*radius; particle.x = centerX + Math.cos(angle * Math.PI/180)*radius; particle.txt.text = 'Step ' + (i + 1); particle.txt.mouseEnabled = false; particle.name = i particle.buttonMode = true particle.rotation = angleStep * i particle.addEventListener( MouseEvent.CLICK, onMenuItemClick ); particle.addEventListener( MouseEvent.MOUSE_OVER, menuMouseOver); particle.addEventListener( MouseEvent.MOUSE_OUT, menuMouseOut); //Add the particle to the stage and push it to array for later use. addChild (particle); //particlesArray.push (particle); //Update the angle so we know where to put the next particle angle += angleStep; } } // ads items private function onMenuItemClick(evt:MouseEvent):void { var i:int = evt.target.name // if there already exists an item this wil delete it if (addedContent){ removeChild (addContent[number]) } addChild (addContent[i]) addContent[i].x = stage.stageWidth/2 addContent[i].y = stage.stageHeight/2 addedContent= true number = i } private function menuMouseOver(evt:MouseEvent):void { TweenLite.to(evt.target, 1, {scaleX:stepScale, scaleY:stepScale}); } private function menuMouseOut(evt:MouseEvent):void { TweenLite.to(evt.target, 1, {scaleX:1, scaleY:1}); } //closing parameters } } ]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..
hey, I made it… thanks anyway to built this menu ;-)
Hey Yoyo,
Glad you got it sorted :)
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.
Now i got the linking to the Main.swf working. But i got this error instand.
1120: Access of undefined property btnUp.
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?
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.