
asked by Dion Davis, a student in Phoenix
Maintaining page validation while embedding flash can be a pain for anyone. Most people try to drop the swf onto their page in dreamweaver, in this case dreamweaver will try its best to write a little code for you to make it work. The problem is that it doesn’t validate. In my opinion the easiest way to accomplish this is use the SWFObject JavaScript.
What you are going to end up doing is downloading the swfobject.js file and link to it in your site, then you will write a little bit of JavaScript that describes where the swf file is, and also it’s specs.
First, download the SWFobject.js, in this folder there will be the swfobject.js file as well as a few examples on how you can use it.
There a ton of different parameters that you can use in your JavaScript that you are using to embed it, but I usually start with the same 6 and adjust it from there.
Example - Using SWFObject
<div id=“flash”> <div id=‘noflash’> <p>To view this, you need to install the Flash Player 7. Please go <a href=‘http://www.adobe.com/products/flashplayer/’ title=‘Get Flash’> here and download it</a>.</p> </div><noscript> <ins> <strong>Note:</strong> JavaScript is also required. </ins> </noscript> <script type=‘text/javascript’> // <![CDATA[ var so = new SWFObject(’swf/header.swf’, ‘flash-header’, ‘500′, ‘200′, ‘7′, ‘#fff’); so.addParam(’quality’, ‘high’); so.addParam(’menu’, ‘false’); so.addParam(’wmode’, ‘transparent’); so.addVariable(’scale’, ‘noscale’); so.write(’noflash’); // ]]> </script> </div>
The top div called noflash is what gets displayed when the user doesn’t have flash installed, it will then prompt them to download it. The second part is the important part, the JavaScript. These are my default settings and the only things I usually change are the top line of it.
This line is the one to worry about,
var so = new SWFObject(’swf/header.swf’, ‘flash-header’, ‘500′, ‘200′, ‘7′, ‘#fff’);
This line is saying this,
var so = new SWFObject(’link to the swf’, ‘ID of the object’, ‘width’, ‘height’, ‘required flash version’, ‘color that appears behind the flash while it is loading’);
Try using this method and replacing the information with yours, if you have any problems you may follow up in the comments below. I have used this method on my San Diego web design site with success as well.
OR follow on Twitter
Twitter.com/DeDestruct
Comments
Doesn’t that seem like cheating? I like the idea, but you are you just using JS to insert the flash after the page validates?
Interesting that this page doesn’t validate and you have broken links in your sidebar
But I think CS3 generates valid code now, doesn’t it? IIRC, Flash/DreamWeaver now generate a .js file and valid XHTML so that you don’t have to do this yourself
@Paul - It’s not cheating, it’s just using a different technique to insert it. A bonus to using JavaScript is that if a user doesn’t have Flash Player, it will prompt them to get it
@IScattered - Thanks for the great help! We’re working on that
@Robin - I will have to check that out to give a definitive answer, I always use the SWFObject because it’s a sure fire solution for me
I’d just like to point out to those here that SWFObject is out-dated now. And though it does actually create valid code, using a technique sponsored by the W3C, it’s precesesor is actually SWFObject 2.0 which is acutally a completely separate project brought to you by the three guys who know it most: The creator of the SWFObject, the creator of the UFO method and a developer from Adobe’s own method (which I might add also uses JS).
@Paul: It’s not cheating if that’s how Adobe does it and how the W3C recommends you do it.
@Robin: Yeah, Adobe has a method for inserting Flash content, but it also uses a JS tester. If it’s not doing a tester then it’s either using an Object or Embed tag, which doesn’t work with all browsers whichever you choose.
Hello
i used this method.
I wanted to add a flash player in my site with autoplay on.
I hav designed a flash player using actionscript. I used above method with autoplay option true but didnt get desired result.
It dosent start playing when the page is loaded but starts playing when video’s completely downloaded.
Also it dosent work in Opera & firefox either
help needed
Trackbacks
Leave a reply