Advertisement
News

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.

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.

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!

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: User Controls0d63m preview image@2x
    We are building a simple music player app for Android in this series. So far, we have presented a list of the songs on the device and allowed the user to make selections from it, starting playback using the MediaPlayer class in a Service class. In this final part of the series, we will let the user control playback, including skipping to the next and previous tracks, fast-forwarding, rewinding, playing, pausing, and seeking to particular points in the track. We will also display a notification during playback so that the user can jump back to the music player after using other apps.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Song Playback0d63m preview image@2x
    In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In the first part, we created the app and prepared the user interface for playback. We presented the list of songs on the user device and specified a method to execute when the user makes a selection. In this part of the series, we will implement a Service class to execute music playback continuously, even when the user is not directly interacting with the application.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Game Development
    Implementation
    Write Once, Publish Everywhere With HaxePunk: Making a GamePreviewretinaimage
    You've probably had this experience before: you hear about an awesome game, but then you find out that it's only coming out on the one platform that you don't own. It doesn't have to be this way. In this tutorial, you will learn how to use Haxe to make a game in one development platform that can target multiple gaming platforms, including Linux, Mac, Windows, iOS, Android, and Flash.Read More…
  • Game Development
    Implementation
    Finite-State Machines: Squad Pattern Using Steering BehaviorsFinite state machines steering behaviors squad 400px
    Finite-state machines and steering behaviors are a perfect match: their dynamic nature allows the combination of simple states and forces to create complex behavior patterns. In this tutorial, you'll learn how to code a squad pattern using a stack-based finite-state machine combined with steering behaviors.Read More…
  • Game Development
    Implementation
    Finite-State Machines: Theory and ImplementationFeatured image steering leader following 400
    A finite-state machine is a model used to represent and control execution flow. It is perfect for implementing AI in games, producing great results without a complex code. This tutorial describes the theory, implementation and use of simple and stack-based finite-state machines.Read More…