Animation using Wick Editor

Animation using

Wick Editor

STUDENT BOOKLET

Introductory Guide

Desktop App/Web Version

KS3 Computing

&

Creative

iMedia

THE INTERFACE

Cursor

Brush Pencil

Eraser

Rectangle

Ellipse Line

Path Cursor Text

Fill Bucket Eyedropper

Fill Colour Stroke Colour

 The Drawing Toolbar

 Additional Tools

Delete (Selected) Paste

Canvas Actions Copy Undo Redo

Send to Back

Send Backward/Forward

Send Forward

Flip Shape Tools Canvas Actions

 Project Toolbar

Settings

Export to different formats Create a new project

Open an existing one

 











THE INTERFACE

Delete (Selected)

 ^Inspector

Change Properties

Make Button/Clip

 ^Timeline

Gap Fill Mode Frame Size

Add Frame

Add Tween

Timeline Scrollbar Timeline

 Asset Library

Delete (Selected) Add Built in asset

Upload your own asset

Add to Canvas Search Tool

• 5

 











 Canvas Tools

Onion Skinning

Pan ZoomZoom

Recentre Canvas

Preview

• 6

 Before you get started you may want to set up a few things!

PROJECT SETTINGS

GETTING TO THE SETTINGS

1

Settings

 Click on theSettings cog wheel

OPTIONS

Click to change the canvas colour

Set to 12 fps as default but

you could change to 24

fps (digital video frame

rate)

• 7

 If possible it’s best to create your own assets as you can manipulate them more easily!

 The Drawing Tools are where you create what you want to animate:

DRAWING TOOLS

CREATING A CIRCLE

1

 Hold down the on your keyboard to maintain the proportions

CHOOSING FILL & STROKE

 Click on the Cursor Tool to ensure the shape is selected

1

Specific colour Specific colour

2

 Click either the Fill Colour or Stroke Colour and change it to what you want it to be!

Ellipse

T I P 

 If you want a specific colour search

S

Hexadecimal colour picker on the web and you will be able to get the correct combination of letters and numbers for the colour you want!

 If you’ve drawn a shape using the line tool, make sure you have no gaps – else you won’t be able to use the Fill Bucket.

SHAPES WITH LINES

Line Tool Fill Bucket

1

 Draw lines where you want them, making sure they meet each other if you want to fill them!

2

 If required, use the Fill Bucket to fill in your shape with a colour.

• 7

DRAWING TOOLS

CHANGING THE SHAPE

1

 Click on the Cursor Tool to ensure the shape is selected

2

 Pull at the edge of the shape and you will be able to mould the shape how you want to!

Path Cursor

CHANGING THE FILL/OUTLINE/OPACITY

1

 Click on the Cursor Tool to ensure the shape is selected

2

 Press on the shape next toFillto change the colour of the shape;

 If you want it to blend into the background you can drag the Opacity Slider;

 You can also change the size of the shape by changing the numbers in the HeightandWidthboxes;

 You can change the direction by changing theRotationnumber (which is the number of degrees) – you can use – numbers as well e.g. -90

Border Colour Border Width

Transparency Size/

Shape Properties

• 9

 A graphics tablet would be great for this tool, but with a steady hand you should still be able to use it well enough!

DRAWING TOOLS

Cursor

Brush

Pencil

Eraser

Rectangle

Ellipse Line

Path Cursor Text

Fill Bucket Eyedropper

Fill Colour Stroke Colour

 Pull at the edge of the shape and you will be able to mould the shape how you want to!

 Choose the thickness you want

FREEHAND PENCIL DRAWING

1

 Click on the Pencil Tool

Pencil colour

Pencil

Thickness

 Choose the colour pencil you want to use (in the Stroke Colourcircle)

2

3

 Choose other options such as:

 Pressure

 Smoothing

 Brush modes

PAINTING

1

 Click on the Brush Tool

