What’s up Animators!
Welcome to activity 3 of Google CS First Animation.
Today, you will use functions to create a straight-ahead animation story.
All animations are created by drawing one picture frame at a time, each slightly different.
Sometimes, the animator first draws the beginning frame, end frame, and the key action frames.
The artist then draws frames between them to fill in the gaps.
This is called keyframe animation.
In straight-ahead animation, artists draw each frame in order, from the beginning to the end.
Straight-ahead and key frame animations are only 2 important aspects of animation.
Watch this video to see some important animation principles.
The following has been paraphrased from the illusion of life by Frank Thomas and Ollie Johnston.
Squash and stretch.
This action gives the illusion of weight and volume to a character as it moves.
Anticipation Prepares the audience for a major action the character is about perform.
Each major action is preceded with specific moves that anticipate for the audience what is about to happen.
Staging It's the presentation of and idea so that it is clear.
Straight ahead and pose to pose.
Pose to pose is charted with key drawings done at intervals throughout the scene.
Straight ahead animation starts at the first drawing and works drawing to drawing to the end of a scene.
Follow through and overlapping When the main body of the character stops all other parts continue to catch up to the main mess.
Nothing stops all at once.
That video was pretty cool.
Professional animators use these principles to guide their work.
Today, you will focus on how the computer science concept of functions makes straight-ahead animation easier to create.
You can reuse code from one picture to the next as you build your animation instead of starting from scratch every time.
The function you will build today looks like this, but if you were to build the same code without using a function, the code would look like this!
Today, you can choose between the three starter projects linked next to this video.
Each starter project has a backdrop and an android sprite with 3 different sets of costumes.
Choose the starter project you like best.
The example in the videos will use the “happy, basketball, and sleepy” Android Project.
Now, it’s your turn.
Choose one of the three starter projects, click remix, and sign in using the information in your CS First passport.
Then, return to this page on the CS First tab, click the green “next” arrow, and move on to the next video.
- Choose a starter project to remix.
- Remix the starter project.
- Sign in to Scratch using the information in your CS First passport.
- "Secret Recipe Ep. 6: Whiteboard Animation" by Animation Chefs (https://www.youtube.com/watch?v=oY1aErk0UbQ) -- Licensed by Creative Commons Attribution 3.0 Unported (https://creativecommons.org/licenses/by/3.0/legalcode) -- Video trimmed to needed length
- "CSS animation guide for novices" by Nirdosh (https://www.script-tutorials.com/css-animation-guide-for-novices/)
- "The illusion of life" by cento lodigiani (https://vimeo.com/93206523) -- Licensed by CC BY 3.0 (https://creativecommons.org/licenses/by/3.0/)