Top
fr
We Design & Host Your Place on the Web
WARNING: Obsolete technology kept for historical reasons.

EMBEDDING A FLASH FILE (SWF)
Any Flash Application

See also:

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:

Flash logo banner for www.melinas-music.com

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.

Important Notice

An update in May 2006 in the way Microsoft IE6 handled the object and embed tags brought about a very annoying phenomenon which required an additional click to activate the control (for any type of embedded object: Macromedia Flash, Windows Media Player, Real Player, Quicktime, Java applets, PDF files).

This problem has been corrected subsequently by MS, but the methods described here remain valid.

After trying and discarding several workarounds that had been proposed, all of which I found unacceptable due to their high complexity of implementation and lack of flexibility, the solution that appears below is the best and most elegant of all. It comes from Geoff Stearns of http://www.deconcept.com/ and is documented at http://blog.deconcept.com/swfobject/.

It actually affords an ideal way to provide alternate content for Flash, in adition of getting rid of the MSIE annoying message (at the time it applied) and of course using w3 valid code.

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.

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Ads



WARNING: Obsolete technology kept for historical reasons.