From Graphic Designer to Motion Designer

Working with multiple artboards in Ai

Hello and welcome back to the second Module of our course. In this lesson we go over a basic overview of Illustrator where we will work with artboards, layers and shapes in preparation for animating in After Effects.

Let’s get started.

Working with multiple artboards in Adobe Illustrator

Before we can start looking at the advantages of using multiple artboards we first need to know how to work with them inside of Illustrator.

There are 3 ways to edit artboards in our file. The first method is by using the Document Setup button located on the top navigation bar, this will open a panel where we can access the artboard settings by selecting the Edit Artboards button.

This is a good option but it takes the most amount of steps. The second way is by clicking on the artboard tool on our left side menu this will automatically open the artboard editing mode.

And finally, the method we recommend is using the Hotkey version. This requires us to press Shift plus O on our keyboard - automatically enabling the artboard editing mode.

You’ll be able to see that you are on Artboard Edit by looking at the interface of Illustrator - the top navigation bar should change and you will be able to see the name of the artboards as well as the artboard selected.

Let's quickly go over the options we’ll most commonly use on the top navigation bar.

The first two icons are used to change the orientation of the selected artboard. The plus sign will add a new artboard after the last artboard in the same row as our current selection. The trash bin will erase the selected artboard.

The name field is one that will be quite important when we export our artboards as it is part of the name of the exported file - so keep that in mind when naming your artboards. In this case, we will name each artboard: Scene and the Number of the artboard. This way when we export our artboards we have a clear way of knowing which scene goes after the other.

Then we have the Move/copy artwork button. This button is used when duplicating an artboard. To duplicate an artboard you need to click on it and drag it to your desired position while pressing the Alt key. When this option is selected the content on the artboard will also be duplicated to the new one. If the option is turned off we can duplicate an artboard without its content.

Remember we can duplicate more than one artboard by selecting others and pressing the shift key. Once we have them selected we can Drag and Alt key all of them at the same time.

Finally, we have the Rearrange All button. This button allows us to create more space between artboards, or neatly arrange new artboards. If you click on this option a new panel will appear with all the necessary options you might need to arrange them. In this case, I want my layout to go from left to right over two rows. I’m going to leave the number of columns to 4 and I’ll keep the default spacing to 120 so that the artboards are further apart. Then I click ok.

One thing that is important to remember when duplicating artboards or adding new ones is that they will be created last in the hierarchy of artboards. This means that even if you rearrange them they will still follow this number hierarchy based on the order that they were created. What this means is that if you export a PDF file - the order of the artboards is going to be based on the order that they were created, not the order that you have them on your screen.

If you want to rearrange the order of your artboards go to Window and click on Artboards. This will bring up a panel where you can change the order in which the program orders them.

You can also rename your artboards here.

Now that we know how to work with the artboards we can move on to what makes them special when working with After Effects for animation projects.

Exporting Artboards

We’ll start with an example of exporting Styleframes and/or storyboards for a client.

Look at these 4 scenes we've already created in our storyboard. Since we need to send them to the client for approval we have two options depending on how your company sends the storyboards. The first option is to add a small box (white or black) underneath the script text we have for each scene to make it readable. Then we can save the document as a PDF.

To save it as a PDF we have to go to File > Save As. A new window will pop up, select Adobe PDF from the list and click Save.

On the next Window, you can select the options you want Illustrator to take into consideration when creating a PDF. We’ll be sending this one as an email, therefore we want to make sure that the file is as small as possible so we need to change some of the options. For the General options we’ll go with these:

Uncheck all of the options and check Optimize for Fast Web View. The other options like compression on our left bar won't be necessary for this example as we are working with vector files - compression is more relevant to bitmap or rasterized images.

Remember that if you uncheck the “Preserve Illustrator Editing Capabilities” option you might have issues when you try to open this PDF file again in Illustrator. Certain things could be broken, like text boxes for instance, so always keep the original Illustrator file.

The second option for exporting Artboards is as an image, these can be added to the storyboard format/presentation that the company uses to send to the client. To export the Artboards as rasterized images we need to go to File > Export > Export for Screens… or press Ctrl + Alt +E on our keyboard. This enables the export for screen window.

In this window we’ll be able to see all of our Artboards, select the ones we want to export and even change their names if necessary. These two buttons at the bottom allow us to change how we see the artboards as a list or as a thumbnail gallery.

To change the names of the artboards we can simply click on their names and type into the box. The menu on the right gives us options for how and where we want to export our images. Once we’re done selecting all the options and parameters just click on the Export Artboards button and Illustrator will start the export process. Once it’s done Illustrator will open the folder where the files were created (if you kept that option checked).

Now that we’ve covered the export for Styleframes and Storyboards, we’ll talk about how we can export individual artboards from a single file with their layers into After Effects. As well as why it’s better to work with Artboards for our animation projects.

For this part of the lesson, we’ll work with a file that I’ve already created and used before as it has the artwork ready to be exported into After Effects. With our file open all we need to do is go to File> Save As… and on the new window select the Illustrator file type and click Save.

Now on our Illustrator Options window, we need to choose the “Save each Artboard” to a separate file and select the “All” option. Once you do this and click “OK” - Illustrator will do its magic and individually save the files for each artboard - as you can see here in my explorer window.

You may be asking yourself - what is so great about working with artboards in this way?

First all the artboards we’ve created and exported are still linked to our main Illustrator file, this means that if we make any changes to any of the artboards in the main Illustrator file and save it - the exported artboards will be amended. This is very helpful when clients need to change the fonts or the colours on all of the artboards. We are able to quickly jump into our main file, make the necessary amendments and then just export every artboard.

If we’ve imported the files to After Effects already - all these files will be updated automatically in our After Effects project.

Another great thing about working this way is that each Artboard will be saved with the layers that have content on that Artboard, this means that if we have a Layer called Backgrounds where we have all the backdrops for each of our Artboards this layer will show up on all of our files. If we have a layer called characters and it only has contents on one of the artboards - that layer will only be visible on the file for that artboard. Again - this makes it super easy for us to manage our projects using a single Illustrator file but there are a few things we need to consider when working with layers, so we’ll touch on in the next part of the lesson.

Working with Layers in Adobe Illustrator

Even if you are familiar with layers there are still a few concepts we need to know and consider when working with multiple Artboards. This will make it easier to export, import and amend our files in the project.

Layers in Illustrator work similarly to any other software in the Adobe Suite, the main differences that we need to consider are that:

Illustrator layers cannot be grouped inside folders as we can do in Photoshop.

If we have multiple objects inside a layer, those objects will be exported and then imported into After Effects as a single object so we need to break them down into individual layers if we want to use them separately.

Empty layers will still be exported and imported into After Effects and when selected they will show up as an empty layer in the form of a dot in the lower left corner. These empty layers can be recognized in Illustrator as they are missing the drop-down arrow.

On the left, you can see I have two layers. If I select layer one and add a square to any of my artboards, an arrow is now visible next to the square thumbnail preview. Indicating that there is an object on that layer. Layer 2 doesn’t have that arrow - so therefore it is an empty layer.

An excellent Illustrator feature is if you click on a layer and delete it, a pop-up will appear indicating that you have content on the layer. Whereas if you delete an empty layer, the pop will not appear and the layer will immediately be deleted.

Naming Our Layers

In order to change the name of the layer all we need to do is double click on the name of the layer to make it editable. However, if we click on the thumbnail or any other part of the layer a window will pop up where we can also change the name and the outline color of the assets on the layer.

For example if we change it to green and go back to our artboard - any selection on this layer will now have a green outline.

Naming layers can be quite a challenge and sometimes an impossible task due to time restrictions and files having large amounts of layers , but taking the time to do it is worth it because it will make it easier and faster to work inside After Effects.

Dividing Layers into Assets

As briefly mentioned before, if we have a layer that has multiple assets on it - when exported all the assets will become a single layer and that might be something we don’t want, especially if we want to animate elements individually.

To fix this without having to create new layers and copying and pasting each element to the new layer in the same position we can use the Release Layers (Sequence) feature. Select the layer we want to break into individual pieces, and make sure all the assets are ungrouped, otherwise, it will create a copy of the same layer. Then click on the hamburger menu on the Layers panel and here we’ll find the Release Layers (Sequence) option.

Don't forget to name your layers to something that will be easily identifiable in After Effects.

Once we click on this option we’ll see that we have now sub-layers inside our main layer that we selected, these are now individual layers and represent each of the objects that we have on that layer. The only problem is that if we export and import our file into After Effects like it is right now we would still have a single layer with everything grouped on it. This is because After Effects can’t handle a sub-layer structure from Illustrator. Therefore in Illustrator, we need to select and drag out those sub-layers so that they become individual layers and are separated from the main layer and recognizable.

If we go back to After Effects and re-import our file. We can now see that all the layers are separate and ready to be animated individually.

Exporting Layered Files

As we briefly mentioned in the last lesson, when exporting multiple Artboards each file will export any asset that is inside the artboard boundaries.

As an example we’ll look at the following file. We have two Artboards and a few layers. From bottom to the top, we have the following layers: background, text, Circles, Squares, Triangles and Star.

If we export this file now, we get two different files for each artboard.

Artboard_A has been exported with the background, text, circles and square layers.

Artboard_B has the background, text, Circles, Triangles and Star layers. But why was Artboard B exported with the circle layer if that is an asset from Artboard_A? This is simply because a slither of the circle is touching Artboard_B so Illustrator includes it as an element of Artboard_B.

What happens when we import these files into After Effects? We might expect our circle on Artboard_A to be complete so that if we want to animate it moving across the screen - the entire object is visible. But as you can see here, After Effects will always crop the layer to the boundaries of the artboard. If we look at artboard_B the same thing has happened where we only have a small sliver of the circle in our composition, even though the After Effects selection still shows the outline of the full size of the circle.

This is something that is very important to consider when working with the layers inside Illustrator so that they are prepared correctly for use in After Effects; anything that’s outside the boundaries of the Illustrator Artboard will be cropped when imported into After Effects.

Conclusion

Working with layers makes it easier to manage, import and export our files for After Effects. This knowledge can be connected with the use of artboards to maximize its effectiveness. But we still need to consider many of the conditions that come with using both Illustrator and After Effects as there are certain functionalities that might not work as we expect them to and that might throw a spanner into the works if we’re not aware of them.

Assignment Review 2A

Hello and welcome back! This video will help you review assignment 2A. In this first assignment for module 2, you’ll organize artboards and layers in Illustrator so that they are ready to export to After Effects. We’ll go through all the steps and best practices that you should’ve followed to successfully complete this assignment. If you haven’t completed the assignment yet - go back and do it now!

With the provided Illustrator file open, let’s first organise the artboards so that they can be exported in the correct order. This can be done by using the artboards panel and clicking and dragging each artboard so that they are in the correct order.

The next step in our assignment is to place the artboards in a single row with a 120 pixel space around the boards, to do this simply use the Rearrange All option shown in the top panel.

We now need to create the layers from our task, and transfer the artwork from “Layer 1” to the corresponding layers that we’ve just created. Remember not to move the artwork from the current position on the artboards, for this we recommend you use the shortcuts command/control and x to cut, and command/control and v to paste the artwork on the exact same position on a new layer. When you’ve finished, delete the now empty “layer 1”.

Save your file and remember to activate the save each artboard to a separate file option.
Open a new After Effects project and import each individual Illustrator file. Take some time to examine the compositions, do you see how some of the artwork has been cut? Make sure to check all the layers in each composition. This marks the end of the first task of our assignment.

Assignment 2A - Task 2

Go back to the original Illustrator file and make the necessary changes so that each individual artboard file contains the requested layers.

For example if we look at Artboard A - it shouldn't contain the Stars layer, therefore no artwork from that layer should be in the boundaries of artboard A. So let’s move this star to Artboard B which contains the Stars layer.
Next we need to change the placement of the shapes so they fit within the boundaries of our artboard and therefore wont get cut in After Effects. If elements are too big you might need to resize them or export them independently.

Continue moving the artwork around so each artboard contains the correct artwork within the boundaries. Once we’re done we need to save the file and replace the individual Illustrator files we created before.

Now go back to After Effects and check what changes have been implemented from our work in Illustrator.

There are a few things you might notice that are of importance, first, on artboard A we have some missing layers in our composition, this happened simply because we removed the shapes from our artboard, so those layers no longer belong in artboard A and have been deleted from the individual file. To fix this select the layers and simply delete them.

Another thing you might have noticed is that our artwork doesn’t appear to have moved from its original position and it’s still being cut by the boundary of the composition. In this case all you have to do is move the layer around and you’ll see it is no longer being cut.

A third thing to keep in mind is that in some cases, like in composition B, we can find some layers that don’t belong in the composition, but instead of having them as missing files, we see them as empty layers. If you go to the individual Illustrator file you’ll find them there as empty layers too.

Why is that? You might ask. This can happen because in the original Illustrator file the content of the layer went over the artboard, so Illustrator placed the layer in the individual file even though no artwork from that layer was within the boundary. This can also happen when working with grouped objects - even if there are no elements on the artboard, the bounding box still goes over the artboard boundary.

To fix this you can break apart the group and re-export the file or just delete the empty layers and move the artwork around so it's visible in your composition.

The same thing applies to artboard C.

Finally, in order to finish this assignment, go back one last time to the original Illustrator file and change the background colour for each of the artboards, save your file and choose the replace option so these changes are saved as individual files. Take a look at your After Effects compositions and see how they are immediately updated.

Hopefully this assignment helped you have a better understanding of how efficient your workflow between Illustrator and After Effects can be, we encourage you to keep practising by experimenting with different shapes, layers and artboard sizes.

Remember: practice makes perfect!

Working with strokes & fills

In this lesson, we’ll dive deeper into the basics as we learn about using shapes in After Effects. Let’s get started. It’s important to remember that when creating any shape in Illustrator there are a few stroke options that might not translate well in After Effects. Let's take a look at our stroke panel inside of Illustrator. You can find this panel on the sidebar represented by this icon.

If you can’t find this panel just go to Window and select Stroke and this will make it visible. Feel free to attach it to any part of the interface you feel most comfortable working with.

If this is your first time opening the panel it will probably show a limited amount of options. What I mean by this is that only the weight of the line will be visible.

If this is the case on your interface you can click on the hamburger menu on the top right corner of the panel and select Show Options to display the complete panel interface.

There are only a few Shape Fill options and we’ll probably only use two of them - the solid or gradient fill. Both of these options translate well into After Effects when importing them. Remember that using gradients tends to generate banding. What is banding you ask? It is an ugly color artefact that makes a smooth gradient appear to be segmented into blocks or fragments. This can be caused by color profiles being too close to each other, a low bitrate or even the compression of a video. It’s advised that you use caution when using color gradients, keep them to a minimum or ensure that colors are not too similar.

Here’s an example of banding, this screenshot was taken from an MP4 video exported from After Effects. As you can in some of the gradients - bars are visible and different colors don’t smoothly transition into one another. This is something we really want to avoid - so that our videos always look professional and crisp.

Introduction to Paths and Masks in After Effects

Before we can move on to copying and pasting shapes from Illustrator into After Effects - there are a few things we need to take into consideration.

In order to create shapes and then be able to paste them on a path or as a mask, we first need to create a shape in After Effects. To do this, click on the pen tool and create the shape you want.

Once we have our shape, if we want to edit it or change the path, all we need to do is click on the shape, double-tap U on the keyboard and then select the path property. This will allow us to select the different nodes and move them around. Alternatively, we can go to Illustrator, select and copy a shape and then paste it directly into this parameter in After Effects. Now the shape is a path ready to be animated in After Effects.

The same principles for shape layers apply to layers with masks. Let's say we want to create a mask for a solid layer. First, we need to make a solid - I'm going to create a black one and if I want to create a mask, select the pen tool and draw your shape by adding different nodes. Alternatively, you can select a predefined shape next to the pen tool, for example, a circle. Use Q on your keyboard to scroll through the shape options. Now we have two masks on our solid layer.

If you select M on your keyboard you'll be able to access the mask properties on your layer. Let’s copy and paste this star from Illustrator onto our mask layer. As you can see, the star has replaced the mask we drew. If you don’t want to replace a mask, using the pen tool click anywhere on the solid and a new mask will be created where you can paste the shape. This will become a lot more clear when we start touching on the different things that can be or cannot be done with strokes and fill as we copy and paste more information from Illustrator into After Effects.

Shapes as Illustrator Vector Layers and After Effects Vector Layers

This lesson covers vector shapes that we create for our animation that will be used as a static vector image - this means that we won’t be able to do any shape/vector transformations but it can still easily be imported it as a vector file or layer into After Effects - without any translation errors. Any of the following stroke and Fill options will work correctly:

• Stroke

• Weight

• Cap Type

• Corner Type

• Stroke Alignment

• Dashed Line

• Arrowheads

• Profile

• Fill

• Solid Fill and;

• Gradient Fill

Remember that if we scale the vector layer we just imported up and down, the stroke weights will be scaled too. Meaning the selected weights in an Illustrator vector layer will not keep the same weight if scaled in After Effects.

Illustrator Shapes as After Effects Masks

In the previous lesson, you learnt that you can copy a shape or vector path from Illustrator and paste it directly into After Effects and then make use of different layer options. Now we’ll dive deeper into learning about copying and pasting Illustrator shapes as Masks in After Effects.

We’ll learn more about masks and how to animate and use them in a later lesson but for now, all you need to know is that masks in After Effects cut out the visibility from a layer in your chosen shape.

The most efficient and practical part is that we can copy shapes from Illustrator and paste them as masks on solid layers in After Effects. Now we’ll have the same shape and paths from our Illustrator file in After Effects. If we have artwork that is made out of one or more shapes, we can paste them together and a mask will be created for each object in the group. The only problem with this is that we might encounter some issues with default settings - for example, if the stroke of the vector object we’re trying to use as a mask has certain Illustrator options enabled, we might get undesired results when pasting it in After Effects.

Any of the following stroke options will work correctly as none of them will be considered when being pasted as a mask into After Effects:

• Weight

• Cap Type

• Corner Type

• Stroke Alignment and;

• Centered Alignment

All the other options will have undesired effects such as:

Stroke Alignment - inside or outside.

Any of the options that are not center aligned will be recognised as an expanded shape and will be pasted as a closed mask with an inside and outside stroke.

Dashed Line:

Depending on the size and gap of the dash and how the shape is pasted - After Effects might create individual masks for each dash - this applies to closed shapes and open paths and might not be the result you are looking for. It might be better not to paste dashed lines at all, and rather create a shape layer and add the dashes from the stroke parameters in After Effects instead.

Arrowheads:

The arrowheads will be pasted corresponding to the shape of the selected arrowhead, but the stroke will be added as a rectangular mask instead of a line.

Stroke - Profile:

These will be pasted as expanded shapes instead of lines with distinct profiles.

Illustrator Shapes as After Effects Paths

Just as we did with the mask properties, a shape path property can also be pasted directly from Illustrator objects. The advantages of animating and working with After Effects shape paths are huge as they allow us to animate the position of the nodes and the length of the handles, this is useful for creating organic animations and transformations between two nodes without having to create or draw each frame. We’ll dive deeper on how to animate using the shape path layers in a later lesson, for now we’ll touch on how the stroke options behave when copied directly from Illustrator to the path value in After Effects.

Any of the following stroke and fill options will work correctly as none of them will be considered when pasting into After Effects:

• Weight of the stroke

• Stroke Colour

• Cap Type

• Corner Type

• Stroke Alignment and

• Fill color

The ones that we need to pay more attention to are the following….

They will generate random results where part of the path will be pasted as a shape and the other parts will be pasted as Masks. This will be more clear when we look at the next examples.

The dashed lines, Arrowheads and Profiles

Dashed Lines

The dashed line pastes as multiple expanded masks.

Arrowheads

Arrowheads paste as masks and not shapes.

Profile

In this case profile property will paste the shape as an expanded stroke - making it harder to animate.

Illustrator Shapes as After Effects Position keyframes

Another way to use vector shapes from Illustrator in After Effects is as position keyframes for paths, this means we can use the shape of a vector object to create a path that our assets in After Effects can follow. When doing this After Effects will create a keyframe for each node on our vector shape that will interpolate the distance between each node so that the object will move at a constant speed.

For this property we can use both closed shapes or open paths but as you might already suspect, not all the stroke options will be translated correctly when copied directly into After Effects.

Any of the following stroke options will work correctly as none of them will be considered when being pasted as position keyframes into After Effects:

• Weight

• Cap Type

• Corner Type

• Stroke Alignment and;

• Profile

All the other properties shown below will be pasted as masks even if you’re selecting the position property:

• Stroke Alignment - Inside or outside

• Dashed Line

• Arrowheads

Illustrator Layers as After Effects Shapes

Finally, we have our last way of using our Illustrator vector files inside After Effects. The way that this works is after importing our vector artwork as layers into After Effects and placing them inside a composition. Then we can right-click on them and select Create > Shapes From Vector Layer.

