Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

Opening a popup with flash CS3 and JavaScript

This is a discussion on Opening a popup with flash CS3 and JavaScript within the Tutorials forums, part of the English Forums category; We often encounter the need to open a popup from Flash . In this article, we will see how to do ...


Go Back   Forum Flash CS3 Flash CS4 > English Forums > Tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  10 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 16-10-07, 07:16
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Opening a popup with flash CS3 and JavaScript

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!
__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !

Last edited by Flep; 28-08-08 at 06:22..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #2 (permalink)  
Old 18-10-07, 15:37
hard_overclocker's Avatar
Moderator
 
Join Date: Jul 2007
Posts: 51
Rep Power: 2
hard_overclocker is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

Hi Flep,
any ideea how to create popups without creating .html pages for every image ?
thanx
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #3 (permalink)  
Old 18-10-07, 15:40
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

Hi man,
popups inside the SWF ?
__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #4 (permalink)  
Old 18-10-07, 15:43
hard_overclocker's Avatar
Moderator
 
Join Date: Jul 2007
Posts: 51
Rep Power: 2
hard_overclocker is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

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 ?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #5 (permalink)  
Old 18-10-07, 15:53
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

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.
__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Flash Multi Gallery
  #6 (permalink)  
Old 18-10-07, 16:01
hard_overclocker's Avatar
Moderator
 
Join Date: Jul 2007
Posts: 51
Rep Power: 2
hard_overclocker is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

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

Thanx
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #7 (permalink)  
Old 19-10-07, 09:19
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

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:
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:
PHP Code:
 <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
Attached Files
File Type: zip ExternalInterface.zip (12.5 KB, 73 views)

__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !

Last edited by Flep; 13-05-08 at 20:12..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #8 (permalink)  
Old 19-10-07, 11:47
hard_overclocker's Avatar
Moderator
 
Join Date: Jul 2007
Posts: 51
Rep Power: 2
hard_overclocker is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

You are brilliant sir .
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #9 (permalink)  
Old 15-11-07, 21:47
Junior Member
 
Join Date: Nov 2007
Posts: 2
Rep Power: 0
gusbat is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

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!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #10 (permalink)  
Old 15-11-07, 22:44
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: Opening a popup with flash CS3 and JavaScript

Hi gusbat and welcome

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

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
Flash vs JavaScript seoplayer Off Topics 6 02-10-08 04:20
Aprire una popup con Flash CS3 e javascript Flep Articoli e tutorials 11 11-09-08 23:02
Flash 8 finestre popup con fogli xml di flash Actor Flash CS3 generale 1 07-09-08 00:51
javascript e flash tanysonic Actionscript 3.0 base 2 17-12-07 09:52
problem with javascript and flash cs3 alexyz4 Flash CS3 eng 8 11-10-07 14:21


All times are GMT. The time now is 00:52.


Powered by vBulletin versione 3.7.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap


FlepStudio
by Filippo Lughi
P.IVA 03605860406