| Magic Animated Buttons - Documentation
Creating button images
All about images for buttons
Changes made since the last versions
The present versions are fully backwards compatible with images
made for the previous versions. However we found that this was
one of the areas where people were having most difficulty. All three button-states
used to be specified with three images combined together into one file
(an image strip). While this was appreciated for its efficiency and
reliability by artists and technical buffs, it was not friendly to the
average user, so individual button states can now also be specified as
separate files. This means you can pick up any existing button images
you like and enter them straight into the applet. But because the applets
are backwards-compatible, the old image-strips (including the downloadable library of
around 100 of these) can also be used.
Another area where people had many difficulties was getting applet, image
and button sizes right. As a result a lot of code in the current versions is
devoted to automatically detecting sizes and completely taking this part of
the work away from you. Advanced users may, however, want to glance at
the information lower down on this page about how the applet calculates
sizes and positions buttons.
Specifying external images
1. Image strips from our image library. If you are using an
image strip from our image library, you must tell the applet the name
of the image file so that it knows where to look for it.
<PARAM NAME=images VALUE="myImages.jpg">
Enter a parameter like this, substituting the actual name of your
preferred images file for myImages.jpg. Some of the library files
are GIF, some are JPG. The image strips all contain 3 images for the
three button states (normal, pressed, highlight) in one file.
2. Using your own images. You can also use any images of
your own in this applet. They could be button images, but you can also
use photos or anything else. Just make sure they are GIF or JPG format,
and avoid images which contain transparency. (Applets can't do transparency
through to the HTML page beneath yet, so don't try it - choose your images
to match your background instead). There are many collections of freeware
images on the web - try typing "free button images" into any popular search
engine. FrontPage also has a large collection of matching button images with
variations for different button states.
You can specify images for up to three states: normal, pressed and highlight.
The "pressed" image appears when the button is "clicked down", and the "highlight"
image appears when the mouse moves over the button. The animated transitions
are between "normal" and "highlighted" states; the pressed version is not
relevant to the animated transitions. Tell the applet the names of your
images like this, using the HTML code in blue:
<PARAM NAME=image0 VALUE="an_image.gif">
// normal image
<PARAM NAME=image1 VALUE="another_image.gif">
// pressed image
<PARAM NAME=image2 VALUE="a_third_image.gif">
// highlight image
Change the names of the images (given after the VALUE attributes) to fit
the names of your files. Note that if you don't want a pressed version,
you don't have to have it - just leave out the parameter. If you leave
out the highlight image, some of the transitions may not look very
exciting. Rainbow fades, ripples and pagefolds can look good with identical
highlight and normal images, but fades and wipes may take on a rather static
aura. If you find that your transitions are too dull, check that you
named your highlight image correctly and that you really uploaded it.
Using the default internal images
All the Magic Buttons now have default internal images. These appear
if you don't specify any external images, or if your external images
can't be found. Each type of Magic Button has a different default, and
we have taken much time to ensure that these default images are strikingly
effective. Of course, not everyone will like them, but if you don't
like them, you don't have to use them. The great advantage of the default
images is that they resize themselves automatically to fit your applet
and index size - i.e. they will recreate themselves as tiny, gigantic, short, long,
low and tall versions with the same quality. The defaults can be described roughly as
follows:
- Type I (Classic): sunset (a computer-generated copy of the all-time favourite)
- Type II (Rainbow): elongated oval bead with reverse-coloured floating top and tail
- Type III (Wiping): black hole with bead highlight (511 configurable colour variations)
- Type IV (Ripple): spectral glow beads
- Type V (Pagefold): gold foil
If you want to find text colours and transitions effects which match these
default buttons, you should be aware that in each Magic Button type, we chose
the text and transition defaults to match the image defaults.
How automatic sizing works
You don't need to read this bit if you're just using a simple
implementation of the buttons. This is more for the curious.
If you use external images for the buttons, the applet automatically
detects the size of these images, creates buttons of the same size, and
fills the entire applet with these buttons, regardless of how big your
index is. It may happen that your index is too small or too large, in which
case you may wish to change the height and width of the applet to create
extra buttons or remove unnecessary ones.
If you use the default internal images, the applet looks at the size of your index
file first. It then calculates the optimum button size to fit all of your index
into the chosen applet size. For example, if you have six menu entries in the
index, the applet may choose a 3 x 2, 2 x 3, 1 x 6 or 6 x 1 format, depending on
the size of the whole applet. If you have seven menu entries, the applet might
produce 7 x 1 or 1 x 7, but it might also produce 2 x 4 or 4 x 2, or perhaps even
3 x 3, depending on the size of the whole applet. In these cases there will be
extra empty buttons as well.
If the applet sizes aren't exact multiples of the calculated button sizes,
then the extra space on the right and bottom of the applet will be filled in
with partial buttons. This probably won't look good, so adjust the total applet
size until they disappear. The applet won't use partial buttons for displaying
index entries, so if you find you have a whole row or column of empty buttons,
these are "partial buttons". Remember that a "partial button" may be even just one
pixel too small to be a proper button, so you yourself may not immediately
see that these empty buttons are actually smaller than the rest.
Despite automatic sizing, you may find that the applet isn't quite
doing what you want it to do. So you can partially override some
of the internal calculation by using a columns parameter
which forces the applet to display using a fixed number of
columns. The following example shows a parameter forcing the
applet to display the buttons in 6 columns.
<PARAM NAME=columns VALUE=6>
|
| 
CURRENT MENU RANGE
 | 
 | This product range is called Magic Animated Buttons. The diverse prices and benefits of these menus offer advantage to all types of designer from home-user to corporate. Their common point is that they are based around the concept of animated buttons.
|
 |  |
MENUS IN THIS RANGE
|
|
|
|
|
| |
INFO FOR THIS RANGE
|
|
|
|
|
|
|
|
| |
DEMONSTRATIONS
|
| |
|
