This is part 2 of our 2 part series on how to design, develop and implement a Flash popup. The class file has been provided if you didn't already complete part 1 or just didn't want to.

Completed project files

Here is a screenshot of the simple popup we will create.

This tutorial is not intended to explain how to design in Flash, but more on how this popup is layed out.

This is the steps I used to create the above popup.

• Create a New Symbol Insert > New Symbol
• Give it an identifier and name of "popup_mc". Click OK
• Draw a rectangle which will be the basic shape.
• Add 2 layers for the close button and text.
• On the first layer using the type tool place an "X" for the close button.
• Turn this text into a movieclip F8 and give it an instance name of "closeMC"
• Then on the last layer created place a title and a description using the text tool

The popup should be all set up at this time and your timeline should look like the following. The naming isn't required but does help. You will notice that I have one extra layer for my shadow but that also isn't required for this example.

Now that the visual portion of the popup is complete we will add the code to make it all work.

// load the popup class
import FlashPopup;

// setup a variable to hold our popup instance
var popup:FlashPopup = new FlashPopup(this);

// call the popup to display it, in
// a more in depth use this would be
// called by some other action. eg: button click
popup.displayPopup();

First load in the class, which is why it is saved in the same folder. Then we create a new instance of the popup class new FlashPopup(). The this portion is used to tell the class what the parent or overall movie is.

The final portion of this code is to make a call to the displayPopup() which actually sets up and displays the popup. In a real world proejct you would most likely call the popup from some other action, like a button press or error trigger. An example would be to create a movieclip or button with the instance name of "showPopupMC" and use the following code to assign the displayPopup() method located inside the popup class.

// Purely for example use
showPopupMC.onRelease = function() {
	popup.displayPopup();
}

There you have it, all the steps required to build and implement our Flash popup. I hope you enjoyed this two part tutorial and as always if you have questions or comments please add them.