ANIMATION 7/8

Quarter 1 Week 7

Module 6
Producing Cleaned-Up and In-Between Drawings (CI) Part 2

Lesson 2
Procedures for Pegging and Unpegging

What is pegging and unpegging? Have you heard it just now? Don’t blame yourself
if you don’t know. There are a lot of technical terms also in Animation. Those two are just
some of those. Pegging is a way of drawing where the layers of drawing papers are
combined together. The top of the layer is a blank paper wherein you can draw and see-
through with the next layer that has the drawing that you are trying to imitate. The
Animators do this to create layers of drawings with different movements on each layer. In
Animate CC, this term is called “Onion Skinning.”

The concept of Onion Skinning is difficult to explain in Animate CC without discussing

the frame by frame animation. The frame is like layers of drawing. Each layer has its own
drawing movements. For example, you want to animate a rolling ball. The first layer or
frame of drawing would be a ball placed at the very left of your stage. The second layer or
frame would be the placement of the ball an inch away to the right. This continues until the
ball reaches the very right of the stage. You would need not only 2-3 frames to do this but
several frames. Let me show you how pegging and unpegging is done in Animate CC.

1. With the Animate CC still open from your previous lesson, draw a circle without a fill on

your stage. You can do this by clicking the Fill Color at the Properties Panel
and selecting the No Fill icon on the pop-up menu that appears when
you click the No Fill icon.

2. In your Timeline if you examine it, there are numbers. The starting number is 1 followed
by 5 then 10 and so on and so forth. These are the containers of frames. Under Number 1,
you can see a tiny circle shaded with black. When you see a small circle shaded with black,
it means that in that frame, there is something on the stage.

3. Click consecutively the File > New > ActionScript 3.0 > Ok tabs to launch a New Untitled
Document in Animation. Look at the frame under Number 1. What have you noticed about
its frame? How does it look? It’s just a tiny circle of stroke without a fill. When you
encounter this kind of frame, it is just a Blank Keyframe. It is the default frame when nothing
is present yet on the stage. Close this tab. You just now have only one Animate Document
Tab with the circle that you previously drew.

4. Click Insert > Timeline> Keyframe to enter a Keyframe. A Keyframe is a kind of frame
that copies the content of the previous frame. In this case, we are copying the circle stroke
from our first frame. Obviously we need to move this a bit to the right about an inch so we
can animate a rolling ball coming from the most left of the stage to the most right. So what
do we need to do? Since the first frame is like our first layer or first page of our animation,
the second frame represents the second layer that we need to make a new drawing. In our
case we don’t need to draw since it is just a moving ball that needs to be placed a bit to the
right on our second layer. We just need to copy the content of the first frame and move the

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
1
ball a bit on our second frame. This is why we have inserted a Keyframe and not a Blank
Keyframe. If we do the latter, we have to draw from scratch.

5. Make sure that our playhead is on the second frame. The playhead is the longest
vertical red line on our Timeline. If it’s not there, simply click the second frame. Click the
stroke of the circle to select it then click and drag this to the right about an inch.

6. Insert a Keyframe again to our third frame. Do you remember what happens when we are
inserting a Keyframe? It copies the content of the most previous frame. Move the ball to the
right about an inch further and keep inserting Keyframes and moving the ball to the right
until it reaches the most right of our stage. As for me, it only took me 4 frames to move my
ball from the most left to the most right of the stage.

7. Press the enter on your keyboard to play your first animation. What have you noticed?
The ball moves from the most left to the most right in a jiffy. We don’t want an Animation as
fast as this. So what do we do then? We need to make an adjustment to our Timeline. The
default speed of our Timeline is 24 fps or frames per second. It means that it will take a
second for our Playhead to travel from frame 1 to 24. Of course, if you have few frames, it
will be less than a second.

8. Click the Selection Tool at the Toolbox then click and adjust your FPS value

at the Properties Panel. Enter a value of 12 first then press enter on your
keyboard. What do you notice? The animation got a bit slower compared to the previous
one. Now enter a value of 6 to our FPS. What happened to the speed of our Animation? It
got slower even more. These methods slow our Animation but it’s not a good practice. The
good practice for this Animation would be to increase the number of frames. This is what we
are going to do.

