Adobe Animate CC: Frame by Frame Animation
Articles Blog

Adobe Animate CC: Frame by Frame Animation

October 16, 2019

In this video, we’ll look at how to do a
Frame-by-Frame animation in Adobe Animate. And we’ll also look at something called
“Motion Tweens.” To follow along with this video, you’ll
need to create a new HTML 5 Canvas or an ActionScript 3.0 project. And you’ll need to import Frames
1 through 8 of the horse animation. If you did it correctly, you’ll see them
in your library. Before we start animating, we’re going to
create something called a Symbol. A Symbol is a way to organize our animation. So, let’s go ahead and create a Symbol and
you’ll see how it works. To do this, go to the Insert menu and choose
New Symbol. You can also use the shortcut CTRL-F8 on Windows (or Command F8 on a Mac). Let’s name it “Horse”. For now, make
sure the Type is “Movie Clip”. Click OK. And now, if we click over to the Library tab,
you’ll see the Horse symbol we just created. It’s the one with a little gear icon on
it. The Library is a place that we can create the different assets we’re going to use
in our animations. And, notice something else. The main canvas
(also called the Stage) has changed. What happened is, we are now inside the Horse
symbol. So anything we draw here is part of the symbol, NOT Scene 1. Symbols also have their own timeline. So when
we’re inside the Horse symbol, the timeline down here is only for the symbol. If I want to get out of the symbol, I can
just click here where it says “Scene 1”. Now the timeline below is for Scene 1. But we’re going to do our Frame-by-Frame
animation inside the Horse symbol. So to get back inside, all you need to do is double-click
the Horse symbol in the Library. So now, we’re back inside the Horse symbol. Now, how do we animate the horse? Well, we need some keyframes. But this time,
we’re going to do a Frame-by-Frame animation. This means we have to create every frame of
the animation—there are no tweens. So that means every frame needs to be a keyframe. It may sound difficult, but it’s actually
pretty simple. Let’s take a look. To start out, go to the Library and drag Horse-Frame1.png
onto the symbol’s drawing area. Now when you’re doing Frame-by-Frame animation,
it’s important that all your frames line up exactly. Otherwise, your animation will
jump around and won’t look right. To do this, click on the horse. Then go to
the Properties tab, and where it says Position and Size, set both X and Y to ZERO. In graphics programs, X and Y are position
coordinates. X is horizontal (left and right), and Y is vertical (up and down). So we’ve set them to zero. Next, click on Frame 2 on the Symbol timeline…and
hit F6 to insert a new keyframe. Now that we’re on Frame 2, select and delete
the horse from the drawing area. (You can just press the Delete key on your keyboard) Then, go back to the Library and drag Frame2
onto the drawing area. Make sure both X and Y are ZERO. Then click Frame 3 in the Symbol timeline…hit
F6 to create a keyframe…then delete the horse… And then drag Frame 3 to the drawing area. Set X and Y to zero. And do the same for each of the Frames…until
you get through Frame 8. I’ll go ahead and do the rest of them now. Now, if you press the Play button on the Symbol
timeline, you’ll see that we have a smooth animation. Let’s go back to the main Stage for Scene
1. So, our Stage is still empty. The animation
is completely contained inside the Symbol. We can actually preview it in the Library.
Select Horse and then go up here and press the play button. Now, to use this animation, just drag the
Horse symbol onto the Stage. Let’s test it. Go to Control and choose
Test. And then we get a preview in our browser window,
and we can see that we have a nice running horse. The nice thing about Symbols is that they
can be reused. So I can drag another horse onto the stage
if I want… Preview again. Control->Test… And now we have 2 horses with no additional
work. One more thing. Wouldn’t it be nice if we
could get the horse to run across the stage? Let’s delete the second horse for now. And then let’s drag the horse to the left,
so he starts off-stage. Notice that the Scene 1 timeline is currently
on Frame 1, and the little black dot tells us that it already has a keyframe on it. Now, right-click on Frame 1, and choose “Create
Motion Tween”. Notice that the first 24 frames of the timeline have turned blue. Also,
the timeline cursor has jumped to Frame 24. Next, click on the horse, and drag him to
the other side of the stage. When you let go of the mouse button, two things
happen. A blue line shows up on the drawing area. This shows the path of our moving object. The second thing is that Animate automatically
adds a keyframe to Frame 24. Control->Test again… And now, we have a looping animation of a
horse that runs across the screen. You can tweak it some more. Click any of the
points on the motion path, and drag… And now, my horse does a flying leap!

Only registered users can comment.

  1. i havea question anyone plzzz tell me how to i got render of the video by this process because when i do this process the horse is still not animated
    Professor Michael Steffen
    plzzz any one have a suggestion then give it to plzzz

  2. this running horse animation in after effects would take10 seconds, just select the first image and create image sequence, just saying, seems like an odd use of Animate.

  3. The animation frames are from: I used Photoshop to extract them.

  4. Best Adobe Animate tutorials ever! Thank you for thoroughly explaining what you're doing and going slow enough for us to follow along.

  5. thanks for all your help! really useful. and the speed and demonstration as you go is exactly what i need as a beginner 🙂

  6. how to control an animate adobe animation with the browser bar, to lower the sidebar of the web browser and start the animation … stop the bar and stop the animation … raise the bar and the animation goes backwards … it's possible? I could do it with adobe muse using .oam files … but now I do not know how to use that in wordpress … is there a way?

Leave a Reply

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