SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Tutorials - Big bits of code to help you do more

Embed flash content using SWFObject

SSBswf2

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!

 

Roman Schmid avatar

Roman Schmid

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

  • bumbus
    12/10/2010 6:12pm (4 years ago)

    Why this doesnt work for me? Looks like the whole <script> section will be ignored. Someone has an idea?

  • Roman Schmid
    12/10/2010 6:15pm (4 years ago)

    If you're not generating XHTML as output, I suggest you remove the <![CDATA[ ]]> block and replace it with the usual HTML Comments. E.g:
    <script type="text/javascript">
    <!--
    // script goes here
    -->
    </script>

  • bumbus
    12/10/2010 6:38pm (4 years ago)

    thanx for your quick reply. You mean it like this?
    <script type="text/javascript">
    <!--
    swfobject.embedSWF(
    "$FlashFile.URL",
    "FlashContainer",
    "400", "300",
    "10.0.0",
    "mysite/javascript/lib/expressInstall.swf"
    );
    -->
    </script>

    but it still doesnt work.
    How do i generate XHTML with silverstriep btw :D

  • Roman Schmid
    12/10/2010 7:04pm (4 years ago)

    You can generate XHTML by using the appropriate doctype in your Page.ss file :)
    If you look at the generated source, does the script appear? If not, you should probably run a ?flush=1.
    If it appears in the source code of the page, but the flash movie doesn't, then check for errors in the JavaScript console (using a tool like FireBug or similar)

  • bumbus
    13/10/2010 8:30am (4 years ago)

    Okay, thanx again for your reply. I managed to get it to work now, just by using:
    <script type="text/javascript">
    swfobject.embedSWF("$FlashFile.URL", "FlashContainer", "300", "120", "10.0.0", "/mysite/javascript/lib/expressInstall.swf" );
    </script>

    Its just working without any comments nor CDATA parts for me. An other problem was the paths to expressinstall, swfobject.js etc, some noobish errors you know.
    Thanx alot for this.

  • Mom Bunheng
    13/06/2011 12:57pm (4 years ago)

    Hi,
    Is there any way to output DataObject into XML to use the with flash?

    Thanks
    Bunheng

  • Roman Schmid
    13/06/2011 3:27pm (4 years ago)

    @Mom Bunheng: Yeah, simply use the "renderWith" method to render to another template where you use XML markup.

  • Mom Bunheng
    16/06/2011 2:43am (4 years ago)

    Hi,

    Could you show the basic example please? I am new too SS :)

    Thanks
    Bunheng

  • Roman Schmid
    16/06/2011 7:45am (4 years ago)

    @Bunheng This thread should help you getting started: http://www.silverstripe.org/dataobjectmanager-module-forum/show/13283

  • sergieboy
    11/04/2012 10:01am (3 years ago)

    I love this article.
    But I'm trying to include a skin.
    Normally, you add the skin file (also a swf file) in the same directory as the swf file to play. But I don't get it done in SilverStripe...
    Any ideas ?

  • Mohit
    10/04/2013 4:02am (2 years ago)

    I am kind of new to silverstripe so i was wondering where exactly should i save the "Flashpage.ss" file? do i need to save that in the mysite folder or do i need to create another folder?

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image Ty Barho
6 article image Martijn van Nieuwenhoven
7 article image Darren-Lee
8 article image Roman Schmid
9 article image Matt Clegg
10 article image dalesaurus

View full leaderboard


Advertisement