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
Hi and first of all thanks for the tutorial, very helpful.
I’m trying to load this into another file and keep getting the error : 1009
“Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.”
Everything works fine on it’s own, just the problem calling the swf. Hope this makes sense?
Grateful for any help. Best wishes Neil
Hi, problem solved :) i removed
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
and now it works fine. Thanks Neil
Hi, I came up with same problem as Lance, the buttons are still clickable when they’re not visible. I didn’t quite understand the solution Lance gave us, so I solved this problem by setting the buttonmode to false in the sort() function, this did the trick, but if you accidentally click above or under the menu, where the non-visible items are, the mouseEvent is still there and calls the page. Is there a way to remove the mouseEvent on the non-visible items?
This is my code in the sort() function:
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); var yPos:int = mc.id * (mc.height + _spacing); var yTar:int = _position * (_spacing + mc.height); if(i = max) { _y = yPos + _offset - yTar; _items[i].buttonMode = false; } else { _y = yPos - yTar; _items[i].buttonMode = true; } new Tween(mc, 'y', Regular.easeInOut, mc.y, _y, 8); new Tween(mc, 'alpha', Regular.easeInOut, mc.alpha, alph, 8); } }mmm, the code is completely messed up with submitting… Probably the reason why the code of Lance didn’t work…
Hi Ruben,
Sorry your code got messed up. I need to stop Wordpress from escaping code in comments…
You won’t need to remove the event listeners. Try using mouseEnabled instead of buttonMode and that should do it.
Thanks! Mousenabled didn’t work at the first time, but also adding mouseChildren gave me the wanted result!
Good stuff. Yeah, TextFields often cause this problem. Glad you got it sorted…
any AS3 guru able to make this already-great menu into a continuous one? I hate to ask for free assistance, but Im willing to make some $ donation if anyone can help… Post your email so I can contact you, thanks.
hey when you clicked the arrow fast the menu getting an error
What’s the error you’re getting? I can’t seem to reproduce it…
Hey, thank you for this example. It hes helped me understand many things with AS3 and coding in general. One showing a solid way to keep things dynamic with custom classes. Two helping me see how parameters from functions can be passed to other functions.
So now I’m going to try and modify what you have given me into 3 different things
1. A Drop down menu system
2. A side bar
3. A constant horizontal news bar
So i have to figure out how to make 3 instances of this custom class
By the way I have fixed the clickable item issue on the edge of the screen.
Here is what I did for those who can’t get the other fixes to work.
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) { var yPos:int = mc.id * (mc.height + _spacing); var yTar:int = _position * (_spacing + mc.height); if(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); } }I love the tutorials& knowledge you’re sharing. I have a quick question about adding a feature.
How would I go about making the middle item display an image. Like this : http://www.normann-copenhagen.com/ (go to products & you’ll see the middle item displays an image)
Thanks,
Arif