After doing this After Effects will take our vector layer and create a Shape layer with all the paths that make up that vector layer. As you might be aware by now, some of the stroke options might not be translated as we might think during this process.

The following stroke and fill options will work correctly when using the create shapes from vector layers feature inside After Effects

• Stroke Colour

• Fill Colour

• Cap type

• Colour type

• Stroke alignment and;

• Stroke Weight

As for all the other options like stroke alignment (inside or outside), arrowheads and profile the same thing will happen as it has in our past examples - After Effects will transform them into paths.

Next we’ll have a look at what happens when you convert dashed lines and gradient fills into shape layers in After Effects. As you can see our gradient fills become gray boxes - this is because After Effects doesn't know how to translate our gradient shapes from Illustrator.

And as for our dashed lines - If we click on their paths in After Effects, we can see that even if it has been translated into Illustrator, the line has been broken up into separate paths. There’s no reason to work with dashed paths like this - so it’s also something you need to consider.

Something we also need to mention is that often when you create shape layers from your vector files you may get an unwanted bounding box surrounding your shapes. If we take these two layers and convert them into shape layers, you’ll see that each layer has a bounding box. That bounding box represents the Illustrator artboard, but why is it happening and how can you fix it?

In our Illustrator file we are making use of transparency - After Effects doesn’t know how to handle the transparency or blending modes when transforming objects into shape layers. An easy way to fix this is by removing any kind of transparency or blending modes, in this case I am going to put this at 100% opacity, and save it.

Now in After Effects, if I transform these layers to shape layers - the bounding box is just surrounding the shape.

Let’s go back and see what we can do if we have transparency and want to fix this kind of issue with our shape layers. I'll convert this layer to a shape layer shape and as you can see, it has a bounding box.

If I expand our contents, we can see that we have all these groups. Each of these groups you only have a path and different options for that path. But as you can see - we have the group here. This group is the bounding box. So what we can do is go into each group and find the groups that have the bounding box and erase it from each of them.

This is a very tedious process and it's something that I don't recommend doing because as you can see, we have a lot of layers for this character. And if I go to the last one, each one of them has this group.

Alternatively, you can select the shape layer, grab your pen tool, highlight the bounding boxes and hit delete.

So the best way to work around this is with the pen tool or by fixing your illustrator file before you import it into After Effects.

Conclusion

Using vector shapes between Illustrator and After Effects can be a really powerful tool, but we should always consider that some of the options might not translate as well as we intend them to. So knowing when and how to use them is very important. And once we get into the animation part of this course, you'll be mesmerized at how many animation methods this brings to the table.

Assignment 2B Review

Hello and welcome back!

Let’s go through all the steps and best practices that you should’ve followed to successfully complete the second assignment for module 2. If you haven’t completed the assignment yet - go back and do it now!

The first step is to open After Effects and import the provided Illustrator file, open composition created by default and take a look at the layers we have. Next, open the second Illustrator file and let’s start by identifying the layers in our panel. We've named the layers in our second Illustrator file so you can identify them easily.

In After Effects select the “snowflake” layer and use the pen tool to create a mask. Use the shortcut “m” to open the mask value. Go back to the Illustrator file and copy the snowflake shape and paste it on the mask layer in After Effects. We now have two masks on our layer and we can see the snowflake shape in the preview panel.

Let’s move on to the second part of this task and create a new shape layer using the pen tool, go into the layer properties and find the path property, then go back to Illustrator and copy one of the moon shapes. Paste a moon as a path value In After Effects. Click and drag the new layer and place it between the “clouds” and “bg” layer.

Now let’s work on making the animation, for this section we’ll use shapes from Illustrator as position keyframes in After Effects.

Next we’ll select the layers we’ll be animating and use the shortcut “p” to open the “position” property.
In our Illustrator shapes file we’ll identify the corresponding shape to be pasted in After Effects. Let’s start by animating the snowflake. Copy and paste the shape onto the position property in After Effects. Repeat the process for each layer.

Side note: this will be a parallax animation. Parallax is a technique in computer graphics to create the illusion of depth in a 2D scene. This is achieved by making the objects in the front move faster than objects in the back.

In our example the “tree” layer is closest to the imaginary “camera” so it must move faster than the “mountains” and “clouds” layer. Simultaneously the “mountains” layer moves slower than the “trees” but faster than the “clouds”. The “clouds” layer is the furthest from the camera and should therefore move the slowest.

Now let’s paste the “moon” position and preview the animation. The animation is basic and works but we encourage you to always make adjustments to the timing, placement and duration. Do you remember the timing analogy of the beating drum in our previous lessons? We don't want one drum beat and then silence, we want a constant rhythm and pace in our work. So remember It is always more visually pleasing to animate assets coming in at different times so the animation doesn’t feel rushed or boring.

Next you can use some of the knowledge from previous assignments and change the colours in the original Illustrator file and see how it updates in After Effects.

We hope you enjoyed the first animation project and learned more about using shapes from Illustrator as masks, paths and position keyframes in After Effects.

Basic introduction to After Effects and its interface

Hello and welcome to the third module of our course. In the following lessons, we’ll take a more in depth look at how to work inside of After Effects. Let's begin.

Basic introduction to After Effects and its interface

We’ll begin by learning how After Effects works by discussing the different parts of the interface, effects and layer types that we’ll be working with, and learning what they do.

Workspace

Before we start working inside After Effects we need to get familiar with the interface of the program, because even the way panels attach to one another is different from Photoshop and Illustrator.

The first time you open After Effects your interface should look similar to this, this the default layout. There are other layout options that can be found if we go to Window > Workspace, and select any of the other options we have there.

We can even save and restore our own workspace by selecting Workspace and then Save as New Workspace. Once we do this our new workspace will show up under the name we gave it on this list as you can with mine here.

You can quickly arrange your panels by dragging them where you want on the interface and you’ll see After Effects will show you a visual reference of where the panel will be pinned to.

You can double-click over any of the panel names to make it full screen, and double-click again to bring them back to their normal size. This option is helpful when trying to organize a lot of layers or effects on one panel.

On the top of our interface we have our main toolbar and starting from left to right we have:

• Home: This will take us to the home menu we get when we open After Effects.

• The selection tool: This is the main way of interacting with layers and objects and can be accessed quickly by pressing V on our keyboard.

• The Hand Tool: This helps us pan around our timeline and our canvas. It can be accessed quickly by pressing and holding the space bar.

• The Zoom Tool: This enables us to zoom in and out but it is far easier to use the scroll wheel on your mouse instead.

• The next three tools are grayed out as they are used when working with 3D layers and cameras inside After Effects. We won’t touch on this for now.

• The Rotation Tool: This is used for rotating our layers - we can quickly access this by pressing W on the keyboard. Then in order to rotate a layer we’ll click and drag the tool over it. Remember that this is changing the rotation parameter so if you have any keyframes this will add or replace them in the timeline.

• The Pan Behind Tool allows us to move the anchor point of a layer and can be accessed by pressing Y on our keyboard. Avoid moving the anchor point if you already have position keyframes on your layer as this will affect them.

• The shape menu allows us to select a shape from a drop-down menu that we can use to create masks or shape layers in our comps. If you double-click on this icon while selecting a layer this will create a mask in the selected shape on the layer. You can cycle between shapes by pressing Q.

• The pen tool is for creating nodes and paths and editing them by using the various options shown by holding in the button. These are the same options we have in Illustrator, except for the mask feather tool. This tool feathers edges by dragging one of the nodes of a mask shape.

• The text tool creates text layers wherever we click on our composition.

• All the other options won’t be touched on in this course, as they are for more advanced training and therefore we won’t need them now.

The Project Panel

In our default workspace on the left hand-side we have our Project Panel. Every asset we import, composition, and layer type will be shown here.

At the top you’ll find the search bar: it is quite useful as it allows us to not only to find a certain asset or composition but it also shows missing files. If we type Missing, you’ll see it displays any missing or unliked files in our project.

If we extend this panel you can see the information for each file you’ve imported. You can select an item and press return on your keyboard to change its name and you can also change the label color for that asset in your panel gallery. This will affect the color of the layer once it is placed inside a Composition.

At the bottom of the panel we have a few buttons, the first one gives us quick access to the “interpret footage” menu.

The options inside this menu give us different parameters we can change depending on the type of file we have imported, in our case we’ll mostly use it for two things. The first one is to change the frame rate of a video we’ve imported, what I mean by that is sometimes we import videos that were exported with a different frame rate to the one we’re using in our composition. This can lead to weird frame skipping in those videos on our timeline or them being out of sync to audio that we’ve already recorded. If this happens all you need to do is tell After Effects to interpret that footage with the same frame rate you’re currently working on.

The second case is when we have a video or audio file we want to loop a certain amount of times. I'll use this one as an example. So Instead of making 20 copies of it and moving and adjusting them in our timeline we can just tell After Effects we want this file to loop a certain amount of times, so that when we drop it into our timeline the duration of it has been extended by the amount of repetitions we choose.

Next we have the folder button, this creates folders so we can better structure our files. We can either click on it or drag and drop files onto the icon to add them to new folders.

The next button is “Create a new composition”, when we click on it we get the New composition dialogue box where we can set the different parameters for our new composition. We can also access this panel by going into Composition > New Composition or by using the shortcut: Cmd / Ctrl and N on our keyboard.

Our next icon is for accessing the project settings, but I would suggest not changing anything from this panel as the default values will work well enough.

The next button is the bit per channel button. This gives us quick access to change the bit per channel depth information on a project. Again this is an option we don’t need to change and it should always be left to 8bpc, in case it’s been set to 16 or 32 you can cycle through them by clicking on them while holding the Alt /Option key.

Finally we have the trash bin button that erases anything we have selected on our panel, but it’s easier to press the delete key on our keyboard instead.

After Effects/Tool Panels

The Tools Panel

On the right hand side we have what I call the Tools panel. This is where After Effects displays all the other panels as a list that you can interact with and unfold or collapse them for easier access. After Effects has a lot of tools but the one we’ll probably use the most is the Preview Panel. Here we can change the options for how our composition previews will run when we press spacebar, or even change the shortcut for that if we want.

Another panel that is quite important is the Effects & Presets panel. Here you’ll find a quick access list to all the effects that we also have in our top navigation bar, but the big difference is that we have a search bar for ease of use. To apply any effect to a layer all we need to do is select the layer and either double click on the effect we want to apply or drag and drop it onto the layer. There are a lot of amazing effects and each of them has their own parameters. I would suggest if you’re interested in learning more about them do a quick search on Youtube as it would be impossible to cover them all in this course.

Some other panels we’ll probably use a lot and are quite similar to the ones in Illustrator are:

• Align

• Character and

• Paragraph panels

There are a lot of other panels but none of them will be useful for this course and some of them are used for Compositing and VFX and not for motion design.

Compositions

Compositions are the equivalent to Artboards in Illustrator, the main differences and one that we need to consider when working with them is that we can nest composition inside of other compositions and we can do this an infinite amount of times. This would be like having a file inside a file, inside a file, and all of them being editable throughout the process. Inside each composition, we can create an infinite amount of layers, or at least as many as our computers can handle.

This might sound confusing at first, and if we’re not careful and don’t understand how they work we can find ourselves running into problems, especially when working with nested comps but we’ll touch on this more in a later lesson.

Before we jump into working with comps we should first have a look at the interface.

This is the panel where we’ll see our composition and a preview of our work (as you might already know) but let’s talk about the options we have on this panel.

We’ll start by looking at the top of where we have a square that represents the default color assigned to our composition - you can change this color by selecting the label group icon on the Project panel. As you can see this color has now been updated in the main panel.

Next to it, we have a lock. In After Effects, there are only two panels that have this option. Namely the Composition and the Effects Control panel. If we lock this panel and then change from one comp to another you’ll notice that we keep seeing the same original comp in the main preview panel and it doesn’t change to the selected one as usual. This is really helpful when working with nested comps when we need to animate two different timelines at the same time and we need to have two or more compositions on display at the same time.

The next menu is a quick access menu to manage and jump between our Comps and finally we have the hamburger menu. This has a few other options that we won’t go through as they will not be needed.

Just a quick tip: if you ever close your composition panel by pressing the close shortcut (Cmd Ctrl and W), don’t panic, you can get your panel back by going into Window > Composition.

At the bottom, we’ll find a few more options and as there are many of them I’ll try to go through them as quickly as possible.

The first one shows and allows us to change the magnification in which we’re seeing our composition preview.

The second one is to change the resolution of the composition we’re working on. This is independent from our preview resolution - that one needs to be changed in the Preview Panel.

The third button is to change the Fast Preview options, this is something we won’t use right now.

The next one is the Toggle Transparency button, when we create a new Comp and we select the background color on the panel - the color works as a visual reference but it’s really considered as being transparent. That’s why if we place a comp inside another one the backgrounds don’t overlap. If we click on this button we can toggle between the color or transparency view.

Next, we have the toggle Mask and shape visibility tool and as its name suggests we can toggle the visibility of the contour of masks and shapes that we select.

The Region of Interest button allows us to draw a mask that will only show and preview what’s inside the area. We can also use it to crop our comps by creating an area of interest and then going into Composition > Crop Comp to region of interest.

The choose Grid and Guide option is a drop-down menu that gives us access to visual grids and guides in our composition. One of the most used grid is the Title and Action Safe area, this guide was predominantly used when working on TV or broadcasts to show which regions of the video might get cut off depending on the display and therefore allows us to see what area to avoid when placing assets, text and information. Nowadays this doesn’t necessarily apply to digital content but it is still best practice to avoid these safe areas, as subtitles and video player interfaces might cover information in your video.

You can also show or hide the rulers for the composition in this menu but it’s easier to access them using the shortcut Command control and R.

The next button is for working in different color channels, again this is something we won't use in this course.

The Adjust Exposure setting allows us to increase or decrease the screen exposure without affecting the real project and can be helpful in some instances but this won't be used for our animation projects.

The Snapshot and show snapshot are some really helpful tools as they allow us to take a snapshot of our composition at the time we select by moving our timeline indicator. We can then use it as a comparison inside other compositions or at different times in our timeline.

Finally, we have the Go to time menu that allows us to place an exact time code to jump to in our composition.

Timeline

The timeline panel has a few options we need to learn about. We'll start with the timecode on the top corner that displays the current time our time indicator is placed on, by default this one is set to show time in frames per second, seconds, minutes and hours. But we can change it to frame count by pressing Command control and clicking on it.

The search bar is not just for finding files or layers by name but also for finding properties and displaying them, for example, if we want to show the path property of these four layers we just need to select them and then type “path” and as you can see After Effects will quickly only display these parameters. This works for all other Effect parameters as well.

The flow chart button allows us to see a tree branch structure of our project with all the nested compositions.

The shy switch hides all layers that have the shy parameter activated making it easier to manage our layers.

The Frame Blending option - we won’t use this for our projects.

The Motion Blur toggle turns the preview visibility of the motion blur effect on or off for the layers that have this parameter selected.

The graph editor changes how we view our timeline to edit our keyframe interpolation in a graph view, this is quite an advanced option that we won’t touch on for now.

Moving to the next row we have toggles for layer visibility, audio on or off, solo layer and lock layer. These options are straightforward and do exactly as they say.

The drop-down arrow allows us to display all the properties that our layers have, depending on the type of layer and the effects we apply. This might show a few different options. But the most common ones will work with are:

• Position

• Scale

• Rotation and

• Opacity

The keyboard shortcuts for these properties are accessed by pressing:

• P for position

• S for scale

• R for rotation and

• T for opacity

Next we have the shy toggle option for our layers, all layers that have this icon in the pressed position (like this) will be hidden once we activate the shy toggle on the top bar.

The continuous rasterize option works in different ways and we’ll touch on this at a later time, for now all you need to know is that vector layers that have this option activated can be scaled without losing quality or resolution.

All the next icon options won’t be needed for now except for the motion blur toggle option for the layers. This tells After Effects that you want that layer to have motion blur applied when you enable it on the top navigation bar.

The mode dropdown menu gives us access to the different blending modes that you might be familiar with from Illustrator and Photoshop.

The next option is called preserve underlying transparency. If we have a layer at the bottom that has any transparency (like this text layer) and we place an image on top of it and activate the underlying transparency option - the alpha channel of the layer at the bottom will now mask the layer.

The next parameter is for Track mattes, this is an advanced option that we‘ll touch on more in module 4.

The spiral is called the pick whip tool, and is one you’ll use a lot as it allows us to parent a layer to another and create a relationship, you can see who the layer is parented to in the box on the right. What this allows us to do is to have a layer use all the keyframe parameters of another layer - like the position, scale and rotation, while still being able to animate the original layer’s individual parameters.

You’ll see that pick whips are also available for layer parameters, we won’t go into much depth on these as they are a bit more advanced because they start delving into Expressions, which are coded animation parameters.

All the way to the right we have the marker tool. We can create a place marker in our composition by selecting and dragging it to a specific place on our timeline. This will create a marker that we can move by clicking and dragging and we can also rename and color code it by double-clicking on it.

Finally, we have our composition timeline. You’ll be working here the most! This is where we can place keyframes on layers and can view these layers across the time allocated to our composition.

Types of Layers

There are a few different types of layers that we can work with in After Effects and each of them has its own uses and parameters. For now, we’ll focus on the ones that we’ll be using the most.

To locate and create new layers, you can go to layer > new and select the one you want.

• Text layers:

As its name suggests, this layer can contain text. It can be added in a few ways. The first one we’ve already seen and the second is by selecting the text tool or by using the shortcut Command or Control and T on our keyboard. Once we are in the text tool mode we can either click to create a position for our text or click and drag to create a text box. Text layers are red on our timeline to make them easy to identify.

• Solids:

Solids are solid color layers that are placed on our comps and are mostly used to apply effects to or cut from using masks. To add a solid go to Layer > New > Solid or press Command control and Y on your keyboard. When you add a solid to a comp it will also be added to a folder called solids in your project panel. Be careful when editing the values or erasing solids in that folder as they will be modified or erased on any comp that you have placed them in. If you want to edit a solid's property in a composition you can select the solid on your timeline and click Command control plus Shift and Y. This will not edit the overall value in the panel but it will create a new solid.

• Null Objects:

A Null object is a transparent layer that can be used to drive the movement of other layers by parenting them to these nulls. These objects are quite helpful when trying to move or change the size of objects that are already animated without losing or adding new keyframes. Like in the following example where we have a layer that already has an animated path and a scale parameter. If we parent it to a Null object using the pick whip we can move, rotate and resize the layer without losing or changing any existing animation properties. You can create null objects by going to Layer > New > Null object or by pressing Command control plus alt, shift and Y.

• Shape Layers:

These are vector objects inside After Effects. We can create them by deselecting every other layer and then using our shape layer tool and by dragging any shape we select. We can also use the pen tool, but again we need to have no layer selected in order for this to work.

• Adjustment Layer:

Adjustment layers are transparent layers created to add effects to them and then have all layers below them be affected by the adjustment layer effects. Just remember this layer also has a bounding box and if moved around or masked the effect will only show inside those boundaries or the boundaries of the mask. To add an adjustment layer go to Layer > New > Adjustment layer or press Command control, alt and Y.

Conclusion

Knowing and understanding the interface of After Effects is really important. When we start working on a project it is easier if we know what each panel does and what options we have to use them.

Understanding the different types of layers in After Effects is quite useful as it allows us to achieve different results and make our process even easier if we know when and how to use them.

In the next lessons, we’ll learn how to use the interface in our projects and start creating keyframes for animation.

Assignment 3A Review

Hello and welcome back!

Let’s go through all the steps and best practices that you should’ve followed to successfully complete the first assignment for module 3. If you haven’t completed the assignment yet - go back and do it now!

In After Effects create a new composition and name it adjustment layer. We recommend making a square comp with a black background. Let’s start by adding a pentagon shape, you can do this by double clicking on the shape tool, and selecting the polystar path property. Here you can change the number of points in order to create a hexagon like the reference image provided.

Now continue to add the rest of the shapes. Remember to always deselect the shape layer before adding a new shape, otherwise you’ll have both shapes inside of the same layer. Now that we have all of our shape layers, let's scale and place them like the reference image.

Next we can add the adjustment layers. You can do this by going to the layers window or by using the shortcut “command/control, plus alt plus y”. Next we need to add the effects to each of the adjustment layers, in the effects panel search for “gaussian blur”. You can add it by clicking and dragging the effect onto the layer or by double clicking on the effect while having the layer selected.

At first glance you won’t be able to see a difference, so let’s adjust the “blurriness” to something like 40 and deselect the “repeat edge pixels” option.

Next, let’s search for hue/saturation and double click on the effect to add it to the adjustment layer. Let’s set the parameters to mimic the reference image. Repeat the process with the final adjustment layer and the glow effect.

To finish this task, click and drag each adjustment layer to the correct position in the composition so that it fully resembles the reference image.

Assignment 3A - task 2

Let’s create a new square composition that is 10 seconds long and name it “animated properties”.

