{"id":125,"date":"2005-04-04T18:39:30","date_gmt":"2005-04-04T23:39:30","guid":{"rendered":"http:\/\/fiveforks.com\/ted\/2005\/04\/animation\/"},"modified":"2012-01-04T16:43:31","modified_gmt":"2012-01-04T21:43:31","slug":"animation","status":"publish","type":"post","link":"https:\/\/www.fiveforks.com\/ted\/2005\/04\/animation\/","title":{"rendered":"Animation"},"content":{"rendered":"

For the website I did for the Sidney Lanier Bridge, I created two animated .gif images, one for a construction sequence<\/A>, and the other for the tower crane<\/A> (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.<\/p>\n


\nRecently 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:<\/p>\n

\"barrel2.gif\"<\/p>\n

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).<\/p>\n

\"Barrel8\"\"Barrel3\"\"Barrel4\"\"Barrel6\"\"Barrel2\"\"Barrel7\"<\/p>\n

By making a whole row of these with different timing, they are all out of sequence.<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading “Animation”<\/span><\/a><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-125","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":1,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":961,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts\/125\/revisions\/961"}],"wp:attachment":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}