More Animation

Motion Tweens and Symbols

Motion Tweens only work on symbols, groups, bitmaps, and text elements (because they're already grouped - if you break text apart to edit it, you must re-group it before you can apply motion tweening.) successful tween The timeline will show a solid line (with an arrow head on it) on a blue background to indicate a successful motion tween.

If you try to apply motion tweening to an individual element residing on the stage level (ungrouped objects), it will not work. unsuccessful tween You will notice that the timeline shows a dashed line on a blue background indicating an UNsuccessful tween.

An exercise to show you what we don't want to see...

  1. Open a new movie.

  2. Create a new object in frame 1.
    • Do NOT group it nor convert it into a Symbol.

  3. Place a Keyframe in frame 15.

  4. Right click on any frame between 1 and 15 and choose Create Motion Tween.
    • You will see the blue background with the dashed line.
    • Flash created half of our Tween for us. It converted the object in frame 1 into a Symbol but the object in frame 15 is still just an object which is why the Tween is unsuccessful.

  5. Now go ahead and convert the object in frame 15 into a Symbol.
    • The dashed line becomes solid indicating a successful Motion Tween.

  6. There should be none of these in your library Now open your Library.
    • You will see 2 symbols in there: Tween 1 that Flash created, and Symbol 2 (or whatever you named it) that you created...but they are really both the same object. Click on each one in the Library to see them in the preview area. This will bloat our file.

    • convert to symbol We want to avoid this, so that's one very good reason why it's best to convert your object to a Symbol as soon as you create it; especially when working with Motion Tweens.

End keyframe with tween NOTE: Check your end keyframes to be sure they do NOT contain motion tween status:

When "Create Motion Tween" is used, motion tween status may occur in the end keyframe, depending on which steps were taken to perform the tween. That status tells Flash to create motion tween in that end keyframe and the next keyframes that are added. This can cause havoc in your Flash movie!

End keyframe with no tween
In order to avoid motion tween status in an end keyframe, always place beginning and end keyframes first, before motion tween is applied.

To remove a motion tween status from a keyframe, simply select that end keyframe and open the Properties Inspector (PI).
No tweening motion for the last keyframe
Set the Tweening to None. We will be watching for end keyframes with tween status so be sure to check your end keyframes.

Removing the tween status from the end keyframe does not effect the motion tween. However, if tween status is removed from a frame prior to the end keyframe, the tween is killed.

Single Layer Animation with Motion Tweening

Ready to try Tweening now? We will only use one layer, one symbol and 3 keyframes for this animation. Make sure you have only one Blank Keyframe in frame 1 before continuing. Use the undo button if you have to, or close that movie and start a new one (don't forget to save it so it has a name if you start a new movie). 

  1. Double click on Layer 1 and give it a name.

  2. Click on frame 1 to select it and then draw a shape on your stage. Nothing complex...a simple oval or rectangle will do.

  3. Activate the Free Transform tool and select your object.
    • remember to double click or draw a rectangle around it to select both the line and fill if you used both

  4. Convert your object to a Symbol: F8 or Insert/Convert to Symbol
    • Did you remember to give it a name? :)
    IMPORTANT NOTE: Always convert your object to a Symbol before you apply Motion Tween. This will save a lot of "junk" from being added to your Library. If you don't do this, Flash will automatically create a symbol named "Tween" in the Library. You can end up with Tween1, Tween2, and on and on... Definitely something we want to avoid!

  5. Move your Symbol to the approximate center of the stage if it's not already there. Remember you can use the Align feature to center your object...

  6. make it small With the Free Transform tool active, click on the Scale modifier resize your symbol and resize your Symbol so that it's about inch across.

  7. Click in frame 10 and insert a Keyframe: F6, or right click & choose Insert Keyframe, or go Insert/Keyframe

  8. Click in frame 20 and insert a Keyframe: F6, or right click & choose Insert Keyframe, or go Insert/Keyframe
    3 keyframes

  9. Now make it huge Click in frame 10 and activate the scale modifier resize your symbol and resize the symbol so that it fills most of the stage.

  10. Now press Ctrl+Enter OR go Control/Test Movie.
    • Not quite what you had in mind? Well, we can fix that. :)

  11. Click on any frame between 1 and 10 and open the PI. Choose Motion from the drop down menu of the Tween option.

  12. Make sure "Scale" is checked. Don't worry about the other settings.

  13. Now click on any frame between 10 and 20. Choose Motion from the Tween drop down menu and once again make sure that the the "Scale" box is checked.
    Successful Motion Tween

  14. Test your movie again by pressing Ctrl+Enter or by going Control/Test Movie. Looking much better isn't it, but let's add a little more to it...

  15. Move the slider all the way to the top Close the movie Player to go back to the Editor. Click on Frame 1 and open PI if it's not already open. Move the Ease marker up to 100 (Out).

  16. .Move the slider all the way to the bottom Click on any Frame between 10. Open your PI if it's not already open. Move the Ease marker down to -100 (In).

  17. Test your movie again. See the difference? Flash normally spreads the amount of "tweening" evenly over the number of frames between one keyframe and the next. When you set the easing, it changes that. Easing In causes the first few frames of that tween to have less change in them than the last few frames. This gives the illusion of increasing speed. Easing Out does the opposite which gives the illusion of slowing down.

  18. Before saving a movie that contains Tween Animation click on the last keyframe of your animation, open the PI and make sure that it says None in the Tween field.
    Set motion tween to none in the end keyframe
    When a movie ends with motion continuing, it can cause some very strange problems.