Add a new red square as a shape layer and make sure your Current Time Indicator is at the starting point of the timeline. Use the shortcut “p” to place a position keyframe. Then move to the 1 second mark on the timeline and while pressing the shift button click and drag the red square across, and a new keyframe will automatically be added. Repeat the process for the next three keyframes of the animation. Don’t worry if you have the automatic bezier curve interpolation option activated - as you can remove these curves once you have finished adding the keyframes. Use the “convert vertex tool” option found under the pen tool, and simply click on each of the points to remove the curves.

The position property has now been animated. While pressing shift use the shortcuts “s” and “r” to open the scale and rotation properties. Add one keyframe to each property at the beginning of the timeline, and set the values according to the assignment requirements, then move to the 4 second mark and add the remaining keyframes.

For the final part of this task let’s add a new null object, you can find it on the layers window or by using the shortcut “command/control plus shift plus alt plus y”. Parent the shape layer to the null using the pick whip. At the beginning of the timeline place a keyframe on the null’s rotation property, then go to the 4 second mark and place another keyframe, play the animation back to see how the shape layer’s animation has been affected. Try parent the shape layer to the null but instead of doing it at the beginning of the timeline do it at the 4 second mark. Can you see how it has changed?

Null’s are powerful tools! And as you can see our shape layer maintains its original animation but when parented to a null we can alter the direction of the path in which it moves. Remember that even after removing the parent the changes to the shape layer’s animation remains.

Understanding Keyframes

Hello and welcome back! Now that we understand our After Effects interface a bit better, we can move on and start using it to animate!

For this part of our course, we will start working with keyframes and learn how they work and how to use them. We’ll go over the different parameters that can be animated using them and their properties as well as some tips and problems you may encounter while working with them.

Keyframes

Keyframes in after effects work by activating a parameter’s stopwatch, this will create this familiar diamond shape in our timeline where our current time indicator is positioned. Once the stopwatch is on/blue any change in the parameters will be recorded.

Changes in the parameters can be either done by clicking on the parameter we want to change and writing the value we want, or by clicking and dragging over the value that will then work as a slider that we can move from left to right.

If we press down the shift key while dragging, you’ll see that the values increment by tenths instead of by increments of one. If we press Ctrl/ Cmd while dragging the values will increment by decimals instead of by whole numbers.

Keyframe interaction on the Timeline

The different transformations have different keyframe parameters.

Position has two parameters while working with it as a 2D layer, these parameters stand for X and Y positions. X being left to right and Y up and down. The base way of animating them is by having a keyframe for both of them where any movement in any direction is recorded for both parameters, but if we want to record the X and Y parameter separately we can also do this by right-clicking over the position and selecting separate dimensions.

When we do this you’ll see that we now have a value for X and one for Y that can be animated independently. If you want to go back to working with them together just right-click and deselect separate dimensions. Remember that if you had keyframes for each parameter and you collapse them this will probably modify your animation path.

The anchor point in After Effects is the point in which all transformations are manipulated from. It works the same as the position value but there is no way of separating the X and Y parameters.

Scale has two parameters and a chain link. The first parameter is for the width and the second one is for the height but they increase and decrease in proportion to one another, unless we uncheck the chain link icon - and we can then change the values independently.

Rotation has a value for whole and degree rotations, this means the first value will tell After Effects how many clockwise or counterclockwise rotations we want. The second value will determine how many degrees this rotation should be.

Opacity has a single value that defines the percentage of transparency of an object; this value can’t go over 100 or under 0.

Keyframe interaction on the canvas

Moving any object or changing their scale in our canvas also will be recorded on our timeline if the stopwatch is set to on/blue for position, anchor point, rotation and scale parameters.

If we press shift while moving objects on our canvas we’ll lock our movement into a straight axis depending on the direction up and down or left and right. The same goes for scale and rotation. If we scale and object by dragging the sides of the bounding box it will scale unproportionally unless we press the shift key while dragging.

A quick note is that scale can go between positive and negative values and if we scale past a certain value we’ll end up on one of these two sides, so be careful when scaling directly on your canvas.

As for rotation if we press the shift key it will rotate in 45° increments. Just remember that the rotation parameter is divided into full rotations and degrees. So if we spin using the rotation tool directly on our canvas we should make sure we’re not adding full rotations.

Moving on the Timeline

Back in the composition and on our timeline you’ll see that there’s a diamond shape on the left-hand side of each of the parameters, this will only show up when we have our stopwatch set to on. The arrows on the side allow us to jump between the keyframes we have in our timeline, and the icon will turn blue if that keyframe is selected. If it’s gray and we click on it a new keyframe will be added where our time indicator is placed.

Another way to move and snap to a keyframe is by holding the shift key while moving our time indicator on the timeline, if we do this you’ll see the indicator snaps to the next closest keyframe, this works for visible keyframes as well as moving quickly to the beginning or ends of layers on the timeline.

We can also scroll up and down our timeline using our keyboard, the problem is that the shortcuts vary depending on the type of keyboard - either for Mac or PC. For PC and Mac keyboards that have Page Up and Page Down keys, we’ll move one frame up or down by pressing them, and if we press shift plus one of these keys we’ll move in increments of ten keyframes on our timeline. For mac users that don’t have the page up or page down keys you can press function plus the up or down arrows on your keyboard to move through the timeline - adding shift will also allow you to move by increments of ten keyframes at time.

Finally, if we want to jump to a specific point in time, we can quickly do so by pressing option or alt plus shift plus J. A window pop-up will appear where you can add the time you’d like to jump to.

Types of Keyframes

After Effects has different types of keyframes and they are identifiable by their shapes on the timeline and each of them has a different function.

Linear Keyframes: these are our base keyframes that have a basic interpolation between them and go directly from one value to the next. We can visibly see that the interpolation is constant by looking at the dots between the nodes in our path that are equal distances from each other.

Bezier Keyframes: these keyframes are used to smooth the movement in and out of a keyframe to the next one. As the name suggests it creates a bezier curve but if we look at our path you’ll see our nodes have not changed, this is because the bezier curve is only visible in our graph editor view. Bezier paths have three different variants: Easy Ease In, Easy Ease Out and Easy Ease.

Easy Ease In: movement has slower incoming velocity and a constant outgoing velocity.

Easy Ease Out: movement has a constant incoming velocity and a slower outgoing velocity.

Easy Ease: movement will have smooth incoming and outgoing velocities.

If we look at our path you can visually see that the dots between nodes change when we add these keyframes, indicating that it takes more time to move from the starting position to go full speed.

To access them you can select the keyframe or keyframes you want to change to bezier keyframes then right-click over them and select keyframe assist and choose the type of Easy Ease keyframe that you want. You can also do this using the shortcuts:

• Easy Ease In: Shift and F9

• Easy Ease Out: Command Control, Shift plus F9

• Easy Ease: F9

Note: On Mac these shortcuts might not work as they depend on the mode that you have assigned to the Top Function Bar on your keyboard, this will either be the standard function keys or default function keys.

Auto Bezier Keyframes: these keyframes auto smooth the curves of the velocity between nodes, this is not commonly used as we don’t have a lot of control over the behavior and as you can see on our graph editor the difference is too minimal to be noticeable.

You can choose these keyframes by pressing Command or Control and clicking over the keyframes on your timeline, and you can do the same to turn them back into linear keyframes.

Hold Keyframes: These keyframes are used to stop the interpolation at the current value, if we have any keyframes after this one we’ll see that once it reaches them on the timeline it will continue animating depending on the type of keyframe that you have after that. Hold keyframes have two distinctive shapes depending on the type of keyframe chosen - these will be either linear or bezier keyframes.

To create hold keyframes we can right-click over the selected keyframes and select toggle Hold Keyframe from the menu. To revert back just select the same option again or Command Control and Click on the keyframes.

Rove Across Time Keyframes: These keyframes are used when we have a lot of keyframes for a layer but the animation has no consistent interpolation between each of the nodes making the object move at different speeds between them. By selecting all these keyframes and Right-clicking over them we can choose the rove across time option. This will make the first and last keyframes of our selection stay visually normal and the ones in between them will become small dots. They will now be rearranged in the timeline to have a consistent interpolation between each of them. If we move the first or last keyframe you’ll see that the one in the middle adjusts accordingly to keep the interpolation constant. To remove this just right-click and deactivate the option by selecting the keyframes you want to return to normal. As a note keyframes will stay at the current place they are when removing the roving across time option.

Just remember that rove across time keyframes are only available for position keyframes.

Working with keyframes

When working with keyframes there’s an option that allows us to change how After Effects does temporal interpolation and spatial interpolation.

Temporal interpolation is something that we’ve briefly touched on before, as it is how After Effects interprets the interpolation between keyframes in our timeline and its effects are only visible when using the graph editor.

Spatial interpolation is how After Effects interprets the interpolation between keyframes in our Composition, and can only be visible when we play around with the nodes of our path using the pen tool.

But what does this mean and how does it affect your animation? Well if you right-click on some of the keyframes that you have animated and go to keyframe interpolation… a pop-up menu will appear that has the default properties for animating objects in After Effects.

If you haven't changed anything in your After Effects properties you should have Temporal interpolation set to Linear and Spatial interpolation set to Auto Bezier. The second option might make some of your animations work in weird ways or not as you intend them to. I’ll leave the options as they are and show you what I’m talking about.

If I go into the composition and start adding position keyframes you’ll see that by default After Effects will add bezier curves to my path for each node. This might seem helpful but it could lead to weird bouncing in our animation as you can see in the following example.

My object should be travelling from left to right, overshooting a bit and then coming back to its final position, but when we test it out you can see that it goes past the position I wanted for my overshoot keyframe. If we take a closer look we can see that this is happening because of the auto bezier paths.

So how do we fix this? The first option is to select the keyframes and then right-click on them and go to keyframe interpolation and change the spatial interpolation to linear. The problem with this is that the next time I animate the position of another object the same thing will happen and having to change the Spatial interpolation each time will be extremely frustrating.

In order to fix this we need to change After Effects default settings to always use the linear property for spatial interpolation. To do this, go to Edit > Preferences > General. If you're using a Mac then you'll find the preferences panel in the top left-hand corner by selecting After Effects in the navigation bar. Now under general options select “Default Spatial Interpolation to Linear”. Now the value for the spatial interpolation will always be set to linear.

Just remember that if you're animating the position and adding bezier curves to a path you might still have to manually fix these issues. You can do so by using the Convert to vertex tool from the pen tool menu and move the handles of the path nodes to fix the wiggle motion.

Finally, there are a few more tips you should know when working with keyframes.

If we want to make our animation duration longer or shorter we can do so easily by selecting all the keyframes we want to shorten or extend and then click and drag the first or last keyframes while pressing the Option or Alt key on our keyboard. If we do this After Effects will auto-adjust the spacing between our keyframes as we drag them.

Next, you can easily invert the order of keyframes or your action without having to change your keyframes manually. You can do this by selecting the desired keyframes and then right-clicking on them and going into Keyframe Assistant > Time Reverse Keyframes. Now you’ll notice that our keyframes and subsequent animation are running backwards from what we had originally.

Finally, we need to talk about copying and pasting keyframes as this might not work as you would expect when selecting keyframes from multiple layers. If we try to copy and paste keyframes from a single layer or from one layer to another you should have no problems. It becomes problematic when we try to select keyframes from multiple layers and then we try to copy and paste them. As you can see After Effects has duplicated the layers instead of pasting the keyframes, unfortunately, there’s no way to get past this without third-party plugins and you’ll have to manually copy and paste keyframes on multiple layers one layer at the time.

Conclusion

Keyframes are our most basic tool when animating in After Effects, and knowing and understanding their different properties and how they work will help us get the desired results for our animation without a problem.

This lesson went into a lot of technical parts and we recommend that you experiment with how the different keyframes work on your own. What are you waiting for - try them out now!

Assignment 3B Review

Hello and welcome back!

Let’s go through all the setps and best practices that you should’ve followed to successfully complete the last assignment for module 3. If you haven’t completed the assignment yet - go back and do it now!
Let’s recreate our reference video.

In After Effects create a new composition and name it “comp 1”, set the aspect ratio to be 16 by 9. Let’s make the background white. Import the Illustrator layer and convert it using the “create shapes from vector layer” option. In the composition identify the grey rectangle group and delete it. Using the pen tool create a line as a shape layer - this will be our “floor” reference.

Now that the shape layer only consists of the token we can proceed to animate the properties in line with our reference. Use the shortcut “p”, shift and “s” to open both the position and scale properties.

Animate the position first and use the “convert vertex tool” from the pen tool options to switch between the linear and bezier interpolation.

To get that squash effect, you will have to deactivate the “constrain proportions” option from the scale property. Remember to adjust the position when animating the scale.

Preview your animation and don’t forget to toggle on the motion blur.

Let’s move on to the second reference video and for this one create a second composition and name it “comp 2”.

Like you did in “comp 1” create shapes from the vector layer and delete the grey rectangle group. Animate the position and scale properties. Remember to change the keyframe types to imitate the reference video.
Keep practising and experimenting with keyframes and layer properties.

Bye for now!

Basic Animation | Essential Graphics

Hello and welcome back! A while ago After Effects implemented a new tool called Essential Graphics. This tool allows us to overcome some of the biggest problems we had in the past when working with the program to create templates and reusable assets for our animations.

In this lesson, we’ll start with how we used to do things before we had Essential Graphics and then move on to how they make everything easier now.

Before Essential Graphics

When working on big projects or in long-term partnerships with clients, we might start thinking about ways to create reusable assets for our animations. Assets that can be easily be imported and modified by changing things like the size, color or typefaces in a way that helps us build our projects better and more efficiently.

The problem is the way After Effects was built to manage these asset galleries, meaning the only way we had to work with this was by creating multiple copies of compositions or nested compositions and then we would have to manually go and change the parameters in each individual comp to adjust them to the project's needs.

This all sounds nice and easy but as projects get bigger the file structure also grows and changes. Having multiple copies of a composition and managing them in different timelines in a way that we don’t end up accidentally changing or replacing something that might break other scenes becomes a constant problem.

The other huge problem is that layers and animations that are expression driven, for example, the ones we get when rigging characters with Third Party plugins like Duik, tend to break if you create copies of the composition or nested composition with expressions in them.

As a way to fix this and make asset management easier Adobe introduced the Essential Graphics tools into After Effects in one of their latest versions.

How Essential Graphics Work

Essential Graphics allows us to create assets inside comps and set almost any parameter as an essential graphic. As you can see in the following example where I have this shape inside the Shape Composition.

If I nest this composition into another composition you’ll see that under the dropdown tab we now have something called Essential Properties, and if I unfold that one I now have Color, Rotation, Scale and Stroke Width parameters. So far this is nothing that we don’t have in our normal transform tab already, but the biggest difference is that my shape is already animated and I can make indestructible transformations to it.

This means if I change the color to blue, the rotation to 90° and the scale to 120, it will still animate perfectly, and even better than that if I go into the shape composition everything is as it was originally.

Now let’s say I need another copy of my shape, I can just drag and drop the shape layer again or duplicate the one I already have in my timeline by selecting it and going into Edit > Duplicate or by pressing Command Control plus D on my keyboard.

With my duplicate shape layer ready - let’s say this time we need to change the color to green, flip it around and have no stroke. As you can see I can do all of it on my duplicate and still have it animate perfectly, and instead of having to duplicate the Shape Comp three times in my Project panel to have the Original version, the blue and the green, I was able to do so with the use of essential graphics and have only one Comp and know that no matter how many times I drag it into a new timeline or duplicate it as a layer no changes will happen to the original one.

This gets even better if you think that now you only have to manage a single asset if the client sends any amendments for that asset you can make those in one of them and have them update all through your project in an instant. For example, let's say the client wants to have rounded corners for our shape, I can quickly make the changes, then go back into my main comp and both my layers have been updated and have kept their modified parameters.

The last thing that makes the use of Essential Graphics a great addition to After Effects is that we’re also able to animate any of the Essential Properties parameters we have in our timeline and this still won’t affect our original asset composition.

How to use Essential Graphics

Now that we know how Essential Graphics works we can start looking at creating our own assets using this tool.

We’ll start by creating the layers for our asset. For this example, I’ll be using this Position Marker design to show all the ways we can implement Essential Graphics.

Almost every parameter that a layer has or that has been added through effects can be used as an Essential Property, even if we add them to an adjustment layer those parameters can still be used as Essential Properties.

So far the only ones that don't seem to be supported as parameters are the ones related to paths like masks and shape paths.

Back on our animated marker, we need to decide which parameters will be useful to use as Essential Properties. In this case and thinking this icon can be used in different projects just by slightly changing the fill and stroke colors as well as the stroke weight and possibly even the size of the icon. Let’s start with those.

Adding parameters to be used as Essential Graphics is quite easy. We just need to right-click over the parameter we want to use - I’ll start with the fill color and on the menu I’ll select Add property to Essential Graphics. Once we do this a new panel will show on our interface for Essential Graphics.

This panel lets us manage the different parameters that will become Essential Properties once we drag and drop our comp into a new timeline. We can change the names of how the properties will show.

Let’s talk a bit about the options available on this panel:

At the top right, we have the Name field, this is the name that will be given to the Essential graphics if we export them as a template with the button at the bottom.

The second field is a drop-down menu, here you’ll find a list with all the comps in our project and if we select one this will show the Essential Properties added to that Comp. We’ll touch on this more at a later time as it’s not very intuitive as to how After Effects adds the properties to this panel from our layers.

The button “Solo Supported Properties” will unfold all our layers so that they show all the properties that can be used as Essential Properties, this will include the properties of effects if they’ve been applied to the layer.

The “Set Poster Time” Button will update the image reference on the top right corner with a snapshot of the full comp at the current time selected in the timeline.

Since all Essential Properties added to this panel will show together in the same comp once we add it to a timeline, we need to be careful how we name things so that they are easy to distinguish.

We can rename the Essential Properties added to the panel by clicking on them.

Next to each property name, you’ll see the default values that After Effects will use when you import the comp into a new timeline, this means that if you change any value in this panel your main values will be updated making them the ones that will be used from now on.

At the bottom of the panel we have an Add Formatting button that gives us two options, the first one is for adding comments, these comments are only visible on this panel and are useful when we need to leave a message to another designer that might use these assets. The second option is Add Group, this is quite useful as it allows us to show parameters grouped in foldable and unfoldable rows, and will become very helpful when adding Essential properties for multiple layers in order to find them in our main composition.

Now that we have a better understanding of this panel let’s add other parameters that I want for my Essential Properties. For stroke color, stroke weight and size. Remember you can search for specific parameters by selecting one or more layers and typing the parameter name into the search box or by pressing command control and F to activate the search box.

Now I’ll add the same property parameters as layer one for our second layer. Then proceed to group and rename all my Essential Properties accordingly to make it easier to work with in the future.

Now let's import our marker into a new timeline and we’ll check our Essential parameters. As we can see all of them are working correctly, and I’m sure some will wonder why make scale an Essential Parameter if we already have the scale of the layer? While that might be true the problem is that if I change the normal scale and make my object smaller the animation gets cut off from the top where the bounding box of the shape comp ends. However if I scale the marker using the scale Essential property for both the layers we get the correct result. The same thing might apply if you’re working with rotations so keep that in mind.

Now that we can see the essential properties I’m sure you’ve noticed we have some new icons next to each of the parameters, these are used to pull and push values in and from our main object comp.

The first option resets our current value to the default one by pulling from the Primary comp and works like a reset button.

The second option allows us to permanently make the original object parameters change to use these new values as the default ones, so if I make my scale smaller and then Click on the P ush Primary button, then my default value has been updated - as we can see if I go to the primary comp.

Just remember that if you update any of the default values of the primary comp with this method all the other assets that you’ve imported into other timelines will also be updated, so be careful when using this option.

Things to consider when using Essential Graphics

As a new tool and one we hope Adobe keeps improving, there are some things you need to consider when using Essential Graphics.

The first one happens when we use certain effect parameters, like Gaussian Blur for example. If we add this property to the Essentials Properties in my layer and I crank up the value, you’ll see the effect is cropped by its bounding box and activating the collapse transformation option doesn’t solve the problem. Adding the blur to an Adjustment Layer doesn't work either. The only way I’ve found this can be solved is by adding a solid to the back of the layer we’re using with Essential Graphics. This way the effect doesn’t get cut off but the problem is that you need this Solid to be at least 1% visible in order for this to work.

As for properties like Position, if we have some animation keyframes for this on our shape and we add it to Essential Properties the position animation will not play and will instead be replaced by the position parameters or animation that you have on the timeline when you import the asset.

Back to the drop-down menu on the Essential Graphics Panel. When working with different comps and layers you should make sure that the composition that you want to use in this panel is set as the primary composition otherwise you’ll be trying to add the parameters as essential properties from a comp that is not selected and since that is not possible After Effects will prompt an error message saying that the property is unrelated to the Comp you have selected on the panel. And it will show as a red property on the Essential Graphics panel.

Finally, if you try to erase a layer or an effect that has any Essential Properties attached to it - After Effects will prompt a message to let you know about this and confirm if you want to delete it.

