RIPPLE APPLET TUTORIAL
| Thanks to Modern Minds the inventor of the magical Ripple Applet
that makes the water ripple were we wont it to ripple. I am going to make the
instructions as simple as possible with out talking about Directories and
Sub Directories. I am using Front Page 2002 for my web design and
Paint Shop Pro for resizing and making the transparency in my images/pictures.
First we are going to make a Folder were we keep are webpages, name the
Folder ripple. We have only two
class files to download and save, the RippleApplet class and Ripple
class and one picture/image file.
We will save the two class files in our website folder, click
RippleApplet.class to get the
RippleApplet.class file and Here to get the
Ripple.class file. Click Here
to get the
picture/image
file. Then click on the back arrow at the top of your screen to
return to the tutorial. Don't forget to save both class files and
image/picture file in your ripple Folder. Next we have to make a
webpage, do this the same way as you make any webpage, and put it in
your ripple Folder. Next highlight the script below and right
click with your mouse on the highlighted script, a screen will open
up, click on copy with your left
mouse. The size of the picture/image is 300 pixels wide and 226
pixels high. If you use your own image/picture there are only four things you
need to
change in the Applet Script, width, height and the name of your
images/pictures which is in green. If
you don't wont the border round you applet, just delete what is in
blue. <applet CODE="RippleApplet"
WIDTH="300" HEIGHT="226" |
This is what it will look like.
Open up PSP, click on file at the top of your screen, go down and
click on Open and a screen will open up, find your ripple Folder, double
click on this folder with your left to open it up, you will then see
example.jpg, click on it with your left mouse to highlight, click on Open.
Your file will now be opened up in PSP, go to File at the top of your
screen, go down and click on Save As, a screen will open up and your file
name will highlighted. Were it says Save as type, click the small browser
button and a screen will open up, look for CompuServe Graphic Interchange
[*.gif] just click on it, then click on Options and make sure there is a
dot next to Version 89a then click on Save, another screen will open up
just click Yes. Click on the X top right of your file to close it down
[you must do this] Go to File and click on Open and open up example.gif.
Next click on Lasso and you will see your mouse pointer has changed. Put
your mouse of the area we wont to make transparent, hold down the left
mouse button and follow the area we are going to cutaway, release your
left mouse and you will see what looks like ants running round, put your
mouse over this area and hold down your left mouse and drag your mouse
away from your image and release your mouse button, continue doing this
until you are satisfied with the area you wont to be transparent.
You can Set Palette Transparency from the Colors menu. A dialog will open that will give you some options for the color palette, reduction method and options for creating the image. I usually use Optimized Octree because it gives me the appearance I need.
I leave the reduction method at the default of Nearest Color. Finally we get to set the transparency. You see several options. You'll notice that the second option says Set the transparency value to the current background color. You'll also notice that it is not the background color of the image. It is the background color that is selected in your color palette.
Normally I choose the third option and left click with my mouse on the part of the image that I want transparent. That picks up the color that should be transparent and shows it in the second color box. Before you commit you can click on the Proof button to test it out. Once you are satisfied click ok, you'll not see the transparency right away. You need to go back to the Colors menu and click on View Palette Transparency.
|
.