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)