Add motion tweens

A motion tween is a type of animation in which an object moves from one position to another. In this project, you will make the images of food animate upward when the user clicks on a button, which you will add later.

About

About motion tweens The name motion tween comes from the fact that the animation includes motion, and from the way that motion is created. The term tween is short for in between. You define motion-tweened animations by defining starting and ending positions for the object being animated, and then letting Flash calculate all of the in-between positions for the object. In this way, you can create smooth motion animations simply by setting the start and end positions of the object you are animating.

To add the motion tweens:

• In the Timeline, select Frame 1 of Layer 1.
• In the Property inspector, select Motion from the Tween menu.

  Frames 1 to 19 in Layer 1 become a motion tween. An arrow appears in those frames in the Timeline.

• In the Property inspector, drag the slider next to the Ease text box until the value in the text box is 100.

  This number causes the tween to be eased at the end of the motion. This means the motion starts suddenly and ends more slowly

ABOUT...

About easing animations The default behavior of motion tweens is for the animation to proceed at the same speed throughout its entire duration. Often however, this doesn't look very good to the eye. Just as a car doesn't go from 0 to 50 mph instantly, your animations shouldn't either. Easing an animation is the same as accelerating a car slowly. The term easing comes from the idea that you ease a car into motion, or ease it to a stop. By adding an easing value, you cause your motion tweens to begin or end more gradually.

1. In the Timeline, select Frame 20 in Layer 1.
2. In the Property inspector, select Motion from the Tween menu.
3. Drag the Ease slider up until the Ease value is 100.
4. Click the slides_mc movie clip instance on the Stage to select it.
5. In the Property inspector, enter -150 in the Y text box.

   This moves the slideShow movie clip instance upward 150 pixels in the keyframe in Frame 20. The motion tween from Frame 1 to Frame 20 slides the movie clip upward smoothly instead of causing the movie clip to jump from one position to the next.

6. In the Timeline, select Frame 40 in Layer 1.
7. In the Property inspector, select Motion from the Tween menu.
8. Drag the Ease slider up until the Ease value is 100.
9. Click the slides_mc movie clip instance on the Stage to select it.
10. In the Property inspector, enter -300 in the Y text box.
11. In the Timeline, select Frame 60 in Layer 1.
12. In the Property inspector, select Motion from the Tween menu.
13. Drag the Ease slider up until the Ease value is 100.
14. Click the slides_mc movie clip instance on the Stage to select it.
15. In the Property inspector, enter -450 in the Y text box.
16. In the Timeline, select Frame 80 in Layer 1.
17. Click the slides_mc movie clip instance on the Stage to select it.
18. In the Property inspector, enter -600 in the Y text box.
19. In the Timeline, click the number 1 in the Frame Number bar.
20. Press Enter (Windows) or Return (Macintosh).

    A preview of the animation plays on the Stage. The stop(); ActionScript you entered previously is ignored in preview mode.

You have now finished creating the slideShow symbol, which contains its own complex internal timeline. Next, you will edit the main Timeline of your FLA file.