WaterLogic Real-Time Graphics
Small Media::LightRays 1.0::User Guide
Installation
Using the Control Panel
FAQ
This section describes how to setup LightRays to work on your PC and web server.
The LightRays Java applet is contained in an archive file called 'LightRaysPersonal.jar' from the download package 'LightRaysPersonal.zip'. To use it, place LightRaysPersonal.jar in the same directory, or sub-directory, as the HTML document that uses it. For example:
C:\website\MyLightRays.html
C:\website\LightRaysPersonal.jar
or
C:\website\MyLightRays.html
C:\website\applets\LightRaysPersonal.jar
The applet tag can be generated automatically from the Control Panel, which is described in the next section.
Blend mode files
When uploading your content, HTML files and LightRaysPersonal.jar to your web server, be sure to upload the directory 'blendmodes/' as well. This directory includes the files that support blend modes. You must place 'blendmodes/' in the same directory as LightRaysPersonal.jar. Example:
htdocs\applets\LightRaysPersonal.jar
htdocs\applets\blendmodes\
The control panel lets you visually control all aspects of LightRays while the effect is running. Every change you make to the parameters is reflected immediately. When you have finished tuning the parameters, the control panel will generate the HTML source code containing all the parameter values. You can then cut and paste the HTML source code into your web page's source code and effect will be ready to use. The following sections explain every GUI component of the control panel in detail.
Sections:
Adjusting the size of the effect
Selecting images for the layers
Turning each layer on and off
Turning mouse interaction on and off
Adjusting the light source properties
Controlling how the foreground blends with the background
Controlling how the light source moves
'Bookmarking' your control settings
Generate HTML source code
1. Adjusting the size of the effect
The size control is at the bottom-right of the control panel. Simply type in any positive integer, press Enter, and the effect will be resized to the new dimensions.
Note that the bigger the size of the effect, the slower the effect will run due to the higher number of pixels that need to be processed. A good range of size will be between 128x128 to 320x240.
2. Selecting images for the layers (frame, mask, foreground and background)
To select the images to be used in any of the layers, click 'Browse' and choose the image file from the pop-up file-selection dialog. If the selected image is bigger or smaller than the effect's dimensions, cropping will occur. It is advisable to use images that are same sized as the effect's dimensions for the best effect.
Note: Due to Internet security reasons, this feature is not available when using the control panel online. It is only available when you download LightRays and run it from your computer locally.
3. Turning each layer on and off (frame+mask, foreground, background)
The buttons on the left are used to turn the layers on and off. If you do not need the frame/mask layer, just click the button to turn it off. When a layer is on, its button will be in blue color; if off, the button will be in grey color.
Note that the light ray effect runs in the foreground layer, so this layer should be on all the time unless you do not want to see the light rays.
4. Turning mouse interaction on and off
Click on the button to activate and de-activate mouse interaction. When mouse interaction is on, users can control the light source position with their mouse. When the cursor enters the effect's region, the light source will stop its current motion and follow it. When the cursor exits the effect's region, the light source will revert back to its previous motion.
5. Adjusting the light source properties
Pulsate controls how fast the light source 'blinks'. To turn it off, drag the slider all the way to the left.
Motion speed controls how fast the light source moves.
Motion scale controls the bounds of the light source motion. A higher scale will allow the light source to move to near the edges whereas a smaller scale will limit the light source's movement around the center. The scaling can be applied to the width and height (X and Y-axis) separately.
Light size controls the 'aperture' of the light source. A higher value will make the light source more intense but physically smaller whereas a smaller value will make the light source more diffuse but physically bigger. The size can be applied to the width and height (X and Y-axis) separately.
Alpha controls how far the light travels and how sharp looking it is.
Light size and Alpha are closely related and one of the keys to getting good results is to get to know, via experimenting, how they affect the light.
When you are adjusting the look of the lights, it helps by turning pulsate and motion (speed and scale) off by dragging their sliders all the way to the left.
6. Controlling how the foreground blends with the background
The blend mode controls how the pixels from the foreground and background layers are combined. All the standard blend modes from Adobe Photoshop are available here as well as 10 levels of simple opacity, so experienced graphic artist should have no problem utilising this control.
Very different and subtle looks can be achieved via this control alone so it is worth exploring in combination with using different layer images.
7. Controlling how the light source moves
6 motion types are provided: 3 well-defined paths and 3 random paths.
A 'no motion' motion is also available, called 'fixed'.
The choices here should be used in conjunction with the Motion Scale control.
8. 'Bookmarking' your control settings
Due to the number of controls available, it is sometimes easy to forget the settings for a particular look, especially during the tweaking phase. The memory dots control is to help remember those settings automatically.
To remember, Left-click on any blank memory dot (grey) and all the settings, except layer images, will be saved (turns red). Clicking on a red dot will override its memory, replacing it with the current settings.
To recall, Right-click on a red memory dot and all the settings, except layer images, will be restored.
The blue button in the middle is non-functional and is there for decorative purposes. :-)
When the settings have been finalized, clicking on this button will pop-up a little window that contains the HTML source code. The HTML code is not a complete HTML document, but only the Java applet definitions, therefore it must be cut and pasted into the HTML document that is supposed to contain the effect.
1. What is the frame, mask, foreground and background layers?
They are similiar to Photoshop layers, where each layer is an image and the layers are stacked on top of each other. In LightRays, the order of the layers, from top to bottom, are: frame, mask, foreground and background. The diagram below shows how the layers are combined in LightRays:
Frame is the top-most layer. It usually contains a logo or main object of interest that you want to show to the user. It can also contain an image of a picture-frame to enclose the whole LightRays effect.
Mask is a special layer that defines the transparency/translucency of each pixel in the frame layer. It is in 8-bit grayscale format, where black is totally opaque (nothing from bottom layers show thru), and white is totally transparent (everything from bottom layers show thru).
Foreground layer is where the LightRays effect is. The pixels in this image defines the shape and color of the light source, which can be anything, limited only by your imagination.
Background is the bottom-most layer. The image here is combined with the Foreground image thru a blending operation, much like blend modes in Photoshop. There are over 20 blending options available and each produces a different result.
2. How do I use the 'Generate HTML' button?
The HTML source code generated is only the Java applet definition (the <applet> tag) and it has to be pasted into a main HTML document body.
For example, suppose the button generates the following code:
<applet
code = en.products.VolumetricLightsPersonal.class
width = 450
height = 250
name = vlights
ID = vlights>
<param name = "blendmode" value = "5">
<param name = "lightPulsateSpeed" value = "1.0">
<param name = "lightMotionType" value = "0">
<param name = "lightMotionSpeed" value = "0.5">
<param name = "lightMotionScaleX" value = "0.8">
<param name = "lightMotionScaleY" value = "0.8">
<param name = "lightRadiusX" value = "0.05">
<param name = "lightRadiusY" value = "0.05">
<param name = "lightAlpha" value = "0.9">
<param name = "lightAlphaMin" value = "0.15">
<param name = "lightInteractive" value = "true">
<param name = "foregroundImage" value = "volumetriclights/fore3.jpg">
<param name = "backgroundImage" value = "volumetriclights/back3.jpg">
<param name = "frame" value = "volumetriclights/frame3.jpg">
<param name = "mask" value = "volumetriclights/mask3.jpg">
<param name = "foregroundActive" value = "true">
<param name = "backgroundActive" value = "true">
<param name = "frameActive" value = "true">
</applet>
It should be pasted into a HTML document:
<html>
<head>
<title>WaterLogic VolumetricLights User Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
!!paste generated HTML source code here!!
</body>
</html>
3. The images I selected will not load. Instead I get an error message saying BadIOPath/SecurityException. Why?
Due to security reasons, the operating system does not allow access to files that are not in the directory/sub-directories of your HTML document that calls LightRays. You should place the image files you want to use below the directory where the HTML document is at.
For example, if your HTML document is in C:\website\, then you can place the image files under C:\website\ or C:\website\images. If you place them in say, C:\images\ then LightRays will not be able to access them because C:\images\ is not a sub-directory of C:\website\.
4. Why is image/file uploading disabled in the online version?
Due to security reasons, Java applets running from foreign websites (i.e. WaterLogic's site) are not allowed to access files on your computer.
Java security issues.
5. What browsers are supported?
LightRays have been tested on these browsers:
NS4.75+, NS6+, IE5, IE5.5, IE6.
6. How come the effect runs so slowly?
LightRays is a compute-intensive effect so a slow computer will not be able to run it well. Try using a smaller dimension.
7. I think I have discovered a bug.
Please report it to WaterLogic's Small Media forum so that it can be fixed.
8. I'd like to share my work.
You can also use the Small Media forum to announce your work so others may see it.
9. How do I remove the 'Personal Edition' banner scrolling at the bottom?
You will have to purchase the Professional Edition.
10. Is there any difference between the Personal and Professional editions?
The free Personal edition is exactly like the Professional edition except it has the scrolling banner, and it cannot be used in commercial sites.
Last modified: Wednesday, 20 November, 2002 4:16 PM