The History of Animation and what you need to know to get started

From the earliest cave paintings flickering in firelight humans have been fascinated by the moving image. But how did we get to the point today where anyone can download a few apps and create seamless green screen animations on their phones? In this 5 minute video you will learn the history of animation. If you keep watching until the end, I will show you exactly how you can create your own green screen animations using nothing more than a tablet or smart phone and a couple of inexpensive apps.

This video takes you through human kind's earliest fascination with the moving image. In the flickering firelight of caves, paintings on the walls appeared to move, adding dramatic illustrations to oral narratives of great hunting adventures.

In the 1800's the magic lantern became a widely popular form of entertainment. In the 1820's the wide availability of mass produced printed and hand colored glass slides increased the lantern's popularity. A kerosene lamp lit up the slide which was then projected through a magnifying lens onto a screen. This was the precursor to the first film projectors.  

In the 1860's Milton Bradley began selling a new toy called the zoetrope. The zoetrope enabled children to create simple hand drawn animations on strips of paper and bring them to life by spinning the carousel and looking through the slots. While there were other earlier similar designs, the wide distribution of the Milton Bradley toy is credited with inspiring the first early animators.

In 1878 a horse breeder hired the photographer, 

Eadweard Muybridge to help him settle a bet. When a horse is running, do all four hooves ever leave the ground at once? Nobody knew. Muybridge set up 12 cameras and attached the shutters to trip wires. As the horse ran by 12 pictures would be taken in sequence. Have you ever taken a 'burst' of photographs with your phone? It was much more complicated in 1878 then it is now. No one had done it before. Muybridge went on to publish entire books on human and animal locomotion. To this day, modern animators constantly refer to his work when drawing and regard it as a priceless reference tool. 

In 1908 the French artist Émile Cohl created the first animated cartoon film Fantasmagorie from 700 hand drawn pictures. He photographed each drawing with negative film to simulate a chalkboard effect. And thus, animated cartooning, as we know it today, was born.

Before we create our own computer animations in this class, we are going to spend some time learning how to draw people. First we will learn proportion and then we will learn how to represent gesture and movement. 

Next you will learn how to use Adobe Photoshop to create your own animation assets. Assets are the images, characters, backgrounds and sounds that go into your animation library before you even open an animation program.

The first two animations you create in my class will be GIFS (graphic interchange format) that you will be able to email to friends or post on the web. 

GIFS can be created using Adobe Photoshop, without using any other animation programs. 

Here is a GIF created using Muybridge's original sequence of photographs. 

The first GIF you create will be a human face that changes expressions:

The second GIF you create will be a moving human figure:

Below is a GIF I created entirely in Photoshop. First I created the assets (depicted on the sprite sheet above) and then stacked them and exported them as a GIF (for step by step  instructions click here)

Learning how to draw people will be a very important skill to develop before we start using the computers.

However, that should not stop you from exploring animation on your own. You can actually begin animating right from your smart phone. Here are a few easy to use apps to get you started if you are interested:

We will not be using Animation Creator in class. In this class we will be learning how to use the desktop program Adobe Animate. However, if you are interested on learning how to use the app on your own, here is a tutorial:

Later in the year we will be using the film editing app Final Cut Pro to finalize our work and experiment with green screen technology. If you are interested in learning how to use a green screen on your phone or tablet, I suggest this app: 

You will need to create videos with green backgrounds in order for the app to work properly. Download this image and set it as the background when you are done animating, prior to saving an animation to your phone's camera roll:

The green screen app is very easy to use. Simply put the animation in the top layer and a movie from your camera roll in the bottom layer, preview and save to camera roll.

Are you ready to get started animating? Let's begin by drawing people using correct proportions: 

For my lesson introducing the proportions of the human face, click here.

For my lesson introducing figure drawing, click here. 

For my lesson introducing gesture drawing, click here.

For a more thorough understanding of the principles of animation, please see my lesson 'How Animation Works', by clicking here.

Some useful worksheets:

Human movement cycles gathered from around the web:

Some human movement cycles from my own animations:

Some animal movement cycles:

Below are some walk cycles developed by my computer animation students using Wacom drawing tablets and the programs Adobe Photoshop and Adobe Animate

If the stories above about the birth of animation teach you nothing else, it is my hope that you at least come away with the understanding that you do not need fancy equipment or outrageously expensive software to begin animating. My first animations, as a child, were simple flip books. To create a flip book, all you need are felt markers and a memo pad.

 Here is one created by my daughter when she was in 6th grade:

 Since 2012 I have taught the basic principles of cell and stop motion animation to my middle school students using a class set of old iPad 2 devices. 

Professional digital art, animation and editing software and a fast computer will enable my high school students to create excellent quality HD videos but a simple pencil and paper are all you need to begin to develop the skills you need to be a great animator. A smart phone or tablet with a few inexpensive apps is all that is necessary to create animated videos to post on social media and share with your friends. The more exploring and experimenting you do on your own, by drawing and animating on your phone, the more quickly you will master the software we will be using in class so you can create artwork you are truly proud of.

Starting in the fall of 2018, all of my students will have Google Chromebooks to take home with them. Click here for an app that will enable you to to use your Chromebook, on your own, to create original stop motion animations.

Finally, please click here to take a look at 2018's Scholastic Art and Writing gold key winners in the category of film and animation. Often the winning entries were not the highest tech submissions, but rather the ones with the most interesting stories.

As you develop your artistic skills, please keep in mind that you will eventually need to use your newfound artistic superpowers to tell an animated story. What is important to you? We all have unique stories to share. Tell us some of yours. To help you get started, here are a few storyboard templates that you can download:

Print out the storyboard template above and draw the key shots of your story. Before you start take a look at some storyboard portfolios by professional artists;

Here 

Here

Here

Here

...and Here

Take a look at this old Tom and Jerry storyboard

Now watch this three minute clip from a 1949 Tom and Jerry cartoon. How would you draw the storyboard? 

You would have to draw a different picture for every camera angle. Here is a list of commonly used camera angles:

Can you identify any of these camera angles in the animation below?

The more you put into this class the more you will get out of it. 

Click here for my complete digital technology supply list.

Mrs. Wintemberg's 
Essential Library for Aspiring Animators:

The Illusion of Life, Disney Animation

The most valuable takeaway from the book The Illusion of Life by Frank Thomas and Ollie Johnson is the '12 Principles of Animation'.

Of particular importance is Principle 4.  

  Straight Ahead & Pose to Pose

And Principle 11. Solid Drawing

I use drawing exercises with action figures and dolls in my classroom to reinforce solid drawing skill.

My students then scan their work, after outlining it with black Sharpie Marker, and use the digital painting techniques outlined below to color their work in Photoshop.

How to Draw Comics the Marvel Way By Stan Lee and Steve Buscema First published in 1978, this book is considered by many to be the bible of comic book drawing. Untold numbers of little boys grew up to become artists because they were given this book as a child. It covers all the basics, from figure and gesture drawing to dramatic composition and perspective drawing.  Will Eisner, Graphic Storytelling and Visual Narrative Will Eisner, Comics and Sequential Art Will Eisner, Expressive Anatomy for Comics and Narrative Basic Animation by Walter Foster Animation by Preston Blair How to Draw Film Cartoons by Preston Blair Dynamic Anatomy by Burne Hogarth