Transcripts
1. Introduction - Download Alight Motion: Hey guys, welcome to this our Latin and Washington corps. And to be, we'll be talking about how to really get started as a beginner. So if you know absolutely nothing about motion design or animation, where this is the course for you and feel free to join alone. Donald Allied Motion, whether you have an Android phone or an iPhone or iPad, and follow along with me. Once you are in the app, you'll see something similar to this. Once you get the plus icon here, you takes you to the section where you can create a new project or a new element. Name your element here and let's begin.
2. Understanding Keyframes and Easing Curves: So today, we'll be focusing on a few simple movements that would really take your designs, your motion designs to the next level. And while you really want to focus on, is mastering these movements, know, when it comes to motion design or animation, where you first need to understand is the word keyframes are very, very important word for you to be familiar with. And keyframes you really are just in simple terms, a mark of your element at a specific point in there. Now once you have two points or two keyframes, mightily to points in time. If they have a different color, they have a different Let's see. Capacity, liver, different position or a different size or a perspective. Then the software, this one mean Allied Motion, magically interprets what should happen there. And, you know, fills the blanks are fills in the blank. So Let's go ahead and name are layer. And let's kind of get a quick demonstration of what we're talking about this law. So we're going to create a new shape, and let's give this a white color. Let's make this a bit bigger. By doing this. Let's bring it to left. No. As you see here on the timeline, this layer is about two seconds law. Let's make it a more fair servers know. If I wanted to get this to move from this side and the left to this side. On the right, I would need to mark the position at the point in time that I want it to move? Or did I want it to be underwrite? And my aka position at a point in time that I wanted to be on the left. Now it kinda sounds confusing if it does. Let's, let me show you exactly what I mean. So not 1 second. I want the square to be right here. So on the left-hand side, there's a diamond with a plus. And that's your keyframe, Aligarh. And no, moving back to 0 seconds, I'm going to move my layer whereas squared to the left. And you'll notice that it actually adds a keyframe or adds another keyframe. Foil that new position that I displeased my element that no, if I were to play this 1 second, you'll notice that it moves from left to right. It's not a very beautiful movement. And we will come to that shortly. But That's where we actually begin to get it to move slightly differently. What you could do is add what we call an easing curve. And here are a few examples. There is linear, right? There's ease in is, is old. And there's easy ease in his thought. And what this simply means is it's going to move slowly at the beginning. So let's play that. And speed up at the end. Now iso means there is going to move quickly at the beginning and slow down and end. Cause it's the opposite of ease in. And finally, he's in, Iso means that it's going to move slowly, speedup, and then end slowly. Now if I take off that highlight, note, all these curves are customizable. So if you want to exaggerate the motion of it, you could do something like that. So feel free to play around with your curves to get the, you know, getting used to exactly what the different curves do. And see exactly how they can actually help you when creating your animations.
3. The Graph Editor: So let's look at the graph editor. The graph editor allows you to adjust the animation to make it more fluid. And you get to the graph editor after adding keyframes, go in, in-between two keyframes. Select in the parameters, in this case Move and Transform. And clicking under Graph Editor, That's the icon at the bottom on your lift. Let's apply each of the four graphs here to the various squares and backup load. What happens as we apply each graph to the squares? Now once I play this animation, you'll realize that each square actually moves in a different timing than the other one, even though they all get to the same point after 1 second has passed. So let's look at these squares individually and see exactly what is happening here. So let's open our first square root. When he opened the graph editor, will realize that no easing is applied. And when you play this animation, it moves in a linear fashion. From left to right. The time in, the speed is constant and nothing really changes into animation. So it's a lot more mechanical than the other ones. As you'll come to see. This look at this one. When we open or easing curve or graph editor, you'll realize that this curve is applied. No wonder this one really means is it's going to start off really slow and then gradually pick up speed. So let's see that happen. So as you notice, it starts off really slow and then it picks up speed closer to the end. So let's play them together. And in theory, what should happen is this bottom square. Let's give it a different color. This red square should actually move faster at the beginning as this speed is more constant than the one above it. So as you see, it really starts lower and then picks up speed closer to the end. No, Let's look at the third one. The curve applied to this one has an ease in and ease out. And what this really means is it's going to ease into the animation standoffs law is going to pick up speed in the middle and then it's going to slow down closer to the end. So if we play it in comparison to the first and the second, we'll see exactly what is taking place there. No one should really happen and let me change the color. Or yellow square is going to start off at the same speed. That degree of one starts off at. It's going to speed up in the middle of the animation. And then it will slow down towards the end. And finally, or a blue square has an ease out animation applied. Know what is OT curve really means is or animation. We'll start off at a gradual speed, at a constant speed around, and it will slow down towards the end. Now, let's split all four of them to see exactly what's happening. So as you see, or a blue square actually slows down as it gets to the end of the animation. And you can even go ahead and exaggerate these animations by clean with no curves. So let us say I want it to slow down even further or even more. What I could do is go into or a blue square, select the graph editor and drag using my finger drug. This is in Grove, more towards the left, nor what will happen is it's going to start off extremely fast and slow down even more. So play around with these graphs to get your desired look. And I'll see you in the next lesson.
4. Keyframes for Blending and Opacity: Knowing this lesson, I really just want to focus on another quick tip. And that's a key frame for blending and opacity. And that's one the IE generally add over my emotion for position. So we start by adding a keyframe and 0 seconds and let's jump to 1 second at another keyframe here, where you notice that the opacity doesn't change and that's because we have the same values for the keyframe at 1 second and Mickey for him at 0 seconds. So what you need to do is adjust one of those keyframes. And as you will notice, as it moves from 0 to one, the opacity changes. And you can add an easing curve for capacity as well to splay it out and see what it looks like. And if you're not comfortable with that easing curves loop looks so gives what effect it gives. Feel free to adjust it. Or another quick tip is you can just copy the curve from one layer or one keyframe. Now you have and paste it on another way. And this to me gives mismo, dest movement are transitions ever? No. Period together. With position is what we'll be talking about during the rest of the course for the most part. So sit tight and I'll see you in the next lesson.
5. How to Roll a Cube (New): In this lesson, I'll be teaching you how to rule a cube inside a layer more sharp. So let's go ahead and create our project. The first thing we need to do is create our scene. And I'll be doing this by adding a rectangle as my black god's, filling it to the screen. And then I didn't have floor using another rectangle which will serve as the fluid that NICU avoid. A b is that NICU will be role in iron. Next, we'll add our cube and open Move and Transform. Scale it down a bit. Please, it on top of the floor. Tap again on your position to adjust your pivot point. Move it to the bottom right corner. Or being rotation. Add a keyframe, move forward 15 frames and set the rotation to 90 degrees. Don't under cube layer to select it and place it in a group. Next, we will repeat this steps by often in Move and Transform. Move into pivot point to the bottom right corner again. Going into rotation, add in a keyframe, and moving forward 15 seconds, 15 frames rather unrealistic it in for a cube again, another 90 degrees. Now we can repeat these steps as much as we want to keep or acute Boolean. So let's release it in our group. Well, we've been moving transform, change or pivot point. Open rotation, add a keyframe forward 15 frames, and rotate it another 90 degrees. And if we play this and you measure, do you have a cube root?
6. Create a Simple Subscribe Animation (New): This video will be slightly different as we'll be more so creating complete animations as opposed to simply just guiding you through the process. So it may be a bit longer, but let's just dive right into it. So once you open up that motion, one of the first things you realize is when you're about to create a project, it gives you these options. You can click that X mark and type in the name of your project. So let's call this a cool project. And you can set the aspect ratio, you can set the resolution, as you see it goes up to four K. You can set the frame rate. Let's set it to 30. And you can change your background from light green to black to white and green, et cetera. And one of the things I really love about motion for point, or is it really gives you a bunch more options from the get-go. Let's say we're creating a green screen effect. We can do this right here. So let's go ahead and create our project. So once you've created the project at the top left, you'll notice you see the name of the project and I'm back button, right? Because there was nothing added just now, did not populates and it wasn't seeing here. So let's go ahead. Change it to 16 by 9. A scarlet cool project. Create project. No, I don't element. And let's change this color to white. When I go back, No, you see that it's saved MCIS, I've actually populated it with some type of information. On the left-hand side, you see the name on a project. Right underneath that you'll see some options and these are new to 4, so I'll go over them in the next video. And under right-hand side, our unity core elements that you'll be using was Dr. Dan. So you have your shapes and you just simply need to tap on any one of them to bring in a shape. Right? You have media and if you tap on, you can add your photos and use et cetera, audio. Same thing. Object is also a new and elements are really where you can save elements and projects inside of projects are dominant elements or whatever. So we'll get into that laid-off. And under bottom here you'll notice you have freehand drawing, vector drawing and text. So let's say I wanted to add a text and I want to say cool text. And then again, go here from the Edit Text option. Once you have the text selected and you can edit the text whoever you want by changing the size. The color. Simplify altering these values here. We can also go ahead and tap on the canvas to move the text wherever you wanted to or if you want to move it and ensure that you have everything aligned. Go into the Move and Transform tool. This is the one from day, one at the very bottom under item and drug within this sector Mobilier section here. So let's go ahead and delete all these extra stuff because we won't be needing them. And it'll go ahead and create our animation. So I can hold on to the layers from zone and just hit Delete. So let's go ahead and create our Subscribe button for initial. So let's go ahead and our rectangle on other things we want to do is ensure that the coroner's is not completely squared. So just go ahead and edit shape and we can increase the X and Y values. We can also change the radius. And I think I'm over 50 would be fine for now. I think that's good. And thus change the color to white. So you'd want to call it unfilled and select the weight? No, there's jogs down to the bottom to where we would want or animation to pop up and then go ahead and add a keyframe here. Let's go to our border second. And well, yeah, let's go to our second. Add a keyframe there as well. Okay, so let's go ahead and add a keyframe. Here is a second. Let's add another keyframe and maybe 15 frames add another keyframe there. And all we're doing is animating backwards. So we know that at 1 second we wanted to be right here at 0. Secondly, want it to be off-screen. So I don't know our keyframes you need to do is mark the position at that point in time, our mark the object or element at a point in time. This simply tells a lie more Shanda, hey, at this point in time I want it to be off the screen. Says go ahead and play that. And as you see here, between 15 frames, and once I got there's no movement. And that's simply because we didn't tell a lot more Shannon what should happen at 15 frames. So let's go ahead and do that now. So now we've created something like this. Let's give that more life by adding some easing curves to it. And you do that by going in between two keyframes. And select in your easing curve section, which is at the bottom lift. And let's change the settings from enabling overshoot to disabling overshoot. Know. Once we set our easing curve, you'll notice that there is a slight difference in the whole animation. And thinking that that's okay. And if you want to actually move one of these keyframes, we can go ahead and select, Move and Transform. Hold on on the keyframe that you want to adjust and drag it left or right. Let's bring it over somewhere. That's, that looks good. Before we do anything else, let's actually go ahead or at least physicians. And we then create our animation afterwards. So a basic, basic subscriber animation could really just going to list off, did complete details being brought up into the screen. Note that. So what we could go ahead and do is create everything and group them. And then after grouping them, we make the animation align exactly with this one. So let's go ahead and do that now. So as you see here, I'm really just recreate an exactly what we would have done previously. Getting the shape rates and get into dementia is fat it to 147. So let's select this one and a score of 550 to 50. Whereas if they're assumed or well now the other things we can do, Let's hide this layer by selecting the app icon on your left. Is we could add a keyframe for opacity. To do that. Go into blending and opacity. Add a keyframe. Go to the point where you want it to be completely a pig and another keyframe. And then set your first keyframe to 0. So as you notice, it comes in from the bottom, but it's fading it as well. And you can also add easing, still this specific element. And again also add easing curves that is specific element. So you're gonna go ahead and add an easy ease group. There you go. Let's unhide this layer and continue creating our graphic. So for the place where you'd add your image, you want that shape to be a circle. Let's go ahead and add a circle and place it right to the point where we would want or a circle to be in or an industry and scale it up a bit. And it's made a great call. To move layers in your timeline. All you need to do is all done under layer and drag left or right. So now we have our circle, now we need our Subscribe button text for a name and what a channel is about. And we can go ahead and just duplicate this layer and then move it down a bit. And there's actually two inches stop Nieto. A different font or a font weight. So there's extra board. And then for this one, you can go semi bold. Let's align it. And then let's add our texts. That's going to edit text section and change from. My name again to channel info. Doesn't look. So I'm noticing that I didn't have enough space to read it, but there's some scam. So let's go ahead and back to or mean or tango Edit Shape. And we can then do is just stretch it a resource, let me know. I'll see you then need to do is really shift these over. Use end, Move and Transform Tool to the point where we want them to be. Let us go ahead and subscribe when simply by adding a sphere. It is in the shape, making it more like subscribe button is supposed to look into dragging on. And finally, let's change the color to arena because we know that it's supposed to be. Let's go ahead and duplicate this channel info section. I went here. He didn't duplicate. And then what we'll do is we'll actually take this, we'll drag it or a tango. But you notice that it's actually behind the rectangle. And that's simply because under layer order, it's behind a rectangle. If you notice, I wrote down links at the top and it's right below. So are we really need to do is hold onto this hamburger icon right here on your reactant side and move it above your rectangle. This also change the color to white. So it's easier seen and let's edit the text. So now we have or an emission to move all of this at once. The best thing to do is really to select everything. So do this by holding the layer under left, right decider icon and tap in our dragon above it to select all the layers. Then added top right section, you just group everything. Now we can move the entire layer as a group. So we go ahead and add key frames in the move and Janice warm section, just as all we would have done previously to the rectangle below. So let's hide the rectangle below. And then let's go ahead, add a keyframe here and go to 15 frames. Add a keyframe here. And I have 20 frames, add another keyframe at 20 frames and we know exactly where it should be at 15 frames and you see it should be above. So let's go ahead and bring it above. And then at 0 frames and wanted offscreen. Let's go ahead and add or easing curves. And here you have our animation complete. Now you could do the same process to an immediate it off screen. Or you could simply just go to about 20 frames, 1 second and 20 frames and add a keyframe for plasticity. And go to the end of two seconds and add another keyframe for a positive bringing it to 0. So when you play everything, there, you have it.
7. Project Breakdown - Creating an Instagram Story: In this lesson, we'll be breaking down an animated Instagram story. And this is one adequately did just a few hours and walk you through the process of what's going on here. Let's play it first so you can see exactly what it looks like up on the screen. And then we'll talk about exactly what's going on. So as you see, it's about ten seconds roughly and it has, you know, just about seven years and it's really nothing too difficult. So let's start by, you know, breaking. Don't exactly what's going on here. So as you see, I've turned off all my layers and there's absolutely nothing here. I've hidden all of them. No less unhappy or first layer. So I started by adding a black background because I knew that, hey, at the end of the day this wouldn't have been my final background layer. So I drag this out to about nine or ten seconds because I was planning to create this as an Instagram story poor style. I know storyboards are about ten to 15 seconds. So that was my line of thinking here. Know, once I've gotten this place holder done, I went ahead and I jumped into magazines off to your Affinity Designer and I created postal of starts. Now would actually post on Instagram in the stories. And the ones that post o has been my nicks that blows rebates or just the illuminance export them. So as you see here is a heres one element, here's another, here's another. Right? And once I exploited all these elements, I just pretty much redesigned everything again here in town. So I have an exact replica of what I would have created inside off. I think a good designer. Once you, once I have that, I don't. My next step is really to go ahead and animate exactly what I want to be moving inside of this post-doc. So let's start with my background layer. To deserve photo. I shot of a model for a makeup artist. And I decided I had seen that this really has a nice background. You know, why not use it for the poster? And this overlay some text on it. And here I added the logo. Here's the arrow. There's a first line of text at the bottom that says send us a message. And the extra information is right there. Notice talk about, you know, my animation process started at the top here. And as you notice, there are two key frames. One 0's have gardens and delta at 1 second. And he's actually position keyframes. And keyframes will blend in an opacity. So and 0, you'll noticed capacity is 0%. And as it goes up to 1 second, capacity gets to a 100%. And this is pretty much what I did. What I did for not just this layer, but this one as well. And this one has a, so you notice it kind of fades in while it's moving up. So once you add your keyframes in the position or the Martin position that you would have created InDesign in. All I did was go to 0 seconds or go back a few frames and change to position, beaten donor. Or lift our right to get the movement that I want are wanted. And then as you see here, I've created this little curve to kind of ease alt the motion as it stops. So you'll notice it starts really fast and then it slows down insignificantly as it goes towards the end. And all I did was to copy these curve and paste it to all my other layers, as you will notice here. So DON indifference would be the logo and the arrow. Coagulant to Ireland to be moving length. This is and really just did a bunch of position keyframes for movement of unknown. So as you see here, and this frame is up. But by the time we get here, goes down, it goes back up again. Backbone at this dream up. Darn. Well, and I could continue a bit if I wanted to. And do you know, given that smooth fluid motion again, I usaid at IESE, nice curve to each of those keyframes are in-between those keyframes. And finally, my logo is really just an opacity keyframe or a keyframe for obesity and 0, it's completely transparent. And as it gets to about six seconds, it's a 100% of B. And let's really hold a, designed these various layers to get the final project.
8. Project Breakdown - Subaru Xv Promo: Here is a, another example of why designing your are creating your animations from design software is up 20 or good idea first. As you see here, this is a more complex animation. My team and I put together for Subaru in Jamaica. And in really does have a 1-2 layers. But it's not as complex as you might think. So let's, let's dive into exactly what's going on here. First, let's take off all these layers so you can see exactly what's going on behind the scenes. So firstly, we, you know, as I said, we designed this in Affinity Designer first and then we brought over the concept here in a lion motion and started to make things move. So as you see here, we have four or, you know, initial design, something that looks like this. No. Once we identified, this design was really just a matter of getting into cars to move off or to switch. As the video continued on in the video, precarious. And this was, you know, don't use any. You'll notice that all the cars are the same size on the eye in the same position. Right? And then it's really just a matter of adding position keyframes. Witness same easing curve for each car. So if you check the easing curves there or the same as it goes by. And if we go back here to test drive icon or the text, you'll notice that as the car is change, the color of the text that totally changes as well. And this is really simple. It was just a keyframe for cola. We're we selected one corner and then added a key frame at another point in time and choose another color and then moved along the gradient until they got there. So that's exactly what we did for the color here. And finally, you'll notice the text does fade in and move upward for the key, the key fob and test drive. And that's really the same technique we use retinopathy there along with a keyframe for position to achieve this. Ok. So for best results, I really would recommend NYU definitely created designs using whatever platform you use, bead Photoshop, Illustrator, Affinity Designer, Victor neater. Then once you've and then once you've created the design and created, you know, different VC storyboards, you can take that into a lake mosh, bring into various elements that you want to animate and meet them. Move, you know, based on the idea or the concept that you have in red.
9. NEW! Kinetic typography effect : In this lesson, I'll show
you exactly how I achieve this effect using a light
and moisture gets started. So to get started, the first thing I had to
do is record the audio. This was done using
the voice memos app. Once you have the
audio recording, click the share button, scroll to the right
and you should see the Allied Motion app available. Selecting the app inputs the audio directly
into Allied Motion. And from there, you can
open a light motion, start a new project, and add
the audio to your timeline. For this tutorial, I won't be adding any animation
to the text. But this would be the point
where you would feel in your first text element and add some type of
animation to it. From there, all you really need to do is
duplicate that first Ex Works and add some markers to your timeline to help you with where the text should appear. Be sure to use the wave form
from the audio as a guide. Each spike in the audio
indicates a word being said. Once you feel with
adding all the texts, you can go ahead and create
a group for them to organize your timeline and then move to adding a background
of your choice. When you're finished
about the unmeasured to ensure that you
have all the texts coming in at the right times. If not, you can
always go back and refine by making adjustments
to the text layers, moving them to the right or
to the left to shorten or lengthen those that
need to be corrected.
Kareem Little
