Quick Tip: Mimic the Stacks Feature of Mac OS X Using AS3
The Stacks feature has been part of the Mac OS since Leopard and it is a great way to handle display elements. In this Quick Tip we will mimic this feature using ActionScript 3 Classes.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Brief Overview
We’ll make use of the awesome class created by PixelFumes and custom graphics to create a Stacks menu in Flash. You can download the source of the class from the developer’s site.
Step 2: Set Up Your Flash File
Launch Flash and create a new Flash Document, set the stage size to 508x243px and the frame rate to 24fps.
Step 3: Interface
This is the interface we’ll be using; the background is an image taken from my desktop and the cool logos are part of the Tuts+ network.
Convert the logos to MovieClip and mark the Export for ActionScript checkbox. The gray square is a stage button called stackButton.
Step 4: ActionScript
Create a new ActionScript Class (Cmd+N), save the file as Main.as and write the following lines; please read the comments in the code to fully understand the class behavior.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.pixelfumes.stacks.Stack; //Remember to import the custom class
import fl.transitions.easing.Elastic;
public final class Main extends Sprite
{
private var stack:Stack = new Stack(); //Creates a new Stack container
/* The next variables are the movieclips names, you can add any movieclip to the stacks */
private var nt:NT = new NT(); //Nettuts+ logo
private var at:AT = new AT(); //Activetuts+ logo
private var mt:MT = new MT(); //Mobiletuts+ logo
public final function Main():void
{
/* Set the stack properties*/
stack.setRadius(240);
stack.setAngle(35);
stack.setStartAngle(0);
stack.setOpenEasing(Elastic.easeOut);
stack.setOpenTime(1);
stack.setCloseEasing(Elastic.easeOut);
stack.setCloseTime(0.5);
/* Add the elements to the stack container */
stack.addItem(nt);
stack.addItem(at);
stack.addItem(mt);
/* Position and add the stacks to the stage */
addChild(stack);
stack.x = stackButton.x;
stack.y = stackButton.y;
/* Listens for clicks on the stackbutton */
stackButton.addEventListener(MouseEvent.MOUSE_DOWN, stackClick);
}
private final function stackClick(e:Event):void
{
if (stack.getStackOpen() == false) //if stack is closed, open it
{
stack.openStack();
}
else //stack is open, so close it
{
stack.closeStack();
}
}
}
}
Step 5: Document Class
Add the class name to the Class field in the Publish section of the Properties panel.
Conclusion
You’ve created a useful Stacks menu for your applications or website. You can adapt the project to meet your needs or use this technique to build your custom Stacks.
I hope you liked this Quick Tip, thank you for reading!
View full post on Activetuts+
it doesn’t look anything like the mac stacks feature, tween the transparency and scale as well, and lose the elastic bounce easing