(dry swishing
noises) (trumpet fanfare) >> (electronic voice)
TipTut. >> Hello, everybody, and
welcome back to TipTut and the beginning
of a new series. This has been a long
time in the making "Intro to Animate CC,"
formerly known as "Flash." I'm going to take you
through the basics, what tools there are,
how to use them, what the setup is... all the way through to making
our own first little animation that utilizes all the stuff
that we're going to learn. This first episode, I'm
just going to introduce you to everything, and in the second one,
we're going to get into the
nitty-gritty. So let's just dive
right in, then. Animate CC was formerly
known as "Flash." It belongs
to Adobe. However, before that,
it belonged to Macromedia. Just a bit of
history for you. I've been using it since
it was Macromedia Flash, so I've been through
lots of changes. It's a vector-based
2D animation software. What that basically
means is it's designed for animations--
frame-by-frame, tweening, all those sorts
of things. And what "vector" means
is there's two ways that you can render
things digitally on a computer,
classically. There's raster-based, which is
what things like Photoshop use, where things are rendered
in physical pixels, meaning if you scale
or squish or skew them, it loses quality if you
were to accept those changes. What "vector" means is
the shapes and things that you see on the screen are
based on mathematical equations, and when you change the shape,
it simply changes the equation. For example, radius and
circumference of a circle coupled with the color
would form one equation. If you change that color,
then that equation would change
slightly. If you change the
scale of that circle, the radius and
circumference would change. But what it means is,
it isn't fixed, meaning when you
change those, the mathematical
equation changes, not physically hard-coded
pixels are changing which results in
loss in quality. And that doesn't
happen in vector. Things like
Illustrator. They're a vector-based
program, as well. So there are three types of
frame that you work with in Animate CC. And when we talk
about frames, we're talking about
the timeline up here. Essentially, much like
Premiere Pro and After Effects and programs like that,
you have a timeline where your animation
will take place. And if you used
After Effects before, you'll understand there are
things called "keyframes." And what this means
is a point in time where a property
of an object is going
to change. And for that, you
would use a keyframe, which looks like this dark,
filled-in circle here. Each of these little
rectangles represents a frame and, as you can see, these
ones are empty at the moment and these have
objects on them. Now, if you want to repeat what
happened on a previous keyframe, it's just called a "frame,"
which looks blank like this, and what that means is if I just
throw in a few frames here, for example,
with the F5 key, you can see that if I
move between the frames that I have at the moment
of this animation, the content changes because
they are keyframes. Whereas if I move between the
frames that I've just added, the content
stays the same because they are simply
repeating the previous keyframe. And then, finally, you
have blank keyframes which are a point in time
where the object changes but it changes
to nothing. And what you can see
is this final frame in our animation here
is a blank keyframe. There is a change in
properties on the stage, but that change
is to nothing. And that's basically the
three types of framing that you're
going to use. So there are also, then,
two types of animation that you can do when
you're in Animate CC. There is frame-by-frame
and there is tweening. Now, I'll take you through
frame-by-frame first. This is the classical
style of animation that they used back in
the glory days of Disney, since the
beginning of time. You draw a succession
of images, and these are played at speed to
give the illusion of movement. If you needed six
different frames, then you'd need six
different drawings. Now, technically, you can do
things like working on twos, which we'll
get into later, but for the sake
of simplicity, you draw six different pictures,
each slightly different, and you play them at speed
to give the illusion of movement. And that's called
"frame-by-frame animation." The second type
is relatively-- well, I'd say is 100%
locked to computers, which is tweening, which is where you give the
position A of an object, or property A of
an object, rather, and property B. You choose the
amount of time that it has to
animate between that, and then, the
computer generates the rest of the
animations for you. So you only have to
draw two pictures. Now, the drawback
of this is, unless it's incredibly,
incredibly simple, the computer will
get it wrong. But for something like moving
a circle across the screen, tweening works
absolutely fine. And the reason it's called
"tweens" or "tweening" is because it generates
the in-between frames, which are known in
the industry as "tweens" or "tweening." Finally, then, there
are two types of object that you can draw with
on the Animate CC stage. There is paint, which
is what happens when you grab
your paintbrush or your pencil or
anything like that, and you just
draw directly. What you get is this
editable vector path. So you can see,
I can select it and I can actually make
changes post to drawing it. I can move it around and I
can delete sections of it. This is sort of your
basic bog standard... I call it "paint," but
you're painting literally directly onto
the screen. And the second thing you
can do with animate CC is you can group this
paint or your objects or your line work,
whatever you want-- there's lines as well which
are editable and animatable, you know, things
like that. You can take
all of those and you can lock them
inside a symbol, which means-- as you can see,
this works a bit more like a layer in After Effects
or something like that. The object itself
is locked away. You can still adjust
things like the scale and things like
that on a symbol. But what it does is it actually
takes this entire timeline and gives you a separate
inner timeline. So now, if you double-click
on that symbol, you'll see that we go
back to paint mode. You can also see that everything
else is grayed out slightly and my timeline
has changed. That's because I actually
have an inner timeline that is local
to this symbol. So I could do some
animation inside here. Okay, then, I could go
back to my main stage and that animation would
play inside the symbol but I can then apply additional
effects or animations on top of that. So this is useful for
things like lip-syncing-- you can have a symbol with
every state of the mouth that you need it to be, and
then, in your main timeline, you can simply choose the
frames of that symbol to represent the mouth noises
that are on stage. Same thing with sorta eyes
and hands and fingers and things
like that. It's also good if you
want something looping. So it's like precomping, if
you've worked in After Effects. You basically take
an entire timeline and you drop it inside
its own little symbol. So that's really all there is
that we need to talk about at this stage. Of course, there
is so much more but, really, for
the introduction, that's perfectly fine. So let's show
you this, then-- for example, if I
drop a loop in here, and I'm going
to play this, and you can see our
keyframes at work. Now, this is just going
to loop continuously. And this is showing the two
different types of animation that you can do. Up on layer 1, on the
top of the screen, we have frame-by-frame
animation. And now, this document is
at 24 frames per second, and what animators
usually do to save time is they
work on twos, and what that means
is, generally, unless you need something
to have a lot of detail in its animation or if
it's moving very quickly, you will have two
frames per drawing... meaning you only have to
do 12 drawings per second of footage,
rather than 24. That's because you can see
that if I hide this layer, for example,
here, this is a perfectly acceptable
rate of animation. It's fine. And the human eye has sort of
accepted that that's okay. So if you can see here
that all I've done is drawn a new picture
every two frames. And there's things like
squash and stretch, which are animation principles
that are going on here-- this gives the illusion
it's moving faster because I've stretched
it out, but again, we'll talk about that
in future episodes. So what I've done here is
literally draw just 12-- oh, not 12. Um, one, two, three,
four, five, six, seven, eight different
images here. It lasts shortly--
just short of a second, and those eight images,
when played at speed, give the illusion that this ball
is moving across the screen. Okay? Now, the other option
that we have here is our tweening. I have drawn
three stages. I've drawn the ball in
its starting position. I've drawn the ball in
its ending position. And then, I've drawn
the ball in a mid-stage in between the
two, okay? Now, you can turn on a thing
called "Onion Skin," which lets you briefly see
what is before and after. and if I scrub through here,
you can see how this ball moves. Now, all of these
ghost images are generated
by the computer. I haven't had to
draw any of those, which is the benefit
of tweening. So if you can play it,
for example, you get a much
smoother motion because it's technically
working now on ones, so there are, you know,
twice as many frames as there are
on the top one. And if you see the
two side-by-side, you see one is a bit more janky,
one is a lot more smooth. It really does depend on
what kind of animation style it is that
you want. Okay, then, so that's
the basic principles. I don't expect you to
absorb all this at once, but what I do expect is you
to be able to work with me next time to
create this. Now...
(chuckling) yes, it is a
stickman animation, and I'm sorry, but I was
working in Animate CC and I have been for, oh,
far too many years now, and this harks back to the
good old days of Newgrounds and the Xiao Xiao
Stickman fights, and I just couldn't
help myself. It also is
good to show that you don't need a super
complicated animation for something
to look good. A stickman jumping
in the air with flames coming out of
his feet looks just fine. And it does actually explain
all of the principles that we just
talked about. You can see that on some layers,
like the effects layer there, which is all the flames
coming out of his feet, there are blank keyframes
because, you know, drawings aren't needed
for those frames. You can see I've separated
'em out into three layers-- one of them is the red,
one of them is the yellow, and one of them is,
like, the details. And then, you can
see, for example, that on the head of
this stickman here, this is an object,
a symbol. Inside that symbol is just
a single frame of his head. What that means is I don't have
to redraw his head every time, and also his head doesn't
change shape or size. It remains constant
throughout, which is good for
maintaining consistency within your
animation. You can see that on the body
frames, I have paint here. That's all these
little dots over it, which I can manipulate
if I need to. However,
I don't. Again, working on
frame-by-frame animation. You can also see that I have
some guide layers in place, that if I make
them visible, they basically give me
the head of my character and his waistline so that I
don't accidentally squash him and make him-- when
he's over here, I haven't accidentally drawn
him shorter, for example. You can see that he remains
roughly the same size throughout and you can actually just hide
those if you don't need them. And you can see that I've
used motion tweening for his shadow, and, in fact,
I've used a combination of motion tweening
and frame-by-frame to show that the
two can coincide. So his shadow moves with
motion tween there, frame-by-frame
for this section because it was
easier to match up, and then back for the motion
tween for that fast dispatch on the end there. So next time, then, we're going
to look into creating this. And it'll probably take
us a couple of episodes because I'm going
to go nice and slow. I may do a different
animation. I'm probably not
going to copy this because what's
the point? We don't do copying
here at TipTut. We do creating. So I hope you'll join
me next time for that. I'm really excited to
get this series going. Please, please, please,
do make sure-- I know it's such a
YouTube thing to say, but if you do want more, make
sure you "like" this video. It really
does help. Also means that non-TipTutters
will actually be able to find this video
a bit more easily, and hopefully, that will
help the channel to grow. Finally, then, do make
sure that you head over to the Discord community
that we've set up called "The
TipTut Zone." This will be the
perfect place, if you're starting
out for Animate CC, to chat with other people that
are also starting this journey at the same
time as you. And hopefully, you can
converse and share ideas, and just grow together
as artists, and I'd really, really
like to see you there. So thanks very much
for watching, everybody. Let's dive right
in next time. I'll see you then.
(trumpet fanfare) >> (electronic voice)
Remember to subscribe for more tips, tricks,
and tutorials. Thanks for watching.
