Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Introduction to the Motion Editor

From: Introduction to Flash Animation

Video: Introduction to the Motion Editor

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.

Introduction to the Motion Editor

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.

Show transcript

This video is part of

Image for Introduction to Flash Animation
Introduction to Flash Animation

32 video lessons · 6174 viewers

Kelly McCathran
Author

 
Expand all | Collapse all
  1. 1m 38s
    1. Welcome
      1m 38s
  2. 19m 35s
    1. Introduction to Flash CS5 and the Flash Player
      4m 28s
    2. FLA, SWF, and other file types
      5m 43s
    3. Flash feature comparison
      3m 58s
    4. Raster vs. vector
      5m 26s
  3. 27m 56s
    1. Overview of the interface
      7m 42s
    2. Panel modes and workspaces
      6m 54s
    3. Setting preferences
      4m 5s
    4. Choosing the proper document size
      9m 15s
  4. 28m 55s
    1. Merge Drawing mode vs. Object Drawing mode
      6m 43s
    2. Using primitive objects
      6m 37s
    3. Other shape tools
      6m 49s
    4. Selecting, modifying, and transforming objects
      8m 46s
  5. 17m 30s
    1. Your first animation
      6m 4s
    2. That's how the ball bounces
      6m 50s
    3. Working with multiple shape tweens
      4m 36s
  6. 34m 50s
    1. Creating and working with symbols
      8m 16s
    2. Editing symbols
      6m 38s
    3. The anatomy of a button
      4m 0s
    4. Building a button from scratch
      7m 18s
    5. The Library panel
      8m 38s
  7. 22m 42s
    1. The Timeline: Part one
      7m 48s
    2. The Timeline: Part two
      7m 7s
    3. The Timeline: Part three
      7m 47s
  8. 21m 32s
    1. Introduction to the Motion Editor
      6m 54s
    2. Using filters and color effects
      7m 29s
    3. Applying easing with the Motion Editor
      7m 9s
  9. 14m 56s
    1. Options for testing your movie
      3m 57s
    2. Full overview of Publish Settings and export options
      10m 59s
  10. 13m 31s
    1. Using sound in Flash movies
      5m 53s
    2. Importing sound into Flash movies
      4m 40s
    3. Adding sounds to a button
      2m 58s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Introduction to Flash Animation.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.