9. Click Frame 2 then click Shift. Don’t let go of the Shift. While you’re pressing the Shift,
click Frame 4 or the last Frame in your Timeline if you have more than 4. While the Frame 2
to Frame 4 (or your last frame) are highlighted, click and drag the frames to Frame 10.
What have you noticed? Frames 2 to 4 (or your last frame) moved to Frame 10. After this,
click Frame 11 then press Shift. Keep holding the Shift then click the last Frame so we can
select the frames we are going to move. While Frames 11 to the last frame are highlighted,
click and drag it to Frame 20. What have you noticed? We just moved the remaining
frames to Frame 20. Keep doing this until all the frames have distances of 9 frames from
each other. The Frame Numbers 10, 20, 30, etc. (depending on how many frames you
have) must have its own frame under them. Your Timeline should look like this.

10.Now press enter. What have you noticed? Your Animation has been further improved.
We are going to set back our FPS to 24. Our Menu is context-sensitive. To access the
FPS, click first the Selection Tool at the Toolbox and adjust the FPS on your Properties
Panel.

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
2
Pegging and Unpegging Proper

11. Like what I have already discussed, pegging is copying the content of the previous
drawing layer and changing some of its features to make it look as if the motion has
changed from the top layer to the next. To do this on Animation CC, we are going to use its
Onion Skinning function. Going back to the picture of the Timeline above, there is an icon
there encircled. That’s the Onion Skinning icon. Click it and watch what will happen. Two
parentheses appeared on top of your Timeline. One is an open parenthesis and the other is
a close parenthesis. Click and drag the open parenthesis to the most left on Frame 1 to
encapsulate all the frames just like what you see on the picture below.

12. What have you noticed on your Stage now? All the drawings on your layers got visible
but only outlined. This is the Onion Skin function of Animate CC. This is what pegging is all
about in a traditional drawing. Since you can see the outline of all our drawings when you
use Onion Skinning, you can make changes on that specific frame that needs corrections.
Look at the Animate Stage below and what do you notice?

The distance between the circles was not properly distributed. Since you are in an Onion
Skinning Mode, you can see that the second and third circle must be moved a little. Go to
the frame containing the second circle, which is the Frame 10, and move the circle in here a
bit to the left so it is much closer to the first circle. After this select Frame 20 and move the
circle in here also a bit to the left in relation to the second circle. Do this until all the circles
have equal distances to each other.

13. Click the Onion Skin icon again to do the unpegging.

14. Save this file and give it the name ANIMATION1.

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
3
 Draw an in-between drawing of a simple car and animate it in Animate CC. The
animation should last for at least 2 seconds.

Write the word “True” if the statement is true and “False” if the statement is false. Use the
space provided.

1. __________. Pegging is a way of drawing where the layers of drawing papers are
combined together
2. __________. The concept of Onion Skinning is difficult to explain in Animate CC
without discussing the frame by frame animation.
3. __________. The frame is like layers of drawing
4. __________. The default speed of our Timeline is 24 fps or frames per second.
5. __________. The playhead is the longest vertical red line on our Timeline.

Lesson 3
Design Standards in Producing In-Between Drawing
Since we are using Animate CC, the kind of drawing that we will usually produce are
those in-between and those Animation created by the software although we have time a little
later to discuss clean-up drawings. There are several standards in producing in-between
drawings or Animations:

1. Animations should not be an afterthought. If you have created a website and it was
designed well with a good heading, buttons, and a body but later on you feel you
need an Animation on it to make more appealing to the people, then, the Animation
just appears to be an accessory and your website viewers might just ignore it
especially when they are bombarded with many information on your website. The
moment you start to build a website, Animations should already be a part of it. You
also have to make your viewers realize that it is a part of your project and it’s not just
an accessory that they can simply skip.

2. Animations must have its own purpose. At the very start of the project, you must
have the objectives set up for that so when you are done, you have a basis for your
evaluation. Why are you putting Animations in your project? Some Animators use it
to make animated announcements and some use it for interactive buttons on their
website. If the Animations have an objective and let us say you used it to make
announcements, you can evaluate how the Animations were effective in carrying out
announcements. If it’s not effective, probably the most effective way of carrying out
an announcement is through videos and not by animation.

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
4
3. Animations should provide proper content. The viewers of your Animation navigate
on your project. You have to provide them with some context that they are already on
another topic of your project and not just proceeding to the next part of the same
page. A good way to do this would be flashing the entire screen of a strong color. If
you have just an animated arrow, your view must just think that they are just going to
the next part of the same page or topic. The definition of page is different in this
context.

