Home
 

03

Dec

18

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)

  • very nice tutorial, the way that silverstripe gets a new tab for the flash, and the alternate content, just awesome,

    Posted by jonas, 27/08/2010 4:20pm (12 days ago)

  • I was wondering if it's possible to change the following:

    "new HtmlEditorField('AlternateContent', 'Flash replacement text', 20)"

    to something that uses plain text instead of html text. If I type text it adds "<p>" before my text and "</p>" after. Is it possible to stop this?

    Posted by edenview, 04/08/2010 3:41am (1 month ago)

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

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

    Posted by Richard, 17/07/2010 6:06pm (2 months 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 (2 months 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 (3 months ago)

  • Thanks for updating us with the nice information.

    Posted by cms website development, 26/05/2010 3:29am (4 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 (4 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 (5 months ago)

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

Post your comment