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 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

51 Responses to G94 Circular Menu

1 2 3 5

Leave a Reply

Pingbacks / Trackbacks

  1. 6 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. goliatone 7 years ago

    hi Justin,

    really cool stuff! Im happy that you actually did answer my post. thumbs up!
    regards,

    goliatone

    Reply to this comment

  2. cube 6 years ago

    Great piece of script and a beautiful page as well! WordPress? Any special theme?

    BTW: There must be a small bug in the script as the fading buttons are not active constantly. Will try to figure it out and tell you if I find a solution.

    BTW2: Been in your library… I would recommend “The pillars of the earth” by Ken Follett if you got some time left. Good book… no, great book! ;)

    BTW3: You got one more rss-reader.

    cheers,
    cube

    Reply to this comment

  3. John 6 years ago

    Hi there,

    Was just wondering what version of Flash your using. I have Flash 8 and can’t open the download.

    Cheers,

    John.

    Reply to this comment

  4. Jeremy 6 years ago

    Hello,

    very nice menu! Just wondering if it is possible to replace the text with images?

    Cheers
    Jeremy

    Reply to this comment

  5. Sensbachtal 6 years ago

    Just wanted to say Hello to everyone.
    Much to read and learn here, I’m sure I will enjoy !

    Reply to this comment

  6. ?? 6 years ago

    I was just wondering how i would add url’s tothe buttons

    thanks

    Reply to this comment

  7. Soulwire 6 years ago

    Hi ?? (mysterious!)

    If you want the buttons to open URLs, you can simply modify the prototype for the buttons to accept a url parameter, and then call getURL onPress, something like:

     MovieClip.prototype.circNavBtn = function (id:Number, par:MovieClip, name:String, url:String)
    {
    	this.pos = this.id = id;
    	this.par = par;
    	this.btn.txt.text = name.toUpperCase ();
    	this.lnk = url; // set the new url parameter
    
    	this._rotation = 90;
    	this._alpha = 0;
    
    	this.onPress = function ()
    	{
    		this.par.circNavRot (this.pos);
    		getURL (this.lnk, '_blank'); // open the url
    		this.activeBtn ();
    	};
    };

    Then use an array of links which corrospond to the array of names:

    var links:Array = [ 'www.soulwire.co.uk', 'www.google.com' /* etc */ ];

    …and finally, pass the url parameter to the buttons when you create them (inside the circNav prototype)

    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],links[i]); // Notice the extra parameter being passed
    		this.btns.push (navBtn);
    	}
    	this.circNavRot (0);
    };

    Good luck :)

    Reply to this comment

  8. ?? 6 years ago

    Thanks for the quick reply

    I was wondering how I would get the url’s to open on teh current page instead of opening on another (blank page)

    thanks again

    Reply to this comment

  9. Soulwire 6 years ago

    Sure, all you have to do is change the target to ‘_self’:

    getURL (this.lnk, '_self'); // open the url

    Reply to this comment

  10. Chris 6 years ago

    Hello, you have some GREAT AS3 tutorials!

    I especially like this Menu. I am considering trying to change it over to AS3, but I was wondering why you haven’t done that. Is there a reason I should not even try?

    Reply to this comment

  11. Soulwire 6 years ago

    Hi Chris,

    No, no reason, other than not having the time. It will be quite easy to convert to AS3, at least once you’ve understood the new event model.

    This script, and its G94 counterparts are quite popular, so I’m writing a more complete AS3 class, which can be horizontal or vertical and accept images, load from XML etc. It will be a while though as I’m really busy at the moment. I’ll look into added ‘Circular’ as an option to the layout feature in the new classes.

    In the meantime, let me know how you get on and if you find a use for it, in AS2 or 3.

    Cheers

    Reply to this comment

  12. joseph 6 years ago

    First off your tutorials are put together superbly and much appreciated. I would like to know how i would add a new movieclip to the buttons. i.e. on press another movieclip would show. To give you a bit more insight, I am using the circ menu to show regions and I would like it to show on button press the group 94 as3 style menu you have posted with locations from that region. Hope I have explained correctly.

    With hope, thanks for now. And again any help is much appreciated

    Reply to this comment

1 2 3 5