AS3 Group94 Style Menu

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.

Download: AS3 Group94 Menu
Posted on 24 Oct 2007
51 Comments
1 Trackbacks

Meta

AS3 Group94 Menu was posted on October 24th 2007 in the category Code / Actionscript 3.0, Flash, Open Source 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

49 Responses to AS3 Group94 Menu

Leave a Reply

Pingbacks / Trackbacks

  1. 7 years ago Flash is good for the Soul (wire?) | Cool websites that do everything.

    [...] G94 Animated Menu List [...]

  1. Robin van Emden 7 years ago

    Hi!
    I would like to thank you for making your source code available, saved me a lot of time while working on a project with a tight schedule :)
    Robin

    Reply to this comment

  2. Kris 7 years ago

    Justin,

    I am trying to integrate an event handler for screen resize. I’m not really sure where the most appropriate place would be to append my code.

    in its own separate flash project, I am using the following code, and it works fine with no errors:

     stage.scaleMode = StageScaleMode.NO_SCALE;
    		stage.align = StageAlign.TOP_LEFT;
    
    		stage.addEventListener(Event.RESIZE, scaleObject);
    		function scaleObject(event:Event):void {
    			// set image dimensions to match stage;
    			image.width = stage.stageWidth;
    			image.height = stage.stageHeight;
    
    			// choose the larger scale property and match the other to it;
    			( image.scaleX > image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;
    			image.x = (stage.stageWidth/2) - (image.width/2);
    			image.y = 0;
    			trace("Stage Height: "+stage.stageHeight+" // Stage Width: "+stage.stageWidth+" // image X Pos: "+image.x); 

    However, when I place that in the Main.as file that goes with the g94scroller project, I get the following error:

     1046: Type was not found or was not a compile-time constant: Event.

    Reply to this comment

  3. Soulwire 7 years ago

    Hi Kris,

    The event you need to add to the stage is the resize event:

    stage.addEventListener(Event.RESIZE, onStageResizeHandler);

    …though the 1046 error you’re getting means that the compiler can’t find the code for the Event class, meaning that you need to import it:

    import flash.events.Event

    Reply to this comment

  4. gustavo 7 years ago

    better animartec.com

    Reply to this comment

  5. Soulwire 7 years ago
  6. Praveen Ghatta 7 years ago

    Cool Work, It feels awesome to read the code structure and the way its been implemented.

    Reply to this comment

  7. Matt 7 years ago

    Hey, great script! How would you go about modifying this into a grid with images, that when you scroll, shifts the row up or down? Thanks for any help!

    M

    Reply to this comment

  8. Arcelia Stidd 6 years ago

    Hello and many thanks for a enlightening site. I am still thinking over what you posted.

    Reply to this comment

  9. Isabel 6 years ago

    Hi,
    I want to erase some of the items in the list when I´m in a certain page and add some different items. I´m not sure if its possible since I´m not that good with action script, but it would mean me a lot me if you could help me.
    If experimented a bit with removeItem, and removeAll but it doesn´t really work. removeChildAt(…) works but it just leaves a blank space in the menu instead of moving the other items up

    Isabel

    Reply to this comment

  10. Claudio 6 years ago

    Hi!, first of all i say thanks! you have very cool stuff.
    i’m a bit sick hahaha, i googled for a large amount of sites how to keep away the TypeError: Error #1009: Cannot access a property or method of a null object reference.

    i wish to load the group94 Menu into another clip, how can i solve this issue?

    thanks in davance!

    Reply to this comment

    1. Soulwire 6 years ago

      This means that an object doesn’t exist but is being referenced or used somewhere. Does it not tell you which line of code this error is occurring on?

  11. Peter 6 years ago

    Somethings odd, when i opened this in flash CS4 everything works when i published. Yet when i open this in CS5… nothing happens. it does get published though, yet no errors, nothing on stage.
    I double checked the classpaths and it seems correct.
    Any idea please?

    Reply to this comment