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 2

Building a Flash Popup Part 2

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

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.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Building a Flash Popup Part 2

 Alexander  Fri Feb 16, 2007 4:48 am  
Awesome tutorial, as usual (Especially helps since I suck at Flash...)!
 mkeefe  Sun Feb 25, 2007 12:20 am  
Flash isn't too hard, but I can understand places it could be simpler. I will be adding more content along these lines and if you have ideas, please let me know.
 Robert [FX77]  Thu Mar 8, 2007 8:40 pm  
Nice job Matt !

Sorry it took so long for me to get around to checking it out. Anyhow, would be interesting to see it expanded by using external text, either from xml or txt files. I can see a use for this for sure. Rather then make a pop up for every item where you'd want a pop up info box, going with external text to load into the pop up box would give it more flexibility. Of course you would also want to consider adding the scrollbar UI for text that would exceed the box size.
 Jordao  Fri Sep 21, 2007 6:26 am  
Hi.

This is very good, but what if i wanted to open more then one popup, from different buttons.

Could it be something like:

// load the popup class
import FlashPopup;

// setup two variables (instead of only one) to hold our popup instance
var popup:FlashPopup = new FlashPopup(this);
var popup1:FlashPopu = new FlashPopup(this);

// call the popups to display them, in
// a more in depth use this would be
// called by some other action. eg: button click
popup.displayPopup();
popup1.displayPopup();
 Valentijn  Fri Sep 28, 2007 5:38 pm  
HI

Anyone knows to get paramas, class and rel from a getURL to html? the right way?
See: http://www.datavraag.nl/sonic/

The image is link itself and triggers a window box internally. But how can I trigger the same ling from getURL actionscript 2 style with the class/params and if possible the rell param.

Any help/link is helpful!
Valentijn - please reply at :
o n t w e r p AT z o n n e t . n l
 Jeff  Wed Apr 2, 2008 6:38 am  
I would also like to assign two different pop ups to two different buttons. I tried looking at the code adding more functions but it doesn't seem to work and it started to get complicated. Is there an easy way?

Thanks.

PS to jordao, no you can't do that. Its not enough.
 mkeefe  Wed Apr 2, 2008 10:16 am  
I don't have Flash open at the moment, but the class should easily be duplicated, such as:

// setup variables
var popup:FlashPopup = new FlashPopup(this);
var popup2:FlashPopup = new FlashPopup(this);

popup.displayPopup();
popup2.displayPopup();
 gabriela moreno  Thu Apr 17, 2008 8:21 am  
I am working on settingup more variables, etc,, I canīt make it yet. My email address is gabimor77@hotmail.com

1.- I have the 2 buttons int the scene;
with instance names: showPopupMC and showPopup2MC

2.- I have this action:
// load the popup class
import FlashPopup;

// setup two variables (instead of only one) to hold our popup instance
var popup:FlashPopup = new FlashPopup(this);
var popup2:FlashPopup = new FlashPopup(this);

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

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

// Purely for example use
showPopup2MC.onRelease = function() {
popup2.displayPopup();
}

3.- When played, "showPopupMC" button loads and closes the Graphical popup: popup_mc.

The 2nd button "showPopup2MC" loads and closes the "popup_mc" instead "popup2_mc".


Hope you can help me,
Cheers, Gabriela.
 mkeefe  Sat May 10, 2008 6:07 pm  
There can only be one popup open at a time. However, you can edit the class files, and remove the hard-coded "popup_mc" reference by passing in a string or similar approach. This will make the reference dynamic and will allow multiple popups.
 Stan  Mon Jun 9, 2008 11:20 am  
Hi,
Is it possible to adapt this code to get a kind of Modal Popup ?
Regards

Stan
netsunset@gmail.com
 mkeefe  Mon Jun 9, 2008 11:41 am  
@Stan, To create a modal dialog box you would simply display a half opaque box over all other content and trap all Mouse Events within that box.

Such as:


var blocker:MovieClip = new MovieClip();
blocker.graphics.beginFill(0x000000, 0.8);
blocker.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
blocker.graphics.endFill();

function nullEvent(e:*):void {}

