AS - Popups From Flash - Solution

*Last edited by tiran : 2008-02-05 at 04:11.*

OK, I have been away from Flash for a little while now, and even when I was developing heavily in it I never used pop-up windows. I have recently run into a situation where I need them. Am I really so horribly behind that I missed the fact that Pop-Ups just don't work from flash anymore if the user has an active blocker? Is there a way to make the browser register the onClick and not block it if the user clicks it?

This is about more than just me and my dream of doing nothing.

Nutrox · 2008-02-04 #2

Popups do indeed work from Flash.

In order for the browser to trust the Flash object, thus allow popup windows, the Flash object needs to be part of the DOM's trusted display list. Normally when you add a Flash object to the document it is contained in it's own "container" and as a result the browser will not trust the Flash object. The way to fix this is to set the wmode property of the Flash object to "opaque" or "transparent" (obviously don't use transparent unless you really need to), that will plop the Flash object in the DOM's display list as a trusted object, and you can then launch popups without restriction (although a mouse-click is still required, no auto-launch popups are allowed, not even in JavaScript).

When you set the wmode to "opaque" or "transparent" you will notice that Firefox will show a dotted line around the Flash object when it gains focus (when you click on it), the way to prevent that is to set the "outline" style of the object to "none" (FYI, that also works for regular HTML links).

Here is an example of the HTML:

XHTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <title></title>
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-language" content="en-gb"/>
    
    <meta name="mssmarttagspreventparsing" content="true"/>
 
    <style type="text/css">
 
        object
        {
            width:800px;
            height:500px;
            display:block;
        }
 
        object:focus
        {
            outline:none;
        }
    
    </style>
 
    <script type="text/javascript">
    
        function openWindow()
        {
            if( window.open( "some.site.com", "windowname", "options" ) )
            {
                return true;
            }
 
            return false;
        }
    
    </script>
 
</head>
    
<body>
 
    <object id="flash" type="application/x-shockwave-flash" data="movie.swf">
        <param name="movie" value="movie.swf"/>
        <param name="wmode" value="opaque"/>
    </object>
 
</body>
 
</html>

If you are publishing the Flash movie for Flash Player 8 or higher then you should take advantage of the ExternalInterface class to call your JavaScript functions. Not only is it the cleanest way to do things, it also allows you to receive data back from the functions. For example, if for some reason that popup window fails to launch then "false" will be returned to Flash and you could present the user with a message of some kind, if the popup launches fine then "true" will be returned.

ActionScript 2.0 Code:

import flash.external.ExternalInterface;
 
function myFunc():Void
{
    var result:Boolean = Boolean( ExternalInterface.call( "openWindow" ) );
 
    if( result )
    {
        // popup launched
    }
    else
    {
        // popup failed to launch
    }
}

You don't even need any JavaScript code, you can open a window directly from Flash (although you won't get any data returned).

ActionScript 2.0 Code:

import flash.external.ExternalInterface;
 
function myFunc():Void
{
    var url:String = "http://www.ultrashock.com";
    var windowName:String = "mywindow";
    var windowOptions:String = "width:800,height:600";
 
    ExternalInterface.call( "window.open", url, windowName, windowOptions );
}

One other thing to keep in mind: Your Flash object will need to have an id in order for the ExternalInterface class to work. Also, check if the ExternalInterface can actually be used by making sure ExternalInterface.isAvailable is true, if ExternalInterface is not available then you should fall-back to the nasty getURL way of calling JavaScript from Flash. You might also want to pass a flashVar to the movie letting your code know if JavaScript is enabled in the browser.

Nutrox · 2008-02-04 #3

PS: Moved thread to the ActionScript forum and made it sticky seeing as this question is being asked quite frequently at the moment.

Laveklint · 2008-02-04 #4

nice posts

tiran · 2008-02-05 #5

excellent, thanks Nutrox.

Anik · 2008-02-05 #6

coolness of the Si.