Saving and Loading Essential Graphics

You may have noticed that there is an export motion graphics template button at the bottom of the panel, the problem is that it doesn’t work as you would expect. Once you save the template either on your computer or in your cloud library you’ll have a dot M-O-G-R-T file. The problem is that it can't be imported or dragged and dropped into your project panel. The only way to use it is to load it as a project and then After Effects will convert it into an After Effects file. This means that if you do it this way you will only open one file at the time so it won’t be very efficient.

The best way to use these files is to create an After Effects project file that will work as an asset gallery and you can keep building into it, then you can import that file to your new project as needed.

Conclusion

The use of Essential Graphics can greatly improve the way we build our projects and make it easier to create and share easy-to-implement assets galleries for our projects.

Remember you can make any of the different layer parameters and effects that we’ve touched on into an Essential Property. Using essential properties in your workflow can save you so much time and create efficient project files that can be used as powerful templates for the future.

Keyboard Shortcuts

As an addendum to this module, we’ll touch on the most common keyboard shortcuts as well as those that will be useful to know when working on our projects.

Just remember that some of these shortcuts will only work on the panel you have selected. For example, if you want to use the duplicate command press Command control and D on your keyboard. If you are on the project panel then it will duplicate the comp or asset that you have selected but if you are on the timeline any layer you have selected will be duplicated.

General Shortcuts

Command Control N - Creates a New Composition

Command Control K - Opens our selected Composition Settings

Command Control A - Selects all. This applies to layers on the timeline, or assets in the Project Panel or effects on the effects window.

Command Control shift A - This deselects all.

Command Control shift Y Opens up the Settings for the selected Layer

Command Control shift C Turns selected Layers into a Composition

Command Control D - Duplicates the selected layer

Command Control shift - D Cuts the layer in the timeline where our current time indicator is placed

A - Shows the Anchor Point parameter of the selected layer

P - Shows the Position parameter of the selected layer

S - Shows the Scale parameter of the selected layer

R - Shows the Rotation parameter of the selected layer

T - Shows the Transparency parameter of the selected layer

M - Shows the mask parameter of the selected layer

If you want to quickly show a few of the parameters of a layer - you can do so by clicking shift and then the shortcut like R, T, S and A - you’ll see that all of them are now visible.

Command Control alt and Arrow Up - this moves the layer up one slot.

Command Control alt and Arrow down - this moves layer down one slot

Command Control alt shift and Arrow Up - moves layer to the top

Command Control alt shift and Arrow Down - move layer to the bottom of the composition

B - Sets the beginning of the work area to the current time indicator

N - Sets the end of the work area to the current time indicator

Command Control shift and X - Trims The composition of the current work area

I - Goes to the start of the layer in the timeline

O - Goes to the end of the layer in the timeline

W - Activates the rotation Tool

Y - Activates the Pan Behind Tool

G - Activates the pen tool

Command Control and Y - Creates a new Solid

Command Control alt Shift and Y -creates a new Null

Command Control + alt and Y - create a new Adjustment Layer

Command Control + F - Activates the search bar either on the Timeline or in the Project Panel

These are some of the most common keyboard shortcuts - there will be a downloadable file with this course that you can save as a cheat sheet to reference while you work.

Assignment 3C Review

Hello and welcome. In this course we’ll look at all the ways we can integrate Adobe Illustrator and After Effects. Our goal is to help you and your team improve on the project planning, management, delivery times and overall quality of animation.

Hello and welcome back!

Let’s go through all the steps and best practices that you should’ve followed to successfully complete the third assignment for module 3. If you haven’t completed the assignment yet - go back and do it now!

In After Effects create a new composition and name it “Main Square”. Set the resolution to 1080 by 1080 pixels and make sure the background is white.

Let’s start by adding our square shape - you can do this by double clicking on the shape tool. Next go into the rectangle path 1 property and change the size to 200 by 200 as seen in the reference image.
We’re going to use the same colours as the reference, but feel free to use whatever colour palette works best for you. Now let’s change our fill colour using this hex code.

If your square doesn’t have a stroke (like mine) select “stroke options” on the top panel and select the “solid colour” option. Then we can change the stroke colour to resemble that of the reference.

Next let’s add the drop shadow effect to the square shape by double clicking on the effect name while having the layer selected.

Use the shortcut “p” to open the position property. Open a new Illustrator file and create a 1080 by 1080 artboard. Start by adding a circle shape. We need to make our square move in a perfect circular path of 400 by 400 pixels so go to the top panel and adjust the size of the circle to 400 pixels.

Copy the shape and go back to After Effects to paste it on the “position” value.

Now that our square is animated in a perfect circular path let’s add the required properties to the Essential Graphics.

Group the properties accordingly and then we can continue with the second task for this assignment.

Assignment 3C - task 2

Create a 1920 by 1080 composition and name it “Main Comp”.

Click and drag the “Main Square” composition into the “Main Comp” composition and duplicate it twice so we have three copies of the same comp. Rename them and assign a number to each. Now let’s spread out the layers and move our comps so that they are not on top of each other.

In the “Essential Graphics” tab for each composition find the requested properties and change them to match the reference.

Essential Graphics is a powerful tool, one that will come handy on your path as a Motion Designer. Keep practising and experimenting with properties, values and compositions.

Animation Basics

Hello and welcome to the first part of the fourth module of our course, where we’ll start looking at animating inside After Effects with layers, text, shape, paths and masks.

After Effects Animation Basics

Before we jump into animating there are a few concepts we should touch on that will improve the overall quality of our animations.

Pacing

The first one is Pacing, which is the flow and the idea of having an animation that moves at a constant speed throughout the entire project. Leaving enough time for the viewer to grasp and understand the information presented on screen.

Pacing is commonly established in the first scene that we animate. It covers the time that it takes for elements to go in and out of screen during the duration of the scene, as well as the amount of time we take to move from one scene to another.

Pacing comes full circle as one of the first things we learnt in this course was dividing our script for our storyboard into paragraphs with a consistent length. We also need to consider the transition time we will set to move from one scene to another. As a reference, what we recommend doing in your projects is to take a full second to transition from one scene to the next, and keep that consistent for all your scenes. This depends on the flow of the voice-over as we might decide to take one second out of a six-second scene duration to make the transition mid-sentence at the fifth second, or if there’s a pause in the voice over we might wait and make the transition after the sixth second.

The same goes for all elements that animate in and out of our scene. If we have 4 circles animating in and out from a scene we should try to have all of them animate at a similar speed.

To better understand this let's look at the following two examples:

Example 1 has the elements going in and out at different speeds, this makes the scene look chaotic and it is hard to follow.

Example 2 has the elements animating at similar speeds, making the scene easier to follow, without having one element grab our attention more than another.

As a best practice, we should try to keep the pacing in our animation consistent throughout all scenes, based on the pacing we established in our first scene.

Following this rule will be important when working as a team to make sure the animations of a single project or series look consistent.

If we’re able to keep constant pacing in our animation projects viewers will have a better time watching them and will also be engaged for longer.

Timing or Rhythm

The second concept is timing or rhythm, which goes hand-in-hand with pacing but focuses more on how elements are animated and interact with each other, with the voice over, and the scene to help convey or reinforce our script data or information.

To better understand this, let's say we have a voice over that is listing different concepts in a scene. If we have the assets for each concept, either text or icons, come up at the same time before or after the voice over goes over them, our timing would be off and the animation would feel disconnected.

Instead if we have each concept shown on screen as the VO calls them, the animation would help reinforce the information through timing.

Timing is not just for working with the voice over, timing also helps to keep people engaged with our animation, by showing assets at the correct time and in a logical order.

To make this easier to understand let’s look at the following examples:

Example 01 - we have all assets and background animate in at the same time in a second, leaving us with 6 seconds with no movement on screen.

Example 02 has the same assets shown one after the other and then moving over to make room for the final asset to come into frame.

Think of it as having a single drum beat at the start and then going silent, versus having a rhythm of drums going off throughout the duration.

An easy way to help with timing and rhythm is to animate in full seconds. What I mean by that is placing the keyframes so that their main position, scale or rotation starts and stops at each full second marker like the example on screen. You can add overshoot keyframes before if you want to make it look more organic but have the main keyframes at the full second markings.

Most of the time animating this way helps us keep in rhythm with music, without having to animate to the exact beat of the song. This works even better if we also time the transition of our scenes to full second markings. If we think about it, this makes sense as most of the music we work with tends to follow a beat per second structure.

Animating Illustrator Layers

To animate Illustrator layers our toolset will include the basic transformations we’ve covered extensively throughout this course. Namely:

• Position

• Rotation

• Scale

• Opacity

Since we’ve already covered most of the basics, like how to animate our position to follow a path or how to ease or hold our keyframe interpolations, we’ll move on to animating the scene we have on screen. Along the way I’ll show you how to make your animation look more polished.

I’ll start animating and talk about faking the inertia of moving objects in the animation and how we can easily translate that into keyframes. As we know from real-life physics an object moving at a certain speed cannot just suddenly stop in its tracks - because it will look unnatural. What will actually happen is that the object will try to stop but because of inertia the movement will carry on and move past the stopping position before easing back to it.

This is something we can easily fake with our position, rotation and scale parameters, and it will make our animation look more realistic.

Let’s start with the position parameter. I’ll add the keyframe to the final position of the layer and then I’ll move it to the one-second mark.

Next with our layer selected, I’ll click on my right arrow twice to try to create a small overshoot of where my final position will be.

Just a quick note: the amount of zoom you’re working in will affect how much the object is moved using the keyboard arrows, as you can see on my screen.

Now I’ll move that keyframe to around two-thirds of the first second of the animation. Finally, I’ll take the layer and move it outside the composition bounds in the opposite direction of where the last overshoot keyframe is. If I now play the animation you’ll see that just by adding that extra keyframe my animation feels more organic.

Let’s do the same thing with the rotation and the scale of the other layers. For the rotation, I know my object's final position will be at a rotation of zero degrees so I’ll overshoot it by 2 degrees and set my first keyframe to minus ninety.

As for the scale, I’ll overshoot to one hundred and two and set my first keyframe to zero.

If we now play the animation you’ll notice that even though it’s subtle the movement now feels more natural. For comparison, I’ll erase the overshoot keyframes and play the animation so you can better see this effect in action.

We can do this not only for objects stopping but for objects that start to move by doing the overshoot in the opposite direction of the value. This way we can add more organic movements to our objects as they enter or exit our scenes.

If we want we can also add opacity to the animation - going from zero to a hundred but we need the opacity to reach a hundred on the overshoot keyframe rather than in the final one, otherwise, this will look wrong.

Remember that you can extend or reduce the duration of keyframes by selecting and dragging them while holding alt on the last or first keyframe - this will adjust the timing of your animation by reducing or expanding the space between keyframes.

Now let's talk about how sequencing layers will also make our animations better. Sequencing means offsetting layers in the timeline, and can be done manually - I would avoid this if you have more than four layers. Let’s look at how you can sequence layers automatically.

As you can see I have a circle that I’ve animated to move from the bottom to the top while scaling up from zero. Now I’ll duplicate it eight times and arrange the layers in my scene using the Align Panel options. To sequence these eight layers select them in the order you want them to animate in - this is important as After Effects will implement this order when sequencing them.

Now I’ll move forward on the timeline by the number of frames I want them to be offset by, in this case I’ll do it by 5 frames and then proceed to trim the layer to this duration, in my case I can do this by pressing Ctrl Alt and Comma on my keyboard, on Mac it should be Option plus the right square bracket. Now all I have to do is right-click over the layers and select Keyframe Assistant > Sequence Layers and click Ok in the window.

Now all my layers will be sequenced in the order I selected them and all that is left to do is select them all and drag the end of the layers to the end of the timeline. If we play the animation you can see how this looks.

Remember that if you want to change the position of a layer or layers that already have position keyframes, you can do so by parenting them to a null object if needed.

Conclusion

A big part of what improves the quality of our animation projects is not only based on the quality of the content and assets but also on how well the animation is paced - through its rhythm and timing.

In the end, we want to have the viewers engaged in the content we are presenting and make it easy for them to follow, learn and understand what they are watching.

As we’ve now learnt, this starts at the storyboard and continues throughout the animation process. In addition to this, we saw how we can add motion-like overshoot to our animations that will make them feel more organic and realistic. We also saw that it’s really easy to do and achievable by adding one extra keyframe to our animation process.

Animating Masks & Track Mattes

Before showing you how we can animate them I’d like to start by explaining the difference between Masks and Track Mattes. They basically accomplish the same thing but work differently and can be used in different ways.

Masks

We’ve already covered Masks and how they cut out pieces of a layer - we can make them by creating a shape or path on our layer or by copying and pasting the shape path from Illustrator. Masks have a coloured outline and are found under the properties of the layer. We can have multiple masks inside a single layer.

Mask has its own parameters that can be animated, those being:

• The Mask Path: the handles and nodes that make the Mask shape

• Mask Feather: this value adjusts the edge softness of our Mask shape

• Mask Opacity: controls the opacity of the mask and is independent of the layer Opacity value

• Mask Expansion: this allows us to expand or reduce the visual boundaries of the mask based on its path.

Track Mattes

To put it into simple terms, a track matte is a layer we create that can be based on a still image, video clip, graphic, piece of text or shape and is used to create variable transparency based on the brightness channel or a cut out based on the shape boundary or alpha channel of the layer.

So how do you create and use track mattes? In version 23 of After Effects, Adobe changed the layer interface and how to track mattes work. Take this into account if you're working with older versions of the program. We need to start by making sure you have the track matte options visible in your timeline, if you can’t see them you need to click on the toggle Transfer Controls button in the bottom left corner, this will show or hide the track matte options.

Start off by identifying the layer you want to use as the Track Matte. Then select the layer you want to use the Track Matte on.

In the Track Matte column, use the Layer List dropdown to select which layer you want to use as a Track Matte. Alternatively, you can pick the track matte with the pick whip tool found next to the list dropdown on the track matte column.

Once you have selected your track matte layer, two toggle switches will be enabled. You can use these switches to define how the transparency of the selected Track Matte will work. The first switch alternates between an Alpha and Luma matte, and the second switch inverts this matte selection.

The Alpha Matte uses the shape of the selected layer as a track matte.

The Alpha Inverted Matte uses the inverted shape of the selected layer as a track matte.

The Luma Matte uses both shape and luminance to create transparency. The luminance can be understood as the values between white and black. On the default value, the Luma Matte option will use the black value as 100% transparent and white as 0% transparent, this means that any value of grey will have a different value of transparency depending on how far or close it is to white or black.

In case you’re wondering what happens if you use the Luma Matte option with a color layer instead of a Black and White image After Effects will convert the color to the closest grey tone and form the transparency value from it.

Luma Inverted Matte: This is the same as the Luma Matte but the luminance values used will be inverted. The closer to black the more opaque the cutout will be and the closer to white the more transparent it will be.

Now that we know what each option does, we can jump into how the track mattes’ functionality works. In the past, you would have to create a track matte layer for each layer you wanted to apply it to. This meant that if you wanted to use the same track matte on different layers you would need to duplicate the layer you wanted to use and apply the track matte option over each layer that you wanted to have that track matte on. Now, you can easily use the same track matte on as many layers as you want and even better you can move the layer to the bottom of your comp to make it easier to manage your timeline.

Think of Track matte layers as independent Masks layers that you can use over another layer or layers, and one can use the luminosity value to create transparency.

Remember that Track Matte layers can be pre-comps, videos or even animated elements - so use that to your advantage.

Animating Masks

Now that we know the difference between masks and track mattes, they still might seem very similar but once we talk about animation you’ll understand why both exist and probably think of different ways to use one or the other in your projects.

Masks are attached to the layer they were created on, this means that if I animate any of the properties of my layer the mask will follow these changes - like moving, rotating, scaling or creating transparency. Masks can be animated by creating a keyframe on their Path value. To edit the path you need to click on the property and then we can either double click on the mask shape, this will reveal the shape transform tool.

Any changes we make while using this tool will be recorded as a keyframe, as we can see this allows us to change the shape and dimensions of the mask as well as move it around and rotate it. If we hold the shift key while doing this we’ll be able to scale the mask proportionally.

The other way we can animate our shape path is by modifying the nodes and handles of our shape. To do this you need to have your mask path selected and then click and drag a selection box over the node you want to change. Just like in Illustrator we’ll now have the selected node filled while the unselected ones will only be outlined.

If we select and move any of these nodes this will update or create a new keyframe where our current time indicator is placed. While editing and animating our masks we can also use any of the pen tools we have, especially the convert Vertex tool that will allow us to create, move and remove handles on our nodes to animate them.

One thing we need to consider is that if we add or remove any nodes using the Add or Remove vertex tools our animation might be affected and can break. This is because these nodes will be created or removed from the entire timeline, not just at our current time indicator.

To explain this better I’ll animate my mask with three keyframes, and now I’ll remove one of the nodes, and as you can see I get an error message from After Effects letting me know what will happen. By the way, this error message shows once per After Effects session so if I undo it and erase the node you’ll see I won’t get that error message again so be careful as you won’t be warned every time.

Now if I play my animation you’ll see that the node I erased got erased throughout my animation and you’ll also probably notice that the mask is following the original transformation animation of the layer it was placed on.

Animating Track Mattes

Since track Mattes can be created from any type of footage, text layer, shape layer or even layers with mask on them, you’ll see that this gives us a variety of ways we can animate with them. The most important part of track mattes is that they are independent and they won’t follow the transformation of the layer they are masking, but if needed you can make the track matte follow a layer by using the pick whip tool and parenting it to the layer of your choice.

This might still be a bit confusing so we’ll animate a quick example that will have the same result by using both tack Mattes and Masks. Then I’m sure you’ll be able to better understand the differences between them.

I'll start by creating a new text layer and then duplicate it - now we have two text layers next to each other. I’ll then add a line underneath each of my text layers. In this example, we’ll reveal the text layer as though it is coming out of the line.

Let’s start with the one on the left. I'll select my text layer and then select the square shape to create a rectangle mask over the text. Now I’ll animate the position of the layer by creating a keyframe and moving it under the line - this will be its starting position. Next, I’ll move the layer to its final position, and add an overshoot keyframe to make it more organic.

Now to make it disappear under the line we’ll first add a keyframe to keep the shape of our mask, then we’ll move to the same place as our last position keyframe. Then I’ll go back to our first keyframe position and animate the mask shape so that it completely collapses at the same height as our line.

If I play the animation you’ll see that it works but the timing is off so what we need to do is move the last keyframe of the mask to the place where we have the position overshoot keyframe and that will fix it. Finally, we can add some Easy Ease to make it smoother.

Now for the Track Matte animation, first copy the original position keyframes of my text animation, and then select all the keyframes and move back to the original position and paste it on the other text layer.

Next, I’ll create a black shape that covers the text and place it under the line. I'll then select the shape layer from the track matte menu and proceed to enable the Alpha Matte option.

Now if we play our animation you’ll see we end up with the same result on both sides. The only difference is I had to animate the mask path for the left text layer but as you can see both options are viable.

Conclusion

Masks and Track Mattes are quite useful as they bring new animation options to the table. It’s important to understand the differences between the two in order to know when and how you can use them, there are no rules as to when or how they should be used, it’s probably going to depend on the masking needs of your animation.

Assignment 4A Review

Hello and welcome back!

This video will help you review your work for assignment 4A, we’ll go through all the steps and best practices that you should’ve followed to successfully complete the first assignment of module 4. If you haven’t completed the assignment yet - go back and do it now!

In After Effects import the Assignment A Illustrator file, open the composition created by default and let’s start with the first part of the task.

Locate the three layers named “BG circle” then open the scale properties, go to the 1 second mark and place a keyframe, then add an overshoot keyframe. Go to the beginning of the timeline and change the scale to 0 to add a third keyframe.

We need to sequence these layers by 10 frames each so go frame 10 and click and drag the second layer, move another 10 frames forward and repeat the process with the last layer. You can use the shortcut F9 to apply Easy Ease to the keyframes.

Now let’s animate our particles, we need to have them move across the composition. In order to do this, bring them to the bottom of the composition and select the position keyframe. Move forward to the 2.5 second mark and place all the particles at the top of the composition - the position keyframes will automatically be generated.

We need to reverse this animation later on the task but as we are here we’ll do it right now. Move forward by a second to give the animation some breathing room before reversing it and place a position keyframe on each layer.

We want to reverse our particles over the same duration that it took for them to animate in. Our particles took 2 and a half seconds to animate in, and we added a pause of one second, therefore we need to move to the 6 second mark - which is an additional 2 and a half seconds forward. This will be where reverse keyframes will be placed and where our reversal will end.

To reverse the animation simply copy the keyframes at the beginning of the composition and paste them at the 6 second mark. You can select all keyframes and press F9 to easy-ease them.

Next we need to sequence the layers by 15 frames so let’s move the Current Time Indicator to frame 15 and use the shortcut “command or control plus shift plus d”. This will cut the layers at the current time and delete the duplicated layers. Select the layers and then right click on them to go to “keyframe assistant” and here you can select “sequence layers”.

