Astro
Lesson #38:
let's.talk.about.flash.babee
Flash, Flash, Flash - what's all the hype and talk about this Flash
thingy? And just what the heck is it anyway? Never fear, RG is here
to take the mystery away as usual. 'Course she'd forget to mention
that she thought Flash was pretty scary and has avoided even looking
at until now - that's why we are here to reminder her of such things.
Ouch! Guess she heard that one...
a.bit.of.mapping
First of all, Flash is a vector graphics program. Say it after Retrogrrl
children,
v e c t o r - vector. Most of the graphics you see on the web are
bitmaps created in programs such as Corel PhotoPaint or Adobe Photoshop,
and are not vector so let's run by what a bitmap is. A bitmap is a
pixel-based image. Your computer screen is made up of pixels, right?
That's a whole bunch of little squares which the computer fills with
appropriate color.
Take
this lovely and attractive circle for example. It's a bitmap - a GIF
in fact. It works well on screen because it is pixel-based, and screens
are made from pixels. No problems here.
Except that to render the image, the computer needs to know about
each and every pixel. It needs to hold information about what is going
on in each pixel.
Here's
the lovely GIF blown up and you can now see that each and every pixie-like
pixel is filled with a color. And there are quite a few even in this
tiny sample. That's a lot of information to keep track of and it affects
file sizes. But it affects more than that.
Look
what happens to the lovely circle when we change its dimensions. We
changed its height and width attributes to now be 100 x 100 pixels.
Looks gross don't it? The explanation is that the information about
each pixel does not change. We have, in fact distorted the truth and
it ain't pretty.
The
pixel information does not change but the computer is trying to comply
with our stupid request and has made the shape bigger. It can't, however,
alter what it knows about the pixels so it tries to stretch its imagination.
This is why you should always make bitmap images at the exact size
you expect them to display - no distortion, no ugliness.
planet.vector
Back to vectors. Instead of being interested in pixels, vector graphics
are a mathematician's delight. Images are rendered by mathematical
knowledge, not pixel knowledge, in programs such as CorelDraw, Illustrator
or Freehand.
This
means that a vector graphic CAN be resized without any loss of quality
because the computer simply recalculates the maths - a circle is a
circle is a circle no matter what size you want it to be!
Now, normally vectors are not suitable on the web because they are
too big in file size. That's where Flash comes into the picture.
fantastic.flash
Flash creates vector animations or movies in which you can easily
incorporate sounds and music. It then squishes all the information
into a neat bundle resulting in a very small file size. Let's go with
an example so you can see what we are on about. We're going to load
a Flash movie demonstration in a new window. When the movie finishes,
close the window and come back here for a review of what's going on.
Click
the Flash logo
Back so soon? Had fun? Now, imagine trying to do all that with traditional
GIF animations and HTML. It's probably possible but the file sizes
would be astronomical and completely unreasonable. The Flash movie
you just viewed had an awful lot going on in it, not to mention the
full length soundtrack, yet it weighs in at just over 123k! Quite
an achievement.
instant.symbols
Flash uses a concept called Symbols and Instances as part of its
file-squishing strategy. This simply means that once you create a
graphic - let's say the spinning circle in the Movie - you can tell
Flash to mathematically remember what the circle looks like by saving
it as a 'symbol'.
A symbol is an element that you want to use over and over again and
Flash saves a library of elements for the movie you are working on.
When you drag an element out of the library to use in the movie Flash
creates a copy of the symbol and calls it an 'Instance'.
It is a mathematical representation of the original symbol which
can be altered, without disturbing the symbol. Or, you can change
a symbol and all the instances can change at the same time. Or, you
can create another symbol and change the link from the instances to
the old symbol to the new symbol.
twee.twee.tweening
Flash is animation right? Much of its power is in its ability to
Tween elements. Tweening means doing something inbetween something
else.
Flash works around frames, just like frames in a cinema movie. It
allows you to pick certain frames to be special, or key frames, where
the action on stage changes in some way. You show Flash where you
want a symbol to start - let's say the arrow that runs across the
movie. At frame 1, which we specify as a key frame, we place the arrow
on the left of screen. Then we decide that 20 frames later, we want
the arrow to be all the way over on the right. We select frame 20
and turn it into a special key frame.
Now we don't have to move the arrow frame by frame until it gets
over to the right. That would be very tedious and boring. We click
the new key frame at frame 20 and put the arrow where we want it on
the right hand side. Then all we have to do is instruct Flash to Tween,
or make up inbetween frames from frame 1 to 20. Flash handles
all the mathematics about the symbol and works out where and what
it would look like at every frame along the way - you don't have to
do anything else.
Now that you know what's been going on you can work out how the rest
of the movie was made - it's a whole bunch of symbols on separate
layers (stacked on top of each other) all madly spinning and twirling
to their own set of frame instructions. Some simply move while others
change size, shape and color - all done with Tweening.
Symbols and Tweening mean that file sizes are kept down - it's all
maths after all!
fabo.flashing
Once you are happy with your frames and tweens, Flash publishs the
movie as a .swf, or shockwave flash movie. This is where the squishing
is done. Of course, it's fiddly and the emphasis is on building up
a movie into something interesting, but perhaps now you can see that
you could build a Flash movie just like Retrogrrl did, without knowing
how to draw Vector graphics in vector programs like CorelDraw - she
sure don't know how to anyway! All the graphics in the Flash movie
were shapes drawn with Flash's basic drawing and text tools.
You can certainly drop other graphics such as bitmaps and vectors
created in other programs into your Flash movie, and then add them
to key frames and away you go. So give it a try, you're sure to amaze
yourself!.
Flash is available on trial from the Macromedia
web site.
