Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I mentioned in an earlier movie that animations are created using property keyframes. In this movie, we will take a look at adding, removing, and modifying property keyframes. If you are following along, you can open up Property_Keyframes.fla in the Chapter 01 folder where you can just create a simple motion tween on the Stage; so one way to create property keyframes is on the Stage and the Timeline. To create a property keyframes, simply take your motion tween and put the play head on any kind of frame and then move your object on that frame and you will see that a property keyframe is created. In the Timeline, property keyframes just play as small black diamonds.
So I can move to any frame and move this monster around and I am creating the property keyframes. So notice that the Motion Path is adjusted to follow the property keyframes. So there is our animation but let's say I want it to remove one property keyframe. Using the Timeline, you can't really remove just one keyframe. Watch when I right-click or Ctrl-click in between in the Timeline. The option to remove keyframes is Clear Keyframe and then we have the option of what type of keyframe we want to remove, Position, Scale, Skew, etcetera or All.
Let's say I just want it to remove a Position keyframe. When I choose Position that removes all of the Position keyframes and I no longer have an animation. So what I am going to do is press Ctrl+ Z on the PC or Command+Z on the Mac to undo that change I just made. So now let's say we really need a little bit more control over this animation, we just want to remove one property keyframe. So to do that we are going to need to use the Motion Editor, so select your tween, move over to the Motion Editor and you can see the property keyframes in the Motion Editor. Let's say I wanted to remove the middle three property keyframes and just have it go from the first one to the last one still. One thing you can do is move to a frame where you want to remove the keyframe, so I am going to go to frame six here, you notice that there is a -- property keyframes are black squares and animations are connected using solid black lines. Let's say, I want to remove the keyframe here. I can simply put the playhead where I want to remove and then click the Add or Remove Keyframe button in the Motion Editor for the property you want to remove. So I will click that for the X position and notice that it removes the keyframes for the X and Y position.
Remember that Position property keyframes are connected so removing one or adding one will remove or add the other. In other words, removing an X keyframe will remove the Y keyframe there as well and adding an X keyframe will also add a Y keyframe. Let me show you another way to remove a property keyframe in the Motion Editor. That way is to use the keyboard shortcut Command on the Mac, Ctrl on the PC. Hold that button down, hover your mouse over the animation line, when I hover over the solid black area my cursor will be a pen with a plus sign, that tells me that if I click there I will add a property keyframe. Well, right now I don't really want to do that, I want to actually subtract the property keyframe.
So what I am going to do is hover over one of the property keyframes and you will see that there is a minus sign by the pen icon. So I will click on the property keyframe I want to remove and it's gone. So I will do that with the other one, still holding Command on my keyboard, I will click the property keyframe I want to remove and they are gone. So I scrub the playhead and there is my animation and I have all the control I need over the property keyframes. Another thing you can do in the Motion Editor is move property keyframes. So let's say I wanted the monster to move up and down like he was jumping, for example. So what I am going to do is click the Y area under Basic Motion in the Motion Editor to expand it, so notice it's a little bit bigger now. I am going to click and drag the Motion Editor up to get a little bit more space to animate here and then I am going to view the rest of the Stage in my visible area by choosing View > Magnification > Fit in Window. So now I can see the animation curve here, the Y position is at its lowest value on frame one, its highest value on frame 18.
So what I am going to do is select the last property keyframe in the Y position and notice that it turns green and this is probably going to be really hard to see on my screen, so you are going to have to try it yourself and see that the property keyframe is green. So now instead of being a black square, it's a green square. What I can do is click it and drag it, so I am going to click and drag it over to frame nine and I have moved the property keyframe to frame nine. So now the monster moves down in nine frames.
Now notice there is a dotted line between frame nine and frame 18. So what I am going to do is hold Command on my keyboard or Ctrl on the PC. I am going to hover over frame 18 in the Y position and I am going to click to create another keyframe and I will click and drag that frame down so that it's even with frame one. So I have 440 on frame 18 and then 440 on frame one. Now the monster jumps, so it goes down and hits the ground and jumps back up. So I will test the movie to see that in action, Command+Return on the Mac, Ctrl+Enter on the PC and there is the monster moving up and down.
So using the Motion Editor, you have a lot more control over property keyframes and you can easily add, remove, or adjust them as needed.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.