Embed flash content using SWFObject

Tweet

3 December 2009 | Roman Schmid | CMS, Templates, JavaScript | Supports v2.4, v2.3

11 2

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

<?php
class FlashPage extends Page 
{
	public static $db = array(
		'AlternateContent' => 'HTMLText'
	);
	
	public static $has_one = array(
		'FlashFile'	=> 'File'
	);
	
	public function getCMSFields(){
		$fields = parent::getCMSFields();
		
		// create a file upload field that only allows swf to be uploaded
		$fileUpload = new FileIFrameField('FlashFile', 'Flash file (swf)');
		$fileUpload->setAllowedExtensions(array('swf'));
		
		$fields->addFieldsToTab('Root.Content.Flash', array(
			$fileUpload,
			new HtmlEditorField('AlternateContent', 'Flash replacement text', 20)
		));
		
		return $fields;
	}
}
class FlashPage_Controller extends Page_Controller
{
	public function init(){
		parent::init();
		// require SWF Object script
		Requirements::javascript('mysite/javascript/lib/swfobject.js');
	}
}

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:

<% if FlashFile %>
<div id="FlashContainer">
	$AlternateContent
</div>
<script type="text/javascript">
/* <![CDATA[ */
swfobject.embedSWF(
	"$FlashFile.URL", 
	"FlashContainer", 
	"400", "300", 
	"9.0.0", 
	"mysite/javascript/lib/expressInstall.swf"
);
/* ]]> */
</script>
<% end_if %>

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!