Vixiom Axioms

SWFObject (formally know as FlashObject) is a javascript file that unobtrusively embeds flash in a web page. It works by replacing a holder div with Flash content, if the end user doesn’t have Flash or the targeted Flash player SWFObject will ‘fail’ silently and keep the original div. Here’s a Rails helper that let’s you use SWFObject in your views.

The steps are:

1) download SWFObject, and place it in ‘public/javascripts’

2) include it in your layout file

<%= javascript_include_tag "swfobject" %>

3) put the helper in ‘app/helpers/application_helper.rb’:

# swf_object
  def swf_object(swf, id, width, height, flash_version, background_color, params = {}, vars = {}, create_div = false)
    # create div ?
    create_div ? output = "<div id=’#{id}‘>This website requires <a href=’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW’ target=’_blank’>Flash player</a> #{flash_version} or higher.</div><script type=’text/javascript’>" : output = "<script type=’text/javascript’>"
    output << "var so = new SWFObject(’#{swf}‘, ‘#{id}‘, ‘#{width}‘, ‘#{height}‘, ‘#{flash_version}‘, ‘#{background_color}‘);"
    params.each  {|key, value| output << "so.addParam(’#{key}‘, ‘#{value}‘);"}
    vars.each    {|key, value| output << "so.addVariable(’#{key}‘, ‘#{value}‘);"}
    output << "so.write(’#{id}‘);"
    output << "</script>"
  end

4) Then in any rhtml page you can use the helper like so (note: place your SWFs in ‘public/swfs’):

<%= swf_object("/swfs/myswf.swf", "flash_id", "550", "400", "9", "#000000",
        {:wmode => "transparent", :quality => "high"},
        {:myvar1 => "foo1", :myvar2 => "foo2"}) %>

In the above code the flash content will replace a div with the id ‘flash_id’, the required arguments are (SWF File location, holder div to replace, width, height, flash version, background color) it also shows two parameters being set ‘wmode’ to transparent (for those annoying flash overlay ads) and ‘quality’ to high, it also passes two variables to the SWF ‘myvar1′ and ‘myvar2′ which are then available at root level of your SWF (’_level0.myvar’ in AS2, a bit trickier in AS3, and ‘Application.application.parameters.myvar’ with Flex).

4b) I, being a lazy/absent-minded programmer, included an option to programmatically create the holder div, just add true as the last argument:

<%= swf_object("/swfs/myswf.swf", "flash_id", "550", "400", "9", "#000000",
        {:wmode => "transparent", :quality => "high"},
        {:myvar1 => "foo1", :myvar2 => "foo2"},
        true) %>

This entry was posted on Tuesday, June 5th, 2007 at 2:57 pm and is filed under ActionScript, Flash, Flex, JavaScript, Ruby on Rails. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.