Group94 Style Menu 34 comments

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);