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
54 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 3 4 5

Leave a Reply

Pingbacks / Trackbacks

  1. 8 years ago ActionScripted Circular Menu: Ahad Bokhari

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

  2. 8 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. michelle 6 years ago

    Hi Soulwire,

    thank you for the download! I’ve been through all the comments but can’t figure out how to load root framelabel from the menu buttons.

    here is my edited code. Will you help me please?

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

    this.btn.scaleTo (170,0.5);
    // Extra script
    this.gotoAndStop(‘activeFrame’);
    if (this = planets.push(“venus”)) {
    this._root.gotoAndStop(“venusweb”);
    } else if (this = planets.push(“mars”)) {
    this._root.gotoAndStop(“marsweb”);
    } else if (this = planets.push(“earth”)) {
    this._root.gotoAndStop(“earthweb”);
    } else {
    this.gotoAndStop(‘activeFrame’);
    }
    // End extra script
    this.enabled = false;
    };

    MovieClip.prototype.inactiveBtn = function ()
    {
    this.btn.scaleTo (100,0.5);
    // Extra script
    this.gotoAndStop(‘inActiveFrame’);
    // End extra script
    };

    Reply to this comment

1 3 4 5