Basic Animation- Bouncing Ball Animation
- 1. Fine Arts Instructional Plan Animate a Bouncing Ball with Squash and Stretch Discipline Visual Arts Grade(s) and/or Course Level(s) Visual Arts II Overview In this lesson students will animate a ball bouncing into the "frame," squashing against the floor and stretching as it bounces up. This lesson focuses on the first principle of animation called squash and stretch. The lesson also explores exaggeration and timing. Objectives ● Students will explore the fundamentals of animation and understand the perception associated with the illusion of movement. ● Students will apply the animation principle of squash and stretch to a bouncing ball. ● Students will create their own bouncing ball animation. Materials ● Computers with internet access or tablets with animation programs (Procreate, etc.) ● Paper and pencil or computer drawing program Student/Teacher Actions 1. Introduce the principle of squash and stretch by playing an animation clip that demonstrates squash and stretch, such as MGM’s Tom & Jerry. 2. Explain to the students that the 12 basic principles of animation were developed by Walt Disney Studios in the 1930s by two animators, Frank Thomas and Ollie Johnston. Provide a definition for the first principle, squash and stretch - it is the squashing and stretching of an object or character that is used to show movement or expression and give life to an animation. Show the video, Squash and Stretch - 12 Principles of Animation by Alan Becker. 3. Reintroduce the students to the same video shown at the beginning of class, but now decrease the playback speed to 0.25 to show in slow motion. Discuss the difference between speeds and what the students can now see in slow motion. The students will see that character expression and body movement are exaggerated and that timing is
- 2. Fine Arts Instructional Plan either slowed or accelerated depending upon the characters emotion or action. This is demonstrated by squashing and stretching. 4. Explain to the students that they will be creating an animation of a bouncing ball falling to the ground, stretching with momentum, then squashing as it hits the ground, and then stretching again as it bounces back up. First they will complete a warm-up activity. 5. Path of Action - Begin the activity with pencil and paper or on an online drawing program. Discuss path of action and how it pertains to animation. The path of action is the trajectory of an object or character, and in this case is the path the ball will follow, made up of arcs. Arcs are often used in animation to move objects and characters because they provide a more dynamic path than just a straight line. Instruct the students to draw a path of action from left to right. 6. Timing - Timing is used in animation to determine actions from beginning to end. In this case, timing is used to locate positions of the ball on the arc as it bounces. The students will draw marks on the arc to indicate ball movement and create a guide for timing. As the ball moves down the arc the timing increases, thus the marks are drawn farther apart, and as the ball bounces back up the speed slows down with marks drawn closer together. Direct the students to draw marks on their path of action. 7. Key Poses - Introduce the students to key poses, which are significant moments where an object or character changes direction. The ball starts at the top of the arc as a round circle and as it drops the pace speeds up and the ball exaggerates shape, hence stretching. When it hits the ground it squashes, indicating the illusion of weight and
- 3. Fine Arts Instructional Plan impact. The ball must retain the same volume as it stretches and squashes. Instruct the students to draw these key poses. 8. Breakdowns - The students will now add breakdowns. Breakdowns are the in between drawings that occur before and after the key poses that show speed. After the ball squashes it immediately stretches and this gives the illusion of the ball popping back up into the air. It is important to note here that there is no change in ball shape from stretch to squash to stretch. Instruct the students to draw these breakdowns. 9. In-Betweens - The students will draw the rest of the in-betweens to complete the bouncing ball path of action and smooth out the action. Explain to the student that as the ball falls it elongates and stretches, and then after it squashes it changes back into the round shape as it nears the top of the second arc. This creates the effect of the ball slowly moving down and then building momentum back up to another slow down as the ball loses momentum again at the top of the second arc.
- 4. Fine Arts Instructional Plan 10. Introduce the students to an animation application (such as wickeditor.com) and saving work (Animated GIF, .gif file). ● Settings (Applying framerate and pixel (px) dimensions) ● Fill Color (determines color) ● Ellipse Tool - O (creates a curved shape) ● Onion Skinning - 0 (technique used to see several frames at once to manipulate spacing of an animation) ● Cursor Tool/Transform (manipulates object size and shape and moves the object around the canvas) ● Copy Tool - ⌘C (creates replica) ● Frames (Individual pictures in a sequence, 12 FPS) ● Layers (allows different effects in the same animation frame) ● Preview Play - K 11. Teacher will demo and explain how to create an animation in the application. 12. Students will create their own animation of a bouncing ball, with a minimum of 12 frames. They will export their work as a .GIF file. Assessment Strategies ● Observe students' drawings of the initial path of action with ball bouncing. ● Ongoing observation of student progress will occur throughout the lesson. The instructor will assess throughout the lesson, and feedback will be provided by peers. ● Students will present the completed project on their individual computer screens for assessment by instructor and peers. ● Final rubric Differentiation Strategies ● Visual demonstrations ● Preferential seating ● English Learner Students - Audio, providing visual guide of tools and keyboard shortcuts ● Students with disabilities - Using a modified mouse/keyboard for students with mobility disabilities Extensions and Connections ● Further learning - Applying the other 12 principles of animation, traditional hand drawn animation, Gifs ● Connected Computer Skills ● Keyboard Shortcuts (cut, paste, copy, undo, redo, etc.)
- 5. Fine Arts Instructional Plan ● Animation Basics (layers, frames, onion skinning, ellipse, erasing, saving, exporting) ● File types- GIF, VIDEO (MOV, MP4) ● Career Connections in Digital Arts - animation, digital graphics, video game animation Remote Learning Strategies ● Live share animations to class ● Breakout rooms on video meeting platform for small group sharing ● Slideshare Critique - Students make positive and constructive comments Resources ● Warner Brothers Classic Cartoons - Tom & Jerry ● Squash and Stretch - 12 Principles of Animation by Alan Becker ● Wick Editor Standards of Learning (SOL) ● AII.10 The student will identify how digital media, and technology tools can be used to create, edit, and present works of art. ● AII.15 The student will demonstrate proficiency, skill, and control in the use of media and techniques. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.