sims11tz · 2008-02-05 #7

Nutrox! Best tip I have heard in a long time, thanks!

tiran · 2008-02-05 #8

So the only place this seems to still cause me problems is FireFox on a Linux box (no idea why there) and Safari (which I think there is a completely different work around for).

Nutrox · 2008-02-05 #9

Quote: Originally Posted by tiran

So the only place this seems to still cause me problems is FireFox on a Linux box (no idea why there) and Safari (which I think there is a completely different work around for).

I will look into those issues over the next day or so if no one posts any solutions in the meantime.

Which browser versions are you using?

Safari is a pain in the ass, period. I hate it more than Internet Explorer at the moment.

tiran · 2008-02-05 #10

Cool, this solution seems to work for safari:

Workaround for Safari Blocking Flash Initiated Pop Ups

Nutrox · 2008-02-05 #11

Looks like a good fall-back to use if Safari blocks the popup, although if navigateToURL is used it looks like it will just open the requested page in a new browser window instead of a "popup" window. I guess that is fine though, at least the requested page will be shown one way or another.

Does that solution work for Firefox/Linux as well?

tiran · 2008-02-05 #12

Does that solution work for Firefox/Linux as well?

nope, it actually does evil things on Firefox/Linux....It blocks it and tells the user 2 pops have been blocked from one click.

Nutrox · 2008-02-05 #13

Hmm. I will put together a working example that should hopefully work in Safari (I think that example you linked to could be cleaned up a bit)... then we can try and sort out the Linux problem if you are up for it. It seems strange that Firefox on Linux is having problems though, I would have thought Firebox would behave the same with popups no matter what OS is what running on. My initial guess is that it is an issue with ExternalInterface on Linux so I will look into that.

tiran · 2008-02-06 #14

Thanks for the work Nutrox, still getting no love on FF/Linux, but would like to confirm those issues on another box. Anyone else have FF on Linux that could test?

Nutrox · 2008-02-06 #15

Working

• Firefox 2.0 - Mac
• Firefox 2.0 - Windows
• Firefox 3.0 Beta 2 - Windows
• Internet Explorer 6.0 - Windows
• Internet Explorer 7.0 - Windows
• Netscape 8.1 - Windows
• Opera 8.52 - Windows
• Opera 9.25 - Windows
• Safari 523.10 - Mac

Some browsers seem to open new windows/tabs instead of actual popups, but that is better than the popups being completely blocked. That seems to be the most common browsers/systems covered anyway.

Not Working

• Firefox 2.0 - Linux

tiran · 2008-02-08 #16

cool, I'm still working on getting someone else to test on another Linux box.

giraffe · 2008-02-19 #17

God.... why is it such a nightmare to get something like this working!? When in fact it shouldn't be too difficult.

Looked at your test URL and it does work. Good on you.
Shame though that you won't post it... it would help a lot of people... Well it would help me with this stupid project!

o_0

grok · 2008-02-20 #18

I'd just like to let you know that in my testing this strategy does not work when implemented in a nested MovieClip. It appears to only work from the original MovieClip loaded and not external SWFs loaded into it. Has anyone else tried this?

btw- When testing that solution with Linux, Firefox thinks it blocked two popups.

Lil Chris · 2008-03-06 #19

Thank You Nutrox for everything you do.

Merguez · 2008-03-17 #20

i'm happy when see this solution

But Pb: wmode and input textfield with french keyboard (and maby other) bug, see http://www.5etdemi.com/blog/archives...ks-textfields/

... :'(

psyked · 2008-04-28 #21

grok - the problem you're likely to be having is more due to the Flash security sandbox than a problem with this method - I daresay that if you made an interface to communicate between loaded SWF files and the parent SWF, and then had the parent SWF launch the window - it would work. Externally loaded movieclips are quite limited in what they can do, so they can't compromise the original Flash file... (or something like that)

Nutrox · 2008-06-04 #22

