Intermediate
40 mins
Teacher/Student led
Learning Goals
Learning Outcomes
+65 XP
Pupils work on their own device
What you need:
Chromebook/Laptop/PC
Wick Editor needs no account

Animate It, Part 1: Frames, Onion Skinning and Playback

Students draw a bouncing ball frame by frame in Wick Editor, use onion skinning to place each frame, and play it back. This lesson counts towards outcome 3.8: students use these editing skills to build their digital montage in the montage lessons that follow.

Teacher Class Feed

Load previous activity

    1 - Start ~4 mins

    A red ball drops, bounces lower each time and rolls away

    This ball is 18 still drawings, each with the ball in a slightly different place. Shown one after another, about 12 a second, they look like one moving ball.

    Key point

    Animation is still pictures shown fast enough that your eye sees movement. A flick-book works the same way.

    Today's tool

    You will use wickeditor.com. It needs no account, but it forgets your work when you close the tab, so you will save a file at the end.

    👇 Mark your steps as done as you complete them.

    +5 XP

    2 - Frames and Frame Rate ~4 mins

    Illustration for Frames and frame rateA frame is one still picture, and an animation is a row of them. Frame rate means how many frames play each second.

    TermWhat it means
    FrameOne drawing, one moment.
    Frame rateHow many play each second. Higher is smoother, but means more drawing for you.
    Onion skinningSeeing faint copies of the frames either side, so you know where to draw next.
    PlayheadThe red line showing which frame you are looking at.
    Key point

    Keep changes between frames small. A big jump looks as if the object vanished and reappeared.

    👇 Mark your steps as done as you complete them.

    +10 XP

    3 - Hands-on: Draw Your First Frames ~13 mins

    Start a new project and draw a ball falling, one frame at a time. Follow the steps below.

    +15 XP

    4 - Hands-on: Onion Skinning, Then Play It ~13 mins

    Onion skinning shows faint copies of nearby frames. Use it to draw the ball rising, then play your animation.

    +15 XP

    5 - Make Sense ~4 mins

    You turned a row of still drawings into movement. These two balls use the same number of drawings. Only the spacing is different.

    Ball ABall B
    Ball A bouncing. It moves the same distance in every drawing.Ball B bouncing. It slows near the top and speeds up near the floor.
    Every place Ball A is drawn, all at once: evenly spaced from the top of the bounce to the floor.Every place Ball B is drawn, all at once: close together near the top of the bounce and far apart near the floor.
    Key point

    The movement comes from the spacing, which is how far the ball moves from one frame to the next. Big moves look fast and small moves look slow, and the spacing also decides whether the movement looks real.

    Which ball looks real? Look at how far each one moves near the top of the bounce.

    +10 XP
    123learn · Online learning platform

    Unlock the full learning experience

    You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

    Hundreds of curriculum-aligned lessons
    Interactive activities in every lesson
    Printable resources & progress tracking
    Get started
    Copyright Notice
    This lesson is copyright of Coding Ireland 2017 - 2026. 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