October 2014 Tips and Tricks - Big GIFs, Tiny Animations

[Gare]

Is there really a difference if the background object comes foreground object and the background object/objects are the ones that are animated instead? Honestly I can see no reason why it could not be done in Xara or any other software as there are afterall only different images stacked on top of each other.

Yes, there really is a difference in Xara as to how shapes are assigned a Background or an Overlay tag, Theinonen, even though I've twisted your question slightly because you're talking about layer order, which has a visual effect of course, but nothing to do with options in programs that can help reduce file size and optimze their appearance. Animated GIFs have had the same options for repeating pixels or laying the same ones onto the next frame, since it was discovered that the GIF file format can do this.

It has to do with Xara's capability to tag a successive frame so that only the pixels in the frame that are different from the previous frame are added to the overall GIF file. CorelDRAW can do this, Photoshop can do this, many cottage industry programs can do this, Microsoft Word cannot do this.


-g

[wizard509]

Thanks Gare

[stygg2003]

Ok here's my effort Gary, nothing fancy, just followed the tut. instructions.

Stygg

[Gare]

Without looking at what I wrote (I tend never to look back), I think my calculations might be off on the duration for the pumpkin faces, stygg. Would you be happier with a .5 seconds duration instead of the .2, which is a little on the frenetic side?

Here's a very important thing to remember when you go live with an animated GIF. First, if it goes on a web page (I can't imagine it being all by itself), export the webpage to a private folder on your website and then see how fast the animation goes as it travels from server to server across the net and back to you and your monitor.

It's what we Yanks call a crap shoot; that means it's up to luck like the roll of dice in a dice game called craps, and not firing a deadly weapon at fecal material. You literally have no way of knowing how your entire audience will see your animation's speed, because some people live in high internet traffic areas such as London and Manhattan where users compete for the available bandwith. Also, there's connection speeds: some have cable, some have enhanced cable where content is compress and sent and uncompressed on the fly as it hits your machine, others are lucky enough to have fiber-optics, and there is still 3% of computer owners that Verizon would like to get rid of who still use-dial up...we're talking kilobits per second, not megabytes.

It would be terrific if the world had broadband (instead of wars!), but the sad truth is you might want to slow your animations down perhaps 5% or so, to better display your work to the entire, mixed-speed and mixed-up world!

By the way, if anyone would like a wonderful collection of vector pumpkin faces, there's a free font called Punkin Head at DaFont. DaFont is a legit site as far as I can tell, but they've got a "gotcha" to download a free Zip installer or similar junk to pay the rent on the site or something else uncharitable.

1. Fowwing these instructions and look at my screen caps.

2. Go to the Punkinhead typeface.
Click here as shown, not the more prominent Download button below. Read the screen carefully.




3. You are lead to a second (but last) amateurish booby-trap. Look at the countdown here. Let it countdown. Do not click that big button below it.




Hey, it's a little tap-dancing, legally I cannot post the font because I don't have the creator's permission, but looky here:



I've attached this image as a XAR file with the faces converted to curves. How do you make the carved face look truly indented? You put a copy that's a little darker orange behind the original, and then nudge it down and right.

My Best,

Gary

[stygg2003]

One more effort at Big GIFs, slowed the blink rate back to .5 as my first effort set at .2 was sending the grandkids into a trance, second thoughts! might change it back, oh the peace and quiet

Stygg

[Gare]

Your grandkids, if properly taught, will stop at the intersection when they see the lights until they turn green.

Or the pumpkins rot.

You did good, stygg!

Gary

[Crow Haven]

Since I used your information from the tute, and I like the effect, I'll add this pumpkin to the mix.

[Gare]

I love the flickering, Maya!

Boo,

Gare

[Crow Haven]

I love the flickering, Maya!

Boo,

Gare

Glad you liked that. It was fun experimenting with the timing to get a flickering effect!

[csehz]

Thanks Gare for this tutorial, finding it very inspirating. Reading after the topic on the internet, really wrote that the 'well done gif' animations have place in the modern web design. Or for example it has great popularity on social sites like Tumblr, showing key elements of film scenes or sport events, also a lot of artistic ones.

My first try is using that a little bit above proposed font and creating two crazy heads from these pumpkins, it is six frames and still stayed 128 Kbyte. However when wanted to add gradient to the inside of the lighting yellow, that increased the size. Will give some tries on it yet