The Infinite Loop – Beginner's SEO, Beginner C# & JQuery Tutorials Problem. Problem Solved. Loop. – The life of a programmer

8Sep/090

Embedding flash using SWFObject

Just to save some of you the headache :) . I spent a few hours on this today, and I couldn't figure it out, I've embedded flash many times before and I just couldn't figure out why this time it wasn't working.

Anyways

Using jquery found here: http://docs.jquery.com/Downloading_jQuery
and
jquery swfobject plugin found here: http://jquery.thewikies.com/swfobject/downloads

we can semantically embed flash.

Now a few things:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.swfobject.js"></script>
<script type="text/javascript" src="jquery.myscript.js"></script>

Make SURE these are in this EXACT order.
Load Jquery>Load its plugins>Load your javascript file.

Now on your page somewhere you will have the div you want to load flash into like so:
<div id="myflashdiv"></div>

Open up jquery.myscript.js and type:

$("document").ready(function(){
       $("#myflashdiv").flash({
               swf: 'flash/myflash.swf'
        });
});

Directory Structure:

flash
  -myflash.swf
script
  -jquery.myscript.js
index.html

This assumes you have a flash folder, and the file myflash.swf in that folder.
The path in this case is NOT relative to the script your working in. Think about it this way:
the flash method probably uses document.write to output the correct object tag for your flash.
If your page is on the root of your site and the script is in scripts/jquery.myscripts.js you would think the source for the swf would be "../flash/myflash.swf". But think about that..in index.html if you look at the output it would say: src="../flash/myflash.swf", you should be able to see why thats wrong if you look at the above directory structure.

Anyways, if you didn't know swfobject behaves this way, this could take you quite some time to figure out.
Hope I saved you that time :)

Troubleshooting
Tip 1: Make sure the load order is : jquery, jquery.swfobject.js, then your script.
Tip 2: Make sure the src you're passing in is relative to the page you're embedding on, NOT relative to the script file you're working in.