4. Animations should provide proper orientation. The term UI is used by the IT industry
to mean User Interface. This is the design structure of the project. If you are going to
visit different websites, some of them have headings, buttons, bodies, and footers
while some have only headings, buttons, and bodies. With the Animations you are
creating, elements on your websites could clutter and distract your viewers. There
should be a proper orientation as to where the Animations should come from and how
they should end. If you click an animated button list as a part of your heading,
viewers expect that when they click that particular button, the button list will expand
from top to bottom and not make the list flash to the right of that button. They also
expect that when they move their mouse away, the buttons will automatically
collapse. The UI of the viewers should always make them at ease to keep viewing
your project.

5. Animations should provide proper instant feedback. You have to give your viewers
that they are already on a different part of your animation. You can say welcome to
the contact us page of our website.

6. Animations should make the content alive. By providing live components of your
projects like blogs and web counters, you give your viewers some entertainment to
ease their boredom.

7. Animations should storytell something. There are a lot of words you can better
express if you utilize animations like how your project should begin, develop, and
end.

8. Animations should reflect a brand. You can make a personality out of your Animation
and this serves as your brand. If you named your company Orange and Lemon, you
could probably have a brand of Animations wherein you only focus on the colors of
Orange and Lemon

9. .Animations should not be everything. Don’t force your viewers just to watch your
Animations. You should give them the whole experience of visiting your website or
your project. If your Animation is short but detailed, your viewers still have time to
explore the other part of your website or your project.

10. Animations must behave naturally. Too fast or too slow Animations do not behave
naturally. The movement should just be fine.

11. Animations must not waste the time of your viewers. If you can provide a streaming
animation where some parts of it are already usable while waiting for the rest part of
the animation to load, then it is a good practice as you don’t waste the time of your
viewers.

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
5
Activity 3

Use a separate sheet of paper and answer the following:

1. List the design standards in producing in-between drawing and give your own
explanation for each item. You can work with your relatives or neighbors in your
sentence construction.
2. Take a photo of your group while working and post it to your social media account
with the hashtag #sdocaloocandesignstandards.

Write the word “True” if the statement is true and “False” if the statement is false. Use the
space provided.

1. Animations should not be an afterthought.

2. At the very start of the project, you must have the objectives set up for that so when
you are done, you have a basis for your evaluation.
3. The term UI is used by the IT industry to mean User Interface.
4. Animations should reflect a brand.
5. Animations must not waste the time of your viewers.

Note: If you score 50% or more of the Self-check, then, you’re learning just right.
Otherwise, you might want to spend some time reading the text and re-taking the quiz until
you gain the mastery of the lesson.

Lesson 4
Clean-Up Vs. In-Between Drawings
We have already defined what is in-between drawing on our previous lesson. This
time we are going to compare it with clean-up drawing. So another technical term huh? Do
not fret. A clean-up drawing is simply the final cut of your drawing workflow. After an
Animator creates those in-between drawings and it has passed the pencil test, that process
when you take photos of your traditional drawing using an animation camera, the final touch
will be applied to it by a team of artists. When we say clean-up drawing, it doesn’t mean you
will clean the edges of your drawings but rather review how the animation sheets render
from its first sheet to its last and also, if it passes the technical specifications needed by the
industry.

Similarities and differences between Clean-up and In-between drawings

On the similarities side, you still have to draw animations on both clean-up and in-
between drawing workflow. You still have to be creative and intuitive for both of two.
Breaking of animations into scenes and adding frames on your Animate CC are also a part
of them.
____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
6
On the differences side, it would be the refinement of ideas and the use of different gadgets
like the use of animation cameras. You are not using this when you are just on the in-
between drawing stage yet.

How to produce in-between drawings (cartoon-regular) based on the guidelines

In the previous lesson of pegging and unpegging, basically we have already

