Home
 

03

Dec

8

Embed flash content using SWFObject

There are numerous ways to embed flash content into your SilverStripe Website. A commonly used and very flexible method to embed flash is provided by the SWFObject script. In this snippet I'll show you how to create a custom FlashPage that will contain flash content, embedded using SWFObject.

Prerequisites

  • Download and unpack swfobject 2.2 from http://code.google.com/p/swfobject/
  • copy swfobject.js and expressInstall.swf from the swfobject folder to your mysite folder. I copied the files into mysite/javascript/lib, so this is what I'm gonna use in this example

The FlashPage Class

We're going to create a custom class for our Flash-Content-Page. Save the following code as mysite/code/FlashPage.php

After doing so, run /dev/build

Our FlashPage adds a new Tab named "Flash" to the CMS Content Tab. In this tab you'll be able to upload a swf file and provide an alternative content for all the people who don't have flash installed (iPhone comes to mind).

The template

All that's left now is the template part. Create a new template (or layout) named FlashPage.ss and add the following code to it:

The above part just outputs the flash content, so feel free to add <h1>$Title</h1>, $Content or any other of the markup you desire.

Here's a short summary what we do with that template code:
First we check if there's a FlashFile available (<% if FlashFile %>). If not, we can skip the whole flash embed stuff.
The <div id="FlashContainer"> container holds the alternative content, and will be replaced with the flash content if the user has the required flash plugin installed.
What follows at the end is the script call to swfobject. SWFObject is highly customizable. You can add parameters to flash, or specify special embed tags (like wmode or bgcolor). There's a good description of all possible parameters on the SWFObject website:
http://code.google.com/p/swfobject/wiki/documentation#STEP_3:_Embed_your_SWF_with 

The size of the flash content (width, height) is now defined in the template code. Of course you could also replace these values with variables that can be customized inside the CMS. Give it a try!

About the Author

Name: Roman Schmid

Website: http://bummzack.ch

Graphic Designer and Software Developer. Also known as 'banal'

Comments (8)

  • Just in case anyone is having trouble with the optional parameters (as I was) here is an example:
    <script type=\"text/javascript\">
    /* <![CDATA[ */
    swfobject.embedSWF(
    \"$FlashFile.URL\",
    \"FlashHolder\",
    \"640\", \"480\",
    \"9.0.0\",
    \"mysite/javascript/expressInstall.swf\",
    \"false\", /* how to skip an optional parameter */
    {wmode:\"transparent\"} /* syntax for adding parameters as Aram described--results in: <param name=\"wmode\" value=\"transparent\"/>*/
    );
    /* ]]> */
    </script>

    the wmode parameter I used here will keep flash from floating above a lightbox or javascript menu

    Posted by Luke, 10/03/2010 9:37am (2 hours ago)

  • Hi Aram,

    The file does exist, and swfobject is included (and works) if I put <script type="text/javascript" src="mysite/javascript/swfobject.js"></script> directly into the FlashPage.ss.
    But neve using the Requirements thing, even if I put in the absolute path manually.
    Any ideas?

    Posted by JuLo, 17/12/2009 11:54pm (3 months ago)

  • Hi Julo
    This most likely means the file does not exist....SS won't include a file unless it finds it, make sure that your path is correct.
    Aram

    Posted by aram, 16/12/2009 6:07pm (3 months ago)

  • I have followed the instructions to the letter, but it seems that the Requirements::javascript('mysite/javascript/lib/swfobject.js'); doesn't do anything and swfobject.js is never included (that I can see).

    Any ideas?

    Posted by JuLo, 16/12/2009 5:01pm (3 months ago)

  • As I understand it, from http://code.google.com/p/swfobject/wiki/documentation, the Javascript used to embed the object can go in the <head>. It would be cleaner, then, to move the embedSWF() call into a separate Javascript file, and include this using Requirements::javascript() after you've included the SWFObject library. Better than that mixing HTML and Javascript unnecessarily.

    Posted by Toby Champion, 06/12/2009 7:29pm (3 months ago)

  • Awesome.. i have never done the page js or css requirements thing down in the page type's controller function so thank you for the enlightenment.

    Posted by Lamin Barrow, 06/12/2009 3:39pm (3 months ago)

  • Hey Martijn.
    Thanks for the tip. Didn't know about that one. Will try it out in my next Flash/jQuery project.

    Posted by banal, 04/12/2009 9:09am (3 months ago)

  • Very nice tutorial :). I noticed that with Silverstripe adding flash is a piece of cake, like you show in your tutorial.

    Since a while I use the jQuery flash plugin, wich is much lighter and supports sifr replacement as well.

    http://jquery.lukelutman.com/plugins/flash/index.html

    Posted by Martijn, 04/12/2009 6:25am (3 months ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment