Jarrod Medrano // Mar 11 2008
There are several ways to embed Flash on a web page – some are better than others. Here’s the one we’ve found to work best:
Download the example files for this tutorial here. Extract the files from the .zip and then put the SWFObject.js into this folder. You should now have something that looks like this:
The html file contains the default embed code that comes with Macromedia Flash 8. It looks like this:
After you’ve deleted the above code from the HTML file, make sure you link to your swfobject.
Now copy and paste this code into the body:
<div align="center"> <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_new"><img src="img/pidot.jpg" border="0"/></a><p>In order to view the content on this page, you will need the latest version of Adobe’s Flash Player. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_new">Click here to download it</a>.</p></div>
This is what will be displayed in the event that the end user doesn’t have flash installed. I included a simple image and some text. It’s usually wise to include a link to Adobe’s website so that they can download the flash player if they want to. It’s worth noting that if the user does have flash installed, he will never see this content, which looks a lot more professional than loading the swf on top of an error message.
var so = new SWFObject("swfobjectexample.swf", "swfobjectexample", "320", "240", "8", "#FFFFF");
So, if we look at the parameters one by one:
The name of the flashcontent div can be changed to whatever you want, as long as it matches what is in the so.write function. It is necessary to have separate names if you intend to embed more than one swf in the same page.
After you’ve done this part, open the page in a browser. If you see the animation, HUGE SUCCESS! I grant you one internet.
Here is the complete code:
var so = new SWFObject("swfobjectexample.swf", "sotester", "320", "240", "8", "#FFFFF");
If you want to see what is displayed when you don’t have flash, either remove the swf from that directory, break the url, or better yet, uninstall flash.
Here is what it should look like if you don’t have flash installed in your browser:
In order to view the content on this page, you will need the latest version of Adobe’s Flash Player.
Click here to download it.
Now we’re going to do something a little different. We’re going to send a variable to the swf, and this will change the backgound color. Find this part of the code:
And after that, copy and paste this code:
Hooray! Now the background is black!
But wait, how did you do that!? Well, the answer is contained inside the .fla file. On the first frame of the flash movie, I entered this actionscript code:
This is a boolean function that declares the bgColorVar variable. If the variable is defined AND if it is equal to black, the background color will be changed to black. Otherwise, the background will still be white. The background color is actually a movie clip I made, which I then placed on the bottom layer.
And that’s how you use SWFObject! See you next time kiddies!
To add parameters to your swfobject, take a look at this code, where I add a wmode parameter (note this would NOT WORK for this particular movie, because it has a white movie clip as a background.):
var so = new SWFObject("http://www.portent.com/flash/swfobjectexample.swf", "swfobjectexample", "320", "240", "8", "#FFFFFF");
so.addVariable("bgColorVar", "none"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
Jarrod has lent his extensive experience in web design, HTML, CSS and more to Portent for over 6 years. Read More