Animate

Its Christmas

Interface

Adobe Animate is used to create interactive animations

The preferred workspace is the classic look

Windows>Workspaces>Classic or you can choose small screen

Above the word properties you can change how much of the screen you can see.

Stage - This is where all the action takes place

Timeline - Where you control the action and movements

Tool Palette - Tools to create and edit

Properties window - Where you can individually change different elements

The Library - contains resources to be used and where you can store your own as you make them

Tools Palette

New project

To create a new project - File>New and choose the following settings:-

Width 1920 x 1080

Pixels

24 FPS (frames per second)

Terminology

Layers - It is important to name your layers and know what is on each layer and use the eye and the padlock to see and lock your layers so you dont add anything by mistake
Keyframes - These define key stages in your animation, the black dots on the timeline

Getting to know the basics - Frame-By-Frame

Double click Layer 1 in your timeline and rename>Hello

Click on the first frame in your timeline which is an outline of a circle as there is nothing on the Stage yet. When you add something it will be filled in with black

Use the brush tool and click on the colour swatch and choose a colour

Everything you do on the stage has properties which are on your right, click to open

On the brushes properties, you can change brush style

I chose a slender brush and chose size 29 in pink

Make sure you are clicked in the first frame

Draw the first stroke to say Hello

Click in the second frame and draw the next stroke and continue til complete

Choose Control>Play

See how it looks

You can extend the frame by clicking on the frame and choose insert, do this for each and you will extend the animation, this will slow it down, you can also press F5.

File>Exportas>animated giv>Save to downloads

Hello-2.gif

Hello-3.gif

Using the brush, colour swatch, keyframes and inserting frames

Frame-by-Frame animation

Motion - Classic Tween

Add a new layer and call it motion and padlock the previous layer.

You will notice that adds a number of frames to meet the last animation.

Highlight all the frames leaving the first one and right click and remove frames.

Click in Frame one - Draw a circle holding shift to keep it in proportion on the right hand side.

Click in the last frame and insert a keyframe and your circle will appear

Drag your circle to the left of your screen, in order for the movement to work your circle needs to be a symbol.

Right click in the middle and choose Classic tween, an arrow will appear

Images where you can see the pixels can be used for shape tweening and images to be used for motion need to be symbols

Pixels for shape tweening

Symbols for movement and classic tweening

Movement.gif

Create a bouncing ball

Create a keyframe at frame 5 and move the circle up and again at 10 and move it down and continue to the end.

Bouncing-circle.gif

Layers, keyframes and symbols

Now to add some squash and stretch

Click on each keyframe choose Modify>Transform

Stretch the ball when up in the air and squish when it lands on the ground.

squash-and-stretch.gif

Modify and transform - Squash and stretch

Add a gradient to your circle to make a ball

Your image is a circle symbol - right click >breakapart so you can see the pixels.

Click on the gradient tool and choose your gradient

Windows>Colour

Choose your colours and add to swatches.

Each image will need breaking apart, adding the gradient and then converting back to a sybol.

Gradiant - radial and colour swatches

Bouncing-ball.gif

Hello-ball.gif

Shape Tweening

Add a new layer and call it shape_tween

Remove the frames and leave frame 1

Add a red square, insert a keyframe at frame 20

and add a Blue polygon

Add a keyframe at frame 40 and add a yellow circle

Rightclick between each of the keyframes and choose shape tween

Shapetween.gif

You can then move each shape across the page

move-shapetween.gif

Hello-shape-move.gif

Practice Activity - Sailing

Using the tools you have learnt I want you to create the following scene

Create a new project

Using the tools in Animate

Create a scene using 100 frames

Create the sea using 2 layers and add motion

Create 3 clouds moving across the sky

Create a boat using shapes and the paint brush and move it up and down on the waves

Create a fish jumping in and out of the waves

Create the sun rising from the sea shapetweening into a sun with rays

Alternate which way movement goes either left to right or right to left.

Sailing.gif

Sailing1.gif

Its Christmas

Page updated

Report abuse