Group94 Circular Menu
Download: AS2 Group94 Circular Menu

I built this circular version of the group94 style scrolling menu for a flash website awards showcase I was asked to work on. The original design was based around circles, but we ended up redesigning as parts of the interface (not this menu!) were too processor intensive.

Ok, so part two of my tribute to Group 94’s menu system! This is again inspired by the Group 94 (at least they are most famous for it) shuffle menu in Flash, which pushes items off the top and bottom as the menu shuffles into place.

This version is circular though, and each menu item rotates around a pivot. Initiating the prototype with particular variables will define the spacing between items, the radius of the Group 94 circular menu and the amount of items visible at one time.

Please note, this is in no way a rip of the Group 94 menu. In fact, I haven’t even seen a circular version which is why I made it. I have no idea how Group 94’s actionscript looks, or how they would have approached this style of menu. I do know however, that they have produced many innovative navigation systems, and so this is a simple tribute to their talent and innovation.

As with the regular group 94 scrolling menu, you will need Fuse installed, though all it does is handle tweening so you could use tweener or the inbuilt Flash tweening functions. I just prefer Fuse!

How it is done.

First import Fuse for tweening, then setup the array we will use for the menu:

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup (Shortcuts,PennerEasing);

var planets:Array = new Array ();
planets.push ("Mercury");
planets.push ("Venus");
planets.push ("Earth");
planets.push ("Mars");
planets.push ("Jupiter");
planets.push ("Saturn");
planets.push ("Uranus");
planets.push ("Neptune");
planets.push ("Pluto");

Then some very basic functionality for each menu button. I have ommited rollOvers for the demo…

MovieClip.prototype.circNavBtn = function (id:Number, par:MovieClip, name:String)
{
	this.pos = this.id = id;
	this.par = par;
	this.btn.txt.text = name.toUpperCase ();

	this._rotation = 90;
	this._alpha = 0;

	this.onPress = function ()
	{
		this.par.circNavRot (this.pos);
		this.activeBtn ();
	};
};

Then two small prototypes to handle the activation and de-activation of the buttons when the scroll function is called:

MovieClip.prototype.activeBtn = function ()
{
	activeNavBtn.inactiveBtn ();
	activeNavBtn = this;

	this.btn.scaleTo (200,0.5);

	this.enabled = false;
};

MovieClip.prototype.inactiveBtn = function ()
{
	this.btn.scaleTo (100,0.5);
};

Then the main shuffle or rotation function, which designates tweens to all visible movieClips and hides those outside of the visible items range.

MovieClip.prototype.circNavRot = function (num:Number)
{
	var diff:Number = num;

	for (var i:Number = 0; i < this.btns.length; i++)
	{
		var btn:MovieClip = this["navBtn" + i];

		btn.pos -= diff;

		if (Math.abs (btn.pos) < this.visItems)
		{
			var offset:Number;
			btn.pos != 0 ? (offset = btn.pos > 0 ? 15 : -15) : offset = 0;

			var rot:Number = offset + (this.spacing * btn.pos);
			var alph:Number = 100 - ((100 / this.visItems) * Math.abs (btn.pos));
			var scl:Number = 100 - (5 * Math.abs (btn.pos));

			btn.rotateTo (rot,0.5,"easeOutExpo");
			btn.alphaTo (alph,0.5);
			btn.btn.scaleTo (scl,0.5);
		}
		else
		{
			btn.stopTween ("_alpha");
			btn.stopTween ("_rotation");
			btn._rotation = btn.pos > 0 ? 90 : -90;
			btn._alpha = 0;
		}

		btn.enabled = Math.abs (btn.pos) < this.visItems;
	}
	this["navBtn" + num].activeBtn ();
};

Now we setup the circular scrolling menu on a movieClip:

MovieClip.prototype.circNav = function (array:Array, radius:Number, spacing:Number, visItems:Number)
{
	this.btns = new Array ();
	this.spacing = spacing;
	this.visItems = visItems;

	for (var i:Number = 0; i < array.length; i++)
	{
		var navBtn:MovieClip = this.createEmptyMovieClip ("navBtn" + i, i);
		var btnTxt:MovieClip = navBtn.attachMovie ("btn", "btn", 0);
		btnTxt._x = radius;

		navBtn.circNavBtn (i,this,array[i]);
		this.btns.push (navBtn);
	}
	this.circNavRot (0);
};

