*maaf sebelumnya tutorialnya bahasa ingris
Anim-FX in HTML
How To tutorial
Adding a custom Flash animation created with
Anim-FX is a snap in Frontpage and Dreamweaver. However, if you do all the
coding by hand in Notepad, or your HTML editor does not have a standard Insert
Flash option, things can become a bit more complicated, especially if you are
not that familiar with HTML coding.
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!
Please note that for Anim-FX to work, you
must have copied and pasted the SWF and TXT file into the same directory as
your HTML file. You cannot place Anim-FX files in a subdirectory such as
/graphics or /animations. To read a bit more on how you should save Anim-FX
files, please click on the little “?” near the save button in Anim-FX.
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.
- Open
Notepad.
- Copy and paste the following code into your notepad.
This is the default HTML code.
<html>
<head>
<title>Name of your page</title>
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
- Save
the file with a .html extension, for instance index.html, and save it
every time you change the content of it.
- Now
you need to insert the SWF/HTML code. Copy and paste the code below into
your page underneath <body
bgcolor="#FFFFFF">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,2,0"
width="600" height="300">
<param name=movie
value="explosion.swf">
<param name=quality value=high>
<param name="SCALE"
value="noborder">
<embed src="explosion.swf"
quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="600"
height="300" scale="noborder">
</embed>
</object>
- I
used the explosion.swf effect with a width of 600 and a height of 300. If
you use another effect you should replace explosion.swf (at “movie value”
as well as at “embed src”) with the effect you want, and you can set your
own dimensions. I used 600x300 but you also can make it 468x60 or stretch
the animation over the entire length by setting the width to 100% and
height to 300.
- Now
your entire code should look like this (but with your own effect name and
dimensions):
<html>
<head>
<title>Name of your page</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,2,0"
width="600" height="300">
<param name=movie
value="barcode.swf">
<param name=quality value=high>
<param name="SCALE"
value="noborder">
<embed src="barcode.swf"
quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="600"
height="300" scale="noborder">
</embed>
</object>
</body>
</html>
- If
you change the size from the default size setting, you should always,
within Anim-FX, set the Y dimensions (Ypos) to 150.
- If you want to change the background color from white to, for
example, black, you must change the HEX color value from <body
bgcolor="#FFFFFF"> to <body
bgcolor="#000000"> You can change it to any other color you
want using the relevant color code.
- If
you want to be able to “see through” the animation to display a picture
underneath it, you should make the animation transparent. This is how to
make the animation transparent:
·
In Anim, FX, put the background color to
transparent and save.
·
Add the transparency tag to the HTML code.
<param name=wmode value=transparent>
·
Add a picture to the page by changing
<body bgcolor="#FFFFFF"> into <body background="yourpicture.gif">
- The
entire HTML code should now be like this:
<html>
<head>
<title>Name of your page</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,2,0"
width="600" height="300">
<param name=movie
value="barcode.swf">
<param name=quality value=high>
<param name=wmode value=transparent>
<param name="SCALE"
value="noborder">
<embed src="barcode.swf"
quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="600"
height="300" scale="noborder">
</embed>
</object>
</body>
</html>
- If
you want to center the effect on your page, you should add <center>
in front of the effect (object) and </center> behind it. Your entire
code will then be like this: (see the included sample.html file to see the
code working)
<html>
<head>
<title>Name of your page</title>
</head>
<body
background="tools.jpg">
<center>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
width="600" height="300">
<param name=movie value="beetles.swf">
<param name=quality value=high>
<param name=wmode value=transparent>
<param name="SCALE"
value="noborder">
<embed src="beetles.swf"
quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="600"
height="300" scale="noborder">
</embed>
</object>
</center>
</body>
</html>
That’s all you need to know about Anim-FX in
HTML. I recommend you also read through the online FAQ at www.anim-fx.com and check out the samples in
your Anim-FX directory (C://program files/Anim-FX/samples) to see different
versions of the above.
Remember that it’s crucial that you put the
Ypos in Anim-FX to 150 if you change the dimensions of the effect so that the
animation will not fall outside the display area.
All files MUST be put in one and the same
directory, as the swf file will always look for the content of the text file in
the directory where the HTML file resides.
Good luck!
Menno
If you are interested in other products
please feel free to visit www.mix-fx.com
which is an easy-to-use Flash text effect / button creator. This application
does not use external text files.
I also started a website selling complete
Flash/HTML templates. The Flash globe menu bar in particular may be interesting
for people who use Anim-FX as there is an option to import Anim-FX effects.
Komentar
Posting Komentar
untuk mengomentari gunakan kata-kata baik