|
This interface has one
table cell. Most interfaces will have a table with a table cell for
each part of the image that changes at some point or another, with the
rest of the interface being cut up just to maintain rectangular cells.
For the solar interface, there is only 1 table cell, which is only to
make use of the table background feature of Internet Explorer 4 and
above and Netscape 4 and above. A "base state" of the interface, specifically
when no buttons are being activated, is placed in the background of
the table cell using the <td background="solar.jpg"> tag. Then,
the actual content of the table cell is filled with either a
transparent image (by default, when nothing is changing the base state)
or an animated GIF that is opaque only where the image changes with
respect to the base state.
So, these animated GIFs
are actually the full size of the interface, but compress pretty well
because there is so much that does not change with respect to
the background. Unfortunately, Netscape is not nearly as good with quickly
animating large GIFs as Internet Explorer is, so if you're using Netscape
and the animation seems very sluggish, that may be the problem.
Anyway, instead of providing a tutorial to explain how to do something
very specific with this interface, I'm going to explain the general
process of building these animated GIFs used for "rollover" effects.
You'll notice that when you activate a link by rolling the mouse cursor
over one of the planets, a number of things happen: the link name is
displayed in the center, flickering slightly, the target spins while
fading in and out of opacity, chucks of text scroll repeatedly, and
the planet's orbit pulses in and out of view. Even though these different
objects are all doing something different, the overall animation doesn't
have any noticable "seams" or "jumps" when it starts over. To accomplish
this, first decide what you want the animation to do (such as the four
"sub-animations" I just mentioned). Then, decide on the number of frames
necessary to convey smooth motion. I chose 6 frames, since the rotating
target only needs to rotate 90° in all, or 15° per frame,
which should be enough to show smooth animation. Then, I built a table
of values for each changing part of the animation and made each of these
sub-animations cycle in 6 frames. Below is the table I came up with:
| Frame # |
Target Rotation |
Target Opacity |
Orbit Opacity |
Link Name Opacity |
Scrolling Text Offset |
| 1 |
0° |
100% |
50% |
50% |
0 |
| 2 |
15° |
80% |
50% |
60% |
-4 |
| 3 |
30° |
60% |
50% |
60% |
-8 |
| 4 |
45° |
40% |
35% |
50% |
-12 |
| 5 |
60° |
60% |
20% |
60% |
-16 |
| 6 |
75° |
80% |
35% |
60% |
-20 |
 A quick check for the "seamlessness" of your values is to make another frame (#7 in this case), and see if you get the same values as frame #1 after following the pattern for each sub-animation:
| Frame # |
Target Rotation |
Target Opacity |
Orbit Opacity |
Link Name Opacity |
Scrolling Text Offset |
| 7 |
90° |
100% |
50% |
50% |
-24 |
Because the target is a cross-shaped object, it should look the same
rotated at 90° as it does at 0°. Also, the scrolling text
is only 24 pixels tall to start with, so when it has been shifted up
24 pixels and repeated, it looks the same as the original. And, as you
can see, the other values that "flicker" or "fade" still follow their
patterns with the 7th frame.
Now that you know what each frame should look like, you can start
creating all of the various layers for the animation. For each frame
of the animation that wasn't just an opacity change (such as the rotating
target and scrolling text), I made a new layer. For example, in the
Photoshop files, I created a layer called "link 1 target (15)" for the
15°, 80% opaque target for link #1. But, because only the orbit
path layer's opacity changes, I used only one layer for that part of
the animation and adjusted it as needed. When creating the individual
frames of a large animation, turn on the desired layers (from the table
above), make any changes to the opacity, and then select all and do
a merged copy (Ctrl-Shift-C). Then, you can paste the frames into another
document and import them into a GIF animator. Just remember to optimize
the GIF to not include the entire interface - only include the parts
of the image that are changing by creating a mask from the difference
of the base state and the animation frame.
The solar system interface is split up into 2 PSD files: solar.psd,
which includes the sub-animation frames for links 2, 3, 5, and 6, and
solar2.psd, which includes the full animations for links 1 and 4.
Included Generic Version
(Planets are replaced with channels)
|
