swfchan: Advanced FLASH tutorial.swf (info)

Text

Now loading...

by: Capn G

next---

My third and final tutorial.
Since I still seem to be catching flak from the so-called
FLASH veterans out there, this tutorial is more
for their level. This time I'm going to be covering
animation timing, colour theory and a final word on
button making. I've recieved requests to produce a
game making tutorial. I'm afraid that's a little beyond
my current level. You're better off heading over to
www.flashkit.com and skimming through their stuff
(I do, quite often!). But if you do, please don't just
swipe the code and post it on NG, claiming it as your
own work (that really pisses me off....)

A little background first. I'm 26 years old and I've spent
three years studying visual arts and two studying
classical animation, under some of the best instructors
in North America... I know of what I speak. However,
I'm also very bitter as regards the exceptional co$t
of those years and that education. So in order to vent
my frustration, I've decided to share some of the finer
points of that instruction with you, the NG viewer
(ain't you lucky?) thus justifying the expenditure and
simultaniously preventing thousands of dollars from
going into an educational system that would squander
it anyway and doesn't deserve it.
Like I said, I'm bitter....

---previous

mute

And so, on with the tutorial! I'm going to start with the
most important aspect of animation (after the movement
part) which is; timing. As you know, all animation is
broken down into segments called "keyframes", or
"keys". Keys represent the extreme ends of any action.
Frames inbetween the keys are called (oddly enough)
"inbetweens" or just "tweens". The number and
spacing of the keys and the inbetweens is what creates
the timing of the animation (also called the "pace"). In
just about every case, this timing translates into an arc.
The two most obvious examples are the
"bouncing ball" and the "pendulum".

The difference between the two is their key placement.
For the ball, there are more keys in the middle, where
the ball has "hang time". For the pedulum, the keys
are bunched near the ends, as that's the point where
it loses it's momentum. A visual breakdown is
shown on the next page.
This is the single most important concept in animation,
once you grasp it, you can pretty much do anything
with it. It should be noted that the faster the sequence
is, the more extreme the keys should be. Anime is
particularily adept at making good use of as few keys
as possible to get the point across, and what's more,
it looks really slick!

Now you could put in ten zillion frames....or you could let
FLASH do the work for you! By using the "easing"
option in the tweens menu, you can have FLASH create
a curve which accurately simulates key placement.

Here's an example of how effective a little easing can
be. On the left, the arm movement without easing, on
the right, with easing. The difference is subtle, but
noteworthy, I'm sure you'll agree. To use the easing
option, right-click in the blue space of your motion
tween. The number is a percentage from -100 to 100.
Play around until you get the degree of ease you need.

The other single most important aspect of
animation is deformation, or as it's known in the biz,
"Stretch and Squash". In real life stuff blurs when it
moves quickly, and while it's possible to accurately
simulate blurring, you're still probably going to want to
know this. When an object collides with something, it
tends to redistribute it's mass. That's the "Squash"
part. When it recoils from this in real-life, it returns to it's
original shape, but in animation, you'll want to exaggerate
this into a "Stretch". This'll give your animation that
really loose, Bugs Bunny feel. The most important thing
is to make sure the object retains it's mass as much as
possible. To see the difference, let's check in with the
old bouncing ball again...

Without

With

That's about all I can think of to put in the animation
section, but it should be plenty. Now on to colour....
Now, alot of people think colour is relatively unimportant
but I feel it's worth going over because it'll help you
establish the tone of movie. All colours can be split into
three classes; warm, cool and neutral. Basically, a "warm"
colour is any colour that contains red, a "cool" contains
blue and a "neutral" contains neither or a balance of
both. This means that generally, red, orange and yellow
are classed as "warm" and green, blue and purple are
"cool". Of course, it is possible to have a "warm" blue
by simply upping the red value, but do it too much and
(obviously) you'll turn it to purple...

Right now you're probably thinking "So what?", well,
understanding warm and cool helps you pick the way you
shade (and highlight) your art. There are two schools of
thought on this: Western and Eastern. In western animation,
all elements have warm highlights and cool shadows. In
anime, characters have cool highlights and warm shadows,
whilst backgrounds are the opposite. Here's the same
character with both styles for comparison.

western

eastern

As you can see, the difference is pretty pronounced. I'm
not trying to prove one is superior to the other, I'm just
trying to show the possibilities of variation. Ultimately,
style, theme and personal taste will dictate how you
colour the elements in your movies.
I should take a moment to talk about gradients. FLASH's
gradient mixing tools rock, they're better Photoshop's,
in my opinion. But you don't want to go overboard with
them. Gradients=slow playback. Try to stick with solid
shading as much as possible.

The last thing I want to mention is button making. I'm
continually amazed by the number of people who can't seem
to make a simple text-based button. I often wonder why no
one else seems to have thought of this, but here's what
I always do. First, make your word. Now press "F8" and
make it a button. Now edit the button as follows;
insert keyframes into the "over" and "down" positions.
Change these to different colours if you like. Insert a
blank frame into the "hit" frame. Now, make a new layer
and switch it to the bottom. Lock off the top layer (for
saftey's sake) and draw a box around your word. Now,
open the swatches and make a new colour with an ALPHA
value of zero. Fill your box with this colour.

Here's one of the buttons I made for this project. For
these I also made another layer under the first with
a copy of the first frame, and re-coloured the text
black to make a shadow.
And so we reach the end. I hope you've enjoyed these
tutorials. If you haven't...well, screw ya!

The box, drawn and then.......filled with the zero alpha

replay?

ActionScript [AS1/AS2]

Frame 1
	ifFrameLoaded (15) {
		gotoAndPlay (3);
	}
Frame 2
	gotoAndPlay (1);
Frame 3
	stop();
Frame 4
	stop();
Frame 5
	stop();
Frame 6
	stop();
Frame 7
	stop();
Frame 8
	stop();
Frame 9
	stop();
Frame 10
	stop();
Frame 11
	stop();
Frame 12
	stop();
Frame 13
	stop();
Frame 14
	stop();
Frame 15
	stop();
Frame 16
	stop();
Frame 17
	stop();
Frame 18
	stop();
Symbol 11 Button
on (release) {
	nextFrame();
}
Symbol 19 Button
on (release) {
	prevFrame();
}
Symbol 23 Button
on (release) {
	stopAllSounds();
}
Symbol 63 Button
on (release) {
	stopAllSounds();
	gotoAndPlay (1);
}

Library Items

Symbol 1 Graphic	Used by:Timeline
Symbol 2 Font	Used by:3 14 15 24 31 35 38 45 46 47 50 52 53 54 55 56 57 58
Symbol 3 Text	Uses:2	Used by:Timeline
Symbol 4 Graphic	Used by:Timeline
Symbol 5 Font	Used by:6 8 9 10 16 17 18 20 21 22 60 61 62
Symbol 6 Text	Uses:5	Used by:Timeline
Symbol 7 Graphic	Used by:11 19 23 63
Symbol 8 Text	Uses:5	Used by:11
Symbol 9 Text	Uses:5	Used by:11
Symbol 10 Text	Uses:5	Used by:11
Symbol 11 Button	Uses:7 8 9 10	Used by:Timeline
Symbol 12 Sound	Used by:Timeline
Symbol 13 Font	Used by:14 45
Symbol 14 Text	Uses:2 13	Used by:Timeline
Symbol 15 Text	Uses:2	Used by:Timeline
Symbol 16 Text	Uses:5	Used by:19 Timeline
Symbol 17 Text	Uses:5	Used by:19 Timeline
Symbol 18 Text	Uses:5	Used by:19
Symbol 19 Button	Uses:7 16 17 18	Used by:Timeline
Symbol 20 Text	Uses:5	Used by:23
Symbol 21 Text	Uses:5	Used by:23
Symbol 22 Text	Uses:5	Used by:23
Symbol 23 Button	Uses:7 20 21 22	Used by:Timeline
Symbol 24 Text	Uses:2	Used by:Timeline
Symbol 25 Graphic	Used by:27 29
Symbol 26 Graphic	Used by:27 34 48 49
Symbol 27 MovieClip	Uses:25 26	Used by:Timeline
Symbol 28 Graphic	Used by:29 33
Symbol 29 MovieClip	Uses:25 28	Used by:Timeline
Symbol 30 Font	Used by:31 45 52
Symbol 31 Text	Uses:2 30	Used by:Timeline
Symbol 32 Graphic	Used by:Timeline
Symbol 33 MovieClip	Uses:28	Used by:Timeline
Symbol 34 MovieClip	Uses:26	Used by:Timeline
Symbol 35 Text	Uses:2	Used by:Timeline
Symbol 36 Bitmap	Used by:37
Symbol 37 Graphic	Uses:36	Used by:Timeline
Symbol 38 Text	Uses:2	Used by:Timeline
Symbol 39 Bitmap	Used by:40
Symbol 40 Graphic	Uses:39	Used by:Timeline
Symbol 41 Graphic	Used by:43 44
Symbol 42 Graphic	Used by:43 44
Symbol 43 MovieClip	Uses:41 42	Used by:Timeline
Symbol 44 MovieClip	Uses:41 42	Used by:Timeline
Symbol 45 Text	Uses:2 30 13	Used by:Timeline
Symbol 46 Text	Uses:2	Used by:Timeline
Symbol 47 Text	Uses:2	Used by:Timeline
Symbol 48 MovieClip	Uses:26	Used by:Timeline
Symbol 49 MovieClip	Uses:26	Used by:Timeline
Symbol 50 Text	Uses:2	Used by:Timeline
Symbol 51 Graphic	Used by:Timeline
Symbol 52 Text	Uses:2 30	Used by:Timeline
Symbol 53 Text	Uses:2	Used by:Timeline
Symbol 54 Text	Uses:2	Used by:Timeline
Symbol 55 Text	Uses:2	Used by:Timeline
Symbol 56 Text	Uses:2	Used by:Timeline
Symbol 57 Text	Uses:2	Used by:Timeline
Symbol 58 Text	Uses:2	Used by:Timeline
Symbol 59 Graphic	Used by:Timeline
Symbol 60 Text	Uses:5	Used by:63
Symbol 61 Text	Uses:5	Used by:63
Symbol 62 Text	Uses:5	Used by:63
Symbol 63 Button	Uses:7 60 61 62	Used by:Timeline