EMBEDDING A FLASH FILE (SWF)
Any Flash Application

See also:

• Embedding an audio file (played in WMP)
• Embedding a video file (played in WMP)
• Embedding a Quicktime player (mov, qtl, mp4 files)

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Here I will show 2 solutions, both good, both valid.

The Satay Flash Solution

Here is the original code snippet that works in all browsers, except as noted below about MSIE. It's entirely based on the Satay Flash method.

NB: This code is for a document with an XHTML doctype. For an HTML doctype or no doctype at all, ALL tags that are closed with a /> MUST be closed with only a >.

<object  width="500" height="200" data="flash-file.swf"
	type="application/x-shockwave-flash"
	title="Title of this flash object">
	<param name="movie" value="flash-file.swf" />
	<param name="height" value="200" /> 
	<param name="width" value="500" /> 
	<param name="menu" value="false" /> 
	<param name="quality" value="autohigh" />
<!-- remove the wmode if transparency is not needed -->
	<param name="wmode" value="transparent" />
	<em>Description of this flash object</em>
</object>

An example of Flash file embedded in this manner:

In the above example the assumption is that the necessary plugin is installed in the browser. That in itself is a challenge in all browsers other than IE, but that is a different problem.

And yes, this also allows embedding videos from YouTube or other similar sources like Google Video or MySpace Video. All you need is to adapt the code given by the video hoster and use the method given here. In fact you only need 3 parameters: the url of the video and its display dimensions.

The SWFObject Solution

This solution is extraordinarily easy to use. It requires javascript for the Flash movie to be viewed, which is a reasonable requirement. In the absence of javascript, alternate content is served, which is highly recommended in Flash application in any case.

But please note that this version I've been using is now old, though it has served me well and it will continue to serve well for simpler, uncomplicated flash needs. A new and much more sophisticated version is available from the official SWFObject Google Code Download site with support at the Google SWFObject Group.

Two scripts are to be included in the head section of the web page: SWFObject.js and mySWFmovie.js. Both are available for download as a zip file here.

In the body of the page, in the place where you want the swf file to be displayed, open a <div id="my_swfid"> (you pick the div idname, but need to provide it as parameter subsequently) and provide the alternate content to be shown if javascript (and flash) are not enabled.

Right after closing this div, place another simple script which will serve to insert the flash movie object.

  
<div id="my_swfid">
   <p>This content is what is displayed instead of the flash object
   itself. It can be text, an image, anything that's appropriate.
   It will all be replaced by the flash object if javascript is enabled.
   It can be placed in a defined height div with scrollbars as well.
   </p>
</div>

<script type="text/javascript">
<!--
// This script ultimately replaces the text contents  
// in the div  id="movie" above by the SWF object 

// Let's get this flash movie to play
// We need to provide values for: 
//		swfid,swf,id,width,height,version,bgcolor 

// this depends on the id of the div where you want it
 	var swfid="my_swfid";
	var swf="flash-file.swf";
	var id = "FVS";
	var width=500;
	var height=200;
	var version="6";
	var bgcolor="#cccccc";
             // or  0 for transparent 
             // or a 6 digit code like "#cccccc" for that color

   mySWFmovie (swfid,swf,id,width,height,version,bgcolor);
     
//-->
</script>

Here is an example using SWFObject which has been coded exactly this way.

NB: These scripts are a work in progress. Please revisit this site in order to find the latest versions. Also please let me know of any limitations or bugs you may have found, whether concerning differnt operating systems or browsers than what I have been able to test myself.

• Embedding an audio file
• Embedding a video file

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Ads