October 2014 Tips and Tricks - Big GIFs, Tiny Animations

[wizard509]

Yes I know Gare. I know it is large, in fact I was somewhat shocked at the size, but I was only trying to demonstrate a point. Could it be that transparencies added to the file size even though I didn't use any more shapes and in fact reduced the size of a shadow as well as only used the bitmap on the first frame as a background? Ah well, it was a worthy experiment even though it failed miserably in the context of this threads lesson. What I do not understand is why it is so much larger than Stygg's because in I essence used his file and tried to eliminate what I thought I could to make it an even smaller file. Oh wait, I did make a change, one of the spheres had some different shapes on it and I changed it to one with the stars. Anyhow I am mystified.

[Gare]

No reason to be mystified or feel I was critical of your work, Larry. What added to the file was the number of unique colours. I don't even have to look at the number of colors used: you have smooth circular gradients on the balls. It's impossible to do smooth gradients without "banding", because the smooth transition between one color and another in the world of bitmaps requires thousands of unique colors.

How many colors did you limit the animation to?

No, when you cxhoose overlay as the replacement method, there is no penalty for transparent areas. GIFs aren't vectors...they only support one unique color for transparency, no anti-aliasing, they are unlinke the drawings you do in Xara.

GIFs are coming back, and we, as designers, should best be prepared. Is anyone familiar with the "Wiggle 3D" type of animated GIF?

-g

[stygg2003]

That's a really nice Gif Gary the butter fly so I've made a rough draft, for want of better words, of your Gif. Ok I can redraw the butterflys but the background image, if I choose 64 or 16 bit, it looks chronic so I left it at 256, download time 2.93 secs. Any advice about the background.

Stygg

[Gare]

About the background? Yes, I have advice. Use a Xara filter to decrease the saturation of it, and then make a copy so the desaturation is permanent ans not a dynamic live effect. This should knock back the number of unique colors so reducing them won't totally wreck the background image. After all, you got a 90K image right now, and the target, let's say, should be about 30K 40K tops for a webpage. Barbara and I never put up a GIF that's over that amount on the Xara Xone...that flying dart on the front page is only 32K and there's 6 frames in it.

The thing I did with the butterfly perfume ad was to filter the crap out of ther background image so it was still recognizable, but very limited in colors. This let me do I think a 16 coor reduction on it, and let the butterfly do its thing for four frames.

By the way, there's no reason for the pink butterfly in the cow composition! I think a white or a dark brown one would separate better.

Does everyone understand the replacement technique I used for the three butterfly vector groups? Two are always 1% opaque while the third is 99% opaque, changing the opacity from frame to frame to reveal them. Why 99% and 1%? Because I tagged the vector shape groups, named them, so should I decide at a later date to make a SWF from the composition, I've got the shapes named, and swf files can't tween shapes from 100 to 0 percent opacty, at least not the way it's outputted in Xara.

Keep up the ambition, learning, and good work, stygg!

-g

[Rik]

Well, I've been watching all the ball bouncing!
So, I thought I would have a go and see if I could get the motion to look right.

Does it look OK to you?
Maybe, things could be improved? I'll let you guys tell me.

[stygg2003]

Just a couple of more questions Gary then leave you in peace for weekend I understand de-saturating the cow background but I'm not sure about the Butterfly Gifs, why is there a black and pink one in each Gif. I did another mock up and put a black shape on the cow image then added your Butterfly gif files and it works fine. Was your gif files made just for the Perfume Gif? and finally, what is a Wiggle 3D Gif. BTW I got the mock up to 47kb and download 1.47 secs, although with a big black shape on it Still experimenting and finding my way.

Stygg

[stygg2003]

Looks pretty good that Rik but! there's always a but Not sure about the front reflection, it clashes with the shadow and perhaps the shadow should not go out of frame and also be under the ball, squished when the ball hits the floor. That's just my take on it Rik, hey what do I know, still playing with the original I first did yonks ago your timing looks good and I like the image.

Stygg

[Rik]

Thanks for comments, stygg.
It's good to get feedback.

Yeah! The front reflection is going to be a matter of opinion, and yours may well be right.
I thought it added a bit of touch!

I liked the fact that the shadow goes out of the frame.

OK. Here's the animation, without the front reflection.

[Gare]

Why is there a black and pink one in each Gif. I did another mock up and put a black shape on the cow image then added your Butterfly gif files and it works fine. Was your gif files made just for the Perfume Gif? Stygg

Hi Stygg— I think what you did is download the GIF and decompile it in Xara, right? Okay, Xara isn't going to sghow you what I actually did to animate the butterfly. There are three vector shapes and all of them are pink, none of them black. The reason why the imported GIF shows a black butterfly is because at that frame it's nearly invisible, and Xara interpreted that as black, having a background adopted from that specific frame.

In simpler terms ("please! please!"), when you want to rework a GIF, you need either a bitmap program that can faithfully decompile and import each frame, or ask for the native Xara file to do your work. I'm attaching the Xara file that contains the elements of this butterfly moving. Note here that all three poses are on top of each other. The way I get changes in successive frames is to make two invisible and one visible:



Here's a slightly different challenge/educational lesson. Instead of trying to do a photorealistic background, I illustrated a background that had very few colours. I kept the color palette down to 8 colors, and this sucker is only 6K and the same size as the animations we've been doping. Imagine this as an accompaniment to a blog or article online!



This month isn't about being clever for Clever's sake: it's about optimizing the hellk out of a GIF so part of the picture can animate while the rest of the Web page isn't burdened by a massive file streaming. I've attached this file. Feel free to use the butterflies. I modeled and animated them, and then auto-traced their silhouettes to add visual complexity at no expense to the speed/size of the animation.

and finally, what is a Wiggle 3D Gif?
Stygg

It's two pictures wit a delay time of about .2 seconds. The pictures should be photographs, but you can draw them. The idea is to keep the middelground element static between the two frames, the foreground moves a little from left to right between the two frames and the background moves significantly. Here's an example that was posted on Google Groups, created by David Fitz Simmons "Diana of the Chase" by Anna Hyatt Huntington, bronze, collection of Brookgreen Gardens, Pawleys Island, SC.



The alternating parallax view gives the illusion of depth at a very low download cost. I'll try to create one myself soon and show how to approach it.

My Best,

Gary

[Gare]

Rik, I think the quality of the animation versus the size of it is incredible. Legend! well done, mate!

You provoked me into trying to model your scene and do it as a SWF. The think is a whole MB, not at all practical for a web page, but if you'd like the frames I can email them to you privately so you can see frame by frame where the highlights and reflections move in my setup, which is not exactly the same as yours. I tried!



My Best,

Gary