// Trap Mouse Events
blocker.addEventListener(MouseEvent.CLICK, nullEvent);
blocker.addEventListener(MouseEvent.ROLL_OVER, nullEvent);
blocker.addEventListener(MouseEvent.ROLL_OUT, nullEvent);
blocker.addEventListener(MouseEvent.DOUBLE_CLICK, nullEvent);
blocker.addEventListener(MouseEvent.MOUSE_DOWN, nullEvent);
blocker.addEventListener(MouseEvent.MOUSE_MOVE, nullEvent);
blocker.addEventListener(MouseEvent.MOUSE_OUT, nullEvent);
blocker.addEventListener(MouseEvent.MOUSE_OVER, nullEvent);
blocker.addEventListener(MouseEvent.MOUSE_UP, nullEvent);

addChild(blocker);


You could also resize this clip on stage resize and so much more, but that should get you started.
 Ryan  Sat Jun 28, 2008 8:57 am  
Hi, when I open my flash file, the popup is automatically opened. Is there a way that it wont open until the button is actually pressed?
 mkeefe  Sat Jun 28, 2008 9:42 am  
@Ryan - Yes, make sure the "popup.displayPopup();" is only located within a button and not also on the main timeline or Class file. Then it will only open on click or "button press".
 Ryan  Sat Jun 28, 2008 10:24 am  
Thankyou! That worked perfectly.
 Thorsten  Wed Nov 5, 2008 6:30 pm  
Hi,
it works very well with one "popup"-movie only.
But how can i get more than one movie in the class?
What did you mean with "remove the hard-coded "popup_mc" reference by passing in a string or similar approach"?
I can imagine but i can not make it.
How i must change the AS-File?
Thank you soo much!!!

Regards
Thorsten
 Mark  Sat Dec 13, 2008 2:42 pm  
I love this tutorial! It makes sense but I am having issues with trying to use this as part of an interactive map. I have movie clips setup and trying to use various popups to display the text for each one:

onClipEvent (mouseDown) {
popup.displayPopup();
}

But I am having issues with getting the popup to show and to get it to display a popup at all with that above code. I'm probably just doing something simple wrong and would appreciate any input!
 mkeefe  Sat Dec 27, 2008 1:18 pm  
@Mark - you would need to create a popup instance for each button in your interactive map. Please contact me offlist if you would like some help with that, I am glad to do it.
 Tim  Tue Dec 30, 2008 10:42 am  
Found your tutorial...as a beginner it really helps. thanks.
I havne't figured out the way to update the as file for multiple popups. If you get the time to add here that would be awesome. Hope you had a great holiday.
tim
 mkeefe  Sat Jan 10, 2009 11:55 am  
@Tim - Please refer to my comment entered on "Wed Apr 2, 2008 10:16 am" with the process of using more than one popup. Let me know if you still have more questions.
 tim  Sat Apr 25, 2009 8:01 pm  
Is there a way to update this script for Actionscript 3?
 mkeefe  Mon May 4, 2009 10:54 am  
@tim - For the most part the code stays the same, jut modify the event handler (click) and then the best way is to go through and "see what works" or properly learn AS3.
 jeff  Thu Sep 3, 2009 2:48 pm  
I figured an easy way to make multiple popup buttons. Just copy the funtion from the .as

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

And rename it to function displayPopup2(), function displayPopup3(), etc.

Duplicate your popup_mc (and popup_x_mc) in your project and name both of those to popup_mc2, popup_x_mc2, etc.

Set your actions accordingly to the new functions and it should work fine (I'm also using this for an interactive map).
 Mike D  Mon Mar 15, 2010 12:50 pm  
Is there any way to make this pop up fade in?
 Anton  Fri Feb 18, 2011 4:10 am  
Is there any way to make this pop up fade in?
totoshka2004@rambler.ru
 teddyvuong@hotmail.com  Thu Jun 16, 2011 9:49 am  
Would anyone know how to not have the text box automatically show up (only shows up on the click?)
 mkeefe  Mon Jun 27, 2011 10:41 am  
@teddyvuong - Do you mean the entire box or just the textfield?
 Bob  Sat Oct 1, 2011 12:04 pm  
Here something like this:
http://activeden.net/item/bubble-notifications/549740
 Robert  Sun Oct 2, 2011 8:01 pm  
Hi, I was just looking for flash popu up and this is the only normal I have found ... I like this one a lot and would like to use it in my site I am making as a advert pop up .. I would need to know how to change actionscript to make a more pop ups each with diferent picture. Is there someone who can help me to find solution for this, please ... Thx, Robert. You can also contact me on this eamil address, which would be better, cause of my connection issues : slobodarobert724@gmail.com
 Transporte en Ecuador  Wed Nov 16, 2011 12:50 pm  
Great tutorial, I wonder why is not part of the flash framework. Thanks
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles