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.) 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. 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
- Open a new movie.
- Create a new object in frame 1.
- Do NOT group it nor convert it into a Symbol.
- Place a Keyframe in frame 15.
- Right click on any frame between 1 and 15 and choose Create
- 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.
- Now go ahead and convert the object in frame 15 into a Symbol.
- The dashed line becomes solid indicating a successful Motion
- 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
- 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
NOTE: Check your end keyframes to be
sure they do NOT contain motion tween status:
"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!
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).
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
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).
- Double click on Layer 1 and give it a name.
- Click on frame 1 to select it and then draw a shape on your stage.
Nothing complex...a simple oval or rectangle will do.
- 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
- Convert your object to a Symbol: F8 or Insert/Convert to Symbol
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
- Did you remember to give it a name? :)
- 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
- With the Free Transform tool active, click on the Scale
modifier and resize your Symbol so that it's about ¼ inch
- Click in frame 10 and insert a Keyframe: F6, or right
click & choose Insert Keyframe, or go
- Click in frame 20 and insert a Keyframe: F6, or right
click & choose Insert Keyframe, or go
- Click in frame 10 and activate the scale modifier
and resize the symbol so that it fills most of the
- Now press Ctrl+Enter OR go Control/Test Movie.
- Not quite what you had in mind? Well, we can fix that.
- Click on any frame between 1 and 10 and open the PI. Choose
Motion from the drop down menu of the Tween option.
- Make sure "Scale" is checked. Don't worry about the other
- 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.
- 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...
- 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).
- . Click on any Frame between 10. Open your PI if it's
not already open. Move the Ease marker down to -100 (In).
- 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
- 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.
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.
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
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 keyframe...click 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
Okay....now let's insert a stop action to stop the movie from looping
once it reaches the end of the Timeline.
With the ball layer selected, click on the Add Layer icon:
Flash inserts a new layer above the ball layer. Double click on
the layer to rename it...name 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.
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).
Flash inserts a blank keyframe in the selected
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.
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 Movie...you'll see that the movie stops when it reaches the
end of the Timeline due to the stop action you just inserted.