Curtain Setup Note: REGISTERED VERSION IS MUCH SMALLER AND WILL LOAD MUCH FASTER. Evaluation Applet Size: 40K Registered Applet Size: 7K Downloaded from http://javapplets.com First things First This is a nice easy applet to set up. All that you need to do to get started is to decide on the images that you want to use, and make them all the same dimensions. If your images are of different dimensions, you can rescale them or add a border to make them the correct dimensions. The applet works by "splitting" the image in half and opening to reveal the next image. A great feature of this applet, is that you can select whether you want the images to split horizontally or vertically. For our example we used the following images: Setting up the applet Here is how to set up the Curtain applet in 3 easy steps. 1. Upload the file Curtain.class into the same directory as the web page that you are going to put the applet on, along with all of the images that you are going to use. That is the page, the graphics and the applet should be in the same directory. Advanced users can place the applet in a different directory using the CODEBASE attribute, but we won't get into that here. 2. Configure the parameters. This is the hardest part for most users, so read carefully. First configure the applet tag to tell the browser which applet to load and how big to make it. The applet tag must include the following: <APPLET CODE="Curtain.class" WIDTH=x HEIGHT=y> Of course, substitute the width in pixels that you want the applet to be for x, and the height that you want for y. Here for the applet to function correctly the width and height should be that of your images, which as you remember should all be the same. Next, we need to create the actual parameters of the applet. Each parameter has a name and a value. The names are predetermined, the values are up to you. The tag appears as follows: <PARAM NAME="Some Name" VALUE="Some Value"> Of course, that parameter will get you no where with this applet. Here is the list of parameters with the types of values that you should put in. You will notice that some of them have default values. Any parameter with a default value can be omitted if you are happy with the default value. The Easy Part: What we call the parameter (NAME) What we mean (VALUE) ANIMATION DELAY This is the number of milliseconds that the applet will pause while the image is splitting. Setting it higher will make the opening take longer. Defaults to 100 milliseconds. DISPLAY DELAY This is the number of milliseconds that the applet will pause after the image is completely split and the next image is entirely revealed. Defaults to 2000 milliseconds. JUMP The number of pixels that the curtain opens with each animation. Defaults to 1 line per animation. TARGET The window or frame that you want any hyperlink to be loaded into. Defaults to the same target or window as the page that the applet is on. In other words, if you don't know what the target is, don't worry, it will load where you expect it to. That's the easy part because all of the parameters have default values and can be ignored if you so desire. This following section is important because it is required by the applet. Without the following parameters, the applet will not function. That is because the following parameters define the images to be used - without them there are no images to be opened. Creating the parameters is easy. The first image that you want to have displayed in named IMAGE 1, and has a value that is the name of the first image you want displayed (if you used our suggestion to put the HTML page, applet, and images in the same place, otherwise it is the path to the image). The second image parameter has the name IMAGE 2, and and has a value that is the name of the second image you want displayed (if you used our suggestion to put the HTML page, applet, and images in the same place, otherwise it is the path to the image), and so on. Here is an example using two images: <PARAM NAME="IMAGE 1" VALUE="Image-1.gif"> <PARAM NAME="IMAGE 2" VALUE="Image-2.jpg" Of course, you should substitute the names of your images for Image-1.gif and Image-2.gif. Now, if you would like, you can add links to each of your images. Creating the parameters for the links is exactly like naming the images to be used in the applet. For each image, there can be a corresponding link. LINK 1 will lead you from IMAGE 1 to the desired page. Then, the link for IMAGE 2 will be LINK 2, IMAGE 3 will have LINK 3 and so on. If you do not want an image to have an associated link, simply do not add the LINK parameter with that number of the image. Here is an example using links: <PARAM NAME="LINK 1" VALUE="link for image 1"> <PARAM NAME="LINK 3" VALUE="link for image 3"> Simply, substitute the address for each of the image links. In addition, you may select which direction the curtain will split the images. For each image, the transition can be either horizontal or vertical. You may specify the direction of each of your images, if so desired. This parameter works in the same manner as the IMAGE and LINK parameters. For an image to have a specific transition direction, simply use the TRANSITION parameter with the associated image number. So, IMAGE 1 would have TRANSITION 1 as its direction parameter. Then, the second image's direction would be specified with TRANSITION 2, IMAGE 3 with TRANSITION 3, and so on. To specify horizontal use H, for vertical use V. Here is an example of a sample transition parameter: <PARAM NAME="TRANSITION 1" VALUE=H> <PARAM NAME="TRANSITION 4" VALUE=V> If you do not wish to use this parameter, the default value is set so that all of the images will split horizontally. If you specify a direction for 1 image, all of the images following it will split in the same direction. In this example, images 1, 2, and 3 will split horizontally, and all of the images after and including image 4 will split vertically until image 1 is displayed again. That's all there is to it. When you are done your code should look something like this: <APPLET CODE="Curtain.class" WIDTH=208 HEIGHT=142> <PARAM NAME="IMAGE 1" VALUE="Curtain1.gif"> <PARAM NAME="IMAGE 2" VALUe="Curtain2.jpg"> <PARAM NAME="IMAGE 3" VALUe="Curtain3.jpg"> <PARAM NAME="IMAGE 4" VALUe="Curtain4.jpg"> <PARAM NAME="IMAGE 5" VALUe="Curtain5.jpg"> <PARAM NAME="TRANSITION 1" VALUE=H> <PARAM NAME="TRANSITION 2" VALUE=V> <PARAM NAME="TRANSITION 3" VALUE=H> <PARAM NAME="TRANSITION 4" VALUE=V> <PARAM NAME="TRANSITION 5" VALUE=H> <PARAM NAME="ANIMATION DELAY" VALUE="10"> <PARAM NAME="DISPLAY DELAY" VALUE="2000"> <PARAM NAME="JUMP" VALUE=5> </APPLET> Please note that we chose not to use any links for our images in the example. 3. Place this code into your HTML file and give it a try! Please let us know if this configuration page was helpful to you or if you have any suggestions as to how to improve it.