Now we can start animating the tokens, let’s begin with the small ones.

We need to animate the scale, opacity and position, so let’s open those properties. First let’s animate the scale and opacity, as the position is going to require some extra steps.

The task requires the scale to be animated over 1 and a half seconds, so let’s move to 1 second and 12 frames in our timeline and place a keyframe for the scale. Next move to the 1 second mark and place an overshoot keyframe on the scale property. Here we can also add another keyframe for the opacity. Finally we can go to the beginning of the timeline and place the first keyframes.

Now lets work on animating the position. Open the Illustrator file and before copying the BG circle 3 layer, change its opacity from 25 to 100%. We do this so that the shape will be pasted as a mask in After Effects instead of as a position value.

Now we can copy the shape and paste it onto the position property for both of the tokens.

Right now they are both moving from the same place and direction, and we want them to move from one side to the other using this path. In order to do this we can go to the middle of the animation and on one token delete the first two keyframes and on the other delete the last two.

To make sure our animations start at the same time, let’s grab our keyframes and drag them to the beginning of the timeline.

Now we have our tokens animating from one side of the composition to the other while following the semi-circular path.

To extend the duration of our animation, go to the 1 and half seconds mark, select all the keyframes and while pressing Alt grab the last keyframe and move it to the new position.

Now let’s work on our final token, the task requires us to animate the position and rotation, but as a bonus we’ll also animate the opacity.

Go to the 1 second mark and place a keyframe on the position property, here we can also add an overshoot keyframe and the starting keyframe as well. Now let’s animate the rotation, the rotation needs to go from -180 to 0 degrees - so let’s add these two keyframes.

Finally let’s animate the opacity, remember the opacity needs to reach to 100% at the same time as the overshoot keyframe.

Now that the tokens intro animation is complete, let’s turn the visibility on for the other layers and use the shortcut U to display the animated properties and keyframes.

We don’t want everything happening at the same time, so I’m going to have the tokens start showing up at the end of the BG circle 2 layer intro animation and offset them by an interval of 10 frames.

To move exactly 10 frames forward in the timeline you can use the shortcut Shift plus page down on Windows or function plus shift plus the top arrow on Mac.

Now let’s work on reversing the animation. As the intro animation lasts for a second let’s make our outro animation have the same duration, in the composition move 1 second before the final keyframe and copy and paste all the keyframes from the intro section, right click on them and select the “time reverse keyframes” option, this changes the position of the keyframes on the timeline and now we have inverted the animation without having to place any additional keyframes.

Repeat the process with the other two BG circle layers and remember to offset them by 10 frames. To move exactly 10 frames back in the timeline you can use the shortcut Shift plus page up on Windows or function plus shift plus the down arrow on Mac.

All that’s left is for us to reverse the animation of our tokens. Let’s place our Current Time Indicator at the end of the BG circle 2 animation and place a marker there to remember the position.

Before copying, pasting and time reversing the keyframes we need to make some adjustments to the last position keyframes for both of the small tokens.

Right click on the keyframe and choose the Keyframe Interpolation option, in the pop-up window under Temporal Interpolation choose Bezier and under Spatial interpolation pick Linear, this will mess up our curve a bit but we’ll fix it in a minute, now you can copy, paste and repeat the process to reverse the keyframes.

Now let’s fix the curve, if you pick the keyframe you’ll find a handle on top - grab it and adjust it so the curve resembles its original path, repeat the process with the other keyframe.

We also need to reverse the scale and opacity properties, and for this we can use the same process of copying the keyframes and selecting Keyframe Assistant, Time-reverse keyframes.

Now let’s do the same for the other small token, but remember to offset them by 15 frames.
Let’s do the same for the big token, once you’re done, preview your animation.

This marks the end of the first task of this assignment.

Assignment 4A - task 2

Let’s add the files needed for this task into the project panel and open the Track Matte Assets composition. Click and drag the “Assignment A comp” into the layers panel and also add the JPEG images.

For this task all we need to do is match each picture to the corresponding track matte shape, for image 1 we’ll use layer two as an alpha matte.

Remember track mattes are independent from the layers they’re applied to, to move them together, parent layer 2 to image 1.

We’ll leave image 2 for now, and work with layer 1 and image 3, instead of using layer 1 as a track matte for image 3 let’s test what happens when we pick an image as a track matte for a shape.

As you can see, nothing happens, this is because we’re using image 3 as an alpha matte and since our picture is bigger than the shape, the rectangle will remain visible.

What we need to do is change it to a luma matte - this creates a matte based on the light and dark values of the image, and not just the shape of the image. If we press on the invert option, we’ll see something that resembles our reference image. Now let’s grab the rotation tool and rotate the shape and it looks as it should - so all that’s left is to place both the layers where they should be.

Finally, let's work on image two, for this one create a new text layer by clicking on the text tool located on the top panel and write the word mountains. Increase the size of the text placed on top of the mountain image and use it as an alpha matte layer.

Adjust everything to match the reference and that’s it. This marks the end of the second task for this assignment, there’s no need for you to animate any of the properties of the layers, but as a bonus, we will.

Remember our assignment A comp at the bottom of our layers panel? Let's move all the layers on top of it and place it where our animation ends.

Select the mountains text layer and in the effects panel search for the typewriter effect, double click on it to add it to our layer. Play around with the keyframe duration and use Easy Ease and then let’s move on to the next layer.

For layer 2 let’s animate the scale, let’s add a keyframe with the current scale. As this is a triangle and we’ve chosen for it to be animated from the bottom to the top, we need to move the anchor point using the pan behind tool. While pressing shift move the anchor point to the middle of the bottom base, as usual you can add an overshoot keyframe to keep things interesting. We can also add opacity to the mix but feel free to add any other properties you want to experiment with.

For layer one, we’ll animate a mask path on top of the track matte.

And there you go! As usual we recommend that you keep practising what you’ve learned so far as you travel down the road to becoming a Motion Designer.

Animation Basics

Hello and welcome to the fourth part of this module. In this lesson, we will cover animating with shape paths and text. Both of these have a lot of parameters we need to go through so let’s get started.

Animating Shape Layers

Shape layers are quite different from other types of layers as they have a lot of parameters that can be animated. More importantly, we can animate the vector path they are made of to bring even more animation options to the table.

We’ve already touched on how to create shape layers, but as a quick reminder:

• We can trace a path using the pen tool

• We can draw a shape using the Shape tool.

• We can copy and paste existing shapes or paths from Illustrator onto path properties in After Effects.

• Finally we can import vector Illustrator layers and convert them to shape layers by right-clicking on them and selecting Create > Shapes from Vector Layers.

Shape Options

Now let’s start our lesson by learning about some options that After Effects makes available when working with shapes. I’ll start by making a triangle shape with no fill and just the stroke using the pen tool, but I will intentionally leave the shape open to explain some things.

If we right-click over the shape in our composition you’ll see that we have Mask and Shape Path options on the menu and in the sub-menu we have a few more options, I’ll explain the ones we use the most.

We’ll start with the rotobezier tool that can be found on the tools bar when we select the pen tool. As you can see when activated it will try to automatically curve my path and round out the edges. This option can also be selected if I already have an angled shape made. Right-click over it and on the Mask and Shapes Path select the rotobezier option. Now as you can see the shape has been rounded.

The close option: this option, as you might have already figured out, closes any open shape path.

Next the Set First vertex option, this will tell After Effects which node will be used as the beginning of the shape. As you can see if I do this with an open path the place where my shape is opened changes as I’m moving around the starting point of the path. This option is also available when working with closed shapes as you can see on my screen.

The other two options on this menu are for grouping shapes, but it might not work as you think as After Effects is talking about grouping shapes that are inside a Shape layer and not the Shape Layers on my timeline.

To better explain this, I’ll create another shape by selecting my current shape layer and I’ll add another triangle with the pen tool and you’ll notice that it doesn't create another shape layer. If I then select both layers and right-click, you’ll see I’ll get the same group options and now they are part of group one.

Shape Parameters

If we unfold our shape parameters we’ll see that unlike other types of layers, we have a contents group and on the same row on the right we have an Add option with an arrow. To understand what this does I will first explain the basic parameters that show up when we create a new shape.

If we unfold the Contents group we’ll find another group inside called Shape 1 that represents the shape we currently have on our layer. If I create a new shape while selecting my current layer you’ll see I get another group called Shape 2. We can rename these if we want by pressing the return key while having one of them selected.

It’s important to consider that a shape layer has a shape hierarchy inside of it and that each shape has its own independent parameters. To explain this further I’ll unfold both my shapes. As we now can see both shapes have their own Path, Stroke, Fill and transform group parameters. Again we can rename them as needed by pressing the return key on our keyboard.

If I unfold both Stroke groups for each of the shapes you can see that both appear to have the same values. I’ll type Stroke in my search field to only make these parameters visible - so that it’s easier to follow. As I was saying we currently have the same values since we made both shapes using the default settings of our pen tool. Therefore I can change Shape 2 Stroke width to 12 pixels and change the color to blue and this will only affect shape 2. The same thing will happen with the other independent group parameters of the shapes I add to my shape layer.

Another thing that is important to consider and understand is that Shape layers can actually have an infinite number of shapes inside of them and each of them can be animated independently. As all of the shapes are still inside the shape layer, therefore any changes to the shape layer itself will be applied to all the shapes inside that layer.

Inside our contents group, I could go into every group parameter and explain what each parameter does but that could turn into a course of its own because the main group parameters have other groups inside of them with even more options, so I’ll briefly go over what each of them does. One quick thing to note is that you can select and erase any of them except for Transform.

The path is the easiest one to explain, as it only has one parameter that we can use to animate the vector nodes and handles of our shape. Next to it in the same row, you'll see we have two arrows pointing to the right and left - these options tell After Effects what direction the shape will be animated from using the first vertex position. This will become more clear when we animate the length of the stroke.

Next, we have Stroke, if we unfold it you’ll see we have a few parameters and groups; the ones you’ll probably use the most are Color, the Stroke Width and the Dashes option, which requires you to click on the plus icon option on the right to start adding segments to the stroke.

After Stroke we have the color Fill, you might already be familiar with fills, but here we just need to focus on the color and opacity parameters.

Finally, we can discuss the Transform group, and this might blow your mind - but yes we have transform options for each shape aside from the overall transform options we have for the entire layer. This means I can change and animate the scale of each shape. And then animate the overall scale of the entire layer. Just think of it as though each shape is its own layer and is grouped inside a main layer. Theoretically, you could actually do an entire animation with a single Shape layer by animating all the individual shape layers inside of it.

As for the Shape transform options, there are a few parameters we don’t get in the normal shape transformations, like Skew and Skew Axis, and as you can see these are self-explanatory.

Now that we’ve looked at the basic properties of shapes we can move to the add options button we saw earlier that’s in the same row as the contents menu. If we click on this button you'll see that we have a few options we can go through. Any of the ones you choose will get added to the Shape Group that you have selected or if you have the main contents group selected - it will get added to that.

Empty group: as its name implies, will add an empty group - here we can add different properties from the add options menu that we are using right now or by dragging and dropping properties from other shape sub-layers. I’ll create one now to help illustrate how other properties can be added and moved around.

Rectangle, Ellipse, Polistar & Path: this adds the selected shape to the group, each with its own options to adjust the shape. Polistars can be turned into multiple shapes like Polygons and Stars, and have parameters that can determine how many sides there are the radius, etcetera. All of these parameters can be animated using keyframes.

Fill, Stroke, Gradient Fill & Gradient Stroke: Just as their names suggest they add fill and stroke parameters in case your shape doesn’t have them or if they have been erased.

Merge paths: If you have two or more paths in the same shape you can select how they’ll intersect each other.

Offset paths options: Expands or contracts the shapes and can even do so by adding copies of the shapes. All parameters here can be animated.

Repeater: Makes copies of the shape and adds another level of transform options that are interpolated between the first and last copy of the object. All parameters can be animated.

Round Corners: very obviously adds a curve to corners and does so with a slider that can be animated.

Trim Paths: This one is one we use a lot as it allows us to animate the path or outline of our shapes. This works best if used only on shapes made of strokes and with no fill.

Twist: will deform the shape in a twisting motion depending on the angle and the center of the twist. All parameters can be animated.

Wiggle Paths: auto animates paths by making them oscillate or wiggle over time. There are lots of parameters to refine and create the perfect wiggle for your project.

Wiggle Transform: enables us to create random wiggle movement on desired parameters, such as the size, rotation, and position.

Zig Zag: Creates a zig-zag pattern across the contour of our shape.

The order or position of these effects inside the shape layer can affect a single shape or the entire shape layer - like the ones in the last group from Merge paths to Zig Zag.

To make this more clear, let’s look at the following example: I have a Shape Layer with two shapes inside and as you can see one of them already has animated parameters for Trim Paths and Repeater, but if I select both of these options and move them out from the shape and place them inside the contents group, you’ll now notice that both shapes are being affected and animated at the same time.

This is important to know if we convert a vector layer into a shape layer as it will probably have a few shapes inside, and if we want to animate something like the Trim Path option for all of them, we need to make sure we have it in the right place so it can work properly and as intended.

Animate using paths

Now that we know all the different options and parameters that are available and can be animated inside a shape layer we can move to the most important option: The Path parameter.

You might be thinking - why is being able to animate a path so important? It’s important because it allows us to animate almost anything and get great results without having to go the traditional route of frame-by-frame animation, as After Effects automatically generates frames between key poses set as keyframes.

That means I can transform this circle into a square by rearranging the nodes and handles in the circle shape until it becomes a square, after that After Effects will do the rest, for those that used Adobe Flash for animating - this is something similar to tweens.

The one thing that we need to consider is that there is one limitation - in order to get good interpolation and animation between two shapes we can’t have shapes with different amounts of nodes. I mean it’s not like you can't have varying nodes but it might translate poorly when After Effects tries to interpolate between the two shapes.

Here’s an example of the same circle that has four nodes and I’ll animate it so that it becomes a star. To do this I’ll set my first keyframe as a circle, and then copy and paste my star shape from Illustrator to a different timecode to create a new keyframe. Now when I play the animation you’ll see that it's a mess, and not transitioning properly.

You might be thinking that I just need to add the same amount of nodes that the star has to my circle so that it can transform correctly. Unfortunately, it’s not that simple and I’ll show you why, we would need to add 6 more nodes to the four existing ones on our circle to match the 10 nodes that make up the star.

I’ll even add these nodes to the circle roughly where they should be in relation to the star. But as you can see when I play the animation it’s still not animating correctly and you might be wondering why? Well, this has to do with the way the shapes are constructed. Believe it or not Illustrator and After Effects know which nodes were placed first and last as well as the positions of the nodes in relation to each other. The problem occurs when we have two shapes that have no direct node correlation to each other. When we add new nodes After Effects randomly decides which nodes on the circle are going to correlate with the ones on the star.

Why then did the transformation animation work between my circle and square? Well, it’s quite simple when you think about it. I manually moved the nodes into their new position to create the square, so After Effects knew that this side of the circle should become this corner of my square and the same goes for all the other nodes.

So how do we make it work so that we get a circle that turns into a star effectively? Well for this part I suggest we start by working on the transformation in Illustrator as it will be easier to edit and move the shape nodes around. I’ll start by duplicating my star to have the final shape and then placing the second star inside a circle. I'll then proceed to select the inner nodes of the star that are not touching the circle by pressing A and using the Direct Selection Tool - now I can move them so that they are touching the circle. Next, I’ll press V to go back into the normal selection tool and double-click on the shape to go into isolation mode where I can select the nodes without touching the circle shape by pressing and using the Direct Selection tool once more.

Now I’ll select a few of them and press the button at the top to smooth the paths, this will add handles to the sharp edges, and then I’ll select a few of them that are missing and do the same. Unfortunately, if we select all of them at the same time the option to smooth doesn’t show at the top and that’s why I had to do it this way.

All that’s left is to arrange the handles so that we get a circle shape, and we can do this using our circle in the back as a reference. Now we have a circle that was created from the shape of the star and if we copy and paste each shape as a keyframe you’ll see that the animation works perfectly now and we get this smooth transition between shapes.

Another problem you might run into when creating this kind of shape animation is when you mirror or flip shapes (either horizontally or vertically).

To explain better I’ll go back to Illustrator and create a rectangle then add two nodes on each side. Then I’ll duplicate it to have my starting shape and modify the duplicate to create half of an hourglass shape. Next, I’ll copy the shapes as keyframes in After Effects to create this animation between both of them.

Now you would think I could mirror the shape and have it transform from the left hourglass shape to a rectangle and then to the right hourglass shape, but when we do it you can see it doesn’t work.

Again if we think about it, it makes sense, as we previously discussed After Effects and Illustrator know which nodes correspond to each other in the shape and in the animation, so by flipping the shape all we did was flip their positions and when we try to animate them they will go back to their original positions.

So how do we animate this? We’re going to manually have to create a left-facing version from the rectangle. I'll use the flipped version as a reference so it looks as similar as possible and when I’m done I’ll erase it to avoid using the wrong shape. Now if I paste this one you’ll see the animation works correctly as it transforms from the left-facing shape to the rectangle and then to the right-facing one.

This is an amazing technique because it allows us to create animated icons like these ones that would have been impossible with normal vector layers.

This is also super useful for creating face rigs like this one - which is created entirely by using a few dozen shape layers. The most important thing to understand is how diverse animating with paths can be.

Conclusion

As you can see Paths open a new whole set of options for animation that go far beyond using the basic transform options available in our layers. But we need to understand how the workflow is structured so we can get the results we want.

Animating this way might seem like a lot of hard work but it will become easier the more you start using it for your animations.

Text Animation

Text Layers like Shape Layers also have their own properties and parameters that can be animated.

If we unfold our text layer we’ll find two basic property groups: Text and transform. Transform is the same as all other types of layers, but when we unfold text we’ll have a few new options to choose from. In the same row as text, we have an Animation option that we’ll discuss a bit later on in this lesson.

Our first property is Source text - this corresponds to the words we have on screen and as you can see it can be animated. To do so you need to set up a keyframe and move down the timeline, then double-click on the text and type another word. Now if we play the animation you’ll see the text changes when the time indicator passes the second keyframe. You might have noticed that this particular keyframe is a square, this is a hold keyframe and it is used for values that can’t be interpolated.

The next animation option is Path and it has a drop-down menu that is currently empty but if I select my text layer and make a mask using the Pen Tool you’ll now notice that the dropdown menu shows the mask I created. If I select it my text will follow the shape of that mask.

If we animate the mask path and play our animation you’ll see the text follows this animation path too.

Also by selecting a mask path option we automatically enable parameters for the Path in our text layer. All of them help us change the orientation and placement of the text on this mask path.

Let’s leave the More Options group for now until we learn about the animation parameters we can add to our Text Layer first.

If you click on the Animate option button you’ll enable a menu with all the properties we can add to our text.

We’ll skip the first one as we’re not going to be working with 3D in this course. The next group lets us add the transform options we all know and love by now but these work differently if we add them here.

I’ll select all transform properties from the list, to add them all at the same time and as you can see they were added under the Animator 1 group, and in the sub-group - range selector.

If I move around the properties you’ll see that they are altering the characters in the text. I’ll modify some of the values and then go back to the More Options group to further explain the only property you’ll probably make use of: the Anchor Point Grouping option. By default it is set to Character, if I click on the drop-down menu you’ll see that we also have the Word, Line and All options available. If I change any of these you’ll see the transformation values will be applied to entire words, the lines of text or to the entire text if I have a paragraph. This means that this option will help us choose what part of the text we want to animate, let’s set it back to character for now.

Now let’s look at the Range Selector. If we unfold it you’ll see that we have a few more parameters available here. The start, end and offset parameters will help us transition in and out from our original untransformed text to the one with the modified values. Here we can easily animate them by adding some keyframes.

Under the Advanced group we have more options that will help us refine how this transition is made between the start and end keyframes. The only value I would recommend modifying if needed is the Based On parameter - this changes how the transition will happen either by characters, characters excluding spaces, words or lines. This is different from the other parameters that let us choose how segments of text will be affected by the transform options rather than this option that focuses on the transformation for the text animation in its entirety.

The next Animation properties on the list are relatively self-explanatory as they allow us to change the Fill and Stroke Colors of our text as well as the Stroke width. If I select one of them from the Animate menu you’ll see another animator gets added, this is because you can have an animator for each property and animate the range individually. If you want to add a property to an animator you already have, click the add button and select the property you want to add from the property submenu.

In the next set of properties, the only one you might make use of is the tracking option - which allows us to increase or decrease the distance between characters, or words depending on the option that you have selected on the Range advanced group for Based On.

For the next two options in the menu, we’ll only look at character offset - this basically changes the letters to the character before or after it in the alphabet, you can use this to animate a “decoded” text effect.

The last animation property is blur and as you might have guessed it, this lets us apply a blur effect over our characters, words or lines of text to animate the illusion of it coming into focus.

