Opening a popup with flash CS3 and JavaScript

[Flep]

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:

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:

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!

[hard_overclocker]

Hi Flep,
any ideea how to create popups without creating .html pages for every image ?
thanx

[Flep]

Hi man,
popups inside the SWF ?

[hard_overclocker]

No, popups outside swf.
I have a tiny flash gallery and on thumbnail click I want to open a popup with that image, and creating a html file for every image seems too much.
What do you think ?

[Flep]

I think the oly way is Javascript.
I'm investigating.
I think a javascript function can create a new popup and populate it.
Call the function from Flash and pass the image url.

[hard_overclocker]

Good idea, let me know what you find out.
I will also give it a shot, but since I'm no expert ...

Thanx

[Flep]

here i am
I got it.

You can call a Javascript function by using ExternalInterface class of Actionscript 3.0
The Javascript function must be inserted in HTML file that contains the SWF.

Lets do a sample:
- i have an image here: http://www.flepstudio.org/test/pic_2.jpg

I want open it into a popup without to create the html page that holds it.

I create a button into my FLA, i call it send_btn.
The code:

send_btn.addEventListener(MouseEvent.MOUSE_DOWN,callJS);

function callJS(evt:MouseEvent):void
{
	ExternalInterface.call("createPopup","http://www.flepstudio.org/test/pic_2.jpg","280","187");
}

Now, i create a new HTML file and i embed the SWF in it.
I also add this Javascript:

 <script language="JavaScript">
    function createPopup(image,ww,hh) {
var winleft = (screen.width - ww) / 2;
var contentWindowBEGIN='<html><head><title>Image</title></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><img src="http://www.flepstudio.org/forum/tutorials/';
var contentWindowEND='" alt="" onclick="window.close()" style="cursor: pointer;"></body></html>';
var winUp = (screen.height - hh) / 2;
var style = 'left='+winleft+',top='+winUp+', width='+ww+', height='+hh+', status=no, menubar=no, toolbar=no, scrollbars=0';
newwin=window.open("", "", style);
newwin.document.write(contentWindowBEGIN+image+contentWindowEND);
} 

That function, will recieve 3 arguments: the url of the image, width and height.
It creates the popoup with same size of image and insert the image into the popup.
Positions the popup at center of user's monitor.

You can try on-live here:
ExternalInterfaceExample

I also attach the source files

[hard_overclocker]

You are brilliant sir .

[gusbat]

Ref: pop-up
Can someone give me an Example of .fla?
I am From Argentina, Sorry for my English. jajajaja
Thanks.

Si alguien sabe Español, estoy pidiendo que pongan el Ejemplo en un .fla para poder ver bien el codigo intertno y adaptarlo a lo que necesito.
Gracias!

[Flep]

Hi gusbat and welcome

Just copy and paste the code in your FLA.
Follow the tutorial instructions, it's easy