October 2014 Tips and Tricks - Big GIFs, Tiny Animations

[wizard509]

OK Stygg here is my take on what I am seeing in this animation. While the closer balls are going up and down, there shadows are moving from side to side. Wouldn't their location stay stationary as the balls go up and down? If the more distant ball is also moving like the closer ones then same thing as closer balls shadows only it's relative size and shadow transparency would be different. Roght now the shadows seem grouped and are moving in a similar fashion, but I could be wrong about that. OK the more distant ball is moving different. It appears to bounce streight up but on the way down it veers to the left.

[wizard509]

Stygg could you please your file for this bouncing ball anim please.

[wizard509]

Stygg I have finally found and watched (again) the bouncing ball tutorial. So I have come to the conclusion that what you did was in keeping with the tutorial, however in this case it does not work properly and just looks wrong. So sorry. I cannot find the diner.jpeg which I would like to have so I can do one to demonstrate how I think it should look, then you can tear me apart.

[stygg2003]

No intentions of tearing you a part Larry, I asked for input and you obliged, so here's the xar.file of the Gif image I made from the original swf file, so please by all means put your take on it. Here also is the xar.file of the original I exported as a swf, with my additions to it. Plenty there for you Larry to have ago at

Stygg

[Gare]

Stygg, congratulations: you wound up with a 490 by 320 GIF animation—that's nearly 1/6th of a high-res monitor resolution, clearly a prominent advertisement or whatever—and you did it in 76K, about 20K over what I'd recommend just for load time, but the quality of the GIF more than makes up for it.

A couple of hints are due here:

• The background is a crippler. It's too photographic and by reducing the number of colours it suffers visually. The background is a high-frequency image, not good for GIFs, because the pixel colours change almost from pixel to pixel thus requiring more colours to express the image, thus making the saved file bigger and load slower.

• The thing I said about using Overlay mode isn't working here as well as it could, because you have so much animation, that too many pixels need to change from frame to frame. The idea to big GIFS and small file size is to have a little of the overall image animate, not full animation.

I've knocked off 15K by simplifying (IOW ruining your concept) here, only to show that the more you limit the animation and/or confine it to a specific area, the better speed you'll pick up when your advert or whatever you choose it to be goes online.



Very ambitious with good results, Stygg. Thanks for sharing!

My Best,

Gary

[stygg2003]

Thanks for a very informative feed back Gary, should I take it then, that if your using a photo as background with overlay, then limit the animation but if not a photo background, say a plain colour background, this will give you more animation to play with in a Gif ? Sorry about what seem like stupid questions but just trying to get it clear in my thick skull

Stygg

[wizard509]

Thanks for the file Stygg. I did it a couple of times. Once with all the balls. And one with only two. As Gare said the file size on the 4 ball one is considerably larger.
Interestingly enough, my file size is much larger than yours. Anyway in my opinion the movement of the shadows do not trouble me with these. So feel free to rip me apart but take these as merely examples to show the point I was trying to make.

[stygg2003]

Those look pretty good Larry and I like the ball shadows transparency de-creasing as the balls rise. Thanks for your help Larry, much appreciated.

Stygg

[wizard509]

You are welcome Stygg. I lust thought the shadows looked less frantic this way. Just my interpretation. The lesson learrned from both you and Gare was a good one.

[Gare]

Larry, you did a wonderful, smooth, and innovative GIF animation. But it's HUGE, man! 700K will never play on a web page: what I was trying to show this month is that if only a small part of an animation actually animates, the upload size will be only a little larger than if the file was a non-animated GIF. Don't think size itself—think of a 700K contribution to all the other stuff that a designer might put on a single web page.

Here's another example and please feel free to play with the attachment. I dulled the background a lot, so it's only a vague representation of the original with very few colors so I knocked the maximum number of colors down to 16.



I exported the background alone from Xara at 16 colors no diffusion=32K. Honestly, Photoshop can export a GIF a little tighter, but not by much.

The export of the 450 pixel high animated GIFG is 32.9. I added .9K by making a four frame animation of a solid color that took up very little of the overall space, thus few pixels needed their colors replaced.

This isn't a contest here, there are no winners, and certainly not me. But if you get hired to do a quarter page Web ad, this is important stuff to know how to do. 32K for a quarter page (limited) animation is a hot button among web developers who need a certain something extra.

Be the designer who gets that gig.

My Best,

Gary