|
|
|
Erik mapped out a rough plan for the video wall which would try to
maximize bandwidth-to-surface area by
using only two animated GIFs. One would be small and would repeat a number
of times. The other would be a
larger four-square animation, which maximized bandwidth by positioning
individual squares within the animation
frame.
"In other words, the larger GIF would look like four smaller
animated GIFs but would not replace the
entire area at any point in the animation," Erik says.
This offered two benefits: it would make the animation move more quickly
than if the entire area changed
every frame and it would allow Erik to synchronize the four frames --
something that would not be possible if he
had four separate animated GIFs loading over the wire.
|
|
|
With this plan in mind, Erik took the Zoom designers' photographs of junk
and set about to develop the
rough, scratched-out look that you see
on the site. Erik created the look by using scratch imagery as a mask
using Photoshop's Layers palette. Figure
1 shows the background image Erik worked from.
"Once I had the basic layered layout in Photoshop, I moved into Adobe After
Effects and began animating," Erik says. After Effects is post-production
video editing software from Adobe Systems. It allows you to set timelines
for different image layers and specify how
the layers are combined.
"Once I had an animation that worked roughly the way I wanted it to, I
exported the individual frames as
PICT files. These PICT files were then run through a couple of Debabelizer
scripts which converted them to the
Netscape palette, dithered them to roughly 70%, and chopped them into
quadrants, finally saving them as
numbered GIF files," Erik explains.
Now that he finally had component GIF files, Erik pulled them into GIFBuilder
and set the timing, offset and
looping specs. "After repeating this process a few times, going back into
After Effects and tweaking the
animation, going back to DeBab and tweaking the dither, and so on, the
final frames and animated GIFs were produced," Erik says.
The job still wasn't over, though. After the animations were finished,
the page still had to be laid out. The
page uses HTML tables, which we explain in some detail below.
"The whole page was then tested in Netscape Navigator and Internet Explorer,"
Erik explains. "We found
then, to our dismay, that IE2 did not correctly interpret the offsets and
just stacked animation frames on top of
one another. A couple of calls later we had been reassured that IE3 would
correctly support GIF animation offsets. So we called it finished."
|