Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Quick Tip: Mimic the Stacks Feature of Mac OS X Using AS3

by

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


Step 5: Document Class

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

Flash OSX stacks effect

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!

Advertisement