In this module, participants will learn four of Disney's twelve classic animation principles and apply them while creating a portfolio of one of the Internet's most popular image types, the animated GIF. During each session, participants are required to show their finished animation as well as comment on other participants' works. This will help ensure that everyone learns through interacting with others. Participants will also conduct a peer review, after which they can make changes to their work before sharing their entire portfolio during the last session.
Animation, Drawing, GIF, GIF89a, Animated GIF, Squash and Stretch, Exaggeration, Arcs, Frames, Slow in and Slow out, Communities of Practice, Social Constructivism, Low-Threshold High-Ceiling
Estimated Time to Complete: Six 30-40-minute sessions
In this module, participants will learn four of Disney's twelve classic animation principles and apply them while creating a portfolio of one of the Internet's most popular image types, the animated GIF.
The first five sessions feature videos, readings, and interactive elements to aid the learning process. The idea of drawing can be intimidating to some, so each lesson is designed to be low threshold high ceiling, meaning anyone who can draw a circle can succeed and those who want to go further are encouraged. During each session, participants are required to show their finished artwork, and in most sessions, they'll also comment on at least two other participants' works. This will help ensure that everyone learns through interacting with others, which is a tenet of social constructivism. Participants will also conduct a peer review, after which they can make changes to their work before sharing their entire portfolio during the last session.
About the Author:
I am a former professor of 3D modeling and animation, and also a website developer who loves a good animated GIF. As a child, I watched cartoons incessantly and loved making flipbook animations. This is my second learning module in a series aimed at helping children connect with their creativity, and I am excited that it could help a budding animator hone their skills through a contemporary artform.
This module was designed for 4th grade students with an interest in learning:
Learning Objectives:
By the end of the module, you should be able to:
Skills/Experience Required:
Materials:
Optional Materials:
Grading (Up to 100 points) | |
---|---|
A new lesson will be posted at the start of each session. In those lessons, you'll find videos, reading materials, interactive elements, and assignments. Your assignments can be found in the section called "Keyframes" and each type of assignment will be listed as a different "Frame." The list below shows how you'll be graded on your assignments. | |
Complete the pre-course survey | 5 points |
Comment at least ten times | 1 point per comment, up to 10 points |
Finish your peer review project | 20 points |
Provide feedback in a peer review | 10 points |
Show your portfolio of required work | 10 points per work, up to 50 points |
Complete the session 6 quiz | 5 points |
This module was designed to be facilitated by instructors with an interest in:
Learning Objectives:
By the end of the module, participants should be able to:
Skills/Experience Required:
Materials:
Optional Materials:
National Core Arts Standards:
The content and activities in this module were developed to address the following National Core Arts Standards:
VISUAL ARTS - CREATING
VISUAL ARTS - RESPONDING
Assessment Criteria | |
---|---|
Completion of pre-course survey | 5% (the survey sets a baseline to measure knowledge acquisition) |
At least ten comments in the community | 10% (one percentage point per comment, not to exceed 10 points) |
Peer review project completed | 20% |
Peer review completed | 10% |
Portfolio | 50% (each work in the portfolio counts as 10 percentage points and is to be assessed with a rubric) |
Completion of session 6 quiz | 5% (the quiz is to assess the average amount of knowledge gained by taking the course, for the purpose of measuring future changes to course material) |
You've probably watched animations, but before we get started, I'd like to get an idea of what you know about how they're made. Please complete this short, two question survey, so I can get to know you better. Thanks!
Before posting the Session 1 Participant content, survey participants on their existing knowledge of animation principles. A similar quiz will be taken at the end of the module, to gauge the degree of knowledge acquisition.
Welcome to the Creating the Illusion of Life module! Do you have a favorite cartoon or animated film? I do. Sometimes I like to draw the characters, even if my drawings don't look as good as the originals. We're going to draw a lot during these six sessions, but don't be afraid if you can't draw as well as a Disney artist. We'll keep it simple.
Did you know that Mickey Mouse is over 90 years old? The same artists who created Mickey Mouse and a lot of other characters at the Walt Disney Animation Studios also came up with twelve principles for how those characters should move, in order to give them the illusion of life. Making your drawings look like they're moving is exactly what animation is, and over these six sessions, you'll be introduced to four of those twelve principles. You'll also create a series of animated GIFs that show off your new skills. Even if you don't go on to become a Disney animator, the skills you learn can be applied to all types of animations from explaining scientific concepts that aren't easy to see to characters moving in a video game.
Before we start drawing, let's watch this video so we can appreciate how Disney made cartoons:
wwodtv. (2010, March 10). How Walt Disney Cartoons Are Made (Burbank version) [Video]. YouTube. https://www.youtube.com/watch?v=ycU8BhfEs_I
Did you notice how animation ideas are discussed by teams, even before the animation starts? You'll get to animate some of your own ideas during these sessions, but we'll also give each other feedback to inspire new ideas. After all, we're learning this together as a community.
The tool you'll use to create your animations is called Brush Ninja. Please watch this brief tutorial to learn its basic functions. To complete the session 1 work, you'll need to know how to use the drawing tool, add frames, and export your animation.
Byrne, R. (2018, July 27). How to create an animated GIF on Brush Ninja [Video]. YouTube. https://www.youtube.com/watch?v=CfE1cu8Cw1o
Now that you know some animation history and you have a tool to create animations, let's get to work. Review the rough sketch section, then make your update, before finally adding your comments.
Rough Sketch | |
---|---|
Newton, P. (2015, Oct 14). Animation for beginners: How to animate a bouncing ball! [Online Image]. Retrieved March 11, 2021, from https://design.tutsplus.com/tutorials/animation-for-beginners-how-to-animate-a-bouncing-ball--cms-24787 |
Look at this animated GIF of a bouncing ball. Without any color or details, can you tell:
Even when you're animating something as simple as a ball, these are some of the questions that color and details can help answer.
|
Frame 1: Make an Update |
Export both items from Brush Ninja as animated GIFs, then add them to your update. Please put the session number and your name on the update. Tip: Save your Brush Ninja files. Each animated GIF you create counts towards your grade and you can go back to update animations whenever you want. |
Frame 2: Comment in the Community |
|
Lesson Overview:
Participants will watch a video on the history of Disney animation, followed by another video familiarizing them with a free, online tool for making animated GIFs, called Brush Ninja. Before participants begin animating, in the Rough Sketch section, they're prompted to analyze different aspects of an animated GIF, so they may visualize their animation ideas before making them. As participants create their animations, they can immediately play them within Brush Ninja for self-assessment.
To ease participants into working with Brush Ninja, the first task in the update encourages them to explore as many of Brush Ninja's tools as possible. The outcome of that exploration will be posted online along with their finished animation. By posting work online regularly, other participants may be inspired or inquire about technique in the comments. Commenting is encouraged throughout the module, so that students receive regular feedback on their work.
Lesson Objective(s):
By the end of the lesson, participants should be able to:
National Core Arts Standard(s):
Teaching Tip:
In the comments, encourage participants to think about a range of different ball-shaped objects. You will likely get comments about sports balls, but what about a piece of paper or aluminum foil crumpled into a ball. Some other suggestions might include marbles, a ball of yarn, a wadded-up ball of gum, a rubber band ball, a snowball, or even a meatball.
I encourage instructors to become familiar with Brush Ninja before posting the first update.
The most commonly used tools for drawing animations will be:
Work smarter, not harder:
Did you ever think you would draw eighteen pictures of a ball, just to see it move for three seconds? Each drawing in our Brush Ninja animation was a single frame and there were six frames per second. 6 frames x 3 seconds = 18 frames. How many frames would a one-minute animation have? How about a thirty-minute animation? If you know the answers, add them to the comments for this update. When you watch an animated movie in a theatre, there are twenty-four frames per second. That means for a movie that is one-hour and thirty-minutes long, you would have to draw 129,600 frames! 24 frames x 60 seconds x 90 minutes = 129,600 frames. Well, I'm glad we didn't have to draw that much to learn the basics of animation. Now we can move on to learning some Disney principles.
PRINCIPLES OF ANIMATION: ARCS
The first principle we're going to cover is arcs. Please watch the following video to understand how arcs help make stiff, mechanical movements look smoother and more lifelike. To complete the session 2 work, you'll need to know how to animate your ball so that it moves in an arc.
AlanBeckerTutorials. (2015a, Feb 26). 7. Arcs - 12 Principles of Animation [Video]. YouTube. https://youtu.be/I1_tZ9LhJD4?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
In the video, you probably noticed that the arc principle doesn't just apply to balls. Arcs define the path, also called a trajectory, that many objects move along. An object can even have multiple arcs as it bounces off of other objects. Look at this image of a ping-pong ball bouncing on a table and notice how the height of each bounce, known as the amplitude, is smaller each time. It's not easy to tell from a photograph, but the amount of time each bounce takes, known as the period, also decreases over time.
Kitagawa, M. (n.d.). Strobographic photograph of a bouncing ping-pong ball [Online Image]. Retrieved on March 14, 2021, from https://www.utdallas.edu/atec/midori/Handouts/diminishing_bounces.htm
Now that you know the principle of arcs, let's get back to the drawing board. Review the rough sketch section, then make your update, add your comments, and begin work on your peer review project.
Rough Sketch | |
---|---|
SportsManias. (n.d.) Football Soccer GIF [Online Image]. Retrieved on March 11, 2021, from https://giphy.com/gifs/SportsManias-football-soccer-futbol-WvuTFk2IN7jxoLVDkP |
Look at this animated GIF of a bouncing soccer ball. Now we have some details, but can you tell:
Adding others items to the scene can help answer these types of questions. |
Frame 1: Make an Update |
Choose a ball from the session 1 comments. Create an animation that is at least three second long, where that ball displays the arc principle. Your ball must avoid at least one other object in the scene. When you post your update, don't tell us what type of ball it is. Anyone who leaves a comment on your update will have to guess. |
Frame 2: Comment in the Community |
|
Frame 3: Start Your Peer Review Project |
For your peer review project, create a five second animation that tells part of a story using at least two balls and other items that the balls will interact with. You'll be graded on:
Due Date: Before the start of session 5 |
Lesson Overview:
Participants will watch a video explaining the principle of arcs, then read text detailing the physics of a bounce. Before participants begin animating, in the Rough Sketch section, they're prompted to analyze different aspects of an animated GIF. As part of their assignments, participants will play an online game that requires close attention to arcs and showcases how animation is used in video games.
Participants are also given the rubric for their peer review project. Work for that project will be completed between sessions 2 and 4. The review will be conducted during session 5, so that each participant can make updates based on the feedback in time for the animation showcase during session 6.
Lesson Objective(s):
By the end of the lesson, participants should be able to:
National Core Arts Standard(s):
Teaching Tip:
Play the Dunk Shot game and post your high score in the comments for this update. Don't post any tips though. That will motivate participants to explore ways to beat the instructor and share their ideas, while simultaneously learning more about arcs. Learning through goal-oriented information sharing is common in communities of practice.
When you played Dunk Shot, did you notice anything about the spacing between each orange dot in the trajectory? If you didn't, go back and play a few rounds then leave a comment on this update about what you saw. I'll give you a clue, those dots have something to do with this session's animation principle, slow in and slow out.
PRINCIPLES OF ANIMATION: SLOW IN & SLOW OUT
Please watch the following video to understand how, just like the arc, slow in and slow out helps turn mechanical movements into more lifelike motions. To complete the session 3 work, you'll need to know how to animate your ball so that it eases in and out slowly.
AlanBeckerTutorials. (2015b, February 20). 6. Slow In & Slow Out - 12 Principles of Animation [Video]. YouTube. https://youtu.be/fQBFsTqbKhY?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
You might not have guessed it, but there's actually a lot of science in animation. Movie and video game animator Kevin Koch (2017), uses the science of physics to describe the slow in and slow out principle in more detail. He explains that in physics, moving objects have:
When you look below at the photo of a tennis ball bouncing, you'll notice twenty-two balls. Each ball is one frame of animation and the position is wherever the ball shows up in one frame. As we go from one frame to the next, translation is the distance that the ball has moved. Velocity and acceleration describe how fast the movement is happening.
Bounce Tennis. (n.d.). Photo of tennis ball bouncing [Online Image]. Retrieved on March 14, 2021, from https://bouncetennis.files.wordpress.com/2015/12/tennis-ball-bounce-1a.jpg
Just as you learned in the last session, the tennis ball is bouncing in an arc. Do you notice how close together the balls are at the top of each arc? Does that mean the ball is moving faster or slower? If you guessed slower, you're correct. The closer the ball is in two frames, the slower it will appear to move in your animation. If the ball if moving up towards the top of the arc, the velocity is slowing down and it's decelerating (the opposite of accelerating). If the ball is moving down from the top of the arc, the velocity is speeding up and it's accelerating. The farther apart the ball is between two frames, the faster it will appear to move when you watch the animation. That movement from frame to frame is also called spacing.
Now that you know the principle of slow-in and slow-out, let's get back to the drawing board. Review the rough sketch section, then make your update, before finally adding your comments.
Rough Sketch | |
---|---|
Pinterest. (n.d.a) Animated balls bouncing [Online Image]. Retrieved on March 11, 2021, from https://i.pinimg.com/originals /38/40/cf/ 3840cf7bb0e55b8650b041504f3864a0.gif |
Look at this animated GIF of several bouncing balls. Now we have color and multiple objects, but can you tell:
Some of these questions you might be able to answer if you compare the size, color, and bounciness of the animated ball to similar balls you've seen in the real world. Closely observing and comparing things in the real world are useful skills for animators. |
Frame 1: Make an Update |
Choose a ball from the Session 1 comments. It cannot be the same ball you used in Session 2. Create an animation that is at least three second long, where the ball displays the slow in and slow out principle. The ball must interact with an object in your scene. When you post your update, don't tell us what type of ball it is. Anyone who leaves a comment on your update will have to guess. |
Frame 2: Comment in the Community |
|
Lesson Overview:
Participants will watch a video explaining the principle of slow in and slow out, then read text detailing more physics of a bounce. Before participants begin animating, in the Rough Sketch section, they're prompted to analyze different aspects of an animated GIF. In this session's update, participants must choose a different ball than they animated previously, which forces them to consider the new ball's physical properties.
Lesson Objective(s):
By the end of the lesson, participants should be able to:
National Core Arts Standard(s):
Teaching Tip:
If participants don't add a variety of scenarios in the comments, consider inserting any of the following to get the ball rolling:
What types of objects did your ball interact with in your last update? How objects react to one another can tell you a lot about what they are made of. Would a bowling ball bounce off of a high dive into a pool of warm mustard? Bowling balls aren't usually very bouncy. Maybe it could roll off instead. But what if the bowling ball was scared of heights? I've never seen a ball get scared, but that's one great thing about animation. With a little imagination, you can make objects act like humans. A fancy word for that is anthropomorphism (ann-throw-po-more-fizz-em). Watch this short animation to see how simple forms like a ball, cubes, and pyramids can be animated to tell a story, using some of the principles you've already learned.
notbadfilms. (2016, January 18). Bouncing Ball Animation praised by Pixar animator [Video]. YouTube. https://www.youtube.com/watch?v=dSdu8cUKroI
That brave, little ball bounced in big, beautiful arcs before slowing down to look back at the shapes that had teased it. Did you notice that the ball also changed shape as it hopped around? That brings us to our next principle of animation.
PRINCIPLES OF ANIMATION: SQUASH & STRETCH
Please watch the following video to understand how squash and stretch helps to show if your object is hard or soft. To complete the session 4 work, you'll need to know how to animate your ball so that it squashes and stretches.
AlanBeckerTutorials. (2015c, January 16). 1. Squash & Stretch - 12 Principles of Animation [Video]. YouTube. https://youtu.be/haa7n3UGyDc?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
We've already talked about speed and how a tennis ball decelerates near the top of a bounce and then accelerates as it drops again. In the video you just watched, you learned that speed is also a part of the squash and stretch principle. The faster an object is moving, the more it may squash flat when it hits something, stretch out as it bounces off, and then eventually go back to its normal shape. Another word for that type of flexibility is elasticity (ee-lass-tiss-sit-tee). Can you think of some other objects that have a lot of elasticity? Maybe you call them "stretchy." You might even be wearing some. If you can think of some, add them to the comments for this update.
Squashing and stretching can be difficult to see at regular speed, so to help you out, here are some objects with different amounts of elasticity, bouncing in slow motion:
Tennis ball (20 seconds)
Rubber ball (14 seconds)
Marbles (51 seconds)
Water balloon (1min 6 seconds)
Now that you know the principle of squash and stretch, let's get back to the drawing board. Review the rough sketch section, then make your update, before finally adding your comments.
Rough Sketch | |
---|---|
Pinterest. (n.d.b) Animated bouncing grey balls. [Online Image]. Retrieved on March 11, 2021, from https://i.pinimg.com/originals/b9/5e/ ab/b95eabfc00484961296ac75b9c8dac1c.gif |
Look at this animated GIF of several bouncing balls. This time, we lost the different colors, but can you still tell:
Even though we have six balls, they all have the same color and behave the same way. How much a ball squashes and stretches can help answer these types of questions. |
Frame 1: Finish and Upload Your Peer Review Animation |
Click here to upload your animation > Due Date: Before the start of session 5 |
Lesson Overview:
Participants will watch a video showing multiple animation principles applied to simple geometric forms, in order to tell a meaningful story. The purpose of the video is to inspire but also illustrate the principle of squash and stretch, which is explained further in the second video that participants will watch. Additional videos and text further detail the physics behind this animation principle, which can be difficult to observe with the naked eye.
Before participants begin animating, in the Rough Sketch section, they're prompted to analyze different aspects of an animated GIF. In this session, participants will neither make an update nor comment, but the three principles they've learned so far must be visible in their peer review animation. The animation submitted for peer review should be received in time to allow 15-20-minutes for review and feedback during the first half of session 5.
Lesson Objective(s):
By the end of the lesson, participants should be able to:
National Core Arts Standard(s):
Frame 1: Submit Your Peer Review Feedback |
Before you get started learning about the last principle of animation, spend the first half of this session reviewing your classmate's animation. Give them positive and helpful feedback based on the prompts in the grading rubric.
|
Does it feel like your ball is coming to life? Take a few minutes to look at all of the animated GIFs you've created. As you learned and applied each animation principle, your ball probably started to move more realistically. However, another great thing about animation, is that you don't always have to be realistic. Our final animation principle is where you can let your imagination run wwwWWWWWIIIIiiiiiiiillllLLLLLLDDDDddddd!
PRINCIPLES OF ANIMATION: EXAGGERATION
Please watch the following video to understand how exaggeration helps add impact to your animations. To complete the session 5 work, you'll need to know how to animate an exaggerated reaction.
AlanBeckerTutorials. (2015d, March 22). 10. Exaggeration - 12 Principles of Animation [Video]. YouTube. https://youtu.be/HfFj-VQKiAM?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
To make sure you have time to prepare for next session's animation showcase, for this session, there is no rough sketch, no update, and you won't have to make comments. However, please remember to look at the results of your peer review, then make any improvements you would like to your peer reviewed animation as well as any of your earlier work.
Frame 1: Make a Portfolio Update |
Make changes to your peer review animation based on the feedback you received in the review, as well as what you've just learned about exaggeration. Then make an update that includes the following:
This is your portfolio for the animation showcase, which is worth 50 grade points. |
Lesson Overview:
Participants will begin the session by conducting a peer review of another classmate's animation. After that, they will watch a video explaining the principle of exaggeration. There is no Rough Sketch, required update, nor comments for this session. Instead, participants are encouraged to update their peer review animation based on the peer review feedback and exaggeration lesson, then create a portfolio of all of their work, to be reviewed during the animation showcase in session 6.
Lesson Objective(s):
By the end of the lesson, participants should be able to:
National Core Arts Standard(s):
Teaching Tip:
To save time, pair students up in the order their work was uploaded.
Congratulations, you've created so many animations and learned how to really make them come to life! Now it's time to enjoy everyone's hard work.
If after all of this you feel like you need a rest, I totally understand. Animation is a lot of work and it's usually made by a team of artists. At the very least, I hope you have a new appreciation for the cartoons and animated movies you've seen. I really appreciate that you reviewed a classmate's project and commented on different updates. Your feedback helps us all grow.
If you want to learn the other principles of animation, feel free to watch this 24-minute video explaining all twelve of them:
AlanBeckerTutorials. (2017, Mar 22). 12 Principles of Animation (Official Full Series) [Video]. YouTube. https://www.youtube.com/watch?v=uDqjIdI4bF4&list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd&index=13
Frame 1: Comment in the Community |
|
Frame 2: Quiz |
Take this short quiz about the principles of animation. |
Lesson Overview:
Participants can now enjoy everyone's hard work by browsing the animation showcase. Each participant has posted an update with all of their work and must comment on at least three other participant's portfolios. There is a short quiz to assess whether participants can identify the principles any better now than they could in the pre-course survey.
Lesson Objective(s):
By the end of the lesson, participants should be able to:
National Core Arts Standard(s):
Teaching Tip:
Enjoy!
*AlanBeckerTutorials. (2015a, Feb 26). 7. Arcs - 12 Principles of Animation [Video]. YouTube. https://youtu.be/I1_tZ9LhJD4?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
*AlanBeckerTutorials. (2015b, February 20). 6. Slow In & Slow Out - 12 Principles of Animation [Video]. YouTube. https://youtu.be/fQBFsTqbKhY?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
*AlanBeckerTutorials. (2015c, January 16). 1. Squash & Stretch - 12 Principles of Animation [Video]. YouTube. https://youtu.be/haa7n3UGyDc?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
*AlanBeckerTutorials. (2015d, March 22). 10. Exaggeration - 12 Principles of Animation [Video]. YouTube. https://youtu.be/HfFj-VQKiAM?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd
*AlanBeckerTutorials. (2017, Mar 22). 12 Principles of Animation (Official Full Series) [Video]. YouTube. https://www.youtube.com/watch?v=uDqjIdI4bF4&list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd&index=13
*Bounce Tennis. (n.d.). Photo of tennis ball bouncing [Online Image]. Retrieved on March 14, 2021, from https://bouncetennis.files.wordpress.com/2015/12/tennis-ball-bounce-1a.jpg
*Byrne, R. (2018, July 27). How to create an animated GIF on Brush Ninja [Video]. YouTube. https://www.youtube.com/watch?v=CfE1cu8Cw1o
*Kitagawa, M. (n.d.). Strobographic photograph of a bouncing ping-pong ball [Online Image]. Retrieved on March 14, 2021, from https://www.utdallas.edu/atec/midori/Handouts/diminishing_bounces.htm
*Koch, K. (2017, June 21). Slow In and Slow Out: The 12 Basic Principles of Animation. Animation Mentor. https://www.animationmentor.com/blog/slow-in-and-slow-out-the-12-basic-principles-of-animation/
*Newton, P. (2015, Oct 14). Animation for beginners: How to animate a bouncing ball! [Online Image]. Retrieved on March 11, 2021, from https://design.tutsplus.com/tutorials/animation-for-beginners-how-to-animate-a-bouncing-ball--cms-24787
*notbadfilms. (2016, January 18). Bouncing Ball Animation praised by Pixar animator [Video]. YouTube. https://www.youtube.com/watch?v=dSdu8cUKroI
*Pinterest. (n.d.a) Animated balls bouncing [Online Image]. Retrieved on March 11, 2021, from https://i.pinimg.com/originals/38/40/cf/3840cf7bb0e55b8650b041504f3864a0.gif
*Pinterest. (n.d.b) Animated bouncing grey balls. [Online Image]. Retrieved on March 11, 2021, from https://i.pinimg.com/originals/b9/5e/ab/b95eabfc00484961296ac75b9c8dac1c.gif
*SportsManias. (n.d.) Football Soccer GIF [Online Image]. Retrieved on March 11, 2021, from https://giphy.com/gifs/SportsManias-football-soccer-futbol-WvuTFk2IN7jxoLVDkP
*wwodtv. (2010, March 10). How Walt Disney Cartoons Are Made (Burbank version) [Video]. YouTube. https://www.youtube.com/watch?v=ycU8BhfEs_I