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
Thius menu system looks really nice :)
I was wondering how to make this menu system continuous so when it gets to the bottom of the menu it push the items from the top of the menu below the last item in the menu and vice versa.
Any adivce on this Justin?
Cheers.
I love this menu and i’m trying to start using as3 and document classes. I have been staring at the code for about a week now trying to get the menu swf to load on top of another file but i’m getting all these errors and can’t quite load it. I’m also trying to make the menu, when clicked, load another menu, sort of a sub menu. Once i go through a couple of “sub menus”, i wanted to load a picture gallery from an external swf. I’m trying to wrap my head around this as3 and it’s been slow going. I would love any help that might be extended my way. I hope this makes sense.
tom
hi,
has anyone done a version with horizontal scrolling?
Hey Rich,
I think it will really only be a question of switching y for x and width for height. The rest of the logic should hold which ever way you’re scrolling!
Hope you work it out.
Hello,
I’m having the same problem as Charlie and Ivo. I’m really new to AS, so I may be making a mistake, but when I open the .fla file, I don’t see actions in the main timeline. When I export the movie, I just see the arrows. Is there supposed to be an .as file in the .zip too? Sorry for the newbie question, but I’m not seeing any of the code. I am using Flash CS3.
Thank you!
Hey Cindy,
Yep, there is no timeline code, instead there are classes controlling the movie. Make sure the folder called ‘src’ is in the directory you unzipped the archive to, and then publish. If you’re still having trouble, click the pencil icon next to the ‘Document Class’ item in the properties panel (Flash CS3). If it gives you an error saying that it cant find the definition for the document class, edit your publish settings and under ‘classpath’ give an absolute path to the ‘src’ folder.
I’m certain all will be fixed once you unzip the entire contents of the download to a new folder and then try and compile the movie. In the meantime, have a little read up on classes and OOP and this whole external .as file malarkey will make much more sense :)
Excellent! Now I have it working. Thanks for your help and for the tips – I’ll do some reading! :)
Hello. How are you?
It’s very good tutorial. I changed your menu to x position. But the buttons are above my btns Up and Down.
You know how I can change the depth? For the list of buttons is created behind the btns Up and Down?
Thanks
Hi!
I made a change in the public Main () of Main.as.
Where is the call addChild (exampleMenu)
I changed to
Var index: UINT this.getChildIndex = (btnNext);
AddChildAt (exampleMenu, (index – 1));
Thanks
Hi… excellent. Sorry for my english… I’m spanish… but… I try.
addEventListener (MouseEvent. MOUSE_WHEEL, onMouseWheel);
Doesn’t work fine.
Thanks for this code!.
Gus
@ Gustavo -
Are you on a Mac? there are issues with Mousewheel and MAC ( google it).
hope that helps a little
b
Cheers Brendan!
Yeah, I think the best solution I’ve seen is to use ExternalInterface to recieve the scroll events. There’s a plugin for SWFObject which should help: http://blog.pixelbreaker.com/flash/as30-mousewheel-on-mac-os-x/