about
history
syntax
visu
arcade
goodies
wrappers
efficiency
examples
experiments
tabageos
tutorials
actiontad logo white
Placing your swf in an html wrapper
 


The wrapper is what a .swf file is embedded in.
A .swf file can even stand on its own as a .exe file.
The majority of the time .swf files are used in websites or web based networks and therefore in html.
This section gives a more modern approach to embedding swf files, one that validates as strict mark-up,
by using the object tag only, and JavaScript to output the swf.
We'll also go over a simple method to ensure communication with the swf object can happen.

Emebedding for Internet Explorer:
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,0,0' id='myswfid' width='500px' height='500px'>
<param name='movie' value='myswf.swf' />
<param name='bgcolor' value='#FFFFFF' />
<param name='quality' value='high' />
<param name='menu' value='true' />
<param name='allowscriptaccess' value='SameDomain' />
</object>

Embedding in all other browsers:
<object type='application/x-shockwave-flash' 
data='myswf.swf'
width='500px' height='500px' id='myswfid'>
<param name='bgcolor' value='#FFFFFF' />
<param name='quality' value='high' />
<param name='menu' value='true' />
<param name='allowscriptaccess' value='SameDomain' />
</object>

You can place the above code directly in your html, but I recommend using JavaScript
to dynamically place the swf object in the page like so:
function putflash()
{
var browsers=navigator.appName;
if (browsers.indexOf('Internet Explorer')!=-1 || browsers.indexOf('MSIE')!=-1)
{
document.getElementById('divforflash').innerHTML=
"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'"+
" codebase='http://download.macromedia.com/"+
"pub/shockwave/cabs/flash/swflash.cab#"+
"version=9,0,0,0' id='tadner' width='500px' height='500px'>\n"+
"<param name='movie' value='myswf.swf' />\n"+
"<param name='bgcolor' value='#FFFFFF' />\n"+
"<param name='quality' value='high' />\n"+
"<param name='menu' value='false' />\n"+
"<param name='allowscriptaccess' value='SameDomain' />\n"+
"</object>\n";
}
else
{
document.getElementById('divforflash').innerHTML=
"<object type='application/x-shockwave-flash'\n"+
"data='myswf.swf'\n"+
"width='500px' height='500px' id='myswfid'>\n"+
"<param name='bgcolor' value='#FFFFFF' />\n"+
"<param name='quality' value='high' />\n"+
"<param name='menu' value='false' />\n"+
"<param name='allowscriptaccess' value='SameDomain' />\n"+
"</object>\n";
}

}

Communication with the swf via JavaScript:
 

In .as files you can set up what is known as a callback in the wrapper.
You do this by first importing the flash.external package and then calling
ExternalInterface.addCallback("jsfunction", as3function)
( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/package-detail.html)
"jsfunction" is the actual name of the function that JavaScript can call to invoke the AS3 function.
Below is a nifty little function I've made to ensure that JavaScript will be able to call the callback function.
The trouble was in the fact that using embed inside of an object tag meant that only the object
would have an id because embed can only take the name attribute.
Also some browsers will not be able to reference the flash simply by its id.
This function aims at accounting for all those possibilities:
function callascallback(flashid)
{

  try
  {
  var flashcontent=window.document.getElementById(flashid);
  }
  catch(e)
  {
    try
    {
     var flashcontent=window.document.flashid;
    }
    catch(e)
    {
       var movie=flashid;
       
       if (navigator.appName.indexOf("Microsoft")!=-1 || navigator.appName.indexOf("MSIE")!=-1)
       { 
          if (window.document[movie])
          {var flashcontent=window.document[movie];}
          else
          {var flashcontent=window[movie];};
       }else{
         if (document.embeds[movie])
         {var flashcontent=document.embeds[movie];}
         else
         {var flashcontent=document[movie];};
       }
    }
  }
  try
  {
  //the actual call to the callback function
  flashcontent.jsfunction();
  }
  catch(e)
  {
   //this catch is for if all failed
    var cantcommunicate="yes";
  }
}


back to top









actiontad twitter.com/actiontad terms