Home    UK City Guides     London     Contact     Hotels     UK Travel     Maps

Sunday, July 6, 2008

Embed Flash SWF using Javascript

Have you had problems displaying your Flash movies (SWFs) lately? Have you had some strange pop up window coming up when a Flash page is loaded. It is all to do with some copyright law. I won't bore you with the details, I can't remember them they are so dull.

The important thing is how do we now embed our Flash movies without our viewers having problems. Below is one solution I have found to work without problems.

Take a look at www.beijing-visitor.com, you will see an interactive Flash movie at the top showing images of China. It is loaded using Javascript (JS).


Note: The code shown below is an image so cannot be selected. You will have to type it in by hand - sorry but real code upset the blog software! As you would expect really. Click on the image for a larger version of it, don't make any mistakes of it won't work but don't worry about how many spaces are between elements as that doesn't matter.

1. Paste the following code into the page you want your SWF to be embedded in. Use everything between the *'s but don't inclued the *'s.

Code for embedding SWF in page.
I'm not a coder and had to pinch this code but I have got it working, I just don't know everything it does - or care how it does it.

1. At the top you can see the code "src="js/flashobject.js"". This is where you keep the JS code and it should be named 'flashobject.js'. You could name it something else, up to you.

2. "DIV id=slideshow" allows more than one SWF to be on the same page, simply double up on the JS above and give it a different id, e.g. slideshow2. Look here for an example of multiple SWFs on the same page: www.soccerphile.com.

3. Use your own URL for where you keep your SWF, don't try and use the URL given above, the site won't let you by .htaccess so your SWF won't work.

4. Put your own width in pixels for the value 406 and height for 195. I don't know what the '1' is for, let me know if you do. The '#ffffff' is the background colour.

The next thing to do is to include the JS file shown at www.beijing-visitor.com/js/flashobject.js

That should do the trick, good luck.

No comments: