Intro to Adobe Animate [Part 1] | Tutorial

Intro to Adobe Animate [Part 1] | Tutorial


(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.

David Anderson

Related Posts

100 thoughts on “Intro to Adobe Animate [Part 1] | Tutorial

  1. Tempest Frost says:

    Great tutorial. I did have to stop around the two minute mark and recheck the title. I was sure it read, "Intro to Adobe Animate". However, the longer I watched the more uncertain I became. It was starting to sound more like, "Intro to Adobe Theoretical Physics CC. Inverted Quadratic Equations and How to Solve Them… Made Easy!" lol. Just bustin' ya chops mate. Nice vid:)

  2. AMD Ask My Dad says:

    what app do u use?

  3. jp Penos says:

    "Sorry I know it's only a stickman animation." Man that's awesome!!

  4. Hernán Nieto says:

    Hey man when I was 12 I was both learning guitar and Flash 5. Eventually I chose music, but now I'm 26 and I was thinking about getting Adobe Animate and start learning it again, do it as a hobby… And also, I LOVE stick animation, was very mucho into Xiao Xiao's, Madness, Bunny Kill, all of that jaja, anyway, you made me go back to those years… I'll suscribe now so I can see al your content. Cheers !

  5. Lefty Ohhh says:

    Great video! Excited to learn a bunch from this series!

  6. julsar calonia says:

    Do you have free installer of that?

  7. Fedora Froggit says:

    nevermind, deleted the comment cause i just saw you say how

  8. Beast n' Brushes says:

    newgrounds and stick death references?…Sign me in please

  9. Valkyron says:

    Your voice makes me feel things, dude

  10. Teresa Hernández says:

    Good video. You did a great job and I’ll be watching all of these!

  11. Kathyanne White says:

    Really liked this- just starting on the learning curve for animation and found your tutorial – very helpful!!

  12. Pavel Lelin says:

    You sound a lot like blender guru

  13. Alex Delker says:

    Excellent series, thank you!

  14. iZprodigy says:

    wish you showed us how to draw a stick man lol

  15. Kaspars says:

    WOW, THIS IS BEYOND BAD TUTORIAL MAN. I dont understand a shit u sayin.

  16. Rich says:

    Thank you for the video! I will have to consider using this for animation. I don't draw with a mouse so it's unlikely on my PC.

  17. The beast and the west says:

    Is it free app ?

  18. Bone Daddy 69420 says:

    this guy makes me wanna marry him, such a good tutorial.

  19. Victor Westmann says:

    Really cool vid and really well explained. Thank you for taking your time to teach us about Adobe Animate. +1.

  20. Berke Özkır says:

    Better than any paid classes.

  21. pickledneuron says:

    Would be awesome if you could do more complex tutorials on Animate. Great intro!

  22. eleanormaywood says:

    this was far too quick, you also didn't talk us through which buttons you were pressing when selecting tools etc.

  23. Epic J Creations says:

    Great tutorial man! Really liked it! Well done!

  24. RunOs says:

    That was very educational. Thank you for the lesson.

  25. BigByte Tech says:

    Wait, how is it 28th month?!

  26. John Gullu says:

    This is one of the best tutorials that i have ever seen. You teach very good and this is very helpful.

  27. Kristjan says:

    this one isn't for beginners, sorry

  28. PetersTravels1 says:

    The circle animation created by tweening is not really smooth.
    I am needing to have a tall rectangle move sideways slowly across the page.
    Is Animate suitable for this or is there something else you can recommend, please?
    For example the videos Eugene Khutoryansky created using Poser are smooth. However I suspect that they are beyond my ability.

  29. Sirloin Films says:

    This is what I've been looking for, someone who can help me get started without bogging me down with too much. Great tutorial and I can't wait to get started on the second one of your series. Nice one ?

  30. Noble Maai says:

    thank you

  31. Jon Griffin says:

    Fantastic! I do understand what you're saying and I really appreciate your delivery!! Great tutorial.

  32. Wyan says:

    very well explained

  33. Reasey Pinnorak says:

    I can understand why Kaspars Olehno don't understand. Because in the video the speaker's examples is too complicated for who is a very beginner.

  34. PenWielder Magic says:

    I can't get my mac to do anything with the f commands. Any suggestions?

  35. Reem Al Rowaie says:

    Thank you for this video, I am learning a lot I really appreciate it ..

  36. Artsy Gala says:

    how do u move the orange thingg

  37. DotDotCom says:

    It was a great tutorial! Good Job.

  38. DotDotCom says:

    You are the youtuber that I think of when I want a good tutorial of adobe. I love the stick figure animation!

  39. Chris Tucci says:

    Great tutorial, thanks!

  40. Предраг Николић says:

    I have a question ,i would like to make remake history like battles and wars ,and i need a map .So could i just put finish pictures in and ad couple of flags and make them move you know like an army going from one region to another ?Please it would mean a lot to me i like your work but i m not such a artist like you are so can't really draw .Like from me .

  41. Luggnutt Keyz says:

    very clear and easy to understand!

  42. Radio Active says:

    Thank you very much for these 6 episodes you did I really appreciate that thank you

  43. Elpropapu 12 says:

    Mira pedaso de ortro esste programa vale medio kilo de huevo, es complicadop de usar y me importa 5 pepinos cubicos de verga la mierda que haga la gente con esta porqueria, perdon amigo pero estoy hasta el re orto de esta put a porqueria, tu video de asco, tu canal da asco y este programa cancerigeno me da gonorrea, eta mejor descargar porno en la dip guev qyuue ver tyu puto video de miuerda en el que explicas mas mierda de la que ya ya eresllevo perdidas seis putas horas tratandoi de borrar 14 putas frames y no her podido porqueria de programa, da cancer.-

  44. Raze Box Animations says:

    What is better Adobe Animate or Macromedia flash 8 ?

  45. Jessica Ambadipudi says:

    This a really well explained ! thanks dude!!!

  46. Muhammad Dawood says:

    how in the world are you adding frames

  47. 【jaavice】 says:

    Is it possible to just import an image then add some sort of skeleton like in unity, then move each limb without having to redraw?

  48. Funky Garcia says:

    ihave a question,,, i cant move that red line or key anything, im fustrated

  49. Julie Julie says:

    Awesome!!! Thank you this is so useful.

  50. Berkant Fidan says:

    what is the name of the font used in the start video

  51. Erick Lestrange says:

    programmer here, if anyone wanna collaborate in webdesign or games contact me through www.mr-programs.com or here

  52. Greg Norman says:

    Nice. Simple, informative and at a pace that keeps interest. Thank You!

  53. Annette Ferguson says:

    Thank you so much, this is awesome. Great introduction and just what I needed.

  54. Peter Mosciaro says:

    thanks for the video

  55. Weed Trehman says:

    I approve this channell

  56. Home Boy says:

    This is so helpful. Thanks.

  57. Lucas Marcou says:

    tank u so much

  58. Policedriver Studios says:

    LOL bit torrent open ?

  59. StefAnimation says:

    FINALLY, a normal tutorial about Animate CC and basics of animation.. most tutorials I run into start with how to make a dude do a double backflip and how to organise your 648 layers for your 3 sec animation.. thank you man

  60. chacon says:

    Great video. just subscribed. Question: Can you import animations into Adobe Premier pro?

  61. Cassidy Faith says:

    Him: And what vector means is sghowbvlskdgbvelwivbelwknfrbskfn.
    Me: So basically, it means when you zoom in it doesn't lose quality and the math equation changes.
    LOL this is a great vid and perfect for beginners (like me) who were just introduced to Animate CC and want to learn how to use it!

  62. Palerider says:

    Your stickman resizes, otherwise nice animation

  63. GAMEr DuDe says:

    HOW DO YOU MAKE A FILE NOT JUST BLACK

  64. Nikki Druiven says:

    This is exactly the tutorial I needed. Thank you so much. Very clear and helpful.

  65. Scott Burgess says:

    Excellent intro to animation for us beginners. You have a great voice for teaching tech—articulate and entertaining. Well done.

  66. L says:

    thank you for making this!

  67. Eneas Hållsten says:

    So good series of tutorials, just amazing! Excellent explaining

  68. TA Lindsay says:

    I totally needed the "stickman" animation today!!!! Carrying on to Part 2! Xo

  69. ChaosBacon says:

    This is awesome! Your teaching style is very soothing 🙂

  70. Wacky User says:

    Honestly the best Animate CC tutorial I have ever been able to find. You actually go through every step a beginner would need to know and explain it in a very understandable and swift manner. Thanks so much for these! 😀

  71. Jonas Rocha says:

    Thank you

  72. ursula fuschini says:

    can you explain how to do twining

  73. Toys R Fun says:

    Best of all tutorials 🙂

  74. Al Ste says:

    Great tutorial. Thanks very much

  75. Margaret Mohally says:

    Just starting out in animate cc thanks a million

  76. উনকনওন ইউটিউবের says:

    অই হালার পুত।এত কথা কস ক্যান।যা কওয়ার বল।

  77. misterJ YT says:

    thank you brother,, I will watch your tutorials to start my journey to creating animations

  78. Chek Romlek says:

    This what I'm looking for, appreciate

  79. RadRich says:

    Cool. Can't believe it's been 20 years since the old Flash 3 and Flash 4 days.

  80. Qie says:

    Uwu his voice~

  81. UMaleez z says:

    شكراً لك

  82. Pryanka Pikalih says:

    Adobe animate can specification for RAM 4GB and Nvidia Gforce ??? Cuz after effect need for RAM 8GB

  83. TangTang Productions says:

    Was expecting to see new features of Adobe animate, but large portion of video showcase basic feature available on Adobe flash

  84. GoatyFloaty2 says:

    Helllooo

  85. Derpy Donut says:

    Finally a clear and nice toutorial

  86. J Mikey Fajota says:

    TupTit

  87. Luvkush 4041 says:

    Can you please tell me the font name which u to write 'key frames and blank tools'

  88. Manomia Designs says:

    Its very effective…like everything in flash

  89. sweiland75 says:

    How does YouTube display animations you created in Adobe Animate, since YouTube stopped supporting Flash?

  90. Darshan says:

    Nice and short

  91. tk tech says:

    Wow, this was a very informative video

  92. Mr Mewlax says:

    You didnt even say how to add frames!!

  93. Ruli Ilham says:

    Sorry sir i want ask
    1. Is there any changes between flash and animate sir ? Or still same because the name flash turn to Animate..
    2. Is Adobe Air still work for Adobe Animate ?
    Sorry my English so bad

  94. Saiful Islam says:

    Excellent work 🙂

  95. BunnyVidsYT says:

    Just got Adobe Animate yesterday so it's very nice knowing there's lots of tutorials out there to help me. Heck I didn't even know how to create a new frame when I first opened up the program lol. I've spent my 5 years animating on FlipAClip so this is very different for me but I'm putting in the time and energy to learn :3

  96. MD MONIRUL ISLAM says:

    Great work.thank you for your hardwork.Need more animate tutorial

  97. Matthew Fasken says:

    I remember the good ole days of Macromedia Flash and Dreamweaver. I'm excited to get going in Animate CC. Great start on the tutorial thanks for doing this.

  98. Arfan Tariq says:

    Which verision is this ? 2015 0r ….?

Leave a Reply

Your email address will not be published. Required fields are marked *