Sure thing.
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
I suggest to create a special Page class for our needs. Let's call it "FlashPage". Copy the following code to a file named FlashPage.php in mysite/code:
<?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 this, run dev/build
The FlashPage class has a FlashFile and an alternative content that will show if the flash player isn't installed on the visitors machine. I added these two fields to a new Tab called "Flash" on the same level as "Main".
Now you only need a template for the FlashFile page. This could be either a layout or a full page template. Here's the important template code:
<% 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",
null,
{ 'bgcolor' : '#000000', 'wmode' : 'transparent' }
);
/* ]]> */
</script>
<% end_if %>
Here's a short summary what we do here:
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. There's a good description of these parameters on the SWFObject website:
http://code.google.com/p/swfobject/wiki/documentation#STEP_3:_Embed_your_SWF_with
The wmode can be set with the params argument as I did in the example (I also set the background color).
Let me know if that works :)