Group94 Style Menu System

I have always liked the neat and compact menu system Group94 often use in their projects. It is really useful for lists or menus and is also of course very elegant.

I don’t know how Group94 do it, but here is my attempt. I have created two prototypes to make it easy to use multiple times within a project.

Download: Group94 Style Scrolling List

This example just uses a simple list, but the actionscript can easily be modified to make the items clickable to use as a menu system, or you could even use images. Your call!

The first prototype is used to create a vertical list from an array. The second is used to scroll the list depending on clicks or mouse wheel scrolling.

This is bare bones, so it is nice and simple and easy to build upon.

/*
I have used the old Zigo tweening prorotypes here, it will also work with Fuse.
Links are always good if you use it :)
*/
#include "lmc_tween.as"

MovieClip.prototype.createList = function (array, clip, visibleItems, xPos, yPos, spacing, offset)
{
	this.listItems = new Array ();

	this.total = array.length;
	this.vis = visibleItems;
	this.spacing = spacing;
	this.offset = offset;
	this._x = xPos;
	this._y = yPos;
	this.num = 1;

	for (var i = 1; i <= this.total; i++)
	{
		var listItem:MovieClip = this.attachMovie (clip, "listItem" + i, i);
		listItem.yPos = i * this.spacing;
		if (i <= this.vis)
		{
			listItem._y = listItem.yPos;
		}
		else
		{
			listItem._y = this.offset + (i * this.spacing);
			listItem._alpha = 0;
		}
		listItem.id = i;
		listItem.txt.text = i + ". " + array[i - 1];
		listMc.listItems[i - 1] = listItem;
	}
};

MovieClip.prototype.shuffleList = function (n)
{
	this.num += n;
	if (this.num > 0 && this.num <= ((this.total + 1) - this.vis))
	{
		var min:Number = this.num;
		var max:Number = this.num + this.vis;
		for (var i = 1; i <= this.total; i++)
		{
			var mc = this.listItems[i - 1];
			if (i < min)
			{
				var Y:Number = mc.yPos - this.offset - (this.num * this.spacing);
				var alpha:Number = 0;
			}
			else if (i >= max)
			{
				var Y:Number = mc.yPos + this.offset - (this.num * this.spacing);
				var alpha:Number = 0;
			}
			else
			{
				var Y:Number = mc.yPos - (this.num * this.spacing);
				var scale:Number = 100;
				var alpha:Number = 100;
			}
			mc.tween ("_y",Y,.7);
			mc.alphaTo (alpha,.7);
		}
	}
	else
	{
		this.num -= n;
	}
};

var fruits:Array = new Array ("Cornelian cherry ", "Date palm", "Fig", "Grape", "Jujube", "Black mulberry", "Olive", "Pomegranate", "Pomelo", "Grapefruit", "Lemon", "Lime", "Mandarin", "Clementine", "Tangerine", "Orange", "Avocado", "Feijoa", "Guava", "Kumquat", "Longan", "Lúcuma", "Lychee", "Passion fruit", "Pond-apple", "Strawberry guava", "Tamarillo", "Yangmei");

var listMc:MovieClip = this.createEmptyMovieClip ("listMc", 0);
listMc.createList (fruits,"listItem",5,150,40,30,20);
listMc.shuffleList (0);

prevBtn.onPress = function ()
{
	listMc.shuffleList (-1);
};
nextBtn.onPress = function ()
{
	listMc.shuffleList (+1);
};

var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
	if (delta < 0)
	{
		listMc.shuffleList (+1);
	}
	else
	{
		listMc.shuffleList (-1);
	}
};
Mouse.addListener (mouseListener);
Posted on 07 Mar 2007
Posted in
33 Comments
1 Trackbacks

Meta

Group94 Style Menu was posted on March 7th 2007 in the category Code / Code, Flash 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

34 Responses to Group94 Style Menu

Leave a Reply

Pingbacks / Trackbacks

  1. 6 years ago wemakedotcoms » Blog Archive » 3D Globe Map

    [...] Andy Zupko’s excellent tutorial, for a previous project. The scroll menu is based on this demo by [...]

  1. Soulwire 8 years ago

    You could create a scrollbar using 2 sprites (a background and a drag handle). As the handle is dragged, find it’s relitive position (i.e half way down represents the menu item closest to 50% of all items) and use the shuffleList function to scroll the list.

    Example:

    var percent:Number = (dragger._y / scrollBackground._height) * numberOfItems;
    // '< < 0' is a bitewise shift to create a whole number rather than a fraction
    // Like, Math.round() but faster...
    myList.shuffleList( percent << 0 );
    

    Reply to this comment

  2. bong 8 years ago

    hey thank you so much for the response I will try it out

    Reply to this comment

  3. bong 8 years ago

    Can you post an example?

    Reply to this comment

  4. Scott Freeman 7 years ago

    This works great but I was hoping to use it for xml loaded images either vertical or horizontal
    Is this possible and could you help me out at all.

    Thanks in advance

    Reply to this comment

  5. Mehmet Tunc 7 years ago

    Hello I downloaded your code and tried it but simply it does not response.
    I put some traces() in various places but cant figure out what is wrong.
    Any ideas ?

    Reply to this comment

  6. Soulwire 7 years ago

    Have you downloaded and installed the tweening prototypes I used? http://laco.wz.cz/tween/

    The initial setup method tweens the items into place so without the tween library nothing will happen!

    Reply to this comment

  7. juan 7 years ago

    Can you post an example of this with scrollbar please?

    Reply to this comment

  8. juan 7 years ago

    Ok maybe check out this file why not working properly thanks.

    Reply to this comment

  9. Soulwire 7 years ago

    Hi Juan,

    I don’t have the time to write a scrollbar – but have you tried using the “shuffleList” method? You can pass an integer, either positive or negative and it will scroll the list up or down.

    So once you’ve set up your scroll bar, when it changes send this to the list:

    For example, if the the scrollbar is moved up, call:

    listMc.shuffleList (-1);
    

    It should only be a question of some simple math to work out the change as the scroll bar is dragged.

    Reply to this comment