Animation
For the website I did for the Sidney Lanier Bridge, I created two animated .gif images, one for a construction sequence, and the other for the tower crane (at the bottom of the page). These were pretty simple but I learned some of the basics of animated .gif images when I made them. An animated .gif is a series of .gif images compiled to run one after the other. To get smooth motion you can make each frame last a certain length of time in hundreths of seconds, but it gets cumbersome making so many frames. If you want, you can make each frame last different numbers of seconds. You can also have the animation loop a set number of times or forever. It's interesting, but I don't have much of a reason to do animated .gifs very often.
Recently on the web page at work I added a page where I list projects that have been completed and handed off to Construction to build. This is the "Under Construction" web page. It wasn't hard to find an image of a traffic barrel since so many web pages say they are "under construction" (what good web page isn't *always* under construction?). But the image was animated with an obnoxious blinking light on it. I wanted to have a whole row of these barrels and having them all blinking in unison was annoying. So I stripped out one frame of the animated .gif, reduced the colors down to 16 instead of 256 to save file size, made the background transparent, and wound up with an image that was only 1 kb:
At some point it occurred to me that I could change the timing of the flashing and have the row of barrels flash out of phase with each other (like in real life). Each barrel would have to be a separate animated .gif with a different number of hundreths of seconds for how long it was off, but otherwise identical. I fired up Lview Pro, the graphics program I've been using since I started doing web pages, and came up with 8 different images. One image remained static, representing a barrel whose flasher doesn't work anymore (like in real life).
By making a whole row of these with different timing, they are all out of sequence.
You can further reduce the file size if one frame is mostly the same as the preceding frame. If only one part of the picture is moving (in this case, just the light) then the next frame only needs to show that area where the changes take place. By doing this I was able to get the size of the tower crane and construction sequence way down, but I didn't think it would matter much for this graphic (each barrel consists of 6 frames and is only 3 kb), though I might do that later. LView isn't helpful with optimization and I don't want to go find the optimizer program I used before, though I would bet it would get it back to 1 k.
| Permalink
| 
Comments (9)
I like the row of flashing barrels. Since the flash is represented by white, I think the no-flashing barrel should be all orange. Otherwise it looks stuck "on".
Posted by Jeb | April 5, 2005 12:19 PM
On that one the flasher is broken, but the battery and the light still work. So it is always on.
Posted by UT | April 5, 2005 2:47 PM
My tax dollars at work...
Posted by UT Girlfriend | April 7, 2005 1:11 PM
I just went to the under construction page using Apple's Safari. Everything flashed once then stopped. Browsers are starting to come with more features to combat annoying pop-up, flash, and animation ads. Safari did not realize the construction sequence was an attempt to tastefully use animation.
Posted by UT Big Bruthu | April 7, 2005 8:53 PM
I now realize that traffic barrels never have lights on them. Only the little easel-looking traffic things have lights on them. Oh well.
Posted by UT | June 8, 2005 4:57 PM
We all noticed this right away, but we didn't want to bring it up and hurt your chances at getting the promotion. Since you got the promotion, I think we did the right thing.
Posted by Jeb | June 8, 2005 11:29 PM
The jury is still out on the promotion, but I hope no one notices. "Cashin? Isn't he the idiot that put animated flashing lights on traffic barrels? There's no way he's qualified to design bridges! Plus why doesn't that one barrel flash?"
Posted by UT | June 9, 2005 12:05 AM
Actually, I heard you were a good bridge engineer...
Posted by UT Girlfriend | June 9, 2005 7:45 PM
I don't know what in the world you are talking about - BUT - guess what. I called the DOT back a few months ago about adding a street light at Briarlake Road and Brailake Woods Way (to light up the entrance to Twin Lakes). Now, this is not a "done deal", but the person in charge called me today and said that there are 3 poles a traffic light could be installed on and that he is recommending this to Georgia Power. It will be next week before I should know if it has been approved. Well, this is pretty good. At least, he is in favor of it and is working in our favor. It would be amazing if this happens because the entire board said "this will never happen"..
Mom
Posted by mom | June 14, 2005 8:43 PM