Brush Colour

Brush

Pressure

 Choose the brush colour you

want to use (in the Fill Colourcircle)

2

3

Brush Size

Brush Smoothing

Relative Size

Modes

Pressure Useful if you have a graphics tablet stoke can grow or shrink

Relative Size When you zoom in/out of the canvas the brush size will adjust

Brush Modes Inside: Draws over a shape Outside: Draws behind a shape

• 10

 You can create flipbook animations in Wick Editor using frame by frameanimation

 An effective flipbook animation will have lots of frames with slight tweaks each time

FRAME BY FRAME ANIMATION

CREATING A FLIPBOOK ANIMATION

 Draw on the canvas

 Your first frame is created!

1

 Turn on Onion Skinning so you can see what you’ve already drawn when you move onto Step 3

2

 Click on the next space further along on the timeline to create another frame

3

CREATING AN ANIMATED GIF

 The process is the same but you could add you may not need any many different frames and you could reduce the framerate (e.g. to 1)

 Keep repeating the steps and export when you’re done!

4

 If you want to tweak your shape a little, consider copying and pasting then tweak your shape e.g. with the Path Cursor Tool

5

Next Available Space

Copy Paste

 Make any changes you want to your shapes/assets

T I 

P 

• 11

 Tweening (aka. Inbetweening) creates frames between keyframes so that you can have a smooth animation

TWEENING

HOW TO TWEEN

 Create the object that you plan to tween

 Akeyframe will be created

 Hover over the edge of the right-hand side of the keyframe

 Drag the keyframeacross thetimeline for how you want it to last

1 2

3

 Click on the first frame

 Click the Add Tween button

 Click on the last frame

 Click the Add Tween button

4

 Make sure the last keyframe is selected

 Click the Cursorbutton

 Move, resize and/or change the shape

5

 Click the Playbutton to test it

• 12

 Layersmake it easier to create animations as you can separate your content on different canvases and test something out easily!

LAYERS

ADDING & RENAMING LAYERS

DELETING LAYERS

SHOWING/HIDING LAYERS REORDERING LAYERS

 You automatically get one layer but if you want more, simply press the+button below a layer

1

 Select the layer you want to delete

1

 You cannot delete a layer if it is the only one you have, so create another first if you need to!

T I  P 

 Press the Bin Icon

2

 In the Inspector Panel, change the name of the layer to something logical and memorable!

2

 Select and drag the layer you want to move

1

 Press the Show/Hide icon to the left of the layer

1

SHOWING/HIDING LAYERS

Hide

Show

 Press thePadlock Iconto lock/unlock a layer

1

• 13

 The purpose of clipsare to allow you to

CLIPS

MAKING OBJECTS A CLIP

 Press theCursor Tool

1

 Select everything that you want to be in the clip by dragging

2

 Press theMake Clip button

3

RENAMING CLIPS

 In theInspector Panel, change the name of the clip to something logical and memorable!

1

ANIMATING A CLIP

 Press Edit Timeline and you will get a timeline just for your clip

1

 Animate your object(s) e.g. tweening

2

T I 



P

 If you are creating lots of assetsin Wick Editor, you might want to save them for later!

SAVING ASSETS

 Press theCursor Tooland select your asset (you may need to drag across to ensure it is all highlighted)

1

 Press theMake Clipbutton

2

SAVING YOUR ASSETS

 Press Control/Command + E on your keyboard

3

 Save the Wick Object file with a logical and memorable name in a place you will be able to find it again!

4

REUSING YOUR ASSETS

 In the Asset Library panel, press the Upload Assets button and choose your asset (wickobjfile)

1

2

 PressAdd to Canvas

T I 



P

Animation using Wick Editor

© Enjoy Computing

Introductory Guide

Wick Editor is a software that can create animations and games, both

of which can be interactive!

It is free and open source and you can use it online or download it for

your computer from

https://www.wickeditor.com