Installation and Operating Instructions - [V1.12]

Installation and Operating Instructions for the Multimedia Slide Show

[V1.12]

Introduction

The Mutimedia Slide Show applet allows you to produce impressive audio / visual presentations which can be viewed on your own computer. Alternatively the applet can be uploaded to your website for others to view. Images can be in either JPG or GIF format and can be any size. Audio files until recently had to be in the AU (.au) format but with the launch of Java2 1.2 it is now possible to play not only WAV files but also the popular MIDI music format. This is covered in more detail in the Java2 section. The operation of the Slide Show is described in the Control Buttons Section. The installation instructions follow immediately.

Getting started

Where do I begin?

If you are new to applets the code below may appear rather frightening and it is! Seriously though, to enable you to customise your presentations to your own liking I have included numerous options: font faces, sizes, types, background colours, control button colours etc. But to get started right away, the simplest way is to take a copy of the HTML code, that is, the file you clicked on to run the demonstration. Using Notepad or a similar simple editor, open the file. You will see the
applet HTML code similar to that appearing on this page.

Adding your image

Starting from the top of applet code look at the entries to the right of "=" sign following "VALUE" and stop at first one ending in .jpg. This is where you enter the name of your image file. It must have a name ending in .jpg or .gif. Simply delete the name of my file and replace it with your own.

Adding a sound file

The next line contains the audio file ending in .au. If you have an audio file ending in .au. replace the name of my file with your own. If you dont have a file and dont want to hear my file, simply delete the line. If you do have a sound file but it ends in .wav or .mid I will show you how to convert the .wav file into an .au file and how you can play .mid files after we have finished with the applet code.

Adding your text

The next line contains the text that will appear in the text area at the bottom of the applet. You can enter as much text as you want. You can even cut and paste a whole document between the quotes. I have managed 136 lines of text at font size 18! Alternatively you can delete this line if you have nothing to say, or just delete the text between the qoutes.

Positioning the image in the applet

The next two lines instruct the applet where to position the image in the applet screen. Now be prepared to forget everything you learnt about geometry at school! In applet land the "origin", (x=0, y=0), is in the top left corner not the the bottom left corner! The size of applet in the demonsration is set to 700x440 - this is shown in the first line of the applet code. You can of course change these values to suit your image sizes. If you want all the control buttons to be visible the width should be at least 700. This value may need a slight adjustment depending on the platform in use. For example buttons on NETSCAPE for PCs are a little larger than those on EXPLORER for PCs.

Most PCs have screens of 800 width and 600 height. You can make your applet bigger than this - it just means you will need to use the browser scrollbars to see the outer edges of the image. Using the present value 700x440 and an image size of 300x300, x=200 and y=70 will place the image in the centre of the applet.

You can if you wish omit the x and y coordinate PARAMETERS altogether. The image will be then be automatically centred on the x axis and positioned at y = 0, that is, just below the panel of buttons. I would recommend this default option as it will save you from having to measure every image and enter the coordinates for each one in the applet code.

Zooming in on an image

The ZOOM+ button allows unlimited magnification of an image, each button press increasing the magification by a factor of one tenth. The minus "-" button allows unlimited reduction in the size of an image in steps of one tenth of the current focus of the image.

Setting a time slice for an image

The next line allows you enter a time period in milliseconds for displaying your image. If you leave this line blank the interval will default to 10,000ms, or 10 seconds.

Linking a URL to an image

The PARAMETERS "welcomeurlwww" and "urlww" can be used to connect to a web page if the the viewer clicks on the associated image.

Adding a second image

The procedure for adding the next image is almost the same as the first. Last time the image line in the applet code began with "PARAM NAME ="image0" .. And wonders, the next one will begin with: "PARAM NAME ="image1" .. The same applies for the audio file name, x and y coordinate names and the text and time names. Just remember to keep these suffixes in ascending sequence each one differing by a value of 1. And that's all there is to it!

The Control Buttons Section explains in detail the operations of the Slide Show. The rest of document explains how to customise the layout of the Slide Show, download complementary shareware and how to register the program.

Example HTML applet code

The table below contains an example of the HTML required on your web page. The comments to the right of each entry are not part of the code. Comments may be entered in HTML as follows:

<!--     Anything between these HTML tags is a comment      -->
<APPLET CODE = "SlideShow.class" WIDTH = "700" HEIGHT = "440">

<PARAM NAME = "constant_time" VALUE ="10000"> ; Used when the same interval is required between slides
<PARAM NAME = "welcomemessage" VALUE ="Welcome to the Slide Show"> ; Message on starting slide show
<PARAM NAME = "welcomeimage" VALUE ="curtain_640x442.jpg"> ; Image on starting slide show
<PARAM NAME = "welcomeurlwww" VALUE ="http://www.philipmorgan.free-online.co.uk/; Connect to URL
<PARAM NAME = "welcomeaudio" VALUE ="philip.au"> ; Audio file on starting slide show
<PARAM NAME = "welcomefontface" VALUE = "Serif"> ; Font face of the welcome message
<PARAM NAME = "welcomefontsize" VALUE ="48"> ; Font size of the welcome message
<PARAM NAME = "welcomefontcolor" VALUE ="cyan"> ; Font colour of the welcome message
<PARAM NAME = "xwelcomemessage" VALUE = "50"> ; x coordinate of the welcome message
<PARAM NAME = "ywelcomemessage" VALUE = "200"> ; y coordinate of the welcome message
<PARAM NAME = "startmessage" VALUE = "Please press 'START' to continue ...">
<PARAM NAME = "textbox" VALUE ="ON"> ; The value "OFF" will turn of the text area at bottom of applet
<PARAM NAME = "textrows" VALUE ="3"> ; The number of rows visible in the text area
<PARAM NAME = "buttonbgcolor" VALUE ="cyan"> ; The background colour of the control buttons
<PARAM NAME = "buttonfgcolor" VALUE ="black"> ; Foreground colour of the control buttons
<PARAM NAME = "bgcolor" VALUE ="darkgray"> ; Background colour of the image area
<PARAM NAME = "timebgcolor" VALUE ="blue"> ; Background colour of the time and slide fields
<PARAM NAME = "timefgcolor" VALUE ="white"> ; Foreground colour of the time and slide fields
<PARAM NAME = "statusbgcolor" VALUE ="black">; The background colour of the text area
<PARAM NAME = "statusfgcolor" VALUE ="white"> ; The foreground colour of the text area
<PARAM NAME = "fontface" VALUE = "Helvitica"> ; Font face in the text area
<PARAM NAME = "fontsize" VALUE ="18"> ; Font size in the text area
<PARAM NAME = "fonttype" VALUE ="PLAIN"> ; Font type in the text area
<PARAM NAME = "image0" VALUE ="cayman_406x296.jpg"> ; Name of the image file
<PARAM NAME = "urlwww0" VALUE ="http://www.philipmorgan.free-online.co.uk/; Connect to URL
<PARAM NAME = "audio0" VALUE ="hawaii.au">; Name of associated audio file
<PARAM NAME = "text0" VALUE ="The Cayman ...">; Content of associated text
<PARAM NAME = "ximageparam0" VALUE ="120">; x coordinate of image
<PARAM NAME = "yimageparam0" VALUE ="43">; y coordinate of image
<PARAM NAME = "time0" VALUE ="16000">; Time slice of associated image in milliseconds
<PARAM NAME = "image1" VALUE ="kennedy_313x300.jpg">; Name of next image
<PARAM NAME = "audio1" VALUE ="kennedy.au">; Name of next audio file
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
</APPLET>


Select Control Buttons

You can select which buttons you want displayed by setting the values of the following PARAMETERS to "ON" or "OFF" as required. Setting "displaybuttons" to off will turn all the buttons off. The remaining PARAMETERS refer to individual buttons

<PARAM NAME = "displaybuttons" VALUE ="ON">
<PARAM NAME = "startbutton" VALUE ="ON">
<PARAM NAME = "playbutton" VALUE ="ON">
<PARAM NAME = "pausebutton" VALUE ="ON">
<PARAM NAME = "zoomupbutton" VALUE ="ON">
<PARAM NAME = "zoomdownbutton" VALUE ="ON">
<PARAM NAME = "timerbutton" VALUE ="ON">
<PARAM NAME = "timerfield" VALUE ="ON">
<PARAM NAME = "slidebutton" VALUE ="ON">
<PARAM NAME = "slidefield" VALUE ="ON">
<PARAM NAME = "nextbutton" VALUE ="ON">
<PARAM NAME = "prevbutton" VALUE ="ON">
<PARAM NAME = "slowbutton" VALUE ="ON">
<PARAM NAME = "fastbutton" VALUE ="ON">
<PARAM NAME = "directionbutton" VALUE ="ON">
<PARAM NAME = "stopbutton" VALUE ="ON">


Default values

The only essential PARAMETER is the one for the images. The rest are just there to allow you to design a Slide Show according to your own prefernces. For example, some people might thing cyan is a pretty weird colour for Java buttons. I must admit I have only ever seen grey ones! Apart from Java's own default values the following PARAMETERS have Slide Show supplied values (in other words if you have not entered a value for them the following will apply):
  • textbox - the text area at the bottom of the screen - ON
  • textrows - the number of visible rows in the text box - 2
  • time - the time interval between slides - 10000
  • ximageparam - the x coordinate of an image - (applet width - image width) / 2
  • yimageparam - the y coordinate of an image - Y = 0 (just below the panel of buttons)

Customising the Slide Show

FONTS

Java provides the following preset FONT colours:

    red
  • yellow
  • blue
  • green
  • orange
  • magenta
  • cyan
  • pink
  • lightgray
  • darkgray
  • gray
  • white
  • black
The default colours for the Slide Show are "lightgrey" for the control buttons, "black" for the foreground or text and "white" for the background.

There are three FONT faces:

  • Serif
  • SansSerif
  • Monospaced
These are synonomous with:
  • TimesRoman
  • Helvitica
  • Courier
Font faces are platform independent but you can always rely on those in the first list. Helvitica is the default face for the Slide Show.

There are three FONT types:

  • PLAIN
  • BOLD
  • ITALIC
The default type for the Slide Show is "PLAIN".

I have no documentation from Java on font sizes but I have tested sizes up to 76 on the Slide Show. The default size is 3.

The Text Box

The default number of visible rows is 3. You can if you wish have an all text Slide Show display. This is achieved by giving the text box enough visible rows to cover the height of the applet. In the demonstration example, height of 440, 18 rows at font size 18 will cover the entire display. If you have a substantial amount of text to enter you can paste an entire document in between the qoutes for the "VALUE" of the "text" PARAMETER. I have tested up 136 lines at font size 18. You can not use double qoutes (") in a text string as this will indicate end of string to Java. Instead use a singe qoute ('). I would not recommend pasting from word processors with elaborate formating mechanisms.

What the Control Buttons do

START The START button can be pressed at any time to launch the the sequence of slides commencing with the first slide
PAUSE The PAUSE button freezes the sequence of slides at the current slide
PLAY The PLAY button resumes the sequence of slides with the next slide
ZOOM UP The ZOOM+ button magnifies an image by one tenth every time it is pressed.
ZOOM DOWN The minus "-" buttom reduces the actions of the ZOOM+ button
TIMER The TIMER button resets time interval when a constant time is in operation
TIME FIELD To change the time interval point the mouse in this field, delete the current value, enter the new value, then press the TIMER button
SLIDE The SLIDE button selects a specific slide from the value in the SLIDE FIELD. It will also repeat the current slide if pressed at ant time.
SLIDE FIELD To select a specific slide point the mouse in this field, delete the current value, enter the new value, then press the SLIDE button
NEXT The NEXT button will select the next Slide in the sequence if pressed at any time.
PREV The PREV button will select the previous Slide in the sequence if pressed at any time.
SLOW The SLOW button will increase the time interval when pressed if a constant time is in operation.
DIRECTION The DIRECTION button will reverse the current slide sequence. It will come into operation after the next, not the current, slide has finished.
FAST The FAST button will decrease the time interval when pressed if a constant time is in operation.
STOP The STOP button will halt the current sequence of slides. It will also immediately turn of any sound files that are playing. IMPORTANT: This button should always be pressed before exiting the applet in order to stop the Java thread gracefully.


Make your own animations

The Slide Show allows you to control the speed that images are shown in three ways:
  • Statically by entering a value in the "constant_time" PARAMETER
  • Dynamically by manually adjusting the TIME FIELD
  • Incrementally using the SLOW and FAST buttons. There are four increment levels as shown in the table below:

    Time frame (Msecs)Step (Msecs)
    0 - 10010
    100 - 500100
    500 - 1000500
    1000 - 100001000
    10000 - maxint10000

Sound files

Producing your own documentary

They say that there is nothing worse than listening to the holiday snap shot bore! But who thinks of the suffering prototypical Andrew Hamilton. He also finds it difficult to sustain interest having given his nth monologue on the 6 rolls of Agfa Gaveart he painstakingly shot in Los Christianos all those months ago!

All is not lost! Every PC comes equipped with a wonderfully simple little Sound Recorder hidden away beneath a labyrinth of toolbars and pull down menus, probably in a folder called "Accessories". I am sure the Mackintosh has a similar little beastie. to make a recording you will of course need a microphone. A reasonable one costs only £5 if you've lost or stepped on yours.

Microsoft's Sound Recorder produces sound files in the WAV format The only problem is that files in WAV format have have ,until recently, not been able to be interpreted by Java Applets. Never fear. Shareware to the rescue! I use two packages, Goldwave and Awav, the websites of which are listed in the Software section. You just have to remember one vital fact when you convert from AU to WAV: To convert a .WAV file to a standard .AU file, you should first resample the sound to 8000Hz. When saving choose the .AU type and the µlaw mono attributes.

Some high frequency quality is lost in the conversion but this can cut the file size by two thirds. For example, a 7 second voice recording I made recently produced a WAV file of 145Kb. When converted to AU on Goldwave it was reduced to 53Kb! So if you are putting soundfiles on your website this will substantially reduce your visitors' download times.

Java2 (1.2) now plays WAV and MIDI audio files

Java 1.2 has only been released recently. Most browsers will a need a plugin to upgrade its Virtual Java Machine to avail of the new features of 1.2 such as the capability to play .wav and .mid audio files from Java applets. This can be obtained from http://java.sun.com. For general information on the Java Plug-in, see the Java Plug-in Overview.

You can your modify you HTML so that your visitor's browser, or your own, will request a connection to SUN Microsystems to download the plugin. The HTML can be modified manually or it can be amended with the JAVA HTML converter also available from http://java.sun.com.

The other way to view the Slide Show with WAV and MIDIS is with the appletviewer which is shipped with JDK 1.2 This is also available free of charge from http://java.sun.com . The viewer is usually run from the DOS command line, eg: "C:>appletviewer sample.htm". To avoid having to load the DOS window put the command into a BAT (.bat) file. The resulting file entry can then be clicked on with a mouse to activate.

Uploading the Slide Show to your website

Paste the completed HTML into your web page. Upload the file slideshow.class and the image and audio files to your site. The applet can load image and audio files from a different directory to that of the class file but all files must be on the same server. The applet's security provisions do not allow it to access files on a remote server.

Image and Audio Free / Shareware

Irfan View Image Editor Irfan View is a "no frills" graphics freeware but this means it loads up instantly. It does everything I have ever needed: resizing, cropping JPG/GIF conversion, colour balancing and much more. Unlike some image software which only lets you resize by a percentage factor only, Irfan View enables resolution to one pixel.
20/20 Image Editor This is a freeware image editor which I have employed extensively. It has similar functionality to IrfanView. After a period of about 30 days, it "expires" and you have to connect to the authors' site so thay can put their current sponsor's logo on the start up screen.
Goldwave Audio editor A sound editor shareware program. Converts WAV files into AU format compatible with Java Applets.
Awave Audio editor Awave reads over 100 audio carrying file formats from different platforms, synthesizers and trackers. It can be used in a variety of ways: as an audio file format converter, an audio editor, an audio player and as a wavetable synthesizer instrument format editor and converter. Converts WAV files into AU format compatible with Java Applets.



Useful Books on Java and Javascript

JavaScript Complete, by Stevan Holzner. provides all you need to deliver fully functional applications for both Netscape and Explorer. There are dozens of examples and sample code which you can use from the accompanying CD-ROM.

If you are interested in programming in Java, Mastering Java by William Buchanan is an excellent introduction to the language. It also covers other related areas such as HTML and Javascript.

Please click here for futher reviews on website building books.

Registration

The Multimedia Slide Show applet is a shareware program. The demonstration you have downloaded is a fully functional program and is yours to keep. I promise you it will not self destruct in 30 days! The only limitations are the number of files and text entries allowed. These are:
  • 6 images (including the Welcome image)
  • 4 sound files (including the Welcome file)
  • 3 text strings
The Registered version:
  • 500 images
  • 500 sound files
  • 500 text strings
You can register the Slide Show at the following sites:

http://bally.fortunecity.com/leitrim/13/SlideShow/SlideShow.htm
http://www.freezone.co.uk/philipmorgan/panorama/pan.htm


Email: philipmorgan@freezone.co.uk
Website: http://bally.fortunecity.com/leitrim/13/SlideShow/SlideShow.htm
Top of Page
Last Updated: