Original subtitles

Hi

Happy to see you in our After Effects interface animation course

At the moment after effects is still the best software to create animation as well as prototype interface animation

Because of its tools and flexibility we can create animations of any difficulty level with it

In this lesson we will discuss important basics of working with After Effects and properly create a switch anime

Animation from iOS

Let's begin

First let's look at the programs interface

It contains a number of panels that we can organize for convenience

For example we can move them by dragging behind the panels name

We can place them next to each other group them as tabs or close them

Don't be afraid to change their placement for different tasks based on what's most convenient for you

Do not have to reconfigure the panels each time you can save them as a workspace through the menu

Window workspace save as new workspace

Also in the top panel you can select one of the existing workspaces

Can I get confused with the presence of a particular panel will begin this course with a standard workspace

However if you already have experience you can leave everything as is

Otherwise save the current configuration under a name that you'll understand

Then select the standard workspace

If your panels don't look like mine you can reset them to their original state

Click on the icon to the right of the name of the current workspace and select reset to saved layout

So the first panel that we will use when starting to work in After Effects is Project

It contains all external files compositions and a few work elements from the current project

Compositions are like containers

What's create a new composition by clicking on this icon in the project panel

Also we can do this with a Ctrl + end shortcut

Will often use keyboard shortcuts as the significantly speeds up our workflow

Out of all the composition settings we need the following

The composition name

Type LS1 underscore practice

Move on to the composition size

We will draw small interface element

800 by 600 is enough as it is one of the standard sizes for dribble

Which is one of the most popular platforms to publish design and animation

Next is the framerate

For interface animation we usually use 30 or 60 frames per second

You can have a look at their comparison on our lessons page

But in this course we will use 30 frames per second

Now we just need to indicate duration

These numbers from left to right represent hours minutes seconds and frames

What Supply the settings by pressing okay

Now we can see the new composition in the project panel

Next three panels that are important to us our viewer timeline and instruments

If you were we will see everything that we draw and animate in the composition

In the bottom part of this panel there are various settings of the displayed picture

The timeline panel is separated into two parts on new layers will be placed one after the other in

In the left part of the panel and the right parts would the timescale is necessary for animation

For now everything is pretty simple

For drawing we will need the instrument panel

Most interface elements are simple shapes

You can find them with the shape button in the instrument panel

If you left click and hold it then you'll see a list of all the shapes

There is a rectangle and a rounded rectangle

Actually this is the same instrument but II has different values in the shape properties

We will look at them a little later

Also there's an ellipse a polygon and a star

In this lesson we will only use the rectangle and the ellipse

What's look at them in more detail

Select the lips and begin to draw in the viewport window right now the shape changes in height and width

Make a circle out of it we just need to hold shift

Also if we hold control is well then the shape will increase and decrease in size from the center

Like this

What's draw a rectangle next to

But first undo the selection of the current layer

Select the selection tool by clicking on the pointer icon or pressing the V key

We can use it to select the layers that we need

What's click in the empty space around the shape to undo the selection

Select the rectangle tool and draw a rectangle next to the circle

Great

Select the circle again using the selection tool

All shapes drawn with this panel or shape layers or vector graphics

Even though the picture starts to get pixelated when zooming in

We won't lose quality when increasing these shapes and size

When we select any shape layer we can see a few parameters of this layer in the top panel

First barometer that we can quickly change is Phil

We can change the fill mode by clicking on the name either to a solid color or to one of the gradient

By clicking on the pictogram next to it we can select the color or the fill

To the right there are stroke settings where we can also select the fill mode the color and the

Width of the stroke

However there are actually many more shaped parameters

We can see the new shape layers in the timeline panel

What's look at them in more detail

Expand the circle layer with this Arrow icon

We can see the ellipse group in the contents group

And there can actually be as many similar shapes in this layer as we like

With practice you will learn when it's better to add new shapes to an existing shape player or create a new layer

In the ellipse group we can see its shape

Stroke and fill

You can change the places of these groups

The order is important and affects the result of what we see

Also you can delete or hide them by using the I button

We can control the shape of the figure is drawn using the ellipse and rectangle tools quite easily

Expand the ellipse pathgroup

And in the rectangle layer rectangle path

There is a set of settings in these groups properties differ from groups by the fact that groups contain

Other groups and properties inside of them

While properties have their own values to the right of the name

We can change them by clicking on the value and type in the value we want using the keyboard

We're by left clicking and dragging them to the sides using the mouse

For the circle this is the size property that is responsible for the shape size and pixels

And the position of the shape inside the lair

Everything is the same with a rectangle only there's also a third property roundness

As you've probably guessed it is responsible for rounding the corners of the rectangle

However there are Universal properties that are inherent to all the layers

They are in a Transformer group

These are basic properties like position which is the position of the layer in the composition

And scale

Represented by percentage

Not pixels like size

So if you need to draw shapes precisely in pixels

Use the size property

And there's also opacity which is responsible for the opacity or transparency of a layer

Also each layer has its own Anchor Point

This is the center relative to which the layer will move

As a default when shapes are created it is located in the center of the composition

But this isn't always convenient

For example if we need to rotate a shape by using the rotation property

The set the anchor points in the center of the shape we can use the pain behind tool

Selected and move this point closer to the center

And to not have to do this by I select the snapping option When selecting the stool

It allows us to snap to the corners and center of the shape

Like this

We don't have to always go back to this option we can just hold control to use snapping when needed

Perfect

Now if we rotate the shape it will rotate precisely around its Center

Do not have to set the Anchor Point for each new layer we can edit this in a program settings

What's open General in a preferences menu

Check Center Anchor Point in New shape layer

This is better

So now that we understand basic shape parameters let's draw switch

Delete both layers

To figure out what instruments we need let's look at the switch and understand what it's made of

It's a circle and two rectangles with rounded corners

Let's begin with a circle

It would be logical to draw the circle using the ellipse tool

But not so fast

We will do it with the rectangle tool it will make work easier for us later

First draw rectangle by eye

Then give it a precise size

Expand the shape layer and set the size property to 100 by 100

Now the values of the woods and height are interdependent

To be able to control them independently click this chain icon

Now we can give the height and the woods their own values

Good

And round the corners by setting the roundness value to about 50

Excellent

This method will allow us to not have to draw other shapes separately duplicate the layer by selecting it and

Pressing Ctrl + D or command + D if you're on a map

Now they're placed one above the other

Make the bottom shape wider

What's make its with 175 pixels

Use it to make the stroke

Duplicate the bottom layer one more time

Set the values to 185 and 110

Because the shapes are the same color they blend together

Let's change the bottom layers color to light gray

Make the other two layers White

Like this

The Rambler is white just like the layer below it

But in the original it stands Out Among the other is by its shadow will use effects to do this

You can open the effects panel with effects and presets in the window menu

We already have it open here on the right

There are lots of different effects in the panel

We can find the one we need by typing drop shadow in the search bar

Added to the layer either by dragging the effects name from the panel to the lair

Or if the necessary layer is already selected just by double-clicking the effect

All effects that have been added to the layer are displayed in a separate panel effect controls

By the way we can also find all these properties in the layer panel

Besides contents and transform groups now we also have the effects group

Standard effect settings won't work for us what set the shadow direction to 180 degrees

This is more like what we need sometimes it's impossible to get a good Shadow with just one effect

We can add an additional shadow

Duplicated with Ctrl + d

Willis will highlight the shape of the circle a little better

What's at the distance property to zero

Decrease softness to 10

Adiposity 210 also

This is much better

Move the circle to the

Perfect

Let's move on to the animation

It's easy to make a clumsy and boring animation

So let's take things step by step to make it professional and study in detail why it works the way it does

The most important thing is that the property has a timer icon

Let's begin by moving the circle arrow to the right and then bring it back

This animation is created with the help of keyframes

On the timescale they will be created where we put this time in Decatur

First set the initial position of the layer or fix it

Move the time indicator to the zero frame

Expand the layer and animate the position property of the whole layer in the transform group

Click on the timer icon to create the first keyframe

Then go to frame 15

Right now our time scale is broken up into 10 frame intervals

To make these intervals smaller we can drag the right side of the slider to the left

Like this

Now we can move the layer to the right

And the new keyframe gets created automatically at the current moment in time

However this way of greeting keyframes works well only if they're already keyframes on the property

Like we have here on the Zero frame

And if you pour panel you can now see a dashed line

This is the trajectory of the layers movement

Each. Is the layers position in each frame

Next let's create a small pause and after 1 second grade another keyframe

Now by clicking on the rhombus in the stroke of the animated property

Also after about 15 frames copy the very first keyframe

Selected and copy it with Ctrl + C and paste it into the current moment in time was ctrl-v

To start the animation we just need to press space

Perfect

Remove the layer with the first two keyframes

In the time. Between the second and the third keyframes nothing happen

This is how we fix the position of the layer and create a pause and with the last keyframe we move the lair

