The Basic Lake Applet

5 Easy steps to making a Basic Lake Applet

1. Save the image to a folder on your hard drive.

2. Copy this lake.class file to the same folder.

3. Make the web page (instructions follow) and save in the same folder.

4. Close all open programs, navigate to your folder, open it and double click on your web page, it should have the icon of your browser.

5. View your creation. Smile, show Mom, the kids or the dog, then make some of your very own!

The cabin on the left, is the photo that we will use to make a lake applet. When you pick a picture to make an applet choose one that is able to be cropped to a straight bottom line. The bottom edge will end up as the horizon in a lake applet. We will use this photo as it needs no alteration.

Step 1

Make a new folder on your hard drive. Right click on this picture and save it to your hard drive in this new folder. Open the photo in an image editor such as Paint Shop Pro. Click on View, then Image Information and record the measurements. This is an important step as you need to double the height and then subtract at least 10 or up to 60 pixels from this figure in the code that runs the applet.

Many images have only the 10 pixels subtracted from double the height, but I like to adjust this to suit the image and the water ripples. Experiment with this yourself! The vital statistics of this cabin are, width is 307 pixels and height is 230 pixels.

If you run Windows as an operating system on your computer then Paint is fine for finding width and height.

• How to Use Paint

• Click Start

• Click programs

• Click Assessories

• Click Paint

• After Paint opens, Click File/Open

• Scroll down to graphics, click on the File Types drop down arrow

• Select "All Types" find your graphic eg. cabin.jpg

• Click Open

• On the Menu bar in Paint, click on Image and then click on Attributes

• Make sure that the pixel radio button is on

• Write down the image measurements for the Width and Height

If you wish to edit your images then try the 30 day free trial of Paint Shop Pro or do a search for another one at Tucows. A link to the Resource page is at the bottom of this page. You may need to resize your own image if it is too large because you want to see all of the applet on your screen. This can be done in Paint Shop Pro.

Save the cabin photo to the folder as it is or if it is your own image then as a jpg file. Use lower case to name any images that you will use and have no spaces, hyphens or underscores in the name.

Step 2

You will need to download the lake.class applet from here.
After you download this file, copy the lake.class file to the same folder that you have saved the picture to.

Step 3

Now for the fun stuff... get ready to build your web page. If you have an editor then use that, if not, then Notepad, which comes with Windows too, is as good as anything. You need to type all of the following into Notepad. There is an unannotated version below that you can copy and paste.

• Click on File and then Save As. A menu window will appear. Use the drop down arrow at the top to find the folder where the cabin image and the lake.class files are already saved.

• Type in cabin.html in the File Name space.

• Click on the drop down arrow on the bottom right, next to Save as File Type and choose All Files. THIS IS IMPORTANT as the default will save it as a .txt file.

• Click OK and Hey Presto, your web page is made.
  
  You can choose any file name for a web page, but convention asks that it be in lower case and has no spaces, but you can use a _ underscore instead of a space.

Here is the web page code again, you can highlight it from this page, Click edit and Copy, then open Notepad, and click Edit Paste and then save as above. Don't forget to add your own details between the two body tags.

Step 4

Thats it! Close all the open windows as you don't need them anymore. Navigate to your folder and open it, check that the jpg and the class file are there and find the cabin.html file. It will have an icon that is the same as your browser, e.g IE or Netscape, double click on this file and your web browser will open and display your applet. You don't need to connect to the Internet.

Step 5

Enjoy your first applet. If you need any help e-mail me here. If you want to put your creations on the Internet then click here for the page on ways to do this. There's another tutorial on using the horizon and speed parameters here. If you want to learn how to add a border to your applet or a fancy border using a background image then you will find that here too.

See the Resource page for links to the programs used to make these applets.