Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this video we're going to tour the Motion Editor. The Motion Editor was introduced in Flash CS4, and it gives you great control over individual properties of an animation. You could think of it like a mirror of the timeline that's displayed as a chart. Now in order to see Motion Editor options, you have to select a keyframe span that's been tweened or an object that's been tweened. The first time you click on the Motion Editor, it may be empty. When I come back to the timeline and look at this project file, 0701motion, I'm going to click once in this light blue area to select the tweened keyframe span, or I can click on an object on the stage.
You'll notice my movie is 48 frames. The default frame rate is still set, at 24 frames per second, so the movie has a duration of two seconds. Now, when I click on the motion editor, I can see all of its options. The first time you come in here, you may, however, only be viewing one frame. This portion, where it says Viewable Frames, I can click and drag down, and you'll notice only the number 1 appears. The first time I jump into the motion editor, I always click and drag that up, so I can see the full length of the movie.
And now I'm seeing 48 frames. I'm going to stretch the motion editor, and things that you can modify are the x y position, rotation. I can collapse basic motion to make this simpler. I can transform the skew or the scale. I can apply a color effect, and you'll notice many of these options are also available in the Properties Inspector. A lot of longtime Flash users will do this just through the Properties Inspector.
However, I travel and teach for Adobe a lot, so I tend to be an early adopter of new features because my job is to show them off. So I do almost everything with the Motion Editor, even though it was designed to create more complex tweening. One of the very cool things you could do is apply filters, like drop shadow, blur, glow, or bevel. But the main focus of the motion editor is easing. Easing creates more natural or more realistic motion.
For example, an object coming into the stage quickly and leaving slowly, or coming in slowly and leaving quickly. You could even create bounce effects which lose their momentum as an object bounces across the stage, to simulate a realistic object bouncing on the floor. But I like to start you out in the shallow end of the pool, so we're going to start with basic motion. I'll expand that by clicking the little expand triangle again.
My object is selected, and my play head is at the end. My 48th frame, or the end of the 2 seconds. I'm going to apply a rotation of 360 degrees, and I'll press Return or Enter. You'll notice, my dotted line for rotation now became solid. Another powerful feature of the Motion Editor is the ability to do things like custom easing, where you can use bezier tools, curves or vectors in this chart of the motion editor To get very precise in the playback of the property that you're editing often for for easing. But lets see what we've done so far, as I scrub the timeline, there you see the full spin of the image on the stage.
As I mouse over this line in the motion editor chart I could see on an exact keyframe. What the rotation angle is. And if I press command return or control enter to preview. (LAUGH) I always giggle when I see this. You'll start to get a little dizzy if you leave it up too long. But there's my first effect. The next thing I'm going to do is apply a scale effect but I want to do that with a new image. So I'll come back to my timeline. I'll give this a bit more room, and I'm going to look at the Library panel. In the library panel, we have three images already placed for you to use. Notice the symbol 1.
When I created the motion tween, Flash automatically made it a movie clip symbol. To be a good Flash user, I'm going to name my symbol, boy1. And now add new layer for the new image, call it boy2, and then I'll drag over the boy2 image. Before you drag, it's important to put an empty keyframe in where you want it to go. I want the boy2 image to start playing after boy1 is finished.
So, click here on keyframe 49, insert timeline keyframe. There's my blank placeholder. And I'll drag over boy 2. I'll use my alignment panel and confirm that align to stage is on and I'll center horizontally and vertically. I'll collapse my align panel. And I'm going to scoot over by sliding the scroll bar to the right. And I want to make this also play for two seconds.
So I'll go to keyframe 96, and choose Insert timeline frame. No tweening has occurred yet, so I'll right-click on the image, and choose create motion tween. There's the new symbol Flash creates, a movie clip symbol And I'll name it boy two. Now I'm ready to use the motion editor. I'll click back on the motion editor, and this time I'll collapse basic motion and apply a scale transformation.
My scale values are linked in, and I can see in blue the properties... I'm at the end of my movie, so I'm going to scale him down to nothing. I'll type 0, press Return or Enter to accept it, and you'll see he disappears to infinity. I'll hit command return, or control enter to preview, and there's my effect. So if you're feeling frisky, you could try this again with the boy 3 image. That is our introduction with the very basics of the motion editor.
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 36889 Viewers
100 Video lessons · 7529 Viewers
94 Video lessons · 25868 Viewers
147 Video lessons · 5534 Viewers
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.