Home | FAQ | Download | Buy | Features | Samples | About us | Testimonials | Affiliates | Link to us
 

How to add a background picture to a Flash Animation.

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 your HTML code.

1. Create a Flash animation in Anim-FX. I used the Flare animation.

2. Save the text file.

3. Go to your C:/Program Files/Anim-FX directory and copy (CTRL-C) and paste (CTRL-V) the Flare.SWF and Flare.TXT to your website directory.

4. Open Notepad and open an existing html file or create a new file from scratch.

5. Copy and paste the HTML code below into your html document. If you use an exisitng HTML page you only must use the section between the <object> </object> tags. In case you used a different animation then flare.swf you must update the name of the swf file (in red) as well.

<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="flare.swf">
<param name="BGCOLOR" value="#FFFFFF">
<param name=quality value=high>
<param name="SCALE" value="noborder">
<embed src="flare.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 see a background picture underneath the SWf file, you should make the animation transparent. To do this you must do the following.

a. In Anim-FX set the background color to tansparent.
b. Add the transparency tag to the HTML code. (see below)

In the object section (for I.E)

<param name=wmode value=transparent>


In the Embed section (for Netscape)

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.

<body background="yourpicture.gif>

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="flare.swf">
<param name=wmode value=transparent>
<param name=quality value=high>
<param name="SCALE" value="noborder">
<embed src="flare.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. To learn how to add a picture to a small area (table) instead of the entire background click here.