Finally... source files are now available.

I would like some more testing though, most of the popular browsers have been covered but there are bound to be some that cause problems.

Here is the new online demo: [ DEMO NO LONGER AVAILABLE ]

The current source files are attached to this post. There isn't much documentation at the moment but at least you can start poking around the source code now. Please keep in mind that this is still very experimental, and I am more than likely going to update and improve the AS3 classes at some point during the next few days.

Feedback is always welcome.

Attached Files

popup.zip (18.6 KB, 231 views)

Sundev · 2008-06-05 #23

Thanks again Nutrox. This has really helped me out. You've really gone a long way in developing this already, at least the initial structure.

Lil Chris · 2008-06-05 #24

I'd like to thank you as well Nutrox.

Sundev · 2008-06-05 #25

One big note: You have to use the MouseEvent.CLICK. I was using MouseEvent.MOUSE_DOWN and it wasn't working for most of the browsers listed.

Nutrox · 2008-06-05 #26

That would explain most of problems people have been reporting. Thanks for the heads-up Sundev.

Nutrox · 2008-06-05 #27

PS: I think I have found a way to detect when the popup window has been closed, so I will be updating the classes and JS code later today. I am also adding a "center window" option so you can launch the popup in the center of the screen.

If anyone has any other suggestions/requests now would be a good time to let me know.

Sundev · 2008-06-05 #28

I've added a way to get Safari to open popups, but it's a big hack and it's not very pretty to integrate. Basically you have to check to see if the browser is Safari using javascript, then pass that value to flash, then have flash register the button for a MOUSE_DOWN event instead of a CLICK event if it is safari. The MOUSE_DOWN event then uses external interface to call a function that sets global variables for the url, name, and options for the pop up. I then wrap the flash object in a div and attach an onClick handler to the div that calls a function which checks to see if the variables for the popup were set and uses those variables to launch the popup, then resets those variables to "". You have to change the listener in flash from CLICK to MOUSE_DOWN in order to get the ExternalInterface call to set the popup values prior to the div wrapper trying to open the popup with the new values.

It's kind of a ridiculous hack, but if anyone wants me to post the code or add it to Nutrox's let me know.

Nutrox · 2008-06-05 #29

Bleh, keep that horrible hack away from me.

It is good to know that it is possible to get popups working in Safari. There may be a way to integrate the solution into the main PopupWindow class though without all of the hackiness. Let me think about it for a bit and I'll report back.

Isocase · 2008-06-05 #30

@Nutrox,

Quick question why did you make your document class "Popup" a public dynamic class? I know by making it dynamic that allows you to add properties to that class at runtime, but can you even add properties to the document class at runtime?

Sorry for the questions, just trying to figure things out.

Nutrox · 2008-06-05 #31

I don't know. I was tired and the class was rushed.

Sundev · 2008-06-06 #32

It can be advantageous for the Document class to be dynamic. It's helpful if you aren't automatically declaring stage instances and aren't sure if all the instance variables you are explicitly listing as variables of the class will exist on the stage. I have used a dynamic document class if I want to use the same Document class for multiple swf files that may or may not have certain instances on the stage.

Nutrox · 2008-06-06 #33

I used to access stage instances that way as well which is probably why I slip back to the dynamic document class and this.childName now and again. I tend to use the getChildByName() method these days though and avoid making the document class dynamic, the references are assigned to private variables so getChildByName() only really needs to be used during the class initialisation. If I'm using a document class I never rely on any variables declared in the timeline, so accessing them from the class isn't an issue.

gabrielsj · 2008-06-16 #34

Ths is just what I've been lookin around for. I had trouble with different popups style with firefox, iexplorer, and safari didnt work at all. Looks like you got it working, but don't you have an example in AS2.0?
I would appreciate it.

nice work.

Nutrox · 2008-06-18 #35