We can use the same method to animate the layer size rotation and many other things

In comparison to the original it looks to linear and boring

Let's make it more smooth so that its movement is more realistic

Select all keyframes and open graph editor

We will get acquainted with it in more detail in future lessons

For now let's just make sure that we have the speed graph open not the value graph by right-clicking on it

It's easy to make it smooth

Exit graph editor

Select the key friends once again

Or just use the F9 key

The icons of our keyframes changed from rhombuses to our glasses

What start the animation

Perfect

This is much better

Open the speed graph

Now as you can see the graphs have become parabolic meaning that the movement speed slowly increases until

It reaches its peak in the middle and then slowly decreases

We can make the animation even better if we select II keyframe and move the graph to the left like this

This way we'll add acceleration to the movement or make it a bit more sudden

And the end of the movement will become a lot smoother

But this is not all

Notice that the animation rebound slightly when it reaches the edges of the space

This trick adds physics to the object

It's easy to do this

Go to 527 frames before the second key frame

And move the layer a little to the right

Almost to the edge of the white background

Select the keyframes Press F9 one more time

Open the speed graph and once again use the broth to make the animation accelerate in the beginning and slowly

Decelerate in the end

Start the animation

Cool

This is what we need

What's do the same with a reverse movement

What's new on to other layers

The internal shape just decreases in size

We can animate the scale property for this

Expand this layers transform group

Freaky frames in the same moments were we created the first two keyframes

Edit the speed graph in the same way

First Press F9 then open the speed graph and move it to the left

Like this

Also change the scale in opposite direction

Looks pretty good

No it's animate the bottom layers color change for this expanded layer and in it suspend

The Phil group

Animated in the same moments as the car property

By the way to avoid looking for the exact placement of keyframes every time

You can quickly navigate between them using the arrows to the left and to the right of the rhombus

The current time indicator will automatically move to the selective keyframes

On the second key frame click the color pictogram to the right of the property name

And find a similar green color in a color palette

Good

In the second half of the animation the color should go back to White copy II keyframe and pasted in

In place of the Third

This way will fix the color between the second and third key frame

And let's make a change back to White between the 3rd and 4th

I'm the same easing to the animation

Now let's look at the animation carefully

Notice how on the left a part of the shape remains visible this doesn't look good so let's remove it

Right now the leader of decreases in size to the shape Center because the Anchor Point is also in the center

If we move it using the Pan behind tool the layer will get smaller relative to this point

Pretty fast

However I'd like to show you an alternative trick that will help you with other tasks as well as with your homework

In addition to existing simple shapes we can also draw our own lines using the pen tool and connect them

Into complex shapes

This is the second method of drawing shapes in After Effects

With the help of these paths we can draw and animate sliders graphs freeloaders and many other

Other things

By clicking the viewport panel we will draw straight lines one by one starting with the first points

If we click and hold the left Mouse button and then the lines will become Kirk

By clicking the first point one more time we will connect and lock in the shape this opens many new possible

Goodies for us that don't exist with simple shapes

Will draw this shape using this tool

What's draw a straight horizontal line

Select a pen tool

Turn off the fill and turn on the stroke

Change its color temporarily so that it doesn't blend in with the other elements

But the first born approximately in the center of the circle

And the second to the right of it

Hold shift to make the line straight

No it's properly configure the stroke

Expand the layer and the stroke Property Group

Right now we just need a few properties

What's at the stroke Woods to 100 pixels

Jerome The Strokes borders expand the line cap list and select around cap

Now we just need to change the size select the selection tool using the V key

Well we're in the point editing mode it's very easy to select two points with it

Align vertically and along the left side

Then select the pass right points and Alignment along the right side using the right and left arrow keys

Perfect

Make The Strokes color white

And move the layer to the position of the previous one

Which we will hide temporarily by clicking this I icon

Now we can animate the shapes decrease in size using the stroke Woods property

Create keyframes at the same moment in time

For this we can select both keyframes and set the value on one of them

And it will be applied to all selected keyframes

Configure the speed drop the same way as before

At first glance it seems like nothing has changed

However working with a path is more flexible in this case than working with a shape

Next we will trim the past left side so that it disappears in the direction of the circles movement

To do this will use the shape layer modifier trim pass expand the layer with a triangle button

We will discuss the other ones in the future

What's make sure that it's below the path group otherwise we won't see any changes

It has only three properties

We can from the stroke on the left with the start property and on the right side with an N property

Who needs start

Set keyframes in the same places

