- hah - hah
we are too
hello and welcome to happy Harry's who
are too how to's Wow try saying that
with a mouthful of teeth this is the
premiere episode in a new 12 part weekly
animation tutorial series by myself
Harry Partridge and the lovely people
over at who are too and will be
exclusive to their who are to channel so
definitely subscribe if you want to
catch all the future episodes
and speaking of future episodes I'll
give you a quick overview of what the
series is about before I jump into
today's lesson over the next 12 weeks I
would like to share with you as much
information as I can to get budding
animators out there up and running and
ready to produce their own 2d digital
animated cartoons that are not just good
enough to put on the web but good enough
to be seen anywhere we're not aiming low
here we want this stuff to be as good as
or better than anything that's currently
on TV and it'll take a long time to get
there now today's episode is a little
bit different because I'm going to be
looking specifically at the program
Adobe Flash although later on I'll be
looking at more Universal animation
techniques which I think will apply to
any program or any kind of animation if
you want to do stop-motion or 3d or even
hand-drawn today though we're just
looking at flash because I think that's
going to be a great starting point for
people out there that don't have you
know a platform to jump off from so
before I get into today's lesson first
of all I'm going to run through a very
quick list of things that you will need
first of all you'll need a computer but
as you're watching this on the computer
I don't think that's a problem
second of all you'll need some sort of
program or application to be able to
create your own 2d animation now I'm
using Adobe Flash as I've said in fact
I'm going to be using the free 30-day
trial available from Adobe's website
thirdly you'll need a tool to input your
own artwork now I recommend a Wacom
tablet or a Wacom Cintiq that's a screen
that you draw directly onto although
these can be quite pricey they're the
best thing for the job so it's worth
getting one if you're serious about this
alternatively you can
all with a mouse but I wouldn't really
recommend it another option is actually
hand drawing your art and then scanning
it into a computer and cleaning up in
flash or whatever program you use
finally if you'd like to record your own
voices you will need to invest in a
decent recording setup but that's
something that we'll come to later on in
the episodes now I think we're finally
ready to take a look at flash ok that
isn't particularly funny we'll bring
over the real flash Adobe Flash
Professional cs6 now this is a program
that can be used to make interactive web
content like games animations or things
like banners and advertisements that you
probably block nowadays using
third-party software but that's not what
we're worried about today we're going to
be looking at making animations so quick
go to create new and pick actionscript
3.0 or 2.0 doesn't matter which one
let's go for three
and we're met by this rather bleak
looking selection of gray squares now if
you've never used an animation program
before don't worry I'm going to try and
keep things as streamlined as possible
and not load you down with information
that isn't really going to serve any
purpose for what we want we're just
going to be talking about the tools that
I think are useful for getting you
started with creating animation if
you've used a program like Adobe
Photoshop or paint before a lot of these
things will probably seem fairly
familiar so this big white square here
in the center of the screen is the stage
and it's basically the screen or the
theater or whatever that our animations
are going to take place in if I go here
and select a drawing tool like the brush
cleverly indicated by the brush icon and
draw here a little squiggle that is
going to appear in our film because it's
in within the confines of the stage if I
draw offensive filth here outside of the
confines of the stage and preview the
film by hitting ctrl alt and enter as
you can see that horrible filth is
nowhere to be found
let's just click off of that and by
dragging with the black
O'Toole here found at the top left with
your tools by dragging and highlighting
and then hitting delete we can get rid
of all of that lovely art work now if
you want to turn off this sort of gray
no-man's land here and just worry about
what you're going to see you can go to
view and turn off pasteboard and there
see we're not going to see any of this
other area we're only going to see what
actually will end up within the confines
of the stage alternatively by the way if
you want to get rid of everything on one
single frame and we'll talk about frames
in a moment you can grab the frame in
the timeline and we'll talk about the
timeline later on and again hit delete
now before I move on to talking about
timeline of frames we're going to go to
modify and go to document and here is
where we can actually modify the stage
itself it's currently set to 550 pixels
wide by 400 pixels high and that's a bit
of an odd setting I don't know why flash
has that as the default but because we
want to create a film or an animation
we're going to send it to 1920 wide by
1080 high and that will give us a high
definition resolution and you'll see in
a minute when we click OK the stage will
suddenly become much larger but before I
do that I'd like to talk to you about
adjusting background colors and frame
rates as you can see our default
background is white and we'll keep it as
white for the time being but if you want
it to be gray or pink or orange let's
just make it Orange now see it's gone
much bigger I'll have to zoom out here
using the magnifying glass tool and
select reduce click a few times to zoom
out you can actually drag the area that
you want to see whether you're using the
reduce or enlarge magnifying glass and
that all sort of snap you back in which
is quite useful but now we have a nice
1920 by 1080 P stage and we've got
ourselves a nice orange background again
I'm going to go to modify document and
select actually gray or yeah it's going
to get a nice darker gray actually don't
like using too much white on the screen
if I can help it because when you're
animating and looking at the screen
for hours on end it's nice not to
bombard your eyes with white I'm going
to turn off pasteboard so we can again
see the stage within the surrounding
area and drag with a magnifying glass to
get ourselves looking pretty much dead
on at the stage here and finally I am
going to begin to explain the timeline
now what is the timeline well to begin
to talk about the timeline I first will
have to talk a little bit about
animation and films and how they're made
as you probably know when you look at a
film or in animation you're not looking
at recorded movement there is really no
movement involved other than what the
actors and actresses are doing on the
set if you're recording a live-action
film instead the camera creates 24 still
images a second which when played back
at 24 images a second give the illusion
of movement and life an animation is
really no different to live-action film
the only difference is that an animator
or someone creates those 24 images per
second rather than filming them with a
camera so the timeline is simply just
the timeline of the frames in our
animation and by hitting f6 on your
keyboard you can create lots and lots of
blank keyframes or blank frames now they
currently have nothing in them and you
can scroll through them with this red
cursor here by dragging it but you're
not going to see anything because there
is no animation there but if by going
and getting the brush tool and by
drawing into a frame by moving the
cursor and drawing into another frame
moving the cursor drawing into another
frame moving the cursor drawing into
another frame etc etc and then by either
hitting Enter for a preview or hitting
ctrl alt + Enter to export the thing out
let's actually just hit Enter drag back
to the beginning hit enter you can play
our animation and that's been made by
creating these sequential frames in the
timeline now there are lots of fancy
things that you can do with these frames
in the timeline you can actually drag
specific frames out to
last longer this is playing back at 24
frames per second so these frames are
flicked by very quickly but if you grab
one particular frame and go to insert
frame you'll actually see it's been
dragged out to last twice as long and if
we do that to each frame our movement
will be effectively playing back at 12
frames per second even though we're
still animating within 12 24 frames per
second because these frames are dragged
out to twice as long
animators call these twos you animate on
twos or you animate on ones some people
even animate on threes and it makes the
movement a little bit choppier but we're
still animating within a 24 frames per
second animation so we're hitting Enter
we can see the same animation play back
a little bit choppier but it still looks
pretty good
much better for creating slow movements
now I'm going to begin to talk about
tools next but first of all I'm going to
grab our frames and go to remove frames
to clear those away before I do that I'm
going to quickly talk about how flash is
sort of modular if you want you can grab
the timeline and move it down until it
highlights this blue bar here and sort
of sticks to the bottom of the screen if
you like having your timeline at the
bottom alternatively you can grab the
toolbar and move it over here if you
like having your tools on the right but
I actually prefer having them on the
left I like having my tool on the left
doesn't sound good does it so that's
like something a tailor would ask you
right it does actually take a bit of
fiddling to get it to stick where you
want so you can drag the boxes and make
them all kind of different sizes and
shapes but again I'm going to move the
timeline up here and we'll begin talking
about tools right as we've discussed
this bar here on the left is the tool
bar and there are a lot of things down
here and some of them I don't even know
what they do and I've been using flash
for 10 years so I'm only going to run
down the basics and really talk about
the things that I think are going to be
useful for you we've already discussed
this black arrow here which can be used
to change or highlight art let's just
give ourselves a frame here to work into
if you don't have a frame
you won't actually be able to draw
anything in the stage so by I don't know
what that is but by grabbing the arrow
tool here we can highlight the art and
then by right-clicking you can go to
free transform which is always useful
for rotating your art or scaling your
art up and by the way hold down the
shift key if you want to scale without
actually stretching or distorting your
art scale up or down rotate some
interesting things like the envelope
tool again by right click and you can
sort of morph and warp the art which I
picked a better image here to begin
playing with this sort of whoopee
cushion that's become deflated here so
all that stuff's pretty useful again
highlight with the arrow tool hit delete
to get rid of now there are two ways you
can kind of create most of the art in
flash and that's by using the brush tool
or a line tool now the brush tool I
believe is the superior way of creating
art and we create that with sorry we
select that by picking the brush tool
here and as you see we can draw lots of
interesting shapes and begin throwing in
exciting looking characters for 2013
he's hip he's cool he's listening to
beats by dre get rid of him he's
obnoxious actually I don't like him at
all again you can select the frame and
hit delete but you can also select or
create art sorry with the line tool now
the line tool is a lot more sort of
mathematical you can create straight
lines by dragging and then go in and
Bend those lines after the fact by
warping them with the arrow tool we've
already talked about and of course
highlight and delete as always we can
create geological mathematical Oubre
boring squares and circles with this
square tool here and by holding down our
mouse we can select ovals and circles
again if you want a nice even circle
hold down shift so you don't get these
weird sort of
oval shapes control-z
to get rid of those alternatively and
the line tool does use a different
palette to the paint tool or the brush
tool and you can change that by going
here and selecting black so actually
this will give us a nice black lines and
if we want to change the color of our
brush we go ahead of the bucket fill
tool and we can have a nice red brush
now as you're probably aware when you
color in with a program like this there
is a nice easy way to do that using a
bucket fill tool for example let's draw
some sort of mutant Bart Simpson here
looks like how Bart was drawn in the old
Tracey Ullman Show it's kind of and by
colouring him in we can go to the bucket
fill tool and select let's make him a
nice blue the color that the Simpsons
are famous for and there we go we've
just clicked into him directly and
filled him in without having to color
manually ooh
there's a hole here present in Bart's
either which we're not able to fill in
obviously because there is a gap but
actually flash can cut us a break here
and by selecting the bucket fill tool
and then going down to gap size we're
able to select close large gaps and that
will color in despite the hole not
actually being fully closed zoom out now
if you're using a Cintiq or a drawing
tablet one of the cool things about that
is you can actually have your lines
taper in and out now we're going to
select the brush tool let's have it
black be black again and by hitting this
sort of water droplet icon here we can
actually turn on pressure sensitivity so
without pressure sensitivity we get
these very consistent lines and they're
not necessarily ugly that might be what
you're going for but by turning on
pressure sensitivity we can have lines
that are thin
and fat and then thin again if we want
by applying a more pressure or even a
line that starts off then starts off
thick rather goes thin in the middle and
then ends up fat and we've accidentally
created a corporate logo fantastic so
other than the line tool and the brush
tool that's really all you need to know
along with the bucket tool you can also
of course create text in flash by using
the text tool here dragging the box that
you wish to type your text into and then
saying look ma no brains fantastic now
one thing I should mention before we
move on is the properties box which you
can bring up by selecting window and
then properties and it brings up a
context-sensitive box which will change
depending on which tool you're currently
using because we're using text at the
moment it is text centric and we can
change the color of the text or we can
change the position etc etc and the font
as well if you so desire and if we were
to be using the brush tool instead
effectively by changing the color for
the brush tool we have changed to color
for the text as well so you don't really
need to bring up the properties box to
change the color of the text just a
quick aside there now if we to bring up
the properties box again it has changed
to have much more to do with our brush
setting but I'm actually happy with that
for the time being as it is now we're
going to move on and begin to look at
how you create animation in flash
finally we're getting somewhere
now there are two ways you can create
the flash animation and those are frame
by frame and tweening and if those don't
sound immediately familiar don't worry
I'll explain what they mean essentially
they're two ways of creating animation
by generating frames and frame by frame
what that means is and we've sort of
seen it already is if I introduce lots
of blank keyframes I can simply have a
frame followed by another frame followed
by another followed
another followed by another followed by
another another another another and we
get this effect where we create
animation by drawing all the frames by
hand I don't know what it is about this
little dot that flies around it always
seems to be my go-to for representing
frame by frame animation to people the
other way is twinned animation and
that's where the computer kind of
creates the in-between images and that's
where the word tween came from in
between and we do that by getting rid of
these frames to begin with creating a
new frame and let's again create that
circle except we're going to select
create classic tween and by inserting
frames we can see that we no longer have
a gray frame it's actually changed this
with a very pale lilac color and by then
selecting a future frame we're on frame
10 here and highlighting and
right-clicking we can insert keyframe
and it sort of created this line from
frame 1 to frame 10 here and if we move
the circle on the tenth frame that will
effectively create all the in-betweens
for us people create very complicated
animation this way by effectively
building a character out of individual
pieces almost like you would a puppet
and tweening each individual body part
now this isn't actually a form of
animation I have a whole lot of
experience with and we'll be
concentrating on frame by frame
animation throughout this tutorial it's
a lot more work and it does take longer
to produce but I ultimately think it's
more rewarding we will however be coming
back to tweens when we look at creating
camera pans or moving elements like a
cloud moving by in the background or
something like that so we're not quite
done with tweens yet however before we
wrap up today I would still like to look
at one more thing and that's working
with layers now I just selected a new
layer and I'll do that again in a moment
and show you what I did by selecting
this button here which is labeled
surprisingly new layer we're able to
build up layer after layer
in the timeline which we can shift
around if we so desire and reorder them
and effectively they act like plates of
glass which you can create artwork on
top of and whatever is on the top layer
will effectively obscure things on the
layer below it I'll show you what I mean
by that BAM and we are back now I know
that pigs are not going to lose any
sleep over this but hopefully it should
prove useful in helping me illustrate my
points about layers as you can see by
selecting this dot here under the eye
we're able to actually make layers
invisible or visible and you can see we
have a background layer we have a
tweened cloud layer we have a little man
who i frame-by-frame animated to look
like he's running away in fear of
realizing how badly animated he is and a
little shrubbery here just in front of
him to add a little bit of depth and if
we select loop playback and hit enter we
can watch our little film unfold so
we've got a combination thereof animated
layers non-animated layers and also
tweening and it's all come together
using the stuff that we've learnt today
to help make the very very crude short
you see playing in front of you now we
are at the tallest point of the highest
peak of the biggest tallest mountain on
the biggest iceberg imaginable but we
have a long way to go and things are
going to heat up a lot more next week
when I start to break down animation
frame by frame animation in a lot more
depth we're going to begin to look at
sort of the principles behind animation
animating objects and sort of getting
real flow and groove in our movement and
eventually we're going to move on at the
end of that episode to look at animated
cartoon characters who look a lot better
than this guy so tune in next week for
more happy Harry's who's has two's house
twos Harry's
I'll be happy to