Sorry mate, there is no AS2 version of the PopupWindow class so you will need to convert it to AS2 yourself or find someone else to do it for you. Apart from posting the odd bit of AS2 code around the forum now and again I don't do AS2 development any more.

Sundev · 2008-06-18 #36

Amen to that Nutrox. Going back to AS2 is like when you buy a new car and you get used to driving it but haven't sold your old car. Then, for some reason you have to drive your old car and you remember why you got a new car.

gabrielsj · 2008-06-18 #37

...sorry for not buying a new car then.

erico564 · 2008-06-27 #38

I have to just chime in here for a second and send mad props to Nutrox for this. I've spent the last 4 hours trying to get a damn popup to work in Safari and this is the ONLY thing that has worked for me. Slick, solid, easy to integrate --- badass job Nutrox!

Now if we could only figure out a way for the Safari window to be properly-sized like the other ones...

Nutrox · 2008-06-27 #39

Quote: Originally Posted by erico564

I have to just chime in here for a second and send mad props to Nutrox for this. I've spent the last 4 hours trying to get a damn popup to work in Safari and this is the ONLY thing that has worked for me. Slick, solid, easy to integrate --- badass job Nutrox!

Now if we could only figure out a way for the Safari window to be properly-sized like the other ones...

I'm happy to see you guys are finding this useful.

Sundev did find a way to get popups working properly but I haven't had as much time as I would like to revisit this project. I should have some free time this weekend though so I will try and get the project updated and uploaded for you guys.

Sundev · 2008-06-27 #40

