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

Floating Balloons

Get ready to animate balloons rising into the sky using Wick Editor! In this engaging activity, you'll create slow, vertical motion with subtle drifting to achieve a soft, floaty effect, learning the basics of easing and light animation.
Learning Goals Learning Outcomes Teacher Notes

Teacher Class Feed

Load previous activity

    1 - Introduction

    Welcome to the Floating Balloons lesson! In this exciting activity, you'll dive into the world of animation using Wick Editor to bring balloons to life as they rise gracefully into the sky. Imagine colourful balloons floating upwards, carried by a gentle breeze – that's what you'll create!

    You'll learn how to make slow, vertical movements with a bit of subtle drifting from side to side, giving your balloons a soft, floaty feel. This will introduce you to the basics of easing, which is a way to make animations look more natural and smooth, just like how things move in real life under the influence of air or wind. By the end, you'll have a charming animation that feels light and airy. Get ready to unleash your creativity – let's start making those balloons float!

    2 - Create a New Project

    To begin, you need to open Wick Editor and start a fresh project. Visit the Wick Editor website at https://www.wickeditor.com/ and click on 'Editor' to launch it. Once it's open, create a new animation project. This will give you a blank canvas to work on your floating balloons.

    A new project is like a clean sheet of paper, ready for your creative ideas!

    3 - Drawing Your First Frame

    Now, let's draw the starting point for your balloon. Select the brush or shape tool from the toolbar at the top – the shape tool is great for making perfect circles.

    Step-by-step:

    • Draw a balloon (a circle or oval) near the bottom of the screen. You can choose a bright colour from the inspector panel on the right.
    • If you would like to make a more realistic balloon shape, you can add a smaller oval to the bottom. 
    • To connect the 2 ovals together, Click the select tool, select both ovals by pressing shift then press ctrl + g
    • Don't worry about the string yet as we can add that in later.

    This is your first frame, where the balloon begins its floaty journey!

    Frames are like snapshots; we'll connect them to create movement.

    4 - Using a Tween

     In Wick Editortweening helps your shape slide smoothly from one spot to another by calculating the positions in between keyframes.

    1. In the timeline, go to frame 1 where your balloon starts on the left.
    2. When you hover over the frame at the side, you’ll see a yellow line which lets you stretch the frame over a few other framesStretch this as long or short as you wish.
    3. Next, click the first frame again. On the left, in the layers panel, you’ll see a diamond-shaped icon β€” click that.
    4. Then, at the end of the stretched frameclick it and move your balloon to the position you want.

    5 - Adding Floating Motion

    Time to make your balloon rise! Use the timeline at the bottom to add frames within the tween.

    1. Click anywhere on the timeline along your tween frames.
    2. Drag your balloon either up or down. Imagine how a real balloon floats, it never stays in a straight line and often tilts from side to side.
    3. Continue doing this until you reach the end of the tween. You don’t need to go frame by frame, since the tween will move the balloon between locations and tilts.

    Add several frames to build the motion slowly. This creates the illusion of floating.

    Small changes between frames make the movement smooth and realistic, like a balloon in the breeze.

    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