Vixiom Axioms

June 5, 2007

Rails helper for SWFObject

Filed under: ActionScript, Flash, Flex, JavaScript, Ruby on Rails Alastair @ 2:57 pm

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) %>
Digg! submit Rails helper for SWFObject to stumbleupon.com submit Rails helper for SWFObject to del.icio.us submit Rails helper for SWFObject to reddit.com Like this post? subscribe to the feed.

6 Comments »

  1. Good idea… This probably won’t format as nicely as I’d like, but we’ll see. I’m a big fan of named arguments, like most rails methods have, so you don’t have to remember the order of things. (Which is first? height or width, etc). So, for a nice rails-esque API, you could design it to be called it like this:

    “/swfs/myswf.swf”,
    :id => “flash_id”,
    :width => “550″,
    :height => “400″,
    :version => “9″,
    :bgcolor => “#000000″,
    :params => {:wmode => “transparent”, :quality => “high”},
    :vars => {:myvar1 => “foo1″, :myvar2 => “foo2″}
    ) %>

    Just a thought.

    Comment by Scott Becker — June 5, 2007 @ 3:34 pm

  2. It mostly formatted. Left off the beginning, which was

    swf_object(
    :src => “/swfs/myswf.swf”,

    …etc

    Comment by Scott Becker — June 5, 2007 @ 3:35 pm

  3. Made a helper for SWFObject 2.0. Would write it up in my own blog, but I’ve yet to write full docs and tidy it up some more. Since I somewhat doubt I’ll ever get around to that, I’ll dump it here for now :) http://pastie.textmate.org/private/nu0hpwxmtcx0toi58j4kha

    Takes hash arguments (for everything but the src), encodes flashvars properly.

    Used your default placeholder text; hope you don’t mind.

    Comment by Henrik N — October 10, 2007 @ 8:43 am

  4. hi
    it shows This website requires Flash player 8 or higher.
    “transparent”, :quality => “high”},
    {:myvar1 => “foo1″, :myvar2 => “foo2″},
    true) %>
    i put this in my rhtml file and i installed flv player also but the problem is remain
    plz help me i have to deliver my site
    thanks
    jakes

    Comment by jakes — March 28, 2008 @ 1:00 am

  5. @jakes did you remember to put SWFObject in ‘public/javascripts’? and put < %= javascript_include_tag "swfobject" %> in your app’s layout?

    Comment by Alastair — March 28, 2008 @ 5:52 am

  6. i hava a error
    SWFObject is not defined
    [Break on this error] var so = new SWFObject(”/swf/FileUpload_5.swf”, “flashcontent”, “400″, “200″,…
    please help me.
    thank you

    Comment by luo — August 18, 2008 @ 2:03 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image

Powered by WordPress