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)
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.
|