And set the volume to 70 in the second and third keyframes

Configure easing and check the animation

Excellent

Now there are no more unnecessary elements

To see user interactions lets out a pointer

Make it simple just a small circle

Drive on the side but the first check that Phil is turned on and stroke is turned off

Another convenient feature is being able to switch between fill and stroke modes by holding down Alt

Add animation to the pointer before the switch animation starts select all of the switches keyframes

And move them to the right

To make sure that we see all of the keyframes in the composition

Select all the layers and press the Yuki to collapse them

And one more time to expand only the properties with keyframes

We need about one second to animate the pointers movement and clicking

Select all keyframes and move them by one second

Like this

We need to animate a few properties for the pointer

In order to avoid expanding all of the layers properties each time we can expand just what we need using ha

For example we can expand the layers position property using the peaky

This is much quicker

We will also need scale

Expanded with the Esky

Butthole downshift while pressing s so that both of the properties are selected

Great

What the first position keyframe on the Zero frame

And after a second move it to the circle Slayer

Will imitate clicking by decreasing and increasing the size of the pointer after 10 frames

What's new 5 frames before the switch animation starts

By the way to move more precisely between frames you can hold down control and press the left or right arrow

Arrow keys

After five frames decrease the layers scale by 50%

And after five more frames change it back to 100

Good

Copy V3 keyframes to the moment of the next click before the switch moves left

Configure the animation

Select all the new keyframes and press F9

Select the position keyframes

Open the speed graph and move it to the left

Perfect

What's good

We're done with the animation

Now let's organize our layers a little for convenience

We've drawn a switch and a pointer in separate layers

And it isn't convenient to move them to the side separately

Also if we move the layers where we've animated the position you keep frames will be created and existing one

Oil change

Which is also not convenient

In this case we can use layer parenting

We can link layers using the parent column in the layer panel

The background is not animated

So let's link other switch layers to it

So that by moving at two other layers will move with it

Select all layers except for the background

We can also parent the layers using the pick whip tool what's click and drag the spiral to the background layer

That's it

Nobody move in this layer all other layers will follow it

Without disrupting the animation

Also we can simultaneously decrease the layers in size and for example rotate them

Noticed that out of all the basic properties opacity remains independent for each layer

At the same time we can still move each layer as we please

Now that we can easily move the layers throughout the composition Let's Straighten the switches position by the center

To see the whole composition fit the viewport window to the height of this panel

Expand this list in the viewport settings and select fit

This way we will always see the whole composition matching the height of this panel to align the layers we can use

Use the Align panel

Open it from the window menu

Select the background layer

Each button aligns layers position along the sides of the composition

Good

Parenting is a very convenient tool but it isn't the only way to group layers

What's assume that we need a few of these switches in the interphase

We can duplicate all layers and move them to the side

However the more of them we have the more difficult and time-consuming it will be to change the color

Shape and animation and this isn't good

We can combine these elements into a separate composition using precompose

Select all switch layers and either right click and select precompose

Or press Ctrl shift C

Limit switch one

The new composition has been added to the project panel and replace the selected layers

And by changing the switch layers inside of its all changes will be applied to all the copies of the composition in a

Timeline panel

This is very convenient

If we need a different modification of the switch it's enough to just duplicate the composition in a project panel

Then make any changes that we need

Replacing the compositional layer with a new one is even simpler

Hold on alt and move the new composition to the lair

It will replace the old one in the same position

Very convenient

The last thing that we need in this initial stage is to add text

Select the text tool

It works in two modes

If we click in any place in the viewports we can type text of any length

To start a new line we just need to press enter

The second mode works differently

By clicking and dragging with the mouse we can create an area in which the text will be placed

With automatic line breaks

We can change this area as we wish

There are two panels for working with text

What select character and paragraph in the window menu

From the paragraph panel the first three buttons are the ones we need the most right now

Aligning the text to the left

Center or right

What's move on to the main text editing panel

Character

Units you'll find settings that are similar to any other text editor

Font heading size and line spacing can be edited just like any other property values

We can change the text color and add stroke to it was different types of overlay

However if you're not experienced in typography we don't recommend you style the text too much

It's better to stick to the regular look and authentic van character

This is it

Let's move on to your homework

Here's your task

Redraw 3 interface elements from any operating system or software in the simplest way possible

Using only 3 drawing instruments from the lesson

Ellipse tool rectangle tool and Pen tool

Or you can come up with your own unique elements

Also animate them using the basic properties that we covered in this lesson

And the trimpots modifier

Good luck