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

Morphing Shape to Character

In this lesson, you'll learn to animate a shape transforming into a character using Wick Editor. Follow steps to create in-between frames, apply squash and stretch, and add anticipation for a smooth, lively animation.
Learning Goals Learning Outcomes Teacher Notes

Teacher Class Feed

Load previous activity

    1 - Introduction

    In this lesson, you will animate a simple shape transforming into a basic character. You’ll use in-between frames, squash/stretch, and anticipation to create a smooth and fun transformation. This builds on what you've learned in previous lessons about movement and timing in Wick Editor. Think about how shapes can change like magic, turning from something simple into a fun character. Let's make your animation come alive!

    2 - Open Wick Editor

    To get started, open Wick Editor in your web browser. Visit https://www.wickeditor.com/ and click on 'Editor' to launch it. Create a new project for this lesson. This gives you a fresh canvas to work on your morphing animation.

    Starting fresh helps keep your animations organised.

    3 - Drawing Your First Frame

    Start with a simple shape that will transform into your character.

    1. This will be your β€œbefore” shape. Make sure it's on the first frame in the timeline.
    2. Select the brush or shape tool from the toolbar.
    3. Draw a Shape in the centre of the screen. This can be any shape you want.
    4. Add a face to your shape if like!
    5. This will be your β€œbefore” shape. Make sure it's on the first frame in the timeline.
    This is the starting point of your transformation – keep it simple!

    4 - Drawing Your Character Target Frame

    Next, draw what you want the character to transform into.

    1. Go to the next frame, is is where you will be drawing your character.
    2. Draw a simple character. This can be a stick person, blob creature, robot, or cartoon face.
    3. Make sure the size is roughly the same as the original shape to keep the transition smooth.
    This is your 'after' frame – have fun designing your character!

    5 - Adding In-between Frames

    Now we need to add more frames in between the shape and the character.

    1. Select your second frame (the one with your character).
    2. Drag it over to about frame 10. It doesn't really matter where, for the moment.
    3. Hover over the first frame, a yellow highlighted line will appear. Drag it back to cover 3-5 frames.
    4. An empty frame will now appear between your shape frame and your character frame. Again, hover over the end of the frame and shorten it. This will make another new keyframe.

    You should have 2 grey keyframes on your timeline now.


    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