Embedding Flash with swfobject
Mobile Development
Wednesday, 16 June 2010 07:53

swfobject

There's about a million different ways to embed flash. It's not as simple as just embedding it like you would an image. You need to deal with browser compatibility problems, the fact that active content won't run automatically on IE without some help, how to degrade gracefully on devices that don't support flash (e.g. iPad), and more.

I found an article on A List Apart called Flash Embedding Cage Match by Bobby Van Der Sluis which explains the whole situation very well. If you want to really understand what's going on, read that article. Don't worry, it's a quick read. In the article, he doesn't really claim which option is best, but in my opinion, SWFObject either wins or is at least a tie. Note that the article is a tad old and SWFObject 2 has since been released.

So, if you just need to embed some flash quickly, just check out swfobject on Google Code. This library offers two means of embedding flash (static and dynamic), depending on your preferences. I suggest using the dynamic method because it offers superior degradation and is more simple. The downside is that your flash content will only show if flash and JavaScript are both supported. That is acceptable in most circumstances.

Here's how it works:

  1. Create some static (non-flash) content to show in case flash is not available
  2. Include swfobject.js
  3. Call swfobject.embedSWF() with a few simple parameters

Here's some actual code:

 
 
 
 
 
 
<div id="my_flash_content">
    <p>Flash is not available, here's a cool image instead...</p>
    <img src="waycoolimage.jpg" />
</div>
 
 
 

Generally you can just do this manually (it's really easy). However, if you want to get a little deeper into what options are available for configuring flash, swfobject_examples.zip contains an application (in Adobe AIR and HTML formats) that guides you through all of the various configuration options. Read more about this on the SWFObject 2 beginner's guide.


blog comments powered by Disqus