
Please update your flash player
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.
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);
15 Responses to Group94 style Menu
Simm
Mar 21st 2007
6:04 pm
Cool! I’ve been looking for 1 like this.
Baiju Cherian
Jul 2nd 2007
6:04 pm
Excellent work…
Stanz Sterden
Jul 18th 2007
6:05 pm
Hey, how are u? Can you respond my request? What`s the include as in your scrolling menu?
Can you send me or post the source?
Mail: Dextromethamphetamine@hotmail.com
Many thanxks and best regards!
Soulwire
Jul 18th 2007
6:07 pm
Hi Stanz.
I am using Laco’s tweening prototypes for this http://laco.wz.cz/tween/
You can also use Fuse, which is worth checking out: http://www.mosessupposes.com/Fuse/
I have made updates to this source and also a circular version! I will be posting them this weekend.
Goliatone
Aug 7th 2007
1:07 pm
hi there,
this is cool stuff, tnxs for releasing the code. What about the circular one?!
Soulwire
Aug 7th 2007
6:09 pm
Hiya Goliatone.
In answer to your question, here is the circular version:
http://blog.soulwire.co.uk/flash/actionscript-2/prototypes/circular-group94-scrolling-flash-menu/
Boga
Aug 29th 2007
4:09 pm
Perfect work… :) But how i can load menu items from xml file ?
best regards from Latvia !!! :)
Adriaan
Oct 23rd 2007
6:10 pm
Awesome, I was looking for this exactly…
@boga: as you traverse through your items received from xml, you can just use the array.push method to add the individual items to the fruits array as in the example
Adriaan
Oct 24th 2007
6:12 pm
Hi Justin,
Thanks again for this, it’s really awesome…
I was just wondering, how would I write an onRollOver handler for each of the listItems?
A response would really be appreciated.
Thanks
Soulwire
Oct 24th 2007
6:13 pm
Actionscript 3.0 Update :)
http://blog.soulwire.co.uk/flash/actionscript-3/as3-group94-style-scrolling-menu/
saclekalk
Nov 29th 2007
6:14 pm
Good stuff, very nicely done.
Well, thanks!
frm.newbie
Apr 1st 2008
6:14 pm
Hi!
Thank you for realeasing the code!
How could I change it so the list items would appear horizontal?
A response woulde be greatly appreciated.
Shabee
Apr 5th 2008
6:14 pm
really great stuff. i’ll try it on my website with xml integration and will post here again. thx.
Peter
May 15th 2008
2:57 pm
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.
Peter
May 15th 2008
3:42 pm
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.
Leave a Reply