Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Building a Flash Popup Part 1

Building a Flash Popup Part 1

Part one of a two part series on how to build and implement a basic Flash popup.

This tutorial is focused on creating a popup box in Flash that you could use for alert boxes, menus or smaller sections of a site

Completed project files

Lets start with the actionscript code, which we will place inside of a ".as" file for portability. Here is the class outline or simplified view. I have also added the complete actionscript file so you can see the entire class in full.

class FlashPopup extends MovieClip {

	function FlashPopup() {}
	function init() {}
	function displayPopup() {}
	function hidePopup() {}
	function alignPopup() {}

As you can see the class is pretty lightweight but it gets the job done. We first set up some variables before moving over to meat of the class.

private var _container:MovieClip; // reference to main movie

// static for example use
static var POPUP_WIDTH:Number = 305;
static var POPUP_HEIGHT:Number = 155;

At this point I will show a method "function in a class" and exlain what it does.

function FlashPopup(mc:MovieClip) {
	_container = mc.createEmptyMovieClip("popupHolder", 87432);

Called automatically once the class is setup. Nothing more going on than simply creating an empty movieclip to later hold the popup. After that is done we make a call to the init() method.

function displayPopup() {
	var parent:FlashPopup = this;
	_container.attachMovie("popup_mc", "popup", 2);
	_container.popup.closeMC.onRelease = function() {
	_container._visible = true;

The first part of this method is a workaround for the close button. We assign the parent object to a variable that will be later called. We then attach the popup movieclip that is located in our library. Next we assign the onRelease() button event to fire the hidePopup() which hides and removes the popup. This method also calls the alignPopup() method to place the popup in the center of the stage. Finally once the popup is attached and aligned we make it visible. You could use the Tween class to fade the popup in or maybe add some other animation.

function hidePopup() {
	_container.popup._visible = false;

Next we will setup the hide method which first hides the popup. The _container.popup is reference to the attached popup since we wouldn't want to remove the empty movieclip. Once that is done we can remove the movieclip to free up memory and other resources for the rest of the movie to use.

function alignPopup() {
	var stageW:Number = Stage.width;
	var stageH:Number = Stage.height;
	_container._x = (stageW / 2) - (POPUP_WIDTH / 2);
	_container._y = (stageH / 2) - (POPUP_HEIGHT / 2);

The last method is to align the popup. We achieve this by first grabbing the width and height of the Stage. Using some basic math we calculate the position by using the width/height of the stage and popup which is divided in half. This result is the center point where our popup will be placed. This portion could be re-coded to offset the popup or maybe align it by the x axis but not the y, to mimic the OS X environment.

Now that the class is all set up, save it in the same directory as the .fla with the name "". In the next section we will work on the Flash portion where we actually call this class and build the popup

On to Part 2 (Design and Implementation Phase)

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Building a Flash Popup Part 1

 son  Mon May 16, 2011 1:40 am  
hello, i get the error an actionscript file must have at least one externally visible definition.
what i must to do? i used 3.0actionscript.

 son  Mon May 16, 2011 1:40 am  
hello, i get the error an actionscript file must have at least one externally visible definition.
what i must to do? i used 3.0actionscript.

Add a comment
The ability to add new comments has been disabled in this archived version.

Main | Tutorials | Articles