|
This is my first ever interface where the original idea started out as a drawing on a piece of paper! It looks kind of like what I scribbled but as I am no graphic artist there are some things missing. The main thing is the animated rollovers. I started out with each link having its own animation. This turned out to be 6 links times 5 frames = 30 images at 4-5k each.(too large). I also wanted to have an animated screen (more later). I decided to use the "transparent gif over BACKGROUND image" trick so that I only needed 6 frames of animation that could be used for every link.
This caused a problem… I wanted the screen to animate but as each screen had to "turn_off" and "turn_on" as the mouse rolled over the links I had to make the "off" and "on" animations quick enough to sync with the buttons. This meant the original screen open/close was only 3 frames! (Closed/Half-open/Open). This did not look smooth, so I increased the fade anim of the buttons to 8 frames, and the open anim of the screen to 4 frames.
I could not decide on the best type of anim for the screen, so the first three buttons open horizontally and the next open vertically. I did experiment with a fade in effect, but as the buttons them selves use a fade effect, I thought I would leave it as an "opening door" effect.
I did consider using frames, with the nav bar in the left frame and the main window in the right frame but that would have meant writing some extra javascript logic for the navbar. Once I had the "home" html file done I copied it to 5 other files and then just modified the rollover code in each file. This allowed me to have the "current" button highlighted and for it to "flash" on mouse over.
This window is defined in a table and the left/right columns have a background image the same width as the column. This allows the window to stretch and the image will tile vertically. The tiling does not quite match, but then that is something I am going to have to learn.
|