I'll try to post my solution in the next hour or so. It's dirty but it works.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Flash > ActionScript • AS - Popups From Flash - Solution


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	Nutrox 13 Creative Assets	2008-02-04 #2
	Last edited by Nutrox : 2008-02-04 at 23:14. Popups do indeed work from Flash. In order for the browser to trust the Flash object, thus allow popup windows, the Flash object needs to be part of the DOM's trusted display list. Normally when you add a Flash object to the document it is contained in it's own "container" and as a result the browser will not trust the Flash object. The way to fix this is to set the wmode property of the Flash object to "opaque" or "transparent" (obviously don't use transparent unless you really need to), that will plop the Flash object in the DOM's display list as a trusted object, and you can then launch popups without restriction (although a mouse-click is still required, no auto-launch popups are allowed, not even in JavaScript). When you set the wmode to "opaque" or "transparent" you will notice that Firefox will show a dotted line around the Flash object when it gains focus (when you click on it), the way to prevent that is to set the "outline" style of the object to "none" (FYI, that also works for regular HTML links). Here is an example of the HTML: XHTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="content-language" content="en-gb"/> <meta name="mssmarttagspreventparsing" content="true"/> <style type="text/css"> object { width:800px; height:500px; display:block; } object:focus { outline:none; } </style> <script type="text/javascript"> function openWindow() { if( window.open( "some.site.com", "windowname", "options" ) ) { return true; } return false; } </script> </head> <body> <object id="flash" type="application/x-shockwave-flash" data="movie.swf"> <param name="movie" value="movie.swf"/> <param name="wmode" value="opaque"/> </object> </body> </html> If you are publishing the Flash movie for Flash Player 8 or higher then you should take advantage of the ExternalInterface class to call your JavaScript functions. Not only is it the cleanest way to do things, it also allows you to receive data back from the functions. For example, if for some reason that popup window fails to launch then "false" will be returned to Flash and you could present the user with a message of some kind, if the popup launches fine then "true" will be returned. ActionScript 2.0 Code: import flash.external.ExternalInterface; function myFunc():Void { var result:Boolean = Boolean( ExternalInterface.call( "openWindow" ) ); if( result ) { // popup launched } else { // popup failed to launch } } You don't even need any JavaScript code, you can open a window directly from Flash (although you won't get any data returned). ActionScript 2.0 Code: import flash.external.ExternalInterface; function myFunc():Void { var url:String = "http://www.ultrashock.com"; var windowName:String = "mywindow"; var windowOptions:String = "width:800,height:600"; ExternalInterface.call( "window.open", url, windowName, windowOptions ); } One other thing to keep in mind: Your Flash object will need to have an id in order for the ExternalInterface class to work. Also, check if the ExternalInterface can actually be used by making sure ExternalInterface.isAvailable is true, if ExternalInterface is not available then you should fall-back to the nasty getURL way of calling JavaScript from Flash. You might also want to pass a flashVar to the movie letting your code know if JavaScript is enabled in the browser.

	Nutrox 13 Creative Assets	2008-02-04 #3
	PS: Moved thread to the ActionScript forum and made it sticky seeing as this question is being asked quite frequently at the moment.

	sims11tz	2008-02-05 #7
	Nutrox! Best tip I have heard in a long time, thanks!

	tiran	2008-02-05 #8
	So the only place this seems to still cause me problems is FireFox on a Linux box (no idea why there) and Safari (which I think there is a completely different work around for).

	Nutrox 13 Creative Assets	2008-02-05 #9
	Quote: Originally Posted by tiran So the only place this seems to still cause me problems is FireFox on a Linux box (no idea why there) and Safari (which I think there is a completely different work around for). I will look into those issues over the next day or so if no one posts any solutions in the meantime. Which browser versions are you using? Safari is a pain in the ass, period. I hate it more than Internet Explorer at the moment.

	tiran	2008-02-05 #10
	Cool, this solution seems to work for safari: Workaround for Safari Blocking Flash Initiated Pop Ups

	Nutrox 13 Creative Assets	2008-02-05 #11
	Looks like a good fall-back to use if Safari blocks the popup, although if navigateToURL is used it looks like it will just open the requested page in a new browser window instead of a "popup" window. I guess that is fine though, at least the requested page will be shown one way or another. Does that solution work for Firefox/Linux as well?

	tiran	2008-02-05 #12
	Does that solution work for Firefox/Linux as well? nope, it actually does evil things on Firefox/Linux....It blocks it and tells the user 2 pops have been blocked from one click.

	Nutrox 13 Creative Assets	2008-02-05 #13
	Hmm. I will put together a working example that should hopefully work in Safari (I think that example you linked to could be cleaned up a bit)... then we can try and sort out the Linux problem if you are up for it. It seems strange that Firefox on Linux is having problems though, I would have thought Firebox would behave the same with popups no matter what OS is what running on. My initial guess is that it is an issue with ExternalInterface on Linux so I will look into that.

	tiran	2008-02-06 #14
	Thanks for the work Nutrox, still getting no love on FF/Linux, but would like to confirm those issues on another box. Anyone else have FF on Linux that could test?

	Nutrox 13 Creative Assets	2008-02-06 #15
	Last edited by Nutrox : 2008-03-26 at 01:10. Working • Firefox 2.0 - Mac • Firefox 2.0 - Windows • Firefox 3.0 Beta 2 - Windows • Internet Explorer 6.0 - Windows • Internet Explorer 7.0 - Windows • Netscape 8.1 - Windows • Opera 8.52 - Windows • Opera 9.25 - Windows • Safari 523.10 - Mac Some browsers seem to open new windows/tabs instead of actual popups, but that is better than the popups being completely blocked. That seems to be the most common browsers/systems covered anyway. Not Working • Firefox 2.0 - Linux

	tiran	2008-02-08 #16
	cool, I'm still working on getting someone else to test on another Linux box.

	giraffe	2008-02-19 #17
	God.... why is it such a nightmare to get something like this working!? When in fact it shouldn't be too difficult. Looked at your test URL and it does work. Good on you. Shame though that you won't post it... it would help a lot of people... Well it would help me with this stupid project! o_0

	grok	2008-02-20 #18
	I'd just like to let you know that in my testing this strategy does not work when implemented in a nested MovieClip. It appears to only work from the original MovieClip loaded and not external SWFs loaded into it. Has anyone else tried this? btw- When testing that solution with Linux, Firefox thinks it blocked two popups.

	Lil Chris	2008-03-06 #19
	Thank You Nutrox for everything you do.

	Merguez	2008-03-17 #20
	i'm happy when see this solution But Pb: wmode and input textfield with french keyboard (and maby other) bug, see http://www.5etdemi.com/blog/archives...ks-textfields/ ... :'(

	psyked	2008-04-28 #21
	grok - the problem you're likely to be having is more due to the Flash security sandbox than a problem with this method - I daresay that if you made an interface to communicate between loaded SWF files and the parent SWF, and then had the parent SWF launch the window - it would work. Externally loaded movieclips are quite limited in what they can do, so they can't compromise the original Flash file... (or something like that)

	Sundev	2008-06-05 #23
	Thanks again Nutrox. This has really helped me out. You've really gone a long way in developing this already, at least the initial structure.

	Lil Chris	2008-06-05 #24
	I'd like to thank you as well Nutrox.

	Sundev	2008-06-05 #25
	One big note: You have to use the MouseEvent.CLICK. I was using MouseEvent.MOUSE_DOWN and it wasn't working for most of the browsers listed.

	Nutrox 13 Creative Assets	2008-06-05 #26
	That would explain most of problems people have been reporting. Thanks for the heads-up Sundev.

	Nutrox 13 Creative Assets	2008-06-05 #27
	PS: I think I have found a way to detect when the popup window has been closed, so I will be updating the classes and JS code later today. I am also adding a "center window" option so you can launch the popup in the center of the screen. If anyone has any other suggestions/requests now would be a good time to let me know.

	Sundev	2008-06-05 #28
	I've added a way to get Safari to open popups, but it's a big hack and it's not very pretty to integrate. Basically you have to check to see if the browser is Safari using javascript, then pass that value to flash, then have flash register the button for a MOUSE_DOWN event instead of a CLICK event if it is safari. The MOUSE_DOWN event then uses external interface to call a function that sets global variables for the url, name, and options for the pop up. I then wrap the flash object in a div and attach an onClick handler to the div that calls a function which checks to see if the variables for the popup were set and uses those variables to launch the popup, then resets those variables to "". You have to change the listener in flash from CLICK to MOUSE_DOWN in order to get the ExternalInterface call to set the popup values prior to the div wrapper trying to open the popup with the new values. It's kind of a ridiculous hack, but if anyone wants me to post the code or add it to Nutrox's let me know.

	Nutrox 13 Creative Assets	2008-06-05 #29
	Bleh, keep that horrible hack away from me. It is good to know that it is possible to get popups working in Safari. There may be a way to integrate the solution into the main PopupWindow class though without all of the hackiness. Let me think about it for a bit and I'll report back.

	Isocase	2008-06-05 #30
	@Nutrox, Quick question why did you make your document class "Popup" a public dynamic class? I know by making it dynamic that allows you to add properties to that class at runtime, but can you even add properties to the document class at runtime? Sorry for the questions, just trying to figure things out.

	Nutrox 13 Creative Assets	2008-06-05 #31
	I don't know. I was tired and the class was rushed.

	Sundev	2008-06-06 #32
	It can be advantageous for the Document class to be dynamic. It's helpful if you aren't automatically declaring stage instances and aren't sure if all the instance variables you are explicitly listing as variables of the class will exist on the stage. I have used a dynamic document class if I want to use the same Document class for multiple swf files that may or may not have certain instances on the stage.

	Nutrox 13 Creative Assets	2008-06-06 #33
	I used to access stage instances that way as well which is probably why I slip back to the dynamic document class and this.childName now and again. I tend to use the getChildByName() method these days though and avoid making the document class dynamic, the references are assigned to private variables so getChildByName() only really needs to be used during the class initialisation. If I'm using a document class I never rely on any variables declared in the timeline, so accessing them from the class isn't an issue.