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

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. Giulio 5 years ago

    Hi Soulwire,
    thanks for yor Circular menu, i’ve one question:
    It’s possible create a buttons for each planet?
    Saturn –gotoAndStop(25);
    Uranus — gotoAndStop(35);
    Mars — gotoAndStop(45);

    etc.

    Thank for you reply.
    Giulio

    Reply to this comment

  2. Soulwire 5 years ago

    Sure Giulio,

    You could put frame labels in your button MovieClip with the same names: “Mars”, “Saturn” etc then use this.gotoAndStop(name); in the CircNavBtn prototype (where it is currently setting the content of the TextField)

    Reply to this comment

  3. Giulio 5 years ago

    Hi soulwire,
    i don’t understand, sorry, I was not to apply your tips.
    Do you explain a example for better understand?

    Thanks for your patience.
    have a good day
    Giulio

    Reply to this comment

  4. Soulwire 5 years ago

    Hi Giulio,

    So, in your btn MovieClip (in the library), add some frames on the timeline and make the frame labels the same as your name Array (Mercury, Venus, Earth, Mars… etc)

    Then, replace the circNavBtn function with this one:

    MovieClip.prototype.circNavBtn = function (id:Number, par:MovieClip, name:String)
    {
    	this.pos = this.id = id;
    	this.par = par;
    	this.btn.txt.text = name.toUpperCase ();
    
    	// Stop on a frame with the same name
    	this.btn.gotoAndStop(name);
    
    	this._rotation = 90;
    	this._alpha = 0;
    
    	this.onPress = function ()
    	{
    		this.par.circNavRot (this.pos);
    		this.activeBtn ();
    	};
    };
    

    You can see, it’s going to tell the btn MovieClip to go to the frame with the label that is the same as the text that would normally appear in the button.

    Reply to this comment

  5. matasky 5 years ago

    Hi soulwire,
    how can i pass a loadMovie to each button?
    Thanks for your patience.
    M

    Reply to this comment

  6. Geist 5 years ago

    Hi Soulwire!!
    Great job and great nickname!!
    I’m using your menu, but i would have that every planet loads an external movie clip in my page.
    I wonder if you could help me in this experiment!?
    In the meanwhile i go ahead by my proofs.

    Regards

    Reply to this comment

  7. sandrar 5 years ago

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

    Reply to this comment

  8. shane 4 years ago

    hiee!
    the menu dat u provided has a convex shape..wat do i do if i want to giv it a concave shape?
    in oder words, i want to create a mirror image of this menu..

    plz do reply..

    Reply to this comment

  9. shane 4 years ago

    hiee!
    the menu dat u provided has a convex shape..wat do i do if i want to giv it a concave shape?
    in oder words, i want to create a mirror image of this menu..

    plz do reply..

    Reply to this comment

  10. shane 4 years ago

    n is it possible to convert dis circular menu into an elliptical menu..?
    if yes, den plz tl how..

    thanx a lot!
    :)

    Reply to this comment

  11. shane 4 years ago

    n is it possible to convert dis circular menu into an elliptical menu..?
    if yes, den plz tl how..

    thanx a lot!
    :)

    Reply to this comment

  12. Kazi Mohammad Ekram 4 years ago

    Thanks for the navigation. It’s showing from left side of the stage. If I want to show it from right side of the stage how can i show it? I was trying to do it. But I couldn’t figure it out. Your help will be greatly appreciated. Thank you.

    Reply to this comment