You might have seen that under the add menu there was a selector property, we won’t touch on it as we’re already using the range selector and the other two are not needed.

Conclusion

Text animation can be determined by the parameters we add and change to our text as well as the range selector that can transition in and out from our original to the modified text.

If you know and understand the different options you have available to animate text in After Effects you can go far and beyond just scaling it and changing positions. The process might look a bit scary at first but it gives us a lot of control over what we can do with our animation.

Assignment 4B Review

Hello and welcome back!

Let’s go through all the steps and best practices that you should’ve followed to successfully complete the last assignment for module 4. If you haven’t completed the assignment yet - go back and do it now!

Assignment 4B - task 1 - Icon

In After Effects import the Icon Illustrator file, open the newly created composition and let’s start working on the first part of the task. First convert the vector layer to a shape layer by using the “create shapes from vector layers” option. Open the layers contents and search for the group containing the baseline - add a trim paths property to it.

Go to the one second mark and start by animating the end value. Add a keyframe here and then another one at the beginning of the timeline. Easy Ease the keyframes and then preview the animation.

Next let’s animate the path property for the remaining groups.

Let’s move 10 frames before the end of the last keyframe and offset the animation path by 10 frames. By doing this our first bar will start appearing before the trim paths animation ends.

Let’s also add some overshoot keyframes and animate the opacity so that the bars won’t be visible before the end of our trim paths animation.

Preview the icon animation and let’s add the properties to Essential Graphics.

We need to change the third bar stroke colour, so let’s expand the “stroke” tab and add the colour to Essential Graphics. The other property we need to add is the scale, but as we want to scale our entire layer and not just the individual groups, we’ll add this property from the transform tab in the main layer panel.

Create a new composition and add the Icon comp. Expand the Essential Graphics tab and in the timeline move to the point where the animation is completed. Tweak the Essential Graphics properties and preview the animation.

Assignment 4B - task 1 - Shape

Import the “shape” illustrator file, open the composition and use the “create shapes from vector layer” option. For this part we’ll be animating the path, so let's find the path property and place a keyframe on the initial path, move to the 2 seconds mark and change the hexagon to a circle.

This is actually quite easy, while having the path value selected use the “convert vertex tool”, found under the pen tool panel and click on any of the vertex points to change it to a circle. If you used Illustrator to create and paste a shape then well done! Later on we will discuss this approach in more depth.

Now that we have our circle, let the animation breathe for a second before it starts changing to the next shape. We can do this by moving a second forward and placing a keyframe here.

Changing to a triangle from a circle is going to be a bit more challenging as we need to move the vertex points to a position in which the transition occurs smoothly. First let’s switch back to our hexagon as it’s easier to manipulate the vertex points from this shape.

Another thing to take into consideration is that the shape has 6 vertex points in total, and the triangle only has 3 - one at the top and two at the bottom. So instead of adding or removing any, we need to place the existing vertex points in a position where they won’t affect the shape, but as you will see later on, this can cause some unexpected and unwanted problems. For the time being let’s move the vertex points and create the triangle shape.

We can let the animation breathe for an additional second here before the final transformation. Move forward by 2 more seconds on the timeline and copy and paste the first keyframe from the path property. I want to make a loop, so I’ll move an extra second forward to let the hexagon shape rest before it starts turning back into a circle.

With our path animated let’s add the next required property: Offset Paths.

We need to add 4 additional copies to the shape, let’s change the “copies” value to 5 to include the “original” one and set the “copy offset” value to zero. Increase the “amount” value to space them out more.

Now if we preview the animation you’ll notice a bit of an artefact when it animates into a triangle. To fix this you can change the “line join” type from “miter” to “round”, this will round the corners of our copies so the animation runs smoother.

Next, let’s animate the colour, we want our shape to transition from one hue to another while the shape is transforming. Place the keyframes to match the path animation and pick the colours for each transition.

Now do the same with the stroke width values so it increases and decreases with each transformation.

This step is optional but once you have the keyframes placed you can edit the animation interpolation using the graph editor.

Our animation is complete, but as mentioned before, moving the vertex points to make a triangle can result in errors like the one we’re seeing in the preview. This happened because I failed to place the points in a perfectly straight line. We can keep adjusting the points to make it work properly but to save time and ensure that it is pixel perfect we need to take another approach.

Create an Illustrator file to make a triangle shape, I’m going to start from the top vertex, remember After Effects determines the order of the animation path by the order in which the vertices are created.

Add three additional vertices to match the amount of vertex points as the After Effects shape. Copy and paste the shape onto the triangle path property. You might have to make some minor adjustments to it, but once it’s working correctly, copy and paste the keyframe so the animation rests as a triangle shape for a second.

Now we have a functioning animation, transforming from one shape to another while the colour and stroke width change.

As an added bonus I’ll animate one of the offset paths parameters as well.

Animating the “copy offset” will make our copies start from the outside and move inward. The rest of the animation is looped, so let’s do the same with this one, but using a different method.

Start by adding a keyframe at the beginning of the timeline, move to the 1 second mark and place another keyframe here. The goal is for the copies to start outside and then go inside the shape and repeat the animation once more before finishing on the outside - so it’s perfectly looped.

I’m adding keyframes every 6 frames, as the composition is set to 24 frames per second. Once it’s done, let’s go to the 9 second mark and select all the keyframes. Press alt and drag the last keyframe to the 9 second mark, this will extend the duration but will maintain the animation we have created with our keyframes.

And that’s it, we now have a smooth looped transition between shapes, colours, strokes and offset paths.

This marks the end to the first task of this assignment.

Assignment 4B - task 2

Create a new composition for the text animation, using the text tool write the word “Hello” and centre align it for better visibility.

Use the pen tool to create a mask, and under “path options” select the mask so the path follows this shape.
Now go to the mask property and animate the mask path, you can use the “convert vertex tool” to move the handles and match the shape as instructed. Now the text moves from one shape to the other.

Before moving to the next section of the task, let’s add a keyframe to make the path flat, so we can animate the tracking and blur on the same text layer.

Move to the beginning of the timeline and add the “blur” property to the layer, increase the “blur” value and now add the “tracking” property as well.

Make sure you’re working on a “per-character basis” and proceed to edit the parameters to mimic the reference image. Add keyframes to the Tracking Amount and the blur. Move to the 1 second mark and add keyframes by decreasing the blur and reducing the tracking distance.

Our text animation is now complete, and as an additional bonus we’ll keep working on this layer to make a decoder animation.

Start by adding the “character offset” to the “animator 2” property. Let's animate the “character offset” parameter so it goes to 0 at the one second mark.

If you haven’t noticed yet, I’m a big fan of looped animations, so let’s revert our decoder animation using the technique we’ve learned from previous lessons. Copy and paste the keyframes from the beginning and time reverse them. To finish, add an extra keyframe to our mask path so it returns to its original flat shape and that’s it! Preview the animation and remember to keep practising and experimenting with properties and parameters. Bye!

Working with nested comps

Hello and welcome to the 5th module of this course. In this lesson, we’ll cover the use of nested compositions as well as how to use them to create scene transitions, essential graphics and mattes. Let's get started!

Working with nested comps

In previous lessons, you might’ve noticed that After Effects has the ability to create comps and then add them inside of other comps, this is what we call nested comps.

Nested comps are really handy, but there are a few important things we need to know when we work with them. This will make our lives and work pipeline easier down the line.

We can create nested comps in two ways. The first way is by creating the comps individually by pressing Cmd/Ctrl plus N or directly on our project panel, and then dragging and dropping them into our new composition.

The second one is by precomposing layers inside a composition. We can do this by selecting our layer and pressing Cmd/Ctrl plus Shift plus C.

A new window will pop up asking for the name of the new composition and will have two options to choose from underneath. The first option is only available when precomposing a single layer and what it’ll do is create a new composition using the layer but all effects and parameters animated on the layer will stay behind and be applied to the nested composition in our main timeline.

The second option will keep all the parameters and effects on the layer and bring them into the nested comp. The second option is only available when precomposing multiple layers as it would be impossible to have all parameters and effects from multiple layers applied to a single composition.

Nested Comp management

By now we know that layer and project management for our After Effects files are very important. Comp and nested comp management are equally as important - especially for large projects. We need to ensure that our naming conventions are set from the beginning or finding and making changes down the line will be quite troublesome.

For our projects we will have a hierarchy structure based on scenes, this means we will have all our scenes divided into different folders, each with its own assets used in that scene. If we look at the project panel we can see that for this project I have a Main comp outside the folder structure, this is where we place or “nest” each of our scene comps and can add comp overlaps or scene transitions as needed.

Next, we have the assets folder, where we can place general project asset folders like the Solids, Voice Overs, Music, Logos and any other assets we might need to use in the project.

Then we have our Scenes folder, and inside it, we have a folder for each of the scenes in this project, and as you might have guessed - inside each of the folders we have sub-folders for scene assets:

• Including Illustrator files and their layers

• Photoshop files and their layers

• Video footage and

• Images

Scene pre-comps - we call pre-comps our “nested comps”, and depending on the complexity of the project we might even have more folders inside this one to organize the nested comps.

Scene composition - this is the complete scene that is ready to be imported into our Main Project composition.

As you’ll probably see all nested compositions for Scene One, start their name with Scene_01 and then followed by the name or identifier for that nested comp. We should take care in naming these comps correctly not only for a more structured file management but to make it easier to search for when using our finder field. This also benefits others using your project file as they can easily find and understand what is happening in the animation and make amendments with ease.

Having this file structure in our projects makes it easier to work with nested comps. I know that having so many naming conventions in Illustrator and After Effects and creating the folder structure might feel overwhelming but it will become second nature once you start doing it constantly, and your teammates will be grateful when working with your files.

Something that we need to keep in mind and try to avoid is creating too many levels of nested compositions in our projects, what I mean by this is better explained in the following example.

As you can see I have a scene named Scene A - inside it I have a nested composition: Scene A Car and inside of that I have nested comps for Scene A Car Wheels and Scene A Car Body. If I go inside “wheels” - I have more layers and more nested comps called Scene A Car Wheels Lug Nuts and Scene A Wheel Shapes.

If we look at the structure we are already 4 levels deep into the Scene A comp and this might create problems when managing this project as each part of the car will have more and more nested comps inside of it. Not only will names become larger and harder to identify but we also make it harder to move, update or erase something through these levels of compositions. We also risk breaking things on the upper levels of our scenes. As good practice, we shouldn’t go further than comping to 2 or 3 levels.

Also thanks to Essential Graphics it’s now easier to manage our levels without having to go into deeper levels to change minor things. Just try to avoid having nested comps with Essential Graphics inside of other Essential Graphics compositions.

Problems & Workarounds

With software as versatile as After Effects, I’m sure you’ve already realized that features come with their own terms, limitations and problems. Problems that if we’re unaware of - might end up giving us a headache later on.

One of the biggest problems of working with nested compositions comes from how we create them. We can make nested compositions by Pre-composing layers into a new composition directly in our timeline by going to Layer - Pre-compose or by pressing Cmd/Ctrl, Shift plus C.

What could possibly be the problem with that? Well, it comes in the form of the default size After Effects uses to create the Pre-composition, and since it’s using the size of the Composition it originated from, our anchor point will now be the center of a 1920x1080 composition.

This creates a few problems. For example, it means that if we try to rotate an object After Effects will use the center of the comp as its pivot point, even though you can move the anchor point by using the pan behind the tool (by pressing Y on your keyboard). Trying to do this manually might bring undesired results, like with this wheel for example, it will take a lot of effort and time to rotate around its true center.

The next problem comes from the bounding box or selection box of our Nested layer. You’ll notice that if I try to select the object even if it’s not that big in my composition, I’ll end up selecting the entire bounding box, and what’s even worse is the fact that if I try to select one of the objects that is behind my Nested comp on my canvas, since my bounding box now covers everything it always will select that layer.

So how do we fix this problem? The easiest way to do it is by going inside our nested comp and adding a null. Then choose the layer that will be our center - in this case, the wheel - and copy and paste the position of the wheel layer to the null. This will place the null’s anchor point in the middle of the wheel. Now I can parent all my layers to this null and once that’s done, I can right-click over the null's position and click on reset to bring it back to the center of the composition.

Now the center point of my object is the same as the center point of my nested composition and if I spin it - it will do so perfectly. Now that this works we can fix the bounding box and for this, we have two solutions.

The first option and the one I recommend is, as you might have expected, to crop the size of my nested composition to make it the same size as my layers. If we press Cmd/Ctrl K we’ll bring up the composition settings where we can change the values for the size that will contract or expand based on the center of the composition. So if I make this composition 500x500 you’ll see that my object is still centered.

The other option available to fix the bounding box is not one that I recommend. You can turn on the continuous rasterize option for the Nested comp Layer in the timeline, and this option sort of fixes the bounding box but it brings its own set of issues. If I go ahead and turn it on you can see this changes the bounding box to the shape of my object, but you’ll notice in this example where I haven’t changed the center point of my shape it keeps the original 1920*1080 anchor point position and doesn’t move it to the new shape’s bounding box. As you can see if I try selecting the layers underneath by clicking on them I can do it perfectly.

The biggest problem with using the continuous rasterize option on your pre-comp is that it tends to break or not make certain effects not work as intended. To explain this better I have two layers on screen. The one layer is using an effect called CC page turn - and has been animated and the other layer has an effect called CC ball action applied to it with no animation. If I pre-compose this layer and then try to scale them you’ll see everything works as intended. But as soon as I turn the continuous rasterize button and scale them, you’ll see things start to break. As you can see they break in different ways - my CC page turn effect is having problems rendering my cc ball action layer seems to be updating itself while it scales.

I can’t list all the different ways things might break since it changes depending on your content - just be aware that if you're animating an effect or property inside a nested composition and it seems to be acting differently than expected try toggling the continuous rasterize option on and off and check if that could be the problem.

Speaking of continuous rasterize there’s another thing we need to discuss about its use in nested comps. We don’t want our vector layers to be pixelated so in order to avoid this we need to go inside of the nested comp and turn on the continuous rasterize option for all the vector layers otherwise it will not work even if the switch is turned on for the entire nested comp.

You can see this happening in my scene where I did not toggle the continuous rasterize effect on one of the layers. Now when I scale up the nested comp we can clearly see that one of the objects stays sharp while the other looks pixelated. This same principle applies to other toggle effects on our layers, like the motion blur or 3D layer switches, if the effect is not toggled on the layer, and the nested comp - then it will not work.

Finally, the other thing we need to take into account when working with the continuous rasterize option is that if our nested comp has any adjustment layers with effects on them, these effects will be applied to the layers under the nested comp.

In this example you can see the nested comp has an adjustment layer with a hue/saturation effect applied to it, if I go back to my main comp and turn the continuous rasterize switch on this effect gets applied to all the layers underneath.

One thing you should always consider when working with nested comps is the impact of comps and different animated layers and effects. Large amounts of effects and comps will consume more resources from your computer and will increase the amount of time it takes to render. If this happens you can always pre-render any of these nested comps and the import the rendered file and place them on top of your nested comp. Then you can turn off all the other layers and this will help After Effects render the projects faster. Remember that if you have any pre comps with a transparent background you need to export your video with an alpha channel so that the pre-render works properly.

Conclusion

Working with nested comps can be a great way to structure our project.

However, we need to be really careful as to how we organize them as well as knowing their limits and preparing for how things might break or not work as intended.

Creating scene transitions

Now that we understand how nested compositions work in After Effects we can start using them to create transitions and templates for our projects.

As always when working in After Effects, there are a few different ways to tackle a problem. Transitions work by masking or covering one scene with the next.

You might already be able to guess which tools are useful to create scene transitions.

Transitions using Masks

I’ll start by creating a transition using a mask - we generally try to avoid using them to create basic transitions between scenes, as they are harder to create templates from.

Masks as you’ve seen so far are simple to create and use and have different parameters that make them easy to animate and control.

Creating a template with them won’t be very easy or fast to do, as you’ll end up having to copy and paste the mask or mask transitions you have onto each layer that you want to apply them.

As you can see in this example I have a square mask that swipes across my screen from left to right, this is the most basic and easy way to make a transition, and it looks boring mainly because my two scenes have the same background color. This makes it harder to see what has changed between the two scenes. What we can do is create two different color solids between my scenes and offset them by 5 frames. Then apply the same mask transition to my solids and now you can see that we have a more dynamic transition between the two scenes.

The problem with this is that it’s harder to make changes to the transition. For example, if we need to change the shape so it is an arrow and not a square then I’ll have to go and manually update each layer in order for this to work properly. This can be a really time-consuming task if we have multiple scenes that need to be updated. So the best way to create transitions is to use Track Mattes and pre compositions.

Transitions using Track Mattes

After seeing how masks work for transitions you can probably tell why Track Mattes are superior. I'll create the same transition using masks inside a new Precomp, but I’ll apply this mask animation to a black solid instead of the scene. Now that I have it set up I can bring my Square Transition Comp into my timeline and use the track matte option so my solids and my scene use this value for transparency.

As you can see we get the exact same result but now if I need to change the shape of my transition again I just need to go into my Square Transition Comp and make the necessary adjustments and it will update across my project. This means that if I’ve used this transition over all my scenes it will get updated instantly.

This is the base principle that we will use in order to create transition templates for our projects by using track mattes or precomps.

Another way we can use these transitions is by importing them into our precomps and placing them as a background layer. For example I’ll import the transition into my third scene that currently has a color background and my transition composition. I’ll change the color of it to match the background and then I’ll erase the background layer. If we now press play - we’ll see that the animation is working correctly and is doing the same thing but with the background.

Another benefit of using precomps as track matte transitions is that we can add Essential Graphics to the mix to get even more control over the transition animations and templates.

Now instead of having to manually go into the precomp to change the color of the background from black to another color I can just add that parameter as an Essential Graphic. Now I can easily change it whenever I need to - for example in order to be used as a Track Matte transition or a background transition layer.

How to Make Transition Templates

In the following example, I’ll show you how to create a transition from scratch. You should know that After Effects already has some transition effects and you can find these inside the Effects and Presets panel under transition. To apply them - drag and drop them onto a solid or shape layer.

In my composition, I’ve added each of the effects to layers and named them so that I can show you a preview of how they look so that you can have a visual reference as to how you can use them by animating their parameters.

Block Dissolve: Creates a grid of vanishing squares

Cardwipe: Flips a grid of squares that creates a 3D flip effect

Grid Wipe: Creates a transition that cuts the layer into diamond shapes that get smaller over time

CC Jaws: Bisects the layer with different shapes

CC Light Wipe: Creates a circular transition with a shiny light effect

CC Line Sweep: Creates a swipe-based with a step-like transition

CC Radial Scale Wipe: This is just a circular transition

CC Twister: Twists the layer and scales it to a corner

Iris Wipe: This is similar to Radial Scale but with polygons

Linear wipe: is a simple sliding screen transition

Radial wipe: a clockwise or counterclockwise radial transition

Venetian Blinds: A horizontal or vertical grid line transition

All of these are quite useful to get things done quickly and efficiently and almost all the parameters can be added as essential graphics.

Sometimes we need to create our own transitions - so I’ll show you a quick example of how to do one. For this transition, I’ll create three parallel lines on a new shape layer and make the stroke thick enough so that they touch each other. Then I’ll proceed to add the Trim path parameter to each of them so that I’m able to control them individually.

Next, I’ll import the composition of the transition into my main composition and then I’ll unfold my Essential Graphics and animate the trim paths for each line so that they stagger into the frame.

If I want this to animate in at an angle all I need to do is change the rotation parameter in my Essential Graphics. I can also use this as a Background transition. I can also do so by changing the color in the Essential Graphics.

To get a more interesting result I can change the colors, duplicate it on my main timeline and offset it slightly.

As you can see creating these transitions is super easy, just remember that we need our track mattes to have the same duration as our entire scene otherwise something like this might happen where it breaks.

Just like the icon gallery we discussed a few lessons ago, the best way to create transition galleries is to create them in a separate After Effects file, where you add or remove them as needed and then import their file into the project where you’ll be using them.

Conclusion

Transitions are easy to create once we understand how we’ll be using them in our project. The native transition effects gallery allows us to create basic transitions quickly and easily.

For further customisation, there’s also the option to create our own transitions from scratch. We should always remember to use Essential Graphics where possible as they make creating and working with templates efficient and much easier.

Responsive Design/ Collecting & Exporting

Hello, and welcome to the sixth module of this course. Now that we’ve covered the basics, let’s look at one of the last tools we'll use to create our templates. We will also learn about the different ways we can collect and export our projects. So let's get started.

Creating responsive design compositions

Now that we know how to work with assets and compositions, we can talk about another tool: the Responsive Design Tool. This tool allows us to set markers that will create protected regions for our compositions. If we increase or decrease the length of our comps in the timeline the animation in these regions inside the markers is preserved.

In this example that I have on screen, I can increase or decrease the length of my comp and the parts marked as intro and outro will not change in size. I can double the length and my intro and outro will still play at the same speed.

