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.

Flash OSX stacks effect

Step 3: Interface

Flash OSX stacks effect

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 and write the following lines; please read the comments in the code to fully understand the class behavior.

	import flash.display.Sprite;
	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*/
			/* Add the elements to the stack container */


			/* Position and add the stacks to the stage */

			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
			else //stack is open, so close it

Step 5: Document Class

Add the class name to the Class field in the Publish section of the Properties panel.

Flash OSX stacks effect


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!