AS3 Group94 Menu

Please update your flash player

Download source (AS3)

Welcome to the latest instalment of the Group 94 style scrolling menu tutorial! (With downloadable source files of course)

I have been very busy lately, and haven’t had a chance to share much code. I have been learning AS3 and have to say that I love it! It is much easier to adhere to OOP principles and building class based applications has many advantages.

Anyway, I received an email today from Adriaan, who was wondering how to convert the Group94 scrolling list into a menu system, with rollovers and click functions. I hacked the old source to do this, but thought it would be a good opportunity to revisit the ‘offset scroll’ idea within the contexts of a fully functional scrolling menu.

So here it is. I have built it into a simple class, which means you need to do very little to get it working :)

The class is very flexible, and you can assign functions and parameters to each menu item that you add. This can mean calling the same function with different parameters, or entirely different functions for each item.

Adding menu items is as brilliantly simple as newMenuItem(label, function, parameters)

You can download the source code and pick it apart all you like. However, here is a quick explanation of how to use the G94Menu class.

Firstly we import the classes:

import com.soulwire.g94menu.G94Menu;
import com.soulwire.g94menu.MenuItem;

MenuItem is linked to a movieClip in you library, so you can use any style of menu item you like.

Now, we create a new instance of the G94Menu class and add it to the stage.

exampleMenu = new G94Menu(3, 1, 25);
addChild(exampleMenu);

The parameters the class constructor requires are:

  • Visible items: The amount of items visible at one time
  • Item spacing: The gap between each item
  • Item offset: How far the items scroll up or down as they fly off to the top or bottom

Then we simply add as many items as we want using the new MenuItem constructor, for example:

myMenu.addItem(new MenuItem('Text', func, { params } ))

Here is a breakdown of the parameters you pass to the MenuItem constructor inside the addItem method:

  • Item label: A text string which will be the visible label of the item
  • Function: This is optional, but if present will make the item a clickable button, executing this function when clicked.
  • Parameters: This is an object containing as many parameters as you need. Again, this parameter is optional, and only needed if you have passed a function and it requires parameters.

Now we create a function that will be called when a menu item is clicked:

function someFunction (e:MouseEvent)
{
	if(e.currentTarget.params != null)
	{
		var info:Object = e.currentTarget.params;
		trace(info.page);
	}
}

In this example, we check that the parameters are not null, then access the parameters object using e.currentTarget.params. If your function will open a link (for example), and you pass a URL identified in the parameters object as pageLink, then you can use this by calling e.currentTarget.params.pageLink.

Lastly, to listen for mouse clicks on the scroll arrows, and to enable the mouse wheel, both of which will scroll our menu up or down, we add some event listeners:

function enableScrolling():void
{
	btnUp.buttonMode = btnDown.buttonMode = true;
	btnUp.addEventListener(MouseEvent.CLICK, exampleMenu.scrollUp);
	btnDown.addEventListener(MouseEvent.CLICK, exampleMenu.scrollDown);
	stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
}
 
function onMouseWheel(e:MouseEvent):void
{
	e.delta <0 ? exampleMenu.scrollDown() : exampleMenu.scrollUp();
}

The scrollUp and scrollDown methods can be called whenever you like (i.e. remotely) on any instance of the G94Menu class.

Once again, I really hope this is useful, even if it is just a simple introduction to Actionscript 3 and writing classes.

Thanks to Adriaan and all of you who have been commenting for inspiring me to update this example.

If anyone wants to use this in older projects, and needs an AS2 version, please let me know and I’ll convert it when I get the time.