The best thing about this option is that if I drag the comp from my project panel, you'll see it shows the intro and outro on the timeline and I can choose the length with no issues. This tool is really handy when creating template galleries for transitions, icons and other types of animations that might have an intro and outro.

So let's learn how we can set the responsive design up. I'll start by opening up this icon animation that I created. Here I have a one-second animation where the icon animates in and then another one-second animation where the icon animates out.

There are two ways of adding responsive parameters to a comp. The first one is by adding two markers to the timeline. You can add markers by clicking and dragging the marker icon on the right-hand side and letting go where you want to place it.

The second way is by moving the current time indicator to a certain position in the timeline and clicking once over the marker icon.

Remember markers can be moved by clicking and dragging them after they've been placed on the timeline.

I'll add the first marker and I'll move it to the beginning of the comp. Then I'll double-click on it to bring up the settings for the marker. In this new window, you'll see that I have the time that represents the starting time where the marker is set. In this case, it's set to 0 as this marker was placed at the beginning of my comp. Then we have duration. This tells my marker how much time it will cover in the timeline. As the icon animates in over a second and the project is set to 25 frames per second - I'll change the duration to 25 or I can add it as one second. Remember in After Effects time is represented from right to left in frames followed by seconds then minutes and hours. If you type 50 in the frame range After Effects will automatically convert it to 2 seconds. Next, we have a common field. This is the text that will show up on the timeline as a marker. I'll name this marker intro.

The labels also allow us to change the color of the markers. For this example, I'll choose orange. Finally, we have our response and design time option that has a checkbox that says protected region. This is the magic checkbox that will allow us to create our responsive design comps. If I click OK and go back into my composition you'll see the marker now has these two handles and we have an orange section that goes over my timeline indicating the second I set as my marker parameter. You can change the length of the marker area by clicking and dragging the right handle. To move it around you can click and drag the left handle.

Now let’s go to the end of the comp and add the marker for the outro but this time I'll do it by going into composition and responsive design time. We have three options available in this menu: Create Intro, Create Outro and Create Protected Region from Work Area. We need to add - create outro. Now as you can see After Effects has automatically created a marker at the end of the composition but it was created with the After Effects default values so it doesn't match our one-second animation.

We can easily fix this by double-clicking on the first or last handle and changing the values of the settings window for the marker that pops up. Now that we have both markers and the animation we can just drag and drop the icon from the project panel into a new composition and you'll notice we have the two marker regions I created and their names on my icon comp. Added to this I also have my protected regions for the icon. This means that I can control the transformation of the strokes, colors and the length of my icon directly on the nested composition.

You can use this for scenes and transitions that have an intro and an outro animation - this will enable you to adjust the composition length in case you need to amend the timing based on script or voiceover changes.

One thing we need to consider is that responsive design works best for compositions that only have animation at the beginning and at the end because as you can see with my scene animation if I double the length of my composition in the timeline you'll notice everything is running at half the speed.

This is because only the animation inside the marker is protected from being time remapped. This shouldn't be too noticeable if you increase or decrease the length by a few frames. Remember to always keep what is happening in your composition in mind when you scale its duration.

Conclusion

After Effects has been implementing more and more options that allow us to streamline our workflow - these options enable us to easily create templates and galleries for long-term and team projects. In the past you could achieve similar results by using expressions but that was something that not everyone was able to implement easily in their projects.

Collecting & Exporting

Now that we know the basics of animating inside of After Effects we need to move to the final steps of our workflow. We need to be able to collect our final project so that we can back it up or share it with our colleagues.

We will also learn how to export our animation to different formats and understand the options we have at our disposal.

Collecting

As the word implies collecting will make After Effects gather all the footage and project files and arrange them into a folder. But there is a bit more to collecting than just pressing a button and having everything added to a folder.

You should always aim to keep your projects nice and neatly organized but keep in mind that sometimes projects become very large during development and often we will have unused or repeated footage throughout the project structure. Collecting projects with unnecessary footage will result in huge file sizes that are difficult to share or back up. We might also have issues if files are unlinked or if we have multiple files in the project with similar names. This will be problematic when we need to make different changes to them.

In order to fix this problem, After Effects has a few tools that will allow us to collect our projects in the best and easiest way possible. Before doing any of this, always remember to create a copy of your latest After Effects project. As some of the results of these tools are irreversible and you might lose your hard work.

Reduce Project

We'll start by going into File > Dependencies. Here we'll find the tools we need in order to collect our project. First let’s look at how the Reduce Project feature works. This will delete anything in the project that isn't inside one of the compositions you select in the Project panel. To better explain this, I'll start by selecting scene 1 from the current project and then go to File, Dependences and Reduce Project.

Once After Effects is done processing, it will tell me how many files were removed from the project. In the project panel I now only have the folders and files that were part of scene 1.

To clean up your projects select the main and final project composition; this should be the composition that has all the scenes nested in it and then select the Reduce Project tool. Anything that is not being used will be removed, making our file significantly lighter and more organized once we collect it. Remember, layers that have their visibility turned off will not be removed. So if you have placeholders or footage with the visibility turned off, you still have to manually remove these if you don't want After Effects to collect them.

Remove Unused Footage

Similar to Reduce Project, the Remove Unused Footage will, as its name suggests, identify all the media in the project not being used in any of the compositions and then remove them. The problem with this is that if you have any unused compositions with footage inside of it, it will not be removed. As the tool only removes any footage that is not inside of any composition.

Consolidate All Footage

This feature is very useful as it will look at the files in our project panel and find any repeated footage that is being used in one or more compositions, then it will link all the layers to a single file and remove any copies of the duplicated file. Once the duplicates have been removed remember to check where the new file is stored to ensure that it is in the right folder.

Collect Files

Now that our project has been reduced and consolidated, we can move to collect the project into a single folder. To do this, go to File Dependencies > Collect files. Once you click on it After Effects will ask you to save your current file.

Once the save is complete a new window will pop-up, with different options available for the collection process. The Collect Source file's drop-down menu enables us to choose what After Effects will use to create the collected folder, we can leave this as all.

There might be an instance where you don’t need to collect the files from all of the compositions. In order to do this you can select the comp or compositions that you want to collect on your project panel. Next, select file > dependencies > collect files. A pop-up window will appear where you can select “For Selected Comps” in the drop-down menu.

I would recommend leaving all the other parameters as is. If we select All they're actually grayed out, and we don’t need them to collect our files properly.

Finally, click on the Collect button. After Effects will ask us to choose a folder where we want the collected project folder to be saved to, here you can also change the name of the folder - if you don’t name it the name of the After Effects file will be used. Now that you've chosen the location and name of your folder, you can select Save and After Effects will start collecting all the files and place them into a folder. When the save is complete, I recommend opening the file to check that everything is there and working properly. There have been instances where After Effects doesn't copy all the files into a folder and some of them are missing.

Speaking of missing files, did you notice the options at the bottom of the dependencies menu that say Find Missing Effect, Missing Font and Missing Footage?

If you click on any of these, you'll see After Effects uses the Search Fill to find compositions that might have missing effects or fonts or missing footage in the project window.

This is super helpful for when you open After Effects files that have broken footage links. You can use the menu or type Missing in the Search Fill and you'll be able to see the missing footage.

This icon indicates that assets are disconnected from the source. To fix them, you need to right-click over them and select Replace Footage. When you do this After Effects will open the Finder or Explorer window and allow you to search for the file. Once you find it, After Effects will also look for any other missing files in that folder and link them to their corresponding assets.

Exporting

Exporting or rendering is the process of saving your compositions to video files. When it comes to exporting in After Effects we have a few options and formats we need to look at, as well as some parameters that will give us the best results possible.

Let’s look at the native After Effects render engine that can be accessed by selecting a composition and going to Composition, Add to Render Queue, pressing Command/Control M while selecting a composition in the project panel, or pressing it while being inside a composition timeline. Once we do this, the comp will be added to a new panel called the Render Queue. Here we have a few options in blue that we can click on, they will bring up different setting windows. There is also a drop-down menu here, where we can select predefined settings.

The first one is the Render settings. Let’s skip over this for now, as there's not much you'll need to change here when exporting your files. Next, we have Output Module. If I click on it, a window will pop up that will allow us to choose from various formats or codecs. The most popular export setting is H264, which exports your composition as an MP4 file.

You can export your video directly in After Effects or with Adobe Media Encoder - which with the correct settings can sometimes be faster and has more options available to us.

In After Effects, there are two more types of files that we commonly use in the native renderer. These are formats for QuickTime and PNG sequences - both of these file formats allow us to export our animation using an alpha channel. That means that if we have transparency in our objects and backgrounds, they will be preserved when we import them back into our project.

The only problem with these file types is that they tend to be extremely heavy, so we recommend using them only when necessary. If you want to export these file formats with transparency, you need to select the correct format from the drop-down menu by clicking on channels and then selecting alpha from the list.

Another handy option in this window is resized - which enables you to change the output size when selected.

You can also use crop to trim your exports, for example when you want to export a square version of your project. You can enable crop and add values to margins until you have the desired size for your video.

Audio options are best left at default settings, so don't mess with these. Once you're done, select ok. Next, we need to choose the output by selecting where the file will be exported to. Finally, you can select the render button and After Effects will start encoding and exporting your animation.

I briefly mentioned Adobe Media Encoder, let's take a deeper look at it. It has a few extra formats and options that we can choose from. To add comps to Media Encoder, all you have to do is go to Composition and then select Add to Media Encoder. This will automatically open the software but it might take a few seconds to link your project, but your comp will be added inside the queue panel. Usually, the default format that Media Encoder will try to use for encoding is H264, which exports MP4 files. If we click on the drop-down menu you'll see that we have a few more codecs to choose from: like PNG sequence and QuickTime - just like in the After Effects native renderer.

We also have animated GIFS as an option. Depending on your line of work you will more than likely never need any of the other formats.

Now let's go over some of the encoding options for H264 - start by selecting the blue name of the format. In this new window, we have a few options we can choose to control the quality and the other elements of our video.

On the right side, we have a preview of the composition that will be encoded into an MP4 file. On the bottom, we have some controllers that allow us to scroll through the animation and also change the area that will be exported. You can drag and drop these triangles on the bottom to change the start and end points of the animation. On the right, we have our export settings. On this panel, we can change the format from the drop-down menu as well as the name of the file and the output folder by clicking on the output name.

The next two checkmarks let us choose if we want to export the audio and video or both of them. Next, we have the effects tab. This allows us to add properties to our video as it's being encoded.

Here you can also add an overlay image that can act as a watermark on the video - you can also change the position and transparency it will have in the exported file. The next tab on top is for video. In the first group of options, I would only recommend changing the size and frame rate if needed, otherwise, leave everything as it is with the default values.

The render at maximum depth checkbox will only increase the render time and size and you won't be able to notice any major differences. Rather leave it unchecked. Next, we have the option to choose if Media Encoder will use our graphic card or use software encoding. I don’t recommend software encoding as it will dramatically increase the render time. Make sure you have hardware encoding on.

Next, we have the bitrate options. In simple terms, this controls the amount of data that will be encoded in each frame. The higher the bitrate, the better the quality but the file size will be bigger. The lower the bitrate, the lower the quality but the file size will be smaller.

There are three types of bitrate encoding.

Firstly there is a constant bitrate that will force each frame to be encoded using the same bitrate. Then we have a variable bitrate with one pass - this works by checking each frame and uses different bitrates depending on the complexity of the frames, but tries to target the defined value.

And finally, we have a variable bitrate with two passes. This takes longer to export as it creates a first pass and then goes over that first pass and double-checks each frame to find the perfect bitrate. Leave the values set to default and lower them if your file size is too big after the first export. Always check the estimated file size at the bottom and see how it changes when you adjust the values.

All other tab options and parameters won't be used. Take note that you can connect Media Encoder to Vimeo, YouTube and many more social media platforms by going into the publish tab. This enables you to automatically upload exported videos to social media platforms. Once you click okay, you can add other files to the queue or remove them by selecting them and pressing delete on your keyboard.

When all your files are ready to encode, click on the Green Arrow on the top right of your queue. Once it's done, you can click on the output file and locate your encoded video.

One last thing I'd like to touch on is your After Effects memory cache. A cache stores all information After Effects needs to make your playback run faster and smoother.

This stored information takes up space on your computer disk drive. You can see how much memory you have allocated to it by going into the After Effects preferences window and checking under up media > disk cache. If you're running low on memory, your cache is probably full and After Effects might start working slower than usual. To fix this go edit > purge all memory and disk cache.

Don't worry, this won't erase anything from your computer, just the preview frames you currently have saved. Remember this as it will help you optimize After Effects when it starts running slowly.

Conclusion

After Effects has multiple ways of encoding and exporting files and knowing what options and preferences we have will allow us to get better results in our exports.

Assignment 6A Review

Hello and welcome back!

This video will help you review your work for assignment 6A. We'll go through all the steps and best practices that you should’ve followed to successfully complete this assignment from module 6. If you haven’t completed the assignment yet - go back and do it now!

In After Effects import the Assignment A Illustrator file and let’s begin with the first part of the task.

Create a composition and name it “Character”, make it 1080 by 1080 pixels with a black background. Identify the layer with the character icon and convert it to a shape layer. Inside the shape layer, go through the groups and identify shapes with the rectangle bounding box and delete them.

Let’s work on animating the intro and outro for the icon, this will probably look different from yours, as you were allowed to make your own creative choices.

The most important part is that once the intro animation is done, we need to add a marker to the beginning of the timeline and double-click on it. In this new panel let’s set the duration, name the marker, and more importantly select the “protected region” option.

Now let’s work on making the outro animation and its responsive marker. Create a new composition, name it “circles”, add the circle layer from the Illustrator file, and convert to a shape layer. First change the line type to a dotted one. Add the trim paths property and animate the intro and outro. For the intro add keyframes to the end value and for the outro the start value. Next, add the responsive markers for the intro and outro like we did on the character composition.

Now let’s add a new circle shape layer and within the protected region animate the opacity. As a plus I’ll animate the scale as well. Copy and paste the keyframes and time reverse them to make the outro work.

Create a new transition composition and this time make it 1920 by 1080 pixels with a white background. Inside the composition you can use the shortcut command or control plus y to add a new black solid. For this section you can either animate a transition of your own or, like I did or use one from the effects panel. Here we also need to create a responsive marker for both the intro and outro.

This marks the end of the first task of this assignment.

Assignment 6A - task 2

Create a new composition with a 6-second duration and name it “Scene A”. Add the “character” composition with the animated icon to Scene A.

Using the shortcut “command/control plus d” make three additional copies so we have 4 character compositions in total. Adjust the timing so the intro and outro markers fit within the duration for “Scene A”. Now let’s add the “circles” composition and adjust the timing.

For this task we need to make the character comps move by following the big circle path and they need to make at least 1 full lap around the centre circle. To achieve this you can either copy and paste the shape from Illustrator into the position property for each comp or we can use the circle we already have in After Effects, which is what I’m going to do.

Search for the “path” property inside the circle shape and copy and paste the value onto the position property for each comp, this will make our comps move from the position in which they were. To bring them back all you need to do is select every position keyframe, move them together and place them correctly.

Now, we don’t want all the layers moving at the same time and on top of each other, so change the starting and ending point for each comp. First let's deactivate the “rove across time” keyframes and change them to linear keyframes for the time being. The keyframes need to be placed every ten frames, so let’s move 10 frames forward from the last one and what we’re going to do is copy the second keyframe and paste it in the new position. This will extend the movement for each of the compositions and we want to change the starting and ending points too. Move 10 extra frames forward and copy and paste the third keyframe to the last two compositions. Finally move another 10 frames forward and copy and paste the fourth keyframe to the last comp.

Now let’s delete the same amount of keyframes from the beginning of the animation that we added to the end of it, and drag them so they all start at the same time. This way we’re changing the starting and ending point so they match. Now I’m reactivating the “rove across time” option for the middle keyframes, this way I can move the end keyframes and the animation interpolation will adjust automatically.

Next, I need to change the stroke and fill colours for each of the character comps, but first I need to add these properties as Essential Graphics. This will automatically reflect in the “Scene A” comp.

Let’s proceed to change the colours, this is subjective and you could’ve picked whatever colors you wanted. The next part of our task requires us to add a new star shape layer to the centre of the comp. We also need to animate its opacity so it shows up after the intro animation. I'm going to be animating the scale as well.

Next, we need to animate the path so it changes from a star to a pentagon and back. If you open the path property for the layer, you’ll see we’re missing the “path” value, and we have a different set of options to the ones we’ve seen before in previous lessons. All we need to do is right-click on the “polystar path” property and select the “convert to bezier path” option and now we can place a keyframe on the star path.

I’m going to make an outro animation for this layer as well.

Now let’s continue working on the path property. We need to transform the star to a pentagon and for this we’re going to be moving the vertex points to match the desired shape. I’m letting it pause for a second as a pentagon before changing it back to a star.

Now to finish our assignment, let’s create a new composition named “Main Comp”. In this composition let's add the “Scene A” comp, the background layer and the transition comp. Place the background layer on top of the “scene A” comp and use the “transition” comp as a track matte, adjust the timing so both the intro and outro fit the 6-second duration of the “Main Comp”. And there you have it, a looped, functional animation using responsive markers and techniques from previous lessons.

Remember, this video is a reference, your results might differ from mine, but that’s ok, we encourage you to put your own twist on it and make your own creative choices.

After Effects / Creating a full Animation

Hello and welcome to the 7th module of our course. Now that we've been through the Illustrator and After Effects interface and workflow, it's time for us to begin creating a complete animation and apply all the knowledge and techniques we've learned throughout this course.

In the first part of the module, I'll work with the first two-thirds of the animation. We’ll look at how to tackle the animation project based on the script provided.

The Brief, The Script and the First Steps

Before we start, I'll give you a brief explanation of the project as if a client has sent us their requirements. In this case, the client is the Olympic Games Committee and they want to share the history of the event through a series of short animations between 20 to 30 seconds long. These will loop and will be used to target a younger audience through posts on Instagram.

We'll pretend there are no brand guidelines, the only thing we have to work with is an SVG logo file and hex codes for the 5 Olympic colors. We also have the approved Geogrotesque font that can be used in regular or semi-bold weights.

The script provided for the first animation is as follows.

Now that we have everything we need, we can start dividing our script into artboards inside of Illustrator. Before we do that, let’s create a visual script for the project.

A visual script will help us share our ideas with a project manager and/or client. It is a basic structure for how the animation will work and will elaborate on ideas for what will happen in each scene. In Google Docs I already have a table template ready for the visual script and I'll quickly divide all my text into different scenes. I'll add an extra scene in the beginning for the logo.

Once that's done, describe the actions of what you think should happen in each scene based on the content and if possible, describe how it will animate in and out from one scene to another. We can also use another column where we display reference images or the provided graphs and diagrams from the client. The last two scenes are going to remain blank as we will work on that in the next lesson.

In the second part of these first steps, we should simultaneously work on the mood board. We can share this with our client to showcase the proposed style, and what we think will work for the project. To do this, you can search the web for animations with a similar visual style that suits the clients' needs. Take screenshots of suitable frames and add them to a collage.

Depending on the client, sometimes you can add one or two links to the animations you’re using as references. This will not only reference the style but also give them an idea as to how your project will be animated.

During this phase of the project, you will send the visual script and mood board to the client. It’s also best practice to send samples of voice-over artists and get them to choose one. They need to approve the structure and overall visual proposition before you move forward.

These steps might seem over-the-top, but they give us early and important feedback from the client that will help us avoid bigger and more time-consuming changes down the line.

Styleframes and Storyboarding

With the structure and visual style approved, we can now go into Illustrator and start dividing the text from the visual script up and adding them onto the artboards - just like we learned in our first lessons.

For this project, let’s create 6 artboards and make them 1080 by 1080 because we know that this content will be used on Instagram.

I’ll leave 500 pixels between each of my artboards and then add the text boxes underneath ready to paste sentences from the script. With everything set up, we can start working on the style frames.

This is a really short animation so let’s only create two scenes to send to the client for approval. Depending on the length, size and scope of any project, we might send up to 4 or 5 styleframes. Styleframes might include character designs or other types of assets like photos.

Let’s jump ahead and as you can see, I have two frames based on the moodboard and decided to go for a clean style that uses a white stroke with blue-tinted shadows around objects. This enables me to use a grey background to make that white stroke more visible. When we get into After Effects, I'll show you how you can add the white stroke to our animated objects without having to animate both the white and the color stroke.

I added different-sized white stroke circles and small dot particles to the background to keep everything consistent and reinforce the Olympic branding.

As for the illustrations, I decided to have a mix of stroke line icons, mixed with single elements for each scene that are shaded without a stroke. This helps to keep the balance of the Olympic logo, which is formed by a thick stroke that looks like a fill.

Also, as described in the visual script, I intend to use rings to transition from one scene to another and use a ring to contain onscreen text throughout the animation. Certain keywords will be highlighted using the same color palette and in a way that creates contrast against the container ring.