discussed how to make an in-between drawing using Animate CC. But this is not yet the
end of the production. We still have to export our file and decide what we want on our final
product. Probably you want to export this to html5 and simply just a standalone Animation.
To export a file in Animate CC, you have to do some steps.

1. Your file ANIMATION1 must still be open. If not, go ahead and locate that file to open
it. Click File > Export > Export Video > Export. Before clicking the final Export tab,
make sure that you agree with its final settings. Otherwise, make the necessary
adjustments.

But how about producing the in-between drawing for a traditional cartoon-regular
drawing? What should be the process? If you have a whole episode of animation, you
would try to break it down first. You could create probably different scenes for that. From
each scene, create your different layers of the drawing. Start with your first layer then trace
this with the second layer to gradually produce different drawing layers of different
movements. Review all the layers on the different scenes and decide which ones to keep,
which ones to eliminate, and which ones need refinement. Color your Animation drawings
and that’s it. Clean-up drawing would be the last step to finalize your Animation.

Creating drawings following the details of exposure sheets

Just what are those exposure sheets? These are papers or a piece of paper that
directs the exposure of your animation figures to an animation camera. The final production
of your animation would probably include background sound and some conversations
between characters in your animation. In this case, some animation sheets would need to
be exposed much longer on camera than others. If you arrange your animation sheets and
give them consecutive numbers, let us say 1-50, you are to write on your exposure sheet the
animation sheet number and how much time should they be exposed on an animation
camera. For example, animation sheets or layers 1 - 5 would be exposed in 1 second while
animation sheets or layers 6-10 would be in 2 seconds.

Activity 4

Use a separate sheet of paper and answer the following:

1. Explain the similarities and differences between clean-up drawing and in-between
drawing.
2. Take a photo of you while working and post it to your social media account with the
hashtag #sdocaloocancleanupandinbetween

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
7
Write the word “True” if the statement is true and “False” if the statement is false. Use the
space provided.

1. A clean-up drawing is simply the final cut of your drawing workflow.

2. That process when you take photos of your traditional drawing using an animation
camera is called a pencil test.
3. When we say clean-up drawing, it doesn’t mean you will clean the edges of your
drawings but rather review how the animation sheets render from its first sheet to its
last and also, if it passes the technical specifications needed by the industry.
4. You still have to draw animations on both clean-up and in-between drawing workflow.
5. Clean-up drawing would be the last step to finalize your Animation.

Note: If you score 50% or more of the Self-check, then, you’re learning just right.
Otherwise, you might want to spend some time reading the text and re-taking the quiz until
you gain the mastery of the lesson.

Lesson 5
Different Special Effects in Producing Drawing
If you enjoyed the actual drawings of our animation on our previous lessons, you will
much enjoy this part. Why? Because we are going to apply different special effects on the
animation we are drawing. We are just going to focus on the use of Animate CC as the
traditional animation has also its own ways of rendering special effects. I wish I had more
time to discuss Animation but this is just an introduction course you know.

Special Effect #1 - Shape Tweening.

1. Click File > New > ActionScript 3.0 > Ok to create a new document in Animate CC.
2. Click your Oval Tool at the Toolbox. Your Playhead should be at Frame 1
before you draw your circle. Set the fill of the color to red. Click and drag on your
stage to draw a circle with a red fill.
3. Click to Frame 20 to move your playhead there. Click Insert > Timeline > Keyframe
to insert a Keyframe to Frame 20. Double-click the circle on stage at Frame 20 and
drag it to the most right of the stage. Then, change the fill color from red to white.
4. Press enter on your keyboard. What do you notice? The red ball stands there and
changes to white all of the sudden at Frame 20. We have to fill in some layers of
animation to make the transformation smooth. We have to make the circle move
from left to right and while it is moving, the color will change from red to white. How
can we do this? Good thing there is a command in Animate CC that is called Shape
Tweening.
5. Click anywhere between Frame 1 and 20 and the playhead goes with it. Now click
Insert > Shape Tween. Press enter and watch what will happen with our Animation.
Congrats. You got the exact effect that we want in our animation.
6. Save this file and name it ANIMATION2.

____________________________________________________________________________
TLE 7/8-ANIMATION AUTHOR /
Quarter 1-Week 7 TEAM LEADER: ROMEO N. PARAS
8