AS3 OSX Leopard-like "Stacks" Class with Source
Its no secret that I have become quite the Apple fan. Given that, I have been eagerly awaiting the release of OS X Leopard. Leopard has a neat new feature called "Stacks" related to the dock. If you want to learn more about the new dock and stacks you can do so here.
I thought it would be neat to pay homage to Apple and give a go at creating "Stacks" in AS3. In the demo below you can view my attempt. It took me awhile to dig through sites for a good actionscript-based equation that would give me a curve that I liked.
As3 is awesome - you can really pass any type of Display Object into the stack using the stackInstance.addItem() method. It expects a MovieClip - the demo below just uses one that I made in the library. The stack items can really look and be whatever you like.
This is open source so feel free to improve and mod the class. Please share any improvements you have. As always, any link-backs or references are appreciated when using my classes.
If you want to play with the class you can download the class and FLA for the example above.
I thought it would be neat to pay homage to Apple and give a go at creating "Stacks" in AS3. In the demo below you can view my attempt. It took me awhile to dig through sites for a good actionscript-based equation that would give me a curve that I liked.
As3 is awesome - you can really pass any type of Display Object into the stack using the stackInstance.addItem() method. It expects a MovieClip - the demo below just uses one that I made in the library. The stack items can really look and be whatever you like.
This is open source so feel free to improve and mod the class. Please share any improvements you have. As always, any link-backs or references are appreciated when using my classes.
If you want to play with the class you can download the class and FLA for the example above.
Subscribe to this Blog
Very nice. Could make a nice minimal nav on a site.
Posted by
BM |
12:37 PM
Would be nice if the items looked like they are coming out of the container item. At the moment they seem to overlap it and appear on top for me.
I know you did this as a close of stacks in Leopard, but in making this do you see any advantage of these items being displayed along a curve, opposed to them just being vertical?
Posted by
Tink |
6:49 PM
I agree with the previous poster's comment about the stack being vertical. I don't know if OS 10.5 will allow for this, but I would much prefer a vertical stack than a curved one, it just looks neater and easier to read.
Posted by
Anonymous |
11:24 PM
hehe I almost made a full switch from winXP to OSX and so far I love it :)
nice one for the stack menu,
for the curve part
it make sens when you don't want the menu over your actual content but a little bit on the side
Posted by
zwetan |
8:42 AM
Great stuff man, looks very clean.
Posted by
Blas |
6:32 AM
Seems to break the close it gets to 0...I don't understand the point of curving your content (it just makes makes it longer to take in all the information) and it's a shame Apple had take this effect over the top because now we'll be seeing it everywhere =|
Posted by
Kevin |
10:41 PM
Lovely! It's never straight up and down in nature. Some people love to drop a grid on the rolling hills of San Francisco and it just makes no sense. Bang that curve in there!
Posted by
Wiggly |
9:59 PM
in what dock on a pc can this be installed in? I don't quite understand how to use it! sorry for my ignorance! :D
Posted by
Anonymous |
11:48 PM
This isn't for a dock exactly. It is just a proof of concept of a "stack" written in ActionScript. Now, the AIR version that I wrote could be used on a PC but I never released the source or installer for that one.
Posted by
Sarge |
8:22 AM
Nice work!!
Sorry about my ignorance but and now how can you install and run this on Leopard?
Ciao! :)
Posted by
Jorge |
4:28 PM
Leopard already has stacks. This is a Flash example of the same sort of idea. You could use the source and create an AIR app from it to run it in your OS.
Posted by
Sarge |
7:20 PM
I'm tinkering with this a bit and was wondering (probably can't figure this out because I'm SUPER sleep-deprived right now lol) how to change the 'stack item' so that each item is different? Thanks in advance!
Posted by
Anonymous |
2:16 AM
The code in the FLA:
var si1:StackItem = new StackItem();
si1.label_txt.text = "Stack Item";
si1.num_txt.text = "Item " + i;
stack1.addItem(si1);
Will allow you to set Stack items as different labels, etc. In order to change them drastically you will want to modify the Stack class.
Posted by
Sarge |
7:59 AM
The code in the FLA:
var si1:StackItem = new StackItem();
si1.label_txt.text = "Stack Item";
si1.num_txt.text = "Item " + i;
stack1.addItem(si1);
Will allow you to set Stack items as different labels, etc. In order to change them drastically you will want to modify the Stack class.
Posted by
Sarge |
7:59 AM