Here we dynamically create a movieClip, position it, then call our prototype to create the lovely Group94 style menu…

var testMenu:MovieClip = this.createEmptyMovieClip ("nav", 0);
testMenu._x = 20;
testMenu._y = 112;

testMenu.circNav (planets, 60, 15, 4);

And finally we add the ability to use the mouse wheel to scroll the menu. otherwise we just click the menu items:

var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
	var navIndex:Number = activeNavBtn.id;
	if (delta < 0 && activeNavBtn.id < planets.length - 1)
	{

		testMenu.circNavRot (1);
		testMenu["navBtn" + (navIndex + 1)].activeBtn ();
	}
	else if (delta > 0 && activeNavBtn.id > 0)
	{
		testMenu.circNavRot (-1);
		testMenu["navBtn" + (navIndex - 1)].activeBtn ();
	}
};
Mouse.addListener (mouseListener);

I hope this is useful to someone! If you find a home for it, please let me know.

Download: AS2 Group94 Circular Menu
Posted on 07 Aug 2007
Posted in
53 Comments
2 Trackbacks

Meta

G94 Circular Menu was posted on August 7th 2007 in the category Code / Code 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

51 Responses to G94 Circular Menu

Leave a Reply

Pingbacks / Trackbacks

  1. 5 years ago ActionScripted Circular Menu: Ahad Bokhari

    [...] visit HERE for the code by [...]

  2. 5 years ago AS3 Circular Group94 style scrolling menu class with source code and demo

    [...] Comments G94 Circular Menu 25% similar Group94 Inspired Circular scrolling menu [...]

  1. bigJo 5 years ago

    YEAAHH!!! Great thank a lot Soulwire cool cool !!!!

    Reply to this comment

  2. TONY 5 years ago

    How would i add load external swf with buttons?

    Reply to this comment

  3. john 5 years ago

    Hey this is really great .. how do i change this with Tweenlite instead of fuse ..
    One other thing is i dont want it to rotate . i want the rotation to remain 0 but along the cirle something like this http://rapidshare.com/files/196916893/Untitled-1.png.html

    Reply to this comment

  4. Soulwire 5 years ago

    Hi John,

    Have you seen the AS3 version:

    http://blog.soulwire.co.uk/flash/actionscript-3/as3-g94-circular-menu/

    It uses Tweenlite and is much more configurable, so you should be able to achieve the effect in the image you sent me.

    Reply to this comment

  5. john 5 years ago

    Yes I did … but the project i am working on require as2 … anyway how to do this on as?

    Reply to this comment

  6. JOHN 5 years ago
  7. Soulwire 5 years ago

    Hi John,

    Getting it running with Tweenlite will be very straight forward. Just import the class as the docs say and then replace all calls to the fuse tweens with the Tweenlite syntax. For example:

    btn.rotateTo (rot,0.5,"easeOutExpo");
    btn.alphaTo (alph,0.5);
    btn.btn.scaleTo (scl,0.5);
    

    Would become

    Tweenlite.to(btn,0.5,{_rotation:rot,_alpha:alph,_xscale:scl,_yscale:scl,ease:Expo.easeOut});
    

    I don’t have time to work out the rest, but one approach (if you know how many menu items you will have) would be to build and array or predefined positions, like [ {x:100,y:100}, {x:90,y:120} ] and then use the btn.pos property to determine which position each item should tween to. This would be simpler than writing an algorithm for the configuration you’re after – so long as it is only going to have one use and not be a generalised script…

    Reply to this comment

  8. jhon 5 years ago

    wow thanks a lot …
    what about if i just want it to move up but not rotate it but just go in circle ..

    something like this

    one
    two
    three
    four
    five

    Reply to this comment

  9. cicit 5 years ago

    Hello man, where in the script that I can find variables that control “AngleSpacing” like the scrollcontrol at your AS3 file?

    Thanks
    Cicit

    Reply to this comment

  10. mark 5 years ago

    hey Soulwire your are amazing,
    i need help for something! I will use this menu as a sub menu so i need to activate and deactivate the menu. how would this work? OK active i have but deactivate is a problem. thx

    Reply to this comment

  11. pete 4 years ago

    when i try this menu, if i push the third button, the second one is still inactive, what is the reason of this?..
    sorry but my english is so poor..
    saludos…pete

    Reply to this comment

  12. pete 4 years ago

    why some times the venus button is deactivate?…
    regards…

    Reply to this comment