Home
 

03

Dec

16

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 (10)

  • Success for Tranparent swf file!

    looking at neccessary IE code for wmode="transparent", it became clear to use the following and add the $FlashFile.URL in to it.

    expressInstall.swf isn't needed.

    Works in all browsers that support wmode="transparent", eg. All IE browser versions.

    Replace the text in FlashPage.ss with the following:

    <% if FlashFile %>
    <div id="FlashContainer">


    $AlternateContent


    <param name="allowScriptAccess" value="sameDomain" />
    <param name="wmode" value="transparent" />
    <param name="movie" value="$FlashFile.URL" />
    <param name="quality" value="best" />
    <param name="bgcolor" value="#FFFFFF" />
    <embed src="$FlashFile.URL" quality="best" bgcolor="#FFFFFF" wmode="transparent" width="1000" height="578" name="FlashContainer" align="middle" allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>


    </div>


    <% end_if %>

    Posted by Edenview Photography, 18/07/2010 2:35am (11 days ago)

  • Hi there, Unfortunately I am trying to overlay flash ontop of silverstripe.

    View temporary website: www.advanceenergyhomeimprovements.com.au

    Posted by Edenview Photography, 17/07/2010 6:27pm (12 days ago)

  • try wmode "opaque" instead of transparent, that works on all browsers for me.

    Posted by Richard, 17/07/2010 6:06pm (12 days ago)

  • Hi there! Thanks for the great tutorial. It evens lets me have H.264 video in swf files.

    The {wmode:"transparent"} works in all browsers except for IE. Any suggestions?

    Posted by Edenview Photography, 17/07/2010 5:08pm (12 days ago)

  • Hi,

    This is not working with silverstripe-v2.4.0. I had to change \\\"setAllowedExtensions\\\" to \\\"Upload_Validations->setAllowedExtensions\\\" because the previous is deprecated. When I tried to create a FlashPage I get the following error:

    Fatal error: Call to a member function setAllowedExtensions() on a non-object in /opt/lampp/htdocs/silverstripe-v2.4.0/mysite/code/FlashPage.php on line 17

    I\\\'m not sure what it means since I\\\'m a newbie.

    I\\\'ll really appreciate any suggestions on how to fix it for v2.4.0

    Thank you,
    -A.R.

    Posted by antonio, 28/05/2010 10:07pm (2 months ago)

  • Thanks for updating us with the nice information.

    Posted by cms website development, 26/05/2010 3:29am (2 months ago)

  • Hello

    I tried to implement this solution but when it comes to the dev/build part just after creating the FlashPage.php nothing happens .

    Any idea

    Thank you

    Posted by thomas, 07/05/2010 11:40am (3 months ago)

  • Someone has an idea how to make this work if i want to pass flashvars?

    Posted by bumbus, 21/04/2010 6:54am (3 months ago)

  • 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 (5 months 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 (7 months ago)

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

Post your comment