We often encounter the need to open a popup from Flash.
In this article, we will see how to do it, using an HTML file containing an image opened as a popup from Flash with Actionscript 3.0 and JavaScript.
Obviously, the user will need to have JavaScript and popup enabled on his browser for this to function.

Besides, we will see how to open different popup linking Actionscript and JavaScript.

Let us look at the examples"

Read more

I create a FLA and save it as "single.fla".
Into which, I create two levels. On one of them, I place a button with an instance name "pop_btn". The second level will contain the Actionscript 3.0 needed.

I create an HTML file holding an image that I will use as the popup to open from Flash and I save it as "image.html".
Into which, I insert an image with properties of zero margin as shown in the following preview:



Doing so, we removed all margin space all around the HTML file.
Back to "single.fla", I select the keyframe on the second level, open the action panel and write:
Code:
var js:URLRequest=new URLRequest();
js.url="javascript:window.open('image.html','popper1','width=540,height=360');newWindow.focus(); void(0);";

pop_btn.addEventListener(MouseEvent.CLICK,openPopUp);

function openPopUp(evt:MouseEvent):void
{
	navigateToURL(js,'_self');
}
The result:







Let us analyse the code.

an URLRequest variable
var js:URLRequest=new URLRequest();
I assign the call to the JavaScript file to the "url" property of "js" (notice the sizes in pixels that are the same as the image placed in the HTML file)
js.url="javascript:window.open('image.html','popper1','wid th=540,height=360');newWindow.focus(); void(0);";

I add to the button a listener to the event CLICK that will call the function "openPopUp"
pop_btn.addEventListener(MouseEvent.CLICK,openPopU p);

This function will open the popup using the method "navigateToURL" of Actionscript 3.0
function openPopUp(evt:MouseEvent):void
{
navigateToURL(js,'_self');
}


Next, we will see how to combine Actionscript and JavaScript in case we have more then one button to choose from to open different popup.

I create a FLA and save it as "multi.fla".
In to which, I create two levels as seen in the first example. In the first level, I place 3 buttons with the respective instance names:button_0_btn, button_1_btn, button_2_btn

I create 3 SWF of different sizes containing simple animations to render the idea of this example and I name them: clip_0.swf, clip_1.swf e clip_2.swf.

I create 3 HTML files that contains the respective SWF and I saved them as swf_0.html, swf_1.html e swf_2.html.
As before, I impost the margin to zero.

Back to "multi.fla", I select the keyframe on the second level, open the action panel and write:
Code:
var buttons_array:Array=new Array(button_0_btn,button_1_btn,button_2_btn);
var pops_array:Array=new Array('swf_0.html','swf_1.html','swf_2.html');

for(var i:int=0;i < buttons_array.length;i++)
{
	buttons_array[i].addEventListener(MouseEvent.CLICK,openPopUp);
}

function openPopUp(evt:MouseEvent):void
{
	var js:URLRequest=new URLRequest();
	
	switch(evt.target.name)
	{
		case 'button_0_btn':
		js.url="javascript:window.open('"+pops_array[0]+"','popper1','width=300,height=200');newWindow.focus(); void(0);";
		break;
		
		case 'button_1_btn':
		js.url="javascript:window.open('"+pops_array[1]+"','popper2','width=400,height=400');newWindow.focus(); void(0);";
		break;
		
		case 'button_2_btn':
		js.url="javascript:window.open('"+pops_array[2]+"','popper3','width=100,height=350');newWindow.focus(); void(0);";
		break;
	}
	
	navigateToURL(js,'_self');
}
The result:







Let us analyse the code.

an Array into which I insert the 3 buttons placed on stage
var buttons_array:Array=new Array(button_0_btn,button_1_btn,button_2_btn);
an Array into which I insert the URL to the 3 HTML files that contain the SWF
var pops_array:Array=new Array('http://www.flepstudio.org/swf/mix/aprire_popup/multi/swf_0.html',
'http://www.flepstudio.org/swf/mix/aprire_popup/multi/swf_1.html',
'http://www.flepstudio.org/swf/mix/aprire_popup/multi/swf_2.html');

I add to each buttons, a listener to the event CLICK that will call the function "openPopUp" using a cycle
for(var i:int=0;i < buttons_array.length;i++)
{
buttons_array[i].addEventListener(MouseEvent.CLICK,openPopUp);
}

function openPopUp(evt:MouseEvent):void
{
I create an URLRequest variable
var js:URLRequest=new URLRequest();

based on the selected button"s name (retrieve with "evt.target.name), I assign the call to the JavaScript to open the respective popup
switch(evt.target.name)
{
case 'button_0_btn':
js.url="javascript:window.open('"+pops_array[0]+"','popper1','width=300,height=200');newWindow.focu s(); void(0);";
break;

case 'button_1_btn':
js.url="javascript:window.open('"+pops_array[1]+"','popper2','width=400,height=400');newWindow.focu s(); void(0);";
break;

case 'button_2_btn':
js.url="javascript:window.open('"+pops_array[2]+"','popper3','width=100,height=350');newWindow.focu s(); void(0);";
break;
}

I call the popup using the method "navigateToURL" of Actionscript 3.0
navigateToURL(js,'_self');
}

See you soon!