Tech Journal
Latest Entries
- My Favorite New Things From 2009
- After Effects Bezier Motion Paths - Toggle Hold Keyframe
- Canon HV20 Pulldown Removal for CS4 (Repost)
Tech and Design
- My Favorite New Things From 2009
- Five Things I’ve learned About Freelancing
- Interesting Data Visualization
- Hydrogen Car Design to be Released “Open Source”
- Chicago Design Archive
- Keynote ‘09 - “View Package Contents”
iPhone
Web
- Skipping the Multi-entry Page in ExpressionEngine
- Opera Unite
- Assigning movie clips levels in Actionscript 3.0
- Opening Shadowbox windows from a link in Flash
- Passing FLV file paths to an AS 3.0 SWF with SWFobject
Motion
Passing FLV file paths to an AS 3.0 SWF with SWFobject
January 25, 2009
I created this site in ExpressionEngine, but the technique to dynamically pass the path of an FLV to a SWF “player” should apply to any CMS. For my gallery, I wanted to have the ability to dynamically load an FLV into a generic SWF player shell, and use the same shell for every gallery posting that has an FLV. SWFobject is a great, standards-compliant method for displaying flash content on a website, and it eliminates the need for the AC_RunActiveContent javascript. It also provides a convenient and easy-to-read method for passing parameters to your SWF file. I won’t go into installing SWFobject, since it’s well-covered in google code.
The Javascript
The javascript part comes straight from the SWFobject 2.0 documentation, and I feed the FLV path into my “path” variable in the “flashvars” section of the script from a custom file upload field in ExpressionEngine, but the same or similar technique can be used with any CMS (such as wordpress) that allows for custom fields.
<script type="text/javascript">
var flashvars = {path: "your_flv_path"};
var params = {};
var attributes = {};
swfobject.embedSWF("your_holder_SWF_file_path", "flvContent", "your_swf_width",
"your_swf_height", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
“flvContent” is the name of the div that you wish to replace, as specified in the SWFobject documentation.
The Actionscript
In frame one of the AS 3.0 flash file that will be your “flv player”, you’ll need the following code:
stop();
this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
function getFlashVars():Object{
return Object( LoaderInfo( this.loaderInfo ).parameters );
}
function loaderComplete(myEvent:Event) {
var path:String = getFlashVars().path;
player.source = path;
}
I’ve used the FLVPlayback component and given it the instance name “player” in the swf to load the FLV. To ensure you’re using the AS 3.0 version of the FLVplayer, make sure you’ve started your file in AS 3.0. Once you’ve implemented this in your site or site template, you’ve got a reusable FLV player that pulls the FLV file path from your HTML.
Leave a Comment