...

View Full Version : Best Method of Embedding Flash



gnomeontherun
04-18-2008, 08:53 AM
One of the most common issues with Flash is how to properly embed it into a website. While several methods are available, my preferred method is by using SWFObject. It will try to display Flash using the best method it can based on the browser ability and type. There are two versions, 1.5 and 2.0. 1.5 is a little bit simpler to use, but 2.0 is recommended for its extended abilities and will be explained here.

There are two methods which you can use. They are called Static or Dynamic. From SWFObject:

1. The static publishing method embeds both Flash content and alternative content using standards compliant markup, and uses JavaScript to resolve the issues that markup alone cannot solve
2. The dynamic publishing method is based on marked up alternative content and uses JavaScript to replace this content with Flash content if the minimal Flash Player version is installed and enough JavaScript support is available (similar like previous versions of SWFObject and UFO)

The advantages of the static publishing method are:
1. The actual authoring of standards compliant markup is promoted
2. The mechanism of embedding Flash content does not rely on a scripting language, so your Flash content can reach a significant bigger audience:
o If you have the Flash plug-in installed, but have JavaScript disabled or a use a browser that doesn't support JavaScript, you will still be able to see your Flash content
o Flash will now also run on a device like Sony PSP, which has very poor JavaScript support
o Automated tools like RSS readers are able to pick up Flash content
The advantages of the dynamic publishing method are:
1. It avoids click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+. Please note that Microsoft is currently phasing out all active content from its Internet Explorer browsers [ http://www.swffix.org/devblog/?p=19 ]
2. It integrates very well with scripted applications

Basically, if you can, use the Static method. I will outline both below, but for more indepth information about which is better, read the documentation on the site below. I recommend the Static, unless you are planning to do some major scripting.

Static method


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
swfobject.registerObject("swfplaceholder", "9.0.0", "expressInstall.swf"); // First parameter: name of Object ID, Second parameter: Minimum Flash version, Third Parameter:
</script>

</head>
<body>
<div>

<object id="swfplaceholder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

<param name="movie" value="swfFile.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swfFile.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

The bolded sections are key, and should be modified for your particular needs. Make sure the swfobject.js file is linked properly in the script tag. The JavaScript code is noted. Make sure the object ID matches the code in the swfobject.registerObject function. Change the width, height, and swfFile.swf names to fit your Flash document's size and name. Lastly, change the alternative content to something fitting for your site.

There are more parameters you can add, just like <param name="wmode" value="transparent" /> which will make the Flash document have a transparent background. More complete information is on the SWFOjejct documentation.

Dynamic method


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

var flashvars = { // These are variables which are passed to the Flash document - they have to be already defined in the SWF
buttonText: "Press Me Please",
imageURL: "funnypicture.jpg" // Don't put anything after the last ", if you add more variables use a comma to separate entries but leave the last entry without one, same applies to the params and attributes
};
var params = { // Parameters for display
menu: "false",
wmode: "transparent" // a common request to make the
};
var attributes = {
id: "newID",
name: "newID"
};
// 1 - Name of file to load, 2 - ID of DIV to replace with SWF, 3 - width, 4 - height, 5 - Minimum Flash version, 6 - Express Install (if not using then place false), 7-9 - sends the arrays
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>

First we need to include the swfobject.js file. Then the flashvars, params, and attributes need to be set. There are numerous options for these, and checking the site for specific documentation would be better than rewriting it here. Then you will place the swfobject.embedSWF line, which is where the magic happens. It is notated what each of the parameters are, but make sure to adjust them all accordingly. If you don't have any variables to pass to Flash, then delete the flashvars array and remove it from the swfobject call. The same applies for params and attributes. They aren't required, but you cannot rearrange them. You can remove one, but can't place params before flashvars, etc.

What is Express Install?
In both cases there is an expressInstall.swf there. There is a file that comes with the SWFObject from Adobe which is intended to help people upgrade their Flash players if it doesn't meet the minimum requirement. If you choose to use it (there is no harm in using it, and it could be useful for people to easily upgrade), you should place it on your server and set the link to it where the "expressInstall.swf" is now. You can replace that part (including the quotes) with false if you choose not to use this ability.

Download the Code

V2.0 http://code.google.com/p/swfobject/

V1.5 http://blog.deconcept.com/swfobject/ - Not described here

Code Generator: http://www.swffix.org/swfobject/generator/

This is a quick tutorial on how to place Flash onto your pages in a valid, proper manner. If you are using any other method, it might be working, but switching to SWFObject would make the code valid and more stable across browsers.

Good luck.

varul
04-18-2008, 04:56 PM
Hai

I am Arul..
Nice examples have been given...
Thank you..

gnomeontherun
01-17-2009, 11:39 AM
It appears the link for the generator is no longer valid. It is now

http://www.bobbyvandersluis.com/swfobject/generator/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum