This page is intended to show you how to use the basic features of Fader. It is targeted at the beginner but may contain some valuable information for someone who has used the previous versions anyway. If you have read through this text you should take a look at the tips'n'tricks page. There you will find examples for the more advanced features of Fader. Take a look at the reference page for a complete list of features.
Let's start from scratch: To make it simple, put fader25.class in
the directory (or folder, if you prefer) where you store the html-files.
If you wish you can store the fader25.class file in a different folder or
even on a different server and if you know how to load applets
from other locations by specifying the codebase there
is no reason why you shouldn't, but in the past most problems that have been
reported to me where caused by incorrect use of 'codebase'. Then decide
whether you wish to store all the data (the text that is displayed, etc.) in
the html-code or in a separate file. If you use the first alternative you will
not be able to display chars with a special meaning, such as
<applet code="fader25.class" width=510 height=30> <param name="AppletHome" value="http://johannes-schellen.home.ml.org/fader.html"> <param name="InlineData" value="YOUR_DATA_STRING"> <param name="bgColor" value="#000000"> </applet>
<applet code="fader25.class" width=510 height=30> <param name="AppletHome" value="http://johannes-schellen.home.ml.org/fader.html"> <param name="Data" value="YOUR_DATA_URL"> <param name="bgColor" value="#000000"> </applet>
Replace YOUR_DATA_STRING with your data or YOUR_DATA_URL
with the url of the file that contains your data. (The syntax of the data is
described below.) You may use a relative or an absolute URL. I suggest you
use a relative URL or you will not be able to test the applet offline. (If
you don't know what I'm talking about, you should use inline data
and get a good book or electronic document about html.)
These pieces of html load Fader with a black background, 510 pixels wide and
30 pixels high.
What is the syntax of the data?
Fader always reads a sequence of assignments ("variable=value"). These
assignments are separated by returns (Unix-, Mac- or MSDOS-style) or the
pipe-char "|". (The name is derived from the meaning which this char has in
Unix shells. Does anyone know a less context sensitive name?)
Any mixture of these separators will be accepted.
If you want Fader to read the data directly from the html-code you should
use only pipe-chars. While returns may work with your browser other browsers
may fail to pass multi-line-parameters to the applet. I don't know why,
but it definitely happened during testing.
The most important assignment starts with text= and is used
to display (fade in, wait, fade out, wait) one line of text. Let's do an
example:
text=I can say text=Hello World text=with Fader v2.5
or
text=I can say|text=Hello World|text=with Fader v2.5
Click here to display the result right below this text. This is already nice but it is also a little boring. Anyway, let me explain what happens:
Since we only gave Fader the text we wanted to display it used the defaults for all variables. These are red for the color, 2 seconds for the time that the line is visible, pause half a second after the line has faded out, simple all-at-once transition, bold Courier 24 pixels high, loop from beginning and no link to follow when clicked.
If you want to change the value of any variable you just assign the desired
value to it. From that point on it will have this value until you change it
again. Please note that the variables are not reset at the beginning of another
run through the loop. The effect of this becomes obvious with the next
example:
text=No color set color=0 text=Red color=1 text=Green color=2 text=Blue
or
text=No color set|color=0|text=Red|color=1|text=Green|color=2|text=Blue
During the first cycle "No color set" is displayed using the default color red, but in the subsequent cycles it is blue. This example points out another thing: When using pipe-chars it is quite uncomfortable to read the data. It might be a good idea to write the data with returns and to replace them with pipe-chars when you are finished. From now on I will only print the source with returns as separators.
From the next example (which is also used on the introduction page) you can see how to use some other important variables. We will set font-sizes and transitions and we will change the timing:time=1000 pause=1000 text=There's an invisible space here font=TimesRoman time=5000 size=20 style=bold fadein=2 fadeout=6 color=0 text=Welcome to the Fader v2.5 documentation! loop=here font=Courier time=500 pause=50 size=20 space=0 style=bold fadein=3 fadeout=0 color=0 text=Predefined colors: status=Custom status text... color=0 text=Color 0: Red color=1 text=Color 1: Green color=2 text=Color 2: Blue color=3 text=Color 3: Cyan color=4 text=Color 4: Magenta color=5 text=Color 5: Yellow color=6 text=Color 6: Black color=7 text=Color 7: White color=8 text=Color 8: Red without fading color=9 text=Color 9: Green without fading color=0 fadein=0 fadeout=0 status=Not all features used! text=########## transition 0 ########## fadein=1 fadeout=1 text=########## transition 1 ########## fadein=2 fadeout=2 text=########## transition 2 ########## fadein=3 fadeout=3 text=########## transition 3 ########## fadein=4 fadeout=4 text=########## transition 4 ########## fadein=5 fadeout=5 text=########## transition 5 ########## fadein=6 fadeout=6 text=########## transition 6 ########## fadein=7 fadeout=7 text=########## transition 7 ########## fadein=8 fadeout=8 text=########## transition 8 ########## fadein=9 fadeout=9 pause=2000 text=########## transition 9 ########## color=5 fadein=6 fadeout=5 size=18 font=TimesRoman time=2000 pause=500 text=Font settings are controllable, too: style=plain size=10 text=From mini... size=24 pause=2000 text=...to MAXI (or more). font=Courier size=18 style=bold pause=0 fadeout=0 time=500 Color=4 text=Make sure you time=2000 pause=2000 fadein=0 fadeout=7 text=Read the docs to see all features! colorin9=000000,100,00a0ff colorout9=00a0ff,100,000000 color=9 delay=20 fadein=0 fadeout=0 time=0 text=Ultra-smooth fading colorin9=00ff00 colorout9=000000 delay=50 transition0=11,4,10,3,9,2,8,1,7,2,6,3,5,4,4,5,3,6,2,7,1,8,0,9,1,10,2,11,3 color=0 fadein=0 fadeout=0 time=1500 text=Transitions can be redefined! transition0=0 color=8 fadein=0 fadeout=0 time=5000 pause=5000 space=18 text=--- Restarting ---
Click here to display the result.
This lengthy example demonstrates several features:
That's it. You have finished reading the tutorial. Most people will use only the variables described in this text. But you may wish to do more: How about changing the background color? Or how about a background image? Want another text color? You don't like the predefined transitions? How to do all this and more is described on the tips & tricks page. You may also look at the reference to find out about all supported features.
PS: Have you wondered what the strange parameter (AppletHome) in the html-snippets from the beginning of the tutorial is good for? The answer is: The applet does not use it for anything, but it has to be there. A more detailed answer can be found on the reference page.