How to put a picture underneath the SWF file

How to put an SWF file on top of a picture directly in your html page.

Adding a picture underneath your Flash animations requires a bit of hand coding. You can do this in the html editing mode of your html editor. To do the coding by hand is a bit more complicated when you are used to the standard "insert flash file" features, such as available in Dreamweaver and Frontpage.

By following these simple steps, you will be up and running in no time at all, and impressing all of your visitors with your talents! In this sample, we used Notepad as our HTML editor. You can use any other HTML editor as long as there is an option that allows you to hand-code.

1. Create an Flash animation or Flash button in Mix-FX. I created an animation, and saved it as random, dimensions are width = 400 , height = 100

2. Save it as "Publish for web". This will create the SWF file and the HTML containing the SWF file. This HTML file will include the proper HTML Flash tags. Make sure that you save the animation to the same directory that contains or will contain your website.

3. Open Notepad

4. Open the saved HTML page in Notepad. Select and Copy the HTML code between the <object> </object> tags. This is the code that you must add to your own HTML file.

5. Now open your own HTML page in Notepad and paste the code into the position where the animation should appear. This should be somewhere between your <body> tags

<HTML>
<HEAD>
<TITLE> Flash animations <TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"
width="400" height="100" align="top">
<param name=movie value="random.swf">
<param name="BGCOLOR" value="#FFFFFF">
<param name=quality value=high>
<param name="SCALE" value="noborder">
<embed src="random.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="100" scale="noborder" align="top">
</embed>
< /object>

</BODY>
</HTML>

6.If you want to be able to "see through" the animation to display a picture underneath it, you should make the animation transparent. To do this you must add the transparency tag to the HTML code.

wmode="transparent"

7. The next step is to add a picture underneath the SWF file. This can be done by changing the ,body background tag> in your HTML file to. Note that you must have a saved a picture in your website directory named yourpicture.gif, to see how this works. The code should look something like.

8. The entire HTML code should now be like this:

<HTML>
<HEAD>
<TITLE> Flash animations <TITLE>
</HEAD>
<body background="yourpicture.gif>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" width="400" height="100" align="top">
<param name=movie value="random.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<param name="SCALE" value="noborder">
<embed src="random.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="100" wmode="transparent" scale="noborder" align="top">
</embed>
< /object>
</BODY>
</HTML>

9. Save the file with an .html extension, for instance index.html, and save it every time you change the content of it

10. To view the created HTML page double click on the file, or open it in your Internet browser.

Flash Sample file with transparent background

To prevent this picture from tiling you must add the above code into a table or cell.