Animation
Beginner
60 mins
Teacher/Student led
+100 XP
What you need:
Chromebook/Laptop/PC or iPad/Tablet

The Playground

Get ready to create a fun animated playground scene! You'll animate a bouncing ball and a swinging motion using simple shapes across at least five frames. Use onion skinning for smooth transitions and tell a little story with your design.
Learning Goals Learning Outcomes Teacher Notes

Teacher Class Feed

Load previous activity

    1 - Introduction

    Welcome to 'The Playground' lesson! In this fun activity, you'll create a simple animated scene of a playground using what you've learned about bouncing, swinging, and timing. You'll make a ball bounce on the ground and a swing move side to side, and you can add optional elements like a slide or a sun in the background. The goal is to tell a little story with just shapes, using at least two different motions and five frames. Remember to use onion skinning to make it smooth. Let's build your playground animation!

    2 - Starting Your Project

    First, open Wick Editor in your web browser. If you haven't already, go to https://www.wickeditor.com/ and click on 'Editor' to launch it. Create a new project by clicking the 'New Project' button. This will give you a blank canvas to start your playground scene. Think about the size – you can adjust the canvas in the project settings if needed, but the default is fine for now.

    3 - Drawing the Playground Background

    Let's set the scene! Use the drawing tools in the toolbar at the top, like the brush or shape tools, to create a simple playground background. Draw the ground as a straight line across the bottom of the canvas. Add basic shapes for playground items – for example, two lines for swing posts and a seat for the swing, or a triangle for a slide. You could even add a circle for the sun in the sky. Keep it simple with basic shapes and colours from the inspector panel on the right. This is just the static background, so draw it on the first frame.

    Your background helps set the story – imagine kids playing on a sunny day!

    4 - Using Layers

    Remember to use layers in Wick Editor to keep your playground animation organised! Layers help you separate different parts of your scene, like putting the background on one layer, the bouncing ball on another, and the swinging motion on yet another. To add a layer, look at the layers panel on the right side of the screen – click the '+' icon to create a new one. Name your layers something simple, like 'Background', 'Ball', or 'Swing', by double-clicking the layer name. Draw or move elements onto the right layer by selecting it first.

    This makes editing easier because you can lock or hide layers to focus on one part without accidentally changing others. For example, lock the background layer while animating the ball to avoid messing it up. Using layers also helps with complex scenes, making your animation smoother and more professional. As you add frames, ensure moving items are on their own layers for better control. Give it a try – it will make your project much tidier!

    Layers are like stacking drawings on transparent sheets – they keep everything neat and easy to manage!

    5 - Using Onion Skinning for Smoothness

    To make your animation look professional, turn on onion skinning! Find the onion skinning icon in the canvas tools at the bottom right – it looks like layered frames. Click it to see faint versions of previous and next frames. This helps you position your ball and swing accurately in each new frame, creating smoother movement. Go back through your frames and adjust drawings as needed while onion skinning is on. Turn it off when you're happy to check the clean version.

    Onion skinning is your secret tool for natural, flowing animations!

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    πŸͺ Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more