Flash Explained

Learn Flash easily.

Basic Motion Tween Animation

October 6th, 2008 | Author: Luka | Category: Animation


In this lesson, you will learn how to create a simple Motion Tween animation. In other lessons, I will show you how to use some advanced capabilities of this type of animation, such as easing, changing the color, shape and transparency of your object.

1 Open a new Flash document. Draw a circle. You can do this by selecting the Oval tool (O) from the Tools panel. Click on the stage and start dragging, while holding the SHIFT key.

2 Select the circle with the Selection tool (V) from the Tools panel, by double-clicking on its fill color (if you are working with Flash MX 2004 or Flash MX) or clicking on it once (if you are working with Flash 8). You can also select it by clicking somewhere outside the circle, and dragging the mouse over the circle (see the image at left below). The circle is now selected (see the image at right below). If you are using Flash MX 2004 or Flash MX it is important that you select both the fill and the edge.

Selecting the circle. The selected circle.

3 To create a motion tween animation, you need to convert your circle drawing to a symbol. Choose Modify > Convert to Symbol or press F8. This will bring up the Convert to Symbol dialog. Now, you can choose from three types of symbols: Movie Clip, Button and Graphic. Choose Movie Clip.

Movie Clip is by far the most versatile and powerful of the three symbols available in Flash. You will use it in perhaps 99% of the cases where some animation and/or interactivity is involved.

Still in the Convert to Symbol dialog, give your Movie Clip a name. Click in the Name field, and type circle. We’ll leave the Registration option for now. Click OK to create your Movie Clip. You will see a thin blue square marking your newly created Movie Clip.

Now we need to create the movement. How? By using the Timeline, which is situated above the scene.

The Timeline panel in Flash.

The frame with number 1 on the image (and in our document) is a keyframe. A keyframe is a place in timeline where something changes. When you open a new document, as soon as you draw something on the scene, a keyframe is created in frame number 1. To animate our Movie Clip, we need another keyframe.

4 To create the second keyframe, bring the mouse over frame 20 (you can choose whichever frame you want, of course, 20, 21, 30, 5, 86, it doesn’t matter, but for the sake of keeping everything in sight, choose some frame not far away). Right-click on frame 20 and choose Insert Keyframe from the menu that appears. You should see the same result as in the image below:

Timeline with second keyframe added.

5 Now click (once!) on our Movie Clip (the circle on the stage) and drag it to a position you want your movement to finish. If you press ENTER now, you will see the playhead in the timeline start to move, but there is no circle movement. Why is that? Because we haven’t told Flash to make a Motion Tween yet. So the first keyframe is being shown, without any changes, till the playhead arrives at the second keyframe. At that moment, you see our Movie Clip “jump” to the new position and stop.

6 To make the Motion Tween, right-click anywhere between the two keyframes (or right-click on the first keyframe, but NOT on the second one), and choose Create Motion Tween from the pop-up menu. If you’ve followed correctly every step until now, you should see an arrow on a bluish background, between the two keyframes.

Motion Tween on the timeline.

Press ENTER now to see your Movie Clip move on the scene. Whoa! Your first Motion Tween. Cool, ain’t it? 🙂 It is always exciting to see the first results of your newly aquired skills, but in time, motion tweening will become second nature to you, you’ll do it automatically. Which is also cool. 🙂

If you want to test your movie, or see how it functions “for real” and not in the working space of Flash, press CTRL+ENTER or choose Control > Test Movie. Your Movie will open in a new window, and the animation will loop endlessly, that is, until you close the window. Maybe you’ve noticed that your movie is too “jumpy”, i.e. your Movie Clip is not moving smoothly. To change that, press CTRL+J or choose Modify > Document. The Document Properties dialog appears. In the Frame rate field enter a higher number. Try 24. This value is the speed of your movie in fps, or frames per second units. That means that when a second has elapsed, Flash will have shown 24 frames in sequence. Test your movie by pressing CTRL+ENTER and see the difference.

Always use only one symbol in a Motion Tween animation. If you want to animate more symbols (Movie Clips, Buttons, Graphic symbols) you should place each symbol in its own layer on the timeline. Also, there mustn’t be anything else except the symbol which is being animated in the layer containing the Motion Tween animation (no drawings, lines, text, other symbols etc). Otherwise, you may get unexpected and erroneus results.

Be Sociable, Share!

Comments

Submit a comment

  • LRussell Oct 17, 2008 at 6:17 pm

    I am taking a college course and had tried for days to figure out how to do this option. The book was okay but after using these instructions and the ones of another of your instructions I was able to complete my assignment and it actually clicked for me what I was trying to accomplish. THANK YOU SO VERY VERY MUCH!!!!!

  • myblueskiez Oct 17, 2008 at 9:26 pm

    I’m kind of the same with the first comment but I spent hours on my school book and couldn’t figure it out. Once I got to your page and within 10 minutes, I was able to create a bouncing shrinking ball in my movie…EVERYTHING NOW MAKES SCENSE!………THANK YOU!

  • Luka Oct 17, 2008 at 10:09 pm

    LRussell, myblueskiez: You’re welcome. Come back for more and spread the word about FlashExplained.com!

  • Paul Burningham Oct 30, 2008 at 6:32 pm

    Can anyone help me with ‘smooth tweening’

  • vinod Aug 12, 2009 at 8:10 am

    “mouse over stop motion Tween &mouse out play motion tween”

  • […] 1 Open a new Flash document. Create a simple motion tween animation that consists of, let’s say, 30 frames. If you are a beginner and don’t know how to do this, I suggest you check the tutorial on creating a basic motion tween animation. […]

  • andrew Sep 29, 2010 at 6:27 pm

    Is it possible to tween a circle being drawn?

    …or is that limited to frame by frame animation?

  • Elena Dec 28, 2010 at 9:31 am

    Hello, I am a beginner trying to follow your fascinating tutorials, thank you for the wonderful tutorials!!
    But i do not see the [Timeline] button with Scene 1 on the uppers left of my screen …. could you please instruct me me with making the Scene 1 button appear right over the layers? thank you so much in advance…

  • Ghulam Rasool Oct 26, 2011 at 7:10 am

    Thanks dear for guidance…keep it up

  • Hillary Bost Mar 1, 2012 at 3:17 pm

    great tutorial, I am going to go and try this out now. Thanks!

  • Ritu Hemnani Apr 4, 2012 at 6:46 am

    Hello,
    I had made a movie clip and i had made some buttons as play stop like, but i am unable to give forward my clip as i want to move 10frame everytime as i press it, so please help me out.

    Thanking you,
    Ritu.

You must log in to post a comment.