Astro
Lesson #34:
mr.disney.come.on.down!
Mickey
Mouse, Bugs Bunny, Tom & Jerry, Speedy Gonzales, that stoopid
Road Runner (don't ya just wish ol' Wile.E could get it right, just
once, huh?) - the cartoon characters we all know and love. Mr Disney
and his peers started it all in recognising the potential of animation
and it's he we have to thank all these years later for the plethora
of whirling, spinning, flashing things to be found on the web today.
Yeah, thanks a lot, Walt! NOT!
toys.for.the.boys.(and.gals)
No, seriously, animations are great fun to make - it's like playdoh
or lego for grownups, getting down and dirty and showing the other
kids what you can do. It's just the difficulty of knowing when enough
is enough, restraining the inbuilt urge to have 50 dancing frogs one
the one page - believe it or not, one is sufficient - really.
Animations
don't have to be limited to furry critters either. And it's cool to
make them real subtle, so they catch your eye, and maybe only repeat
a few times instead of looping forever, sending your visitors loopy
at the same time.
The
early animators were brilliant artists - they knew how to make their
pencils burn, baby, and create an almost living being straight from
the paper. Take Daffy Duck for example - we all love the little sneak.
Now, us lot here at r.e.t.r.o.c.i.t.y. know that Retrogrrl can't draw
for nuts, and yet she can make some sparky little 'mations for the
people. How does that Grrl do it? We asked her to show us. And ya
know what, she darned did!
cell.by.date
Animations
are simply a trick of the eye, a succession of individual frames that
flash by, creating the impression of movement and change - just like
the movies. The original artistes drew their characters on sheets
of transparent cellulose - hence the terms 'cells' - which could be
stacked on top of other cells containing backgrounds and other cartoon
creatures. These cells could then be reused over and over again after
being captured on film. Or sold for inordinate amounts of moolah to
wealthy aficionados many years later.
nyeh.so.what's.up.doc?
The same principle applies to web animation (except the part about
inordinate amounts of moolah ...). Create a series of pictures, stack
'em together and see them run. With a few provisos, ipso factos and
addendums.
We've
talked many times about our old friends, Mr Jpeg and Mr Gif, and fine
fellows they are indeed. They get along pretty well in life, but each
knows their place in web high society - Mr Jpeg takes care of our
photographic quality images and Mr Gif is happy to entertain the more
common, solid color images. He has one other characteristic that sets
him apart from Jolly Jpeg however - he can animate! All by himself,
now ain't that grand? Mr Jpeg just can't do it. Well, he can with
a little help from some of his javascript buddies, but we won't go
into that today. Even the new kid on the block, the pubescent Master
PNG, for all his glamorous ways, can't animate. Ha!
on.with.the.show.this.is.it
As
usual, RG will demonstrate with a spiffy example.
|
|
|
This
is part of a navigation bar RG made for the web site of
some friends - spacey, ain't it? As you can see, the little
aerials are bobbing up and down - it's clear that they
are animated.
However
they only appear on a small part of the entire image and
so we have isolated this portion in order to add the action
- by using the 'old slice 'n' dice technique we showed
you in an earlier lesson. Go back
there now if it has slipped your mind.
This
is the bit we want. It consists of 10 frames and weighs
in at 16k, which is not too bad - most of the size is
in the little aerials themselves. RG could have made the
file size less, but they would have lost too much of their
nice, shiny appearance.
|
|
sufferin.succotash.tho.that'th.how.itsth.done!
In actuality, some of the frames are repeated - the up motion is the
same as the down motion, only in reverse, so Retrogrrl has simply
copied some 'cells' and made them run backwards - the start and end
frames are the same, with some in between running forwards and then
backwards.
See?
Simply make your original graphics in a paint program - we use Corel
PhotoPaint - in layers - that is, keep all the elements as separate
objects. That way you can move the bits you want to animate, as much
as you need to. At each stage, copy to the clipboard and create individual
images - all just slightly different, as the parts that will make
up your animation.
Retrogrrl
just moved the aerial objects a few pixels down and to the right,
pausing to copy and past as a new, separate image, moving a few more
pixels and repeating. Many graphics programs allow you to 'onionskin',
or make the new layers transparent to some degree so that you can
get the placement correct. This is good.
i.taut.i.saw.a.purty.gif.i.did.i.did.i.did
Next,
you need to place the separate files together and have some control
over color, transparency and animation speed. Now, although PhotoPaint
does all this quite well, we prefer to use Gif
Movie Gear - a nifty little program specially made for Gif animations.
It can be trialled for 30 days and works out to be about $38 AUS.
Movie Gear is very clever and saves you much work by devising smart
ways to optimise your images by throwing out unnecessary colors (showing
you the alternatives), cropping parts of the images that are the same
in all frames, and making parts transparent - all decreasing the file
size dramatically - often by 50% or more. And it does it FOR you -
you don't have to think about it. Well, not much anyway. A bargain
at any price!
As
in many animation programs, Movie Gear allows you to set different
frame rates for each cell - for example, we set the aerials to stay
up for 50/100ths of a second, and the other cells stay on screen for
only 10/100ths of a second - just enough to create a smooth movement.
We simply opened all the cells into Movie Gear, copied and pasted
the ones we wanted to reverse, playing with the order til it was just
right, and then set the timing on each one. Easy peasy lemon squeezy.
At
this stage it's merely a matter of adding the animation to other images
that make up the navigation bar by sticking them together in a table
- remember our previous lesson on how to do that? - and voila! It
is done.
Just
remember, dancing frogs are out - clever little pieces that fit in
with the total design are in. Long live the Gif - hoorah, hoorah,
hoorah!
Til next time when Retrogrrl can think of something else to waffle
on about.
next.pod
