AS3 Circular Group94 Style Flash Menu

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 Menu

Enjoy!

Posted on 06 Nov 2008
70 Comments
7 Trackbacks

Meta

AS3 G94 Circular Menu was posted on November 6th 2008 in the category Code / Actionscript 3.0, Open Source and tagged; , , , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 401 Unauthorized in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

73 Responses to AS3 G94 Circular Menu

1 4 5 6

Leave a Reply

Pingbacks / Trackbacks

  1. 5 years ago G94 Circular Menu

    [...] Comments AS3 G94 Circular Menu 27% similar AS3 version of the Circular Group94 menu [...]

  2. 5 years ago   Free Flash Menus & Animations From SoulWire by Make Money Online

    [...] AS3 Circular Group94 Style Scrolling Menu [...]

  3. 5 years ago Top Gossips » Blog Archive » Free Flash Menus & Animations From SoulWire

    [...] AS3 Circular Group94 Style Scrolling Menu [...]

  4. 5 years ago Free Flash Menus , Animations and source codes From SoulWire |

    [...] AS3 Circular Group94 Style Scrolling Menu [...]

  5. 5 years ago Nasıl Yapılır? » Ücretsiz Flash Menü Nasıl Yapılır?

    [...] SoulWire adlı bloga buradan ulaşabilirsiniz. BENZER YAZILAROnline Slayt ve Sunum Nasıl Yapılır? [...]

  6. 4 years ago Ücretsiz Flash Animasyon ve Menü Oluşturun | Wkhost.NET

    [...] Website: AS3 Circular Group94 Style Scrolling Menu [...]

  1. david 4 years ago

    Hi Soulwire, great work – thanks for sharing this with us!

    I was wondering if there is a way to set the display index of the current menu item so that it is always on the top of the list?

    I was also wondering if you might be able to give me any pointers as to how I might go about creating an effect where all the menu items are positioned in a circle, overlapping each other to fit, except for the current item which has its own ‘reserved’ space, and the surrounding items come to meet it…if that makes any sense!

    thanks, david

    Reply to this comment

    1. david 4 years ago

      actually realised that, having it on top would not look right at all – have now almost found an adequate solution by adjusting the scaleX and scaleY values independently. Next I will play with adjusting the rotation property, increasing and decreasing for each value except the active one – hopefully that should give me the effect im after.

  2. oscar 4 years ago

    Very good job, but how i edit it? do you have a manual or tutorial?

    Reply to this comment

  3. Jonas Nyström 3 years ago

    Hi Soulwire, and thanx!

    I’m trying the Circular Menu as an ActionScript project in Flash Builder 4, and it works great except for the TextField part. It becomes invisible for all menu leaves except for the active one, and it doesn’t become visible until the leaf scaling is ready. Could you give a clue? Thanx!

    Here’s my MyMenuItem class:

    package
    {
    import flash.display.Sprite;
    import flash.text.TextField;

    public class MyMenuItem extends Sprite
    {

    public function MyMenuItem(color:uint, text:String)
    {
    super();

    this.graphics.beginFill(color);
    this.graphics.lineStyle(1, 0×555555);
    this.graphics.drawRect(0, 0, 100, 30);

    var txtLabel:TextField = new TextField();
    txtLabel.y = 5;
    txtLabel.selectable = false;
    txtLabel.text = text;

    this.addChild(txtLabel);
    }
    }
    }

    Reply to this comment

  4. Mike 3 years ago

    Nice class – but how can I set it up so that the current item is the highest item and everything else shows up behind it? Right now items after the current item show up on top of the current item, and obviously if you use setChildIndex() it affects how all the items are navigated through.

    Reply to this comment

  5. Chris 3 years ago

    Hi Soulwire and everyone else. I have been trying to use this circular menu but am having a couple problems that might be obvious to some. First problem is that I want to switch the black boxes and text to images. Every time I try and do this the menu will not show up anymore. I can change the box color and the text but can’t replace it with a picture. The second issue is that when I put a background behind it I can not see the menu anymore. It seems like people aren’t posting on this as much anymore but if anyone could help it’d be greatly appreciated.

    Reply to this comment

1 4 5 6