Now open the frame by frame animation that you created in week 3 lesson with inbetween frames between each keyframe. We are going to convert that frame by frame animation to a motion tween animation. You'll see that the motion tween animation is much more smoother than the frame by frame.

IMPORTANT NOTE: Be sure to rename this file if you want to keep the original fla and swf files in tact.

Keyframes and Inbetween frames
With the frame by frame animation movie opened, be sure that there are several inbetween frames between each keyframe.

With keyframe 1 selected in the ball layer, choose Insert > Create Motion Tween (OR you can right click and choose Create Motion Tween, OR open the PI and choose Motion Tween from the Tween drop down menu).

Continue selecting each keyframe in the ball layer and apply Motion Tween. The Timeline will look something like this when finished:
Motion Tween applied in all

Now when you do a Control/Test Movie, you'll see that the motion tween animation is much smoother than the frame by frame. Motion Tween "fills in the gap" between each in frame 2, 3, and 4 and you'll see the ball positioned on the stage in relation to how it will end up in keyframe 5.

Inserting a Stop Action let's insert a stop action to stop the movie from looping once it reaches the end of the Timeline.

Add a new layer
With the ball layer selected, click on the Add Layer icon:

Name the new layerFlash inserts a new layer above the ball layer. Double click on the layer to rename it action. Action layers are ALWAYS at the top of the stack of layers so Flash can find it easily. It also makes for good organization so you can find the action easily.

We want the movie stop stop at the end, so we need to insert the stop action in the last frame of the Timeline. In order to do this, we must first insert a Blank Keyframe. So select the last frame and choose Insert > Blank Keyframe (OR you can right click and choose Insert Blank Keyframe OR you can use the F7 key on your keyboard).
Add a blank keyframe
Flash inserts a blank keyframe in the selected frame.
New keyframe added to Action layer

With the new Blank Keyframe selected, open the Actions panel by clicking on the Actions panel, OR by going Window > Actions, OR you can use the [F9] key on your keyboard.

With the Action panel opened, select Actions > Movie Control. From the Movie Control menu, double click on Stop. You'll see the Stop action appear in the parameters window on the right.

An a in the blank keyframe indicates an action
Close the Action panel. Look in the Blank Keyframe and you will see a little @ in the Blank Keyframe. This indicates that an action has been inserted in that frame.

Now do another Control/Test'll see that the movie stops when it reaches the end of the Timeline due to the stop action you just inserted.