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
Haha, thanks!
You make our life much easier!
Could you quickly convert the rest of our portfolio as well while you’re at it?
;)
Pascal – group94
Hi
Love the new scrolling Menu, looks very elegant compared to a lot of things on the web. well done.
Really like the way it moves so had a little play with a few other colours today and they look great.
i do have a quick question.
Im trying to get the buttons to work as links so i can change the menu contents when an option is selected. Similar to the way that the ipod menus change. I’ve tried editing the code on the Main page but can seem to get it right. Do i need to edit the code on the MenuItem page as well to get a like to work properly ?
Thanks
David
Hi
I’ve solved the probelm of adding working links to the buttons. Now im trying to add a sub menu in the same style. do you know if this can be done ?
I could load another swf into the file but it would be easier to just use one file with sub menus
Thanks
David
Hi!
Great menu! I’m wondering if you can post a AS2 version of it.
Greatly appreciated!
V.
Thanks Justin! This will be a great example to learn a few things from…
I borrowed your source and added it to a sight I’m working on. Then added some code to make the button list dynamic based on an XML document. The only problem I’m having is that the buttons, (when they are supposed to be gone) are still clickable.. Like your example above. if you pass your mouse under your last entry a little ways down into the blue, you can still see they button is their with the alpha reduced to 0. I’ve been trying to fix it, but haven’t gotten it yet.
Hey, I figured it out…. A change to the sort() function (posted below): Now it works nicely, and I made my version scaleable with the browser and XML driven.
private function sort():void{ var _y:int; var min:int = _position; var max:int = _position + _visItems; for(var i:int = 0; i = min && i = max) { _y = yPos + _offset - yTar; _items[i].visible = false; }else{ _y = yPos - yTar; _items[i].visible = true; } new Tween(mc, 'y', Regular.easeInOut, mc.y, _y, 8) ; new Tween(mc, 'alpha', Regular.easeInOut, mc.alpha, alph, 8) ; }Thanks for the awesome start!
hey when i run the code ( i just want to learn by the way), all i get is the two arrows you put in as symbols in the .fla. None of the additems you put in the main file show up. could you help me explain why? and i think some code is missing because ‘label’ and ‘bg’ are never defined. maybe you can send me an updated version? thanks
hey i have downloaded this but doesnt work =/
can anyone sent me one working ?
a.free.mind@hotmail.com
Charlie and Ivo – I presume you’re using flash CS3? Also, if nothing but the arrows are appearing you may need to try adding an absolute classpath. Extract the contents of the zip download into a new folder, then in your document settings in the FLA point the classpath to the src folder. Try adding ‘trace(this)’; to the constructor in the class Main.as and see if it outputs anything when you compile.
I can’t think of any other reason why you might be having problems.
Hi again Justin
Sorry to bother you again with my simple problems. But I feel I learn quite a bit from your help. After my source FLA crashed and disappeared mysteriously I converted to the AS3 version of your menu (still have the AS2 code in separate .as files but I feel it’s better to go AS3). Yesterday I rebuilt the whole gallery in AS3. I have connected all my textfields to the constructor and it works perfectly with text strings, but I have some small problems though:
You helped me import an image from an array to an empty movieclip in AS2, how can I do this with the constructor for the menu in AS3? I have tried myself but I can’t seem to find the right way to do this. I also wonder if you could explain this with a code example:
“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.”
I hope this will be the last time I will have to ask for your help.
Best Regards,
Robin
Hey Robin,
Loading images in AS3 is a little harder unfortunately, but it can still be done in a similar way. You use the Loader class, which is a DisplayObject and so can be added to the stage. Something like this:
It works much like the MovieClipLoader class in AS2. If you use the code above but populate the URLRequest with a string from your array, you should be fine.
Regarding the parameters example you mentioned; what’s happening there is that the MouseEvent which is passed to the function associated with the button contains a variable ‘currentTarget’, which will be the particular button which was clicked (they all trigger the same function in this case). So to access the specific URL of a button, you need to store that URL in a variable within the button object. In other words, when you create the button using the new MenuItem constructor, you pass in the function which you want it to fire once its clicked, but you also pass in some parameters, such as the button specific URL (just running with the same example here). These get stored in the button (or MenuItem) object, within a child object called ‘params’, and are then retrieved by the function when it’s clicked. The pageLink example was just an attempt to show that, because the generic Object class (which is what ‘params’ is an instance of) is dynamic, you can specify any arbitrary variable and value to be held within it. So when you put it all together e.currentTarget.params.pageLink is tantamount to “the MouseEvent triggering the function (e) has a property called currentTarget, this will be one of the menu items, so inside that menu item, access the ‘params’ object, and from that extract the variable named ‘pageLink’. This will be a URL string, so then open the page (or whatever).”
Object Orientated programming is a beautiful and elegant thing, but can take a bit of getting used to at first as it can sometimes go against the linear approach that you could get away with in previous versions of Actionscript.
Hope this helps! :)