Slideshow 1.2 User Guide
Walk-Thru Tutorial
Part II - Configuring the Slideshow
Part VI - Miscellaneous Information
Note that the following instructions assume some basic knowledge of Adobe Photoshop on the user's part.
This section is a step-by-step guide to the content creation process of the Dragonfly demo using Adobe Photoshop and Kai Power Tools 3.
1. A new working document
First, decide on the size of the effect. All images, frames and masks must be of the same size. In Photoshop, I opened a new document of size 400 by 266 pixels using File->New. This is my working document.
2. Scanning the images
Next, I scanned in 10 dragonfly pictures from a calender using File->Import->TWAIN_32, at 300dpi resolution.
3. Retouch and resize
Each scanned picture results in a new Photoshop document. After some retouching (which is beyond the scope of this guide), I cropped (make a selection, then Image->Crop) and resized (Image->Image Size) each dragonfly to 400 by 266 pixels.
4. Pasting into working document
Now add the dragonfly images to the working document as individual layers. For each dragonfly, I select the entire image (Ctrl-A), copy (Ctrl-C), then select the working document, and paste (Ctrl-V). Each dragonfly now has its own layer in the working document.
5. Creating a frame
Then I created an oval frame by:
- creating a new layer (Layer->New->Layer). this is the frame layer.
- choose the elliptical marquee tool (click and hold on the Marquee tool and select the Circle icon).
- making an oval selection (click at top-left corner and drag to bottom-right corner of working document).
- soften the selection boundary (Select->Feather, 3 pixels).
- save the selection in a new channel called 'oval' (Select->Save Selection)- inverse the selection (Select->Inverse).
- fill the selection with white (Edit->Fill, deselect 'Preserve transparency').
- release the selection (Select->Deselect).
- add a dimension to the oval by embossing it (Filter->Stylize->Emboss).
6. Glass cover
Next I add a piece of glass cover to the oval-shaped opening.
- load the oval selection (Select->Load selection->Channel->oval)
- fill the selection with white (Edit->Fill, deselect 'Preserve transparency').
- render a glass lens into this oval selection using KPT3 Glass Lens filter. if you do not have KPT3, you can use a circular-burst gradient fill, or repeated gaussian blur and then the lighting effects filter to achieve a similiar effect.
7. Making the glass transparent
Now I create transparency mask (to make the glass translucent) for the dragonfly images to show through.
- create a layer mask (Layer->Add layer mask->Reveal All).
- load the oval selection (Select->Load selection->Channel->oval).
- re-render the glass lens (Filter->KPT Glass Lens 3.0)
- choose a dragonfly layer, drag it below the frame layer and show it.
- adjust the transparency of the glass until the dragonfly shows up nicely. (click on the frame layer mask, Image->Adjust->Brightness/Contrast)
8. Extracting the transparency mask
Since neither the GIF nor JPEG file formats supports transparency, I have to extract the frame transparency information explicitly.
- select the frame layer mask (click on the layer mask, then Ctrl-A).
- copy the mask (Ctrl-C).
- paste the mask into a new layer (Ctrl-V).
- invert the mask (Ctrl-I).
Note: The Slideshow treats black pixels as opaque and white pixels as transparent, relative to the frame. A black mask pixel will show the corresponding frame pixel at 100%, and a white mask pixel will show the corresponding image pixel at 100%.
9. Saving all the files.
Now that all the content has been created, I proceed to save them.
- save the entire working document. (File->Save, dragonfly.psd).
- save the dragonflies as individual JPEG files. (show only one layer at a time, and use File->Save a copy->Save as->JPEG).
- save the frame image. (show the frame layer and background layer, and use File->Save a copy->Save as->JPEG).
- save the transparency mask. (show the mask layer only, and use File->Save a copy->Save as->JPEG). optionally, you can copy the transparency mask and paste it into a -grayscale- document and then save it as a JPEG, which will create a grayscale JPEG that is much (~60%) smaller than a standard color JPEG.
I now have a total of 13 files: 1 original working document in Photoshop format, 12 JPEGs to be used by the Slideshow.
Part II - Configuring the Slideshow
The following instructions assume some basic knowledge of HTML syntax on the user's part.
This section shows you how to add the Slideshow to a webpage by editing the HTML file.
Below is the applet section of the HTML code of the Dragonfly demo. Copy and paste it into the HTML file of the webpage where you want the Slideshow to appear:
<applet
archive = "SlideshowPersonal.jar"
code = "SlideshowPersonal.class"
width = 400
height = 266>
<param
name = "image1" value = "images/1.jpg">
<param name = "image2" value = "images/2.jpg">
<param name = "image3" value = "images/3.jpg">
<param name = "image4" value = "images/4.jpg">
<param name = "image5" value = "images/5.jpg">
<param name = "image6" value = "images/6.jpg">
<param name = "image7" value = "images/7.jpg">
<param name = "image8" value = "images/8.jpg">
<param name = "image9" value = "images/9.jpg">
<param name = "image10" value = "images/10.jpg">
<param name = "mask" value = "images/mask.jpg">
<param name = "frame" value = "images/frame.jpg">
<param name = "gradient" value = "images/gradient1.jpg">
<param name = "feather" value = "30">
<param name = "showtime" value = "250">
<param name = "fadetime" value = "4000">
<param name = "fademethod" value = "4">
<param name = "backgroundColor" value = "0xA3A3A3">
<param name = "foregroundColor" value = "0xFFFFFF">
</applet>
Now save the HTML file into "Slideshow.html".
The above code should be self-explanatory and demonstrates the use of most of the parameters supported by the Personal Edition of the Slideshow.
If you wish to learn more about HTML syntax, there are many books available, or you can skip all the typing hassle by using a web page designer software like Macromedia Dreamweaver or Microsoft FrontPage.
This section shows you how to upload your Slideshow to your website, which will allow anyone on the Internet to see it.
First, you need a FTP program. I used the popular WS_FTP Pro, which has an evaluation version freely available. The Windows command line utility 'ftp' works fine too, if you're comfortable with typing in the command line.
Log-on to your web server and simply upload following files to your web directory:
- Slideshow.html
- SlideshowPersonal.jar
- *.jpg and *.gif (the slideshow images, which i upload into a sub-directory called 'images')
Done!
If your website is called www.coolsite.com, then visit:
www.coolsite.com/Slideshow.html
and you should see your Slideshow in action!
Parameter |
Description |
imageX |
This parameter specifies the filenames of the images to be shown. Directory names can be used. Both JPG and GIF files are supported. Syntax: <param name = "imageX" value = "directory/filename"> where 'X' is a number from 1 to 100. |
mask |
This parameter specifies the filename of the transparency mask for the frame image. It must be specified if fade methods '2' or '4' are used. This file must be in grayscale format. Both JPG and GIF files are supported. Syntax: <param name = "mask" value = "directory/filename"> |
frame |
This parameter specifies the filename of the frame image. It must be specified if fade methods '2' or '4' are used. Both JPG and GIF files are supported. Syntax: <param name = "frame" value = "directory/filename"> |
showtime |
This parameter specifies the length of time to show each image. It does not include the time taken to fade from one image to another. Only positive integers are accepted. The unit used is milliseconds. There are 1000 milliseconds in 1 second. Note that the actual timing accuracy depends on the underlying operating system. This parameter is optional, if it is not specified, a default value of 1000 is used. Syntax: <param name = "showtime" value = "an integer"> |
showtimeX |
*available in the Professional Edition only. This parameter is the same as 'showtime', except it is used to specify the length of time to show for individual images. Use it for images that require different lengths of time other than the global value set by 'showtime'. For images that do not have this parameter specified, it will use the value set by 'showtime' or the default value of 1000. Syntax: <param name = "showtimeX" value = "an integer"> where 'X' is a number from 1 to 100. |
fadetime |
This parameter specifies the length of time each fade takes. It does not include the time to show an image after a fade completes. Only positive integers are accepted. The unit used is milliseconds. There are 1000 milliseconds in 1 second. Note that the actual timing accuracy depends on the underlying operating system. This parameter is optional, if it is not specified, a default value of 1000 is used. Syntax: <param name = "fadetime" value = "an integer"> |
fadetimeX |
*available in the Professional Edition only. This parameter is the same as 'fadetime', except it is used to specify the length of fade for individual images. Use it for images that require different lengths of fading time other than the global value set by 'fadetime'. For images that do not have this parameter specified, it will use the value set by 'fadetime' or the default value of 1000. Syntax: <param name = "fadetimeX" value = "an integer"> where 'X' is a number from 1 to 100. |
message |
*available in the Professional Edition only. This parameter specifies a text message to be shown in the browser's status bar when the mouse cursor is over the Slideshow. For Internet Explorer and Netscape Navigator, the status bar is located at the bottom of the browser. To specify an unique message for each image, use 'messageX'. Syntax: <param name = "message" value = "text message"> |
messageX |
*available in the Professional Edition only. This parameter is the same as 'message', except it is used to specify the text message to be shown for individual images. If an image does not have its own text message, the Slideshow will use the text message specified in 'message'. Syntax: <param name = "messageX" value = "text message"> where 'X' is a number from 1 to 100. |
link |
*available in the Professional Edition only. This parameter specifies the HTML link to open when the Slideshow is clicked on. To specify an unique link for each image, use 'linkX'. Syntax: <param name = "link" value = "http://www.yoursite.com"> |
linkX |
*available in the Professional Edition only. This parameter is the same as 'link', except it is used to specify the link for individual images. If an image does not have its own link, the Slideshow will use the link specified in 'link'. Syntax: <param name = "linkX" value = "http://www.yoursite.com"> where 'X' is a number from 1 to 100. |
linktype |
*available in the Professional Edition only. This parameter specifies how a link is opened. The 4 standard HTML tags are supported: '_self', '_parent', '_top' and '_blank', as well as frame/window names. If the name does not exist, a new window will be opened with this name. The default link type is '_self', which opens the link in the current window. To open the link in a new browser window, use a '_blank'. This setting is global, it affects all links without their own link type specified. To specify different link types for each image, use 'linktypeX'. Syntax: <param name = "linktype" value = "tag/name"> |
linktypeX |
*available in the Professional Edition only. This parameter is the same as 'linkType', except it is used to specify the link type for individual images. If an image does not have its own link type, the Slideshow will use the link type specified in 'linkType'. Syntax: <param name = "linktypeX" value = "tag/name"> where 'X' is a number from 1 to 100. |
foregroundColor |
This parameter specifies the color of the initialisation message text displayed by the Slideshow when it is loading. It is useful for maintaining coherency with the color scheme of the website. The color is specified in hexadecimal format with a '0x' prefix. For example, white is '0xFFFFFF' and black is '0x000000'. Red is '0xFF0000' and Blue is '0x0000FF'. Syntax:
|
backgroundColor |
This parameter specifies the color of the Slideshow background when it is loading. It is useful for maintaining coherency with the color scheme of the website. Syntax:
|
fademethod |
This parameter specifies the type of crossfade to use. An integer value is used to specify one of the 4 types available: 1 = simple crossfade 2 = simple crossfade with frame 3 = gradient map 4 = gradient map with frame The simple crossfade is fastest, and the gradient crossfade with frame is slowest. This parameter is optional, if it is not specified, a default value of 1 (simple crossfade) is used. Syntax: <param name = "fademethod" value = "an integer"> |
feather |
This parameter specifies the smoothness of the gradient map contour. It is similiar to the selection feather effect in Adobe Photoshop. The value must be a positive integer from 1 to 255. This parameter is optional, if it is not specified, a default value of 1 is used. If this parameter is specified but a gradient map is not specified, it will be ignored. Syntax: <param name = "feather" value = "an integer"> |
gradient |
This
parameter specifies the filename of the gradient map. It must be specified
if fade methods '3' or '4' are used. If the fade method used is not '3'
or '4', then this parameter does not need to be specified. This file must
be in grayscale format. Both JPG and GIF files are supported. Syntax: <param name = "gradient" value = "directory/filename"> |
If the slideshow does not run, open the Java Console to look at the error report.
For Internet Explorer 5+ users, go to View->Java Console. If the Java Console item is not on the View menu, you need to enable it by going to Tools->Internet Options->Advanced->Java Console Enabled.
For Netscape 6+ users, go to Tasks->Tools->Java Console.
The error message in the Java console will indicate the problem. For undetected errors that is not shown in the Java console, please follow the guidelines below to check if your Slideshow is properly setup.
- Make sure your browser has at least Java 1.1 support. The popular browsers that support Java 1.1 are Netscape 4+, Internet Explorer 4+.
- Check for errors in the spelling of your image files. The file names should be case-sensitive.
- Check for spelling errors in the parameter names.
- Make sure the parameter values are valid by checking them against the reference in this user guide.
- Check the integrity of the images by loading them in the browser. There are certain obscure types of JPEG and GIF files that are non-standard and therefore cannot be loaded by the Slideshow.
Part VI- Miscelleneous Information
1. Keeping the start-up time short
The Slideshow has a background image loading mechanism known as streaming. It allows the Slideshow to start running in the shortest time possible, before all the files are loaded. This is a special feature designed for modem users who have limited bandwidth, and patience. With background loading, the Dragonfly demo has been observed to start running in as little as 8 seconds on a 56Kbs modem. Without background loading, it'd take at least 30 seconds to start, since it has to load ~160KB worth of data. In fact, tests show that 90 seconds is a more realistic figure. However, this feature is still useless if you do not take care to keep the image file sizes small. For example, experiment with different JPEG settings for a tradeoff between speed and size. For images that have few colors and contains simple geometrical shapes, a GIF format version is sometimes smaller than a JPEG version. For masks and gradients, first convert them to grayscale format before saving as the JPEG format supports grayscale which is much smaller than saving a grayscale image in RGB format.
Finally, understanding how a web browser loads the Slideshow will help you form a realistic expectation/estimation of load times. Below is a typical loading process:
- load program code (Slideshow.jar, ~12Kb, takes ~3 seconds on 56K modem)
- load frame (if any), and display it.
- load mask (if there is a frame)
- load gradient map (if any)
- load images (background loading starts working here)
How the frame, mask and image is combined
The process is exactly the same as the default way Adobe Photoshop combines 2 layers. The top layer corresponds to the frame image, and the bottom layer corresponds to the image. The mask refers to the transparency mask of the top (frame) layer. So, to create the mask image used by the applet, extract the transparency mask of the top layer in Photoshop, and save it separately as a grayscale JPEG using high-quality setting. Converting it to a grayscale JPEG uses considerably less space than a RGB JPEG.
The equation for getting the final pixel color from the frame, mask and image is:
final_pixel
= frame_pixel * mask + image_pixel * (1 - mask)
The mask is a grayscale image, and the pixel values represent the alpha values, which specify the ratio of frame pixel and image pixel in the final pixel.
2. How the gradient map works
The gradient map fade is a powerful feature. It is a general solution to all progressive fade patterns. Understanding how it works is the key to harnessing its full power.
The gradient map is a 8-bit (grayscale) image with pixel values from 0 to 255. At each fade step, a pixel value is chosen based on the fade's progress, i.e. if the fade is halfway complete (50%), then a value of 127 (255/2) is chosen. This 'threshold' value is then used to compare with all the pixel values of the gradient. For gradient pixels whose value is less than or equal to the threshold value, the source image's pixel is shown. If the pixel value is greater than the threshold value, then the destination image's pixel is shown. Hence, as the fade progresses, the threshold value moves from 0 to 255, resulting in the source image fading to the destination image, in a pattern defined by the gradient.
Last Modified: Tuesday, 3 December, 2002 2:58 PM