I have always liked the neat and compact menu system Group94 often use in their projects. It is really useful for lists or menus and is also of course very elegant.
I don’t know how Group94 do it, but here is my attempt. I have created two prototypes to make it easy to use multiple times within a project.
Download: Group94 Style Scrolling List
This example just uses a simple list, but the actionscript can easily be modified to make the items clickable to use as a menu system, or you could even use images. Your call!
The first prototype is used to create a vertical list from an array. The second is used to scroll the list depending on clicks or mouse wheel scrolling.
This is bare bones, so it is nice and simple and easy to build upon.
/*
I have used the old Zigo tweening prorotypes here, it will also work with Fuse.
Links are always good if you use it :)
*/
#include "lmc_tween.as"
MovieClip.prototype.createList = function (array, clip, visibleItems, xPos, yPos, spacing, offset)
{
this.listItems = new Array ();
this.total = array.length;
this.vis = visibleItems;
this.spacing = spacing;
this.offset = offset;
this._x = xPos;
this._y = yPos;
this.num = 1;
for (var i = 1; i <= this.total; i++)
{
var listItem:MovieClip = this.attachMovie (clip, "listItem" + i, i);
listItem.yPos = i * this.spacing;
if (i <= this.vis)
{
listItem._y = listItem.yPos;
}
else
{
listItem._y = this.offset + (i * this.spacing);
listItem._alpha = 0;
}
listItem.id = i;
listItem.txt.text = i + ". " + array[i - 1];
listMc.listItems[i - 1] = listItem;
}
};
MovieClip.prototype.shuffleList = function (n)
{
this.num += n;
if (this.num > 0 && this.num <= ((this.total + 1) - this.vis))
{
var min:Number = this.num;
var max:Number = this.num + this.vis;
for (var i = 1; i <= this.total; i++)
{
var mc = this.listItems[i - 1];
if (i < min)
{
var Y:Number = mc.yPos - this.offset - (this.num * this.spacing);
var alpha:Number = 0;
}
else if (i >= max)
{
var Y:Number = mc.yPos + this.offset - (this.num * this.spacing);
var alpha:Number = 0;
}
else
{
var Y:Number = mc.yPos - (this.num * this.spacing);
var scale:Number = 100;
var alpha:Number = 100;
}
mc.tween ("_y",Y,.7);
mc.alphaTo (alpha,.7);
}
}
else
{
this.num -= n;
}
};
var fruits:Array = new Array ("Cornelian cherry ", "Date palm", "Fig", "Grape", "Jujube", "Black mulberry", "Olive", "Pomegranate", "Pomelo", "Grapefruit", "Lemon", "Lime", "Mandarin", "Clementine", "Tangerine", "Orange", "Avocado", "Feijoa", "Guava", "Kumquat", "Longan", "Lúcuma", "Lychee", "Passion fruit", "Pond-apple", "Strawberry guava", "Tamarillo", "Yangmei");
var listMc:MovieClip = this.createEmptyMovieClip ("listMc", 0);
listMc.createList (fruits,"listItem",5,150,40,30,20);
listMc.shuffleList (0);
prevBtn.onPress = function ()
{
listMc.shuffleList (-1);
};
nextBtn.onPress = function ()
{
listMc.shuffleList (+1);
};
var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
if (delta < 0)
{
listMc.shuffleList (+1);
}
else
{
listMc.shuffleList (-1);
}
};
Mouse.addListener (mouseListener);
really great stuff. i’ll try it on my website with xml integration and will post here again. thx.
Greetings.
i am trying to convert this into a more dynamic way by adding xml to it. so far so good, my example works well.
yet one thing wonders me
i drew a line on stage at Y : 75, as there is where i want the list’s first item to appear.
but when i publish the movie, the clip starts exactly at 154, what is the sum of my thumbnail height : 79pixels and the start Y : 75
However, when i scroll down or up, the wished for Y value of the clips is correct. in otherwords, the clip nicely positions itself at 75
here is the code i used
as you can see, i want the list at x300, y75, the items are 79in height which has an offset of 39.5
any advice? Thank you
i haven’t changed anything to the code except that the array is now build from xml, the createList function only triggers when the full xml has been loaded. so that cannot be the problem.
nevermind actually,
i found the issue.
i had to place the createList(…) function right after my xml import, otherwise it didn’t read the xml correctly.
you can delete my comments.
Hi
Great script! I have managed to modify the script so it looks as I want it to look but I am having some problems adding content to the menu items. I have a series of textfields in my listItem movieclip that I want to add content to. I have a header which describes the title of the project. I used the existing system to do this (the fruits array) but how do I add more arrays and how do I connect them to the other textfields?
I also wonder how I can load an external image into an empty movieclip in each listItem? Thanks for a great script. I hope you can / will help me. :)
Hi Robin,
When the items are initialised (inside the loop of the ‘createList’ function), it is going through the fruits list incrementally and then adding the value of the fruit array at the point of the loop to the button. So, if you have another array, say, ‘fruitColour’, which is populated by colours that corrospond to each fruit, you can just add the item from this array to another textfield.
Example:
However, a better way would be to use a 2D array, or an object:
var fruits:Array = [ {name:banana, colour:yellow}, {name:kiwi,colour:green} ]; // then later in the init loop inside the createList function use... fruitNameTextField.text = fruits[i].name; fruitColourTextField.text = fruits[i].colour;Where fruitNameTextField reffers to a textField inside your button clip.
Hope that helps
Ah, thanks for your quick reply! :)
Yes I am sure that will help, I was on the right track then, just made some little mistake. I will try if it works. Thanks.
Thanks Justin!
It works perfectly now. Just one more question. How do I load an image into an empty movieclip in listItem instead of adding text into a dynamic textfield from the array?
/ Robin
Hey Robin,
You’d use the same logic, just replace the syntax for setting the contents of a TF with that of loading an external file. eg.
It would be good practise to use MovieClipLoader and have a visual preloader for the image, but loadMovie should be fine as I presume they’re small thumbs and so will load pretty quick.
Is that what you meant?
Yep, that’s what I meant. Great, this is starting to look real nice now. :)
Good practice for me, I really should begin learning AS3 instead but I guess it’s still a good thing to practice some AS2 as well. This is for my portfolio so I need to finnish it as soon as possible, that’s why I chose AS2. Great opportunity to learn some more scripting to. Not very experienced working with arrays as you probably understand ;)
Anyway, thanks for your help. I think I’m understanding the logic behind this now. Very kind of you.
hey can also add scrolling please?
What do you mean by scrolling?
Like a scrollbar scrolling instead of just arrow up and down?