Thread: Popups From Flash - Solution
View Single Post
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator 17 Creative Assets 2008-02-04 #2 Old  
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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7.     <title></title>
  8.  
  9.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  10.     <meta http-equiv="content-language" content="en-gb"/>
  11.     
  12.     <meta name="mssmarttagspreventparsing" content="true"/>
  13.  
  14.     <style type="text/css">
  15.  
  16.         object
  17.         {
  18.             width:800px;
  19.             height:500px;
  20.             display:block;
  21.         }
  22.  
  23.         object:focus
  24.         {
  25.             outline:none;
  26.         }
  27.     
  28.     </style>
  29.  
  30.     <script type="text/javascript">
  31.     
  32.         function openWindow()
  33.         {
  34.             if( window.open( "some.site.com", "windowname", "options" ) )
  35.             {
  36.                 return true;
  37.             }
  38.  
  39.             return false;
  40.         }
  41.     
  42.     </script>
  43.  
  44. </head>
  45.     
  46. <body>
  47.  
  48.     <object id="flash" type="application/x-shockwave-flash" data="movie.swf">
  49.         <param name="movie" value="movie.swf"/>
  50.         <param name="wmode" value="opaque"/>
  51.     </object>
  52.  
  53. </body>
  54.  
  55. </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:
  1. import flash.external.ExternalInterface;
  2.  
  3. function myFunc():Void
  4. {
  5.     var result:Boolean = Boolean( ExternalInterface.call( "openWindow" ) );
  6.  
  7.     if( result )
  8.     {
  9.         // popup launched
  10.     }
  11.     else
  12.     {
  13.         // popup failed to launch
  14.     }
  15. }
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:
  1. import flash.external.ExternalInterface;
  2.  
  3. function myFunc():Void
  4. {
  5.     var url:String = "http://www.ultrashock.com";
  6.     var windowName:String = "mywindow";
  7.     var windowOptions:String = "width:800,height:600";
  8.  
  9.     ExternalInterface.call( "window.open", url, windowName, windowOptions );
  10. }
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.

 Reply With Quote