Now that the styleframes are ready, I'll add them to the PDF template and have the script excerpts on top and place the image underneath. Then we can once again send it to the client for feedback. Once we get them approved, we can then move on to the storyboard part of the project. With our style now set, we can create the rest of the scenes in our animation.

In this example, I've already jumped ahead and created two more scenes, including the logo opening. But again I have left the last two scenes blank for the next lesson. It is super important that we keep things consistent when creating scenes and assets. You need to create rules as to how certain elements will work in order to keep the visual style consistent throughout the animations. This is especially important if we're going to be working with other designers on the project.

The person that works on the styleframes and storyboard needs to create a list with important information that the other designers can follow during the project development.

Here are some rules for this project. Text should always be in a single line. Use the Geogrotesque font in semibold weight at 60 points with 50 tracking points - this can be lowered to a minimum of 0 if needed.Icon line strokes need to have a 5 point stroke weight and all color accents should go inside without touching the outer stroke.

There needs to be one solid illustration color asset per scene with a white stroke around it and a blue shadow underneath.

The color palette for this animation is on screen and these are the hex codes for each color. We use two different background elements, the first being the white circles and the second one is the color particles.

The background color should be the color shown on screen with this exact hex code. Along with these rules, we also need to share all of the illustrator files like the styleframes with the other designers, just in case there are extra assets that are not located in the storyboards.

We encourage other designers that will take part in this project to create one or two scenes from their assigned storyboard. This can be reviewed internally before they work on the entire project. Having these rules and making sure they are applied will make the project run smoother and avoid a lot of changes when the client reviews the animations.

Once we have our storyboard, we can send it to the client as a PDF, like the one I'm showing on screen. From the storyboard we can also create an animatic. This makes it easier for the client to grasp the timing of the project as the animatic is made from the storyboard and is used to time the visuals to the voice-over and can include music. It has no animation or transitions required. Always ensure that the client understands what they are reviewing. For example, if they don’t know what the purpose of the animatic is, they might be confused as to why there is no animation.

Animation

Now that we have everything approved and ready to go, we are able to move into the animation phase of the project. I am not going to animate all of the scenes of the project, as they will form part of the assignment for this week. It will probably also make this lesson an hour long if I actually animated everything. But I will go over important parts of the process and some new options that will help you understand how this project can be animated.

For the animation, I'll start by importing my files that I have already divided into layers. I'll select composition, and retain layer sizes. This way I can import all my footage with one single click. Next, I'll start renaming and adding everything to their respective folders.

Now that I have all my scenes imported into my After Effects file, I can start working on the animation.

We'll start by looking at the logo. I'm sure that you've seen the Olympic logo before and have noticed that the rings actually intersect each other.

In our case, we don't have that intersection. We just have the circles separated, so we need to incorporate that intersection through animation. I'll start by selecting all my shapes and converting them into vector shape layers.

Next, I'm going to add a trim path animation. To do this, I'll go into animation, recent animation presets and select - trim paths. This is an animation preset that I made myself. To make your own preset you just need to go into your layer and select the animation keyframes that you want to use as a preset. Next you’ll go into animation and save the keyframes as an animation preset. It's going to ask you for a name, which you can choose. Next time you want to use your preset, you'll find it under the recent animation presets.

Now that I have all my shapes animated with trim paths, I can think of how to intersect them. To make this easier, I'm going to change the shape to a color so it's easier to identify them. If you look at our reference, the blue should intersect with the yellow one, so I'll start here. I'll duplicate the blue ring and put it on top of the yellow one, and then I'll go into my shape tool and make sure that it is on create masks. Otherwise, it's going to create another shape inside the shape layer. All I need to do now is just select this intersecting part. Now we have the animation and the mask is just covering the yellow ring to create that intersection.

Let’s check our reference, you can see that we have the rings in the correct positions and they are intersecting each other in the right way. When we play the animation we can see that they are animating correctly. The next thing I would do is offset the sequence timings so that they don’t animate in at the same time. But I'll work on that off-camera and instead, I'll show you how to add the white stroke and drop shadow effect that we have in our Illustrator file. Let’s pre-comp all these rings.

I'm also going to show you another way you can add certain values or effects to layers. If you right-click, you'll see that we have layer styles. Layer styles allow you to add drop shadows, inner shadows and many other effects you might know from Photoshop. It’s important to understand that it's not going to be added as an effect. It's going to be added as a property to the layer. This means that if I add a stroke, the stroke is going to be added to all of my layers and it's going to show as the paths animate in because we’ve already created the animation. That's why we need to pre-compose this.

Now all I need to do is open my stroke and change the color.

Let’s add the drop shadow effect. We need to consider that because we added this as a layer style, we will also need to add the drop shadow as a layer style too. If we try to add the drop shadow effect from our effects panel, you'll see that it gets added in the wrong position. This happens because there's a hierarchy that After Effects follows and uses to apply styles and effects.

So, normally the drop shadow and all the effects you have here will be applied before any of the layer styles. So keep that in mind because if you add any type of effect and you are using layer styles, the order of rendering for the software is the effects first and then the layer styles. So in this case, I'm going to erase the drop shadow and I'll right-click layer styles and I'll add the drop shadow here.

Open the parameters and select the right color for the shadow. In this case, we're using blue with this hex code. In this module, you’ll have the color palette and all the other files you will need available as a downloadable resource. Now that we have our stroke and drop shadow set up - we can easily copy all the layer styles and paste them onto other layers that might need them. That's going to be the easiest way of doing it. Now we have animated our logo and have used the same style that we established in our Illustrator file.

Next, I'll work with the transition that I'll be using to move from one scene to the other with the exception of scene one where I'll use a different transition. I'll start by importing the Illustrator file that I have called “textbox”. Again, I’ll select composition and retain layer size. Let’s change the background color of the composition. As you can see, I have three layers. The first one is for the color, the second one is for the white stroke and the final one has the same color as the background of the other scenes. So if we have something below this, it will be able to cover it.

Next we’ll transform everything into a shape vector layer. The basic idea for this transition is to have this shape come from a circle. And that circle should be large enough to cover the entire screen and then shrink down to this position while covering everything that is behind it. In order to create this, we're going to animate it backwards. We'll start with this shape and end up with the complete circle.

As I animate it, you'll see why I do this and why it's the simplest way to do it. Let’s start with this one.

Now as you can see, the circle is animating the correct way so that it can transform into the text box. Next, I’ll add the other layers and do the same thing. It's really easy when you use the pick whip tool, but we cannot use this pick whip since this pick whip will only work with transformation parameters like scale, position and other transformation parameters. What we're going to have to do is unfold all the path properties. I'll give myself some room here so you can see what's going on. Here you can see that all properties have their own pick whip. So you can easily pick whip one property to another.

Now all the paths will have the same values as this one - so you only need to animate it once.

The thing is, you should always pick whip properties that have similar values, otherwise, you can get errors. In this case, it's really easy because we're just parenting paths with paths.

Now that we have this, the transition should be inverted, right? So I should have this circle become transparent and then become a solid color in order to cover the last scene. And I should have the background come in so that it covers the entire scene at the back. What we'll do is we'll take a background from any of our other scenes and I'll put it here and use it as an alpha inverted matte. This way we have a cutout in our shape, right?

Let’s test this using scene two. And if I had scene two at the back and I have my transition, you'll see it will come in and stretch. We can adjust the transparency as it closes into a circle. To animate the transparency you need to set a keyframe at 0 and another one at 100. So now when this changes and starts stretching out the transparency will cover the other image.

Now what we can do is find the color value for this and add it as an essential graphics property. This way we can control the color of the shape and use this transition for other different animations.

Let’s also create a marker. I'm going to double-click on it and make it a protected region for the responsive design and use it as an intro. Now we’ve just easily created the transition effect for all of the scenes.

For the next part, I'll jump directly into scene three and show you how I would animate it. I'll start by turning off my background layer and importing the transition we've just created so that it animates into this position that we have. Next I'll unfold my transition - select my essential properties and select the color of the line.

Now I can hide my text boxes, and as you can see, we have a perfect transition from one scene to another. If the text happens to be on the lower part of the scene, I can easily animate the position to go up and then move to the correct position.

We don’t have any transparency here so what I can do is turn on the background layer and move it to this exact point so that it only shows with the transparency animation.

Next, we have this medal that we can animate in a swinging motion. I've already imported my file from Illustrator, and we need to animate this swinging motion that makes the medal appear to go back and forth.

First, we'll click and convert this layer to shapes from vector layers.

Let’s also add the Illustrator file here as a single layer at the back. This will serve as a reference image for when I animate the coin moving back and forth. So I'll hide it for now and I'll select all my layers and type “path”. With the path parameter selected, I’ll add a keyframe at the 1-second position. Now I'll press U to only display the paths and I'll move to the zero-second mark. I'll turn on the reference layer to display the next position that we need to animate the paths of the coin too. I'll also give it a lower opacity so it's easier to see what I'm trying to do. I'll change the background of my composition to white so it's also easier to see what I'm doing. And now I can animate it moving back and forth.

Now as you can see I have animated this movement for my medal - it's swinging from the front view to a different angle. Next, I’ll have to do the same thing for the back position.

With the last position complete I now have an animation of my medal swinging forwards and backwards.

Next, we can add the final detail: the shine. I left it as the last thing to add because it is going to be using track mattes from the medal in order to create the shine movement. The center layer is one part that is going to be covering the shine, so I’ll duplicate this layer, change the color to black and use it as an alpha matte.

Next, we can lower the opacity to 50% and as you can see the shine is cropped to the boundaries of the center layer. We also need to animate the shine path to follow the same trajectory as the medal. I'll duplicate my shine outline and then I'll select the body outlines and duplicate this layer. I'll move the layer to the top and change the color to black. I’ll turn off the visibility so it’s being used as an alpha track matte.

That's how we get our swinging medal! I can also just copy my central keyframes so that it swings back to the middle.

Now we have our swinging animation and it stops swinging at the middle position.

Now I'll import it into scene 3 and my idea is that it animates in from above and swings in from behind the text here. So what I'm going to do is add a black solid and I'll use the Alpha Inverted Matte to mask the composition, therefore the black layer needs to be covering what it's going to show. I can just change the anchor point for this. I'll move it right here and I'll animate the scale and the position.

And voila!

I can tweak the animation so that it doesn't stop right here in the middle and it has a bit more motion to it - but I'll do that off-screen. You should be able to grasp the basics of how it will be animated.

Let’s continue with the animation of the other scenes.

For this scene, I'll use the trim paths to animate each shape and then use a simple transform animation to bring them into the right place.

Now that my animation is ready I'll go back into scene 3 and as you can see my animation is working perfectly. The only thing that's missing is the animation on the text layer.

This text was imported as a vector layer so we're not able to use any of the After Effects animation text presets to animate it, so what we're going to do is go back to Illustrator. Double-click on the text, select and copy it and go back into After Effects. Click on the text tool and paste it. It will paste with the same font, colors and presets. Let’s quickly create a simple animation for this text using some of the text parameters.

And now we're going to test our animation to see how it looks.

The point of this part of the course was to show you how I would animate different elements in After Effects. Now that you've seen some examples of it, your next assignment will be to animate the two remaining scenes. Don’t forget to add the background elements and animate them as you wish.

In this module, you’ll be able to download all the files you'll need to animate these two scenes.

As an added bonus for the assignment try to animate the scenes that I animated in this lesson. I'm going to be sharing this After Effects file but the idea is for you to try and do this based on what you've learned in this lesson.

As you might have noticed we're missing two scenes from our storyboard: Scenes 5 and 6. Those will form part of another assignment and the idea is for you to create them from scratch. You’ll need to create the images based on the text, finish the storyboard and animate those last two scenes. So start thinking about how you're going to do those and incorporate the same design style that we've been using so far.

Along with all files, I'll also upload an MP4 video with my animation - which will include scenes 1 to 4 with all the transitions and background elements. I would suggest you don't watch this animation until you’ve finished your assignment. However, feel free to watch it if you're feeling like you don't know how to animate certain things and you need inspiration.

Something to note is that in scene 4 there's a medal in the middle and it should be spinning when it comes into the frame. I've already created an Illustrator file for that called “coin spin”. You can use these layers as a reference and to animate the coin spinning into the scene.

Good luck and have fun working on your assignment!

Assignment 7A Review

Hello and welcome back!

This video will help you review your work for assignment 7A. We'll go through all the steps and best practices that you should’ve followed to successfully complete the first assignment from module 7. If you haven’t completed the assignment yet - go back and do it now!

This assignment asked you to animate the two additional scenes. There is no right or wrong way here, and your animation will be unique! Let’s jump into it.

Open the provided After Effects project file, which contains two pre-animated scenes. You should’ve reviewed these scenes to understand the animation techniques and styles applied. When using an existing project file, remember to look at the keyframes, styles, timing and even the project structure. Try to gather as much information as possible - it might be helpful to jot down some notes for yourself.

As suggested in the lesson, we’ll start by animating the spinning medal for scene 4, as you can see we have two Illustrator files named “coin spin”. One needs to be imported as a composition and is named accordingly and the other will serve as our reference. Open the reference file in Illustrator and let’s make some tweaks to it so that we have both sides of our spinning medal as a reference image.

Next, proceed to import both files into After Effects and remember to maintain the project structure. Let’s animate the spinning medal, you can use the swinging medal animation as a reference. I’m not gonna make it spin 360 degrees because that would require some additional knowledge we haven’t discussed in this course, but let’s make it move from one side to the other.

As you can see, our back layer doesn’t appear to be working properly, so I’ll add some extra keyframes to make it move from one side to the other as the medal turns. Now let’s finish our animation by bringing back all the layers' path to their original position.

Now that we have our spinning medal animation completed let’s animate the remaining assets from scene 4. Precompose the assets, and as you might have seen from scene 03, we’ll be animating using trim paths, position and scale properties. All our layers will use the trim paths animation style so I’ve created a preset for it. Now that our layers have been animated let’s offset them so everything doesn’t happen all at once.

Go back to the “Scene_04” comp and drag the spinning medal comp before animating this and then let’s work on making the transition for this scene.

If you take a look at “scene 03” you’ll see that our transition works on top of our artwork composition, so let’s set our layers to make this transition work. First let's make sure our assets animation functions on top of the transition, if it doesn’t, adjust the timing of the animations.

Now, as you can see at the end of the transition the textbox is located in a different position from the text box needed for this scene and also has a different size. To fix this and to ensure that we still have a smooth transition we can animate the position for the transition right before it finishes the intro animation.

Place a keyframe on the current position and move it up to place it right where the text box for this scene should be. Use the provided text boxes, convert them to shape layers and reduce the opacity so you have better visibility. Delete any unnecessary groups and animate the path, the idea is that we have a smooth transition between both layers to make it appear as one layer.

Now that our transition works, let’s animate the intro for the spinning medal using the same technique from as medal in scene 03.

I’m going to be animating the remaining scene off camera.

With both our scenes animated, locate and open the Main comp in the project panel. In this composition add the four animation compositions (the two pre-animated and your two animated scenes) and sequence them evenly. Remember to save your After Effects file, and at regular intervals throughout your project.

And that’s it! Let’s preview the entire animation and see if I need to clean anything up or tweak it in any way.

What did you think of the way I animated these two scenes? Did you do something similar? What would you have done differently in your assignment? If there’s anything you think you could improve on, revisit your assignment and fix it up.

Remember to save and keep your project as you will need it for the final assignment of this course. Bye!

Working with Audio

Hello and welcome to the very last lesson of our course. Now that we have completed the final animation project, there are only a few things we still need to touch on. We need to add music and voiceover to our project and learn how to edit audio inside of After Effects.

Something that I would highly recommend is learning to use other audio editings software like Adobe Audition or Audacity. It will make it a lot easier for you to work with audio files, but if the audio edits are simple and straightforward you can edit them directly inside of After Effects.

So let's get started.

Working with audio in After Effects

One of the areas where After Effects doesn't excel is on the audio editing front, especially when compared to programs like Adobe Premiere. Premiere has better tools and management of audio-related tracks and files.

But that doesn't mean you're not able to edit audio inside of After Effects and sometimes it is more convenient to do so. There are a few more things we need to consider when working with audio in After Effects.

I'll start by discussing the options provided by After Effects for all the audio layers. If we place an audio file into our comp and unfold its options, you’ll notice that we only have two parameters: The audio levels and waveform. Audio levels increase or decrease the audio volume, this uses a decibel scale parameter that can be animated.

The waveform is useful to find peaks in the amplitude of the soundtrack in order to loop and cut music tracks. This feature is just a visual reference and has no interaction that can be made with it. Just remember that if you mute your audio layer by toggling the speaker icon off, the waveform will not show. The same thing happens if you have more than one track and you solo one of them.

The hotkey for showing these parameters in an audio layer is L. If you press it once you'll get the audio levels, and if you press it twice you'll be able to view the waveform. If you want to have both of them visible, double tap L and then press Shift L - now the levels will also be displayed.

Now, let's talk about one of the biggest problems: audio layer management. Why is it a problem? Well, for those of you who have worked with Premiere Pro before, you’ll know that you can import a voiceover that has 30 different files and neatly organizes them in a single track. However, in After Effects you'll end up with 30 layers, and if you want to adjust how loud they sound you'll have to do that to each of your 30 layers. You’ll get even more layers if you need to loop a music track and if you need to add additional sound effects.

So how do we work with these types of layers? We can create separate comps for the music, voiceover and sound effects. Rendering mp3 files can be done easily and quickly and once we’ve created our audio comps we can export each of them as a full track and import them back as a single track to make it easier to manage.

Also if you need to do any amendments you can just go into the comp, make the changes, re-export the track and replace the original track. If the name stays the same this will automatically get updated in your project. The advantage of this is that you'll be able to edit the levels in a single layer. If you don't want to export the audio you can always use pre-comps. I prefer having the final proof audio as a separate file on a drive to avoid using the final audio edit just in case anything happens to the original After Effects project file.

Editing Music

Most of the music you'll download should be royalty-free stock and will probably have an intro and/or an outro - having both can make the video sound more professional.

Setting up an intro and outro can add time to your workflow, but it will increase the quality of your animation dramatically. To do this, we need to use a bit of music theory in a simple way. As you might know, most music we listen to, and the type that you’ll probably find and use for animation, uses a four-four beat per second structure.

This means that there are 4 beats in its measure and a quarter note receives one count.

If we listen to the music structure you'll probably notice that on the 4th beat, there's always an audio accent. So all we need to do is find these points and cut our audio so that they match. This might sound kind of hard, but you can visually see the beat on the waveform and this can help you find the points where you need to cut the audio. What we usually do to edit the music is cut the layer using the split layer command: command/control, shift and D and move the end part of the music so that it matches with the last frame of our animation.

Once we do this, we can move into cropping the audio layers so that they match seamlessly at a certain point, based on the beat we just described. Watch carefully as I edit an example using the following track.

To add to the example, I'll work on making it longer by having it loop twice before moving on to the ending. I'll divide my layer into another two parts and I'll try to find a looping point where the beat starts and ends at the same point.

The good thing is once you find this loop point, you can just duplicate that part as many times as you want in your comp.

Remember you can zoom in if you want to crop it frame-by-frame. After Effects will lock the cropping capabilities of a layer to the current frames per second of the comp you're working in, often making cropping less accurate. But if done correctly, most of these will be minor issues and will be unnoticeable, especially if you have a voiceover talking over the moment when the music is cut. Again, I know it sounds kind of hard, but once you start doing it, you'll see how easy it really is.

The Do’s and Don’ts with Audio

There are a few things that will help our animation look more professional. There are also things we should avoid as they will probably get flagged by clients and if we consider them from the start we can avoid multiple rounds of changes.

Let's go over some of the things that we should do when possible.

Firstly we can increase the audio levels of the music where we have no voice-over. This will help make pauses in the voice-over sound like they are intentional and not a mistake. In group projects where the same voice actor and music are being used, make sure to share your audio-level information with the team so that everyone's animation sounds the same. Adding sound effects to animation when possible is something that will always help increase the quality. Depending on the voiceover, you can extend the pauses on the audio a bit to help the animation breathe. This will also help the viewer have extra time to take in the information provided.

The don'ts are things we all know and are always important to keep in mind. Never add a time remap to the audio. Making the audio run faster or slower even if it's for a second will change the overall pitch of the voice-over or the music. It's always better to re-record the voiceover when needed rather than just changing the pitch.

Avoid having to patch and crop the voiceover, especially when the voice has no pauses between words as it will make it sound chopped off. If it needs to be done, make sure it sounds as natural as possible. It is also more professional to ensure that the voiceover audio has no perceptible breathing, echo or background noises. If it does, ask your voice-over artist to fix these issues.

Conclusion

Audio is always just as important as the quality of our animation. I've seen a lot of amazing animation projects end up being terrible just because of sound issues and quality. Taking some extra time to get the audio right will always increase the value of our work.

Thank you for joining me throughout the duration of this course. I am sure you have gained valuable skills to take your motion design career to the next level. Bye for now!