Motion Tweening

The previous lesson showed how to move a graphic and text around the Stage. If you noticed closely, you could see that the animation was not very smooth. That is because all you were doing is moving the object from one Keyframe to the next Keyframe, all at once. The is called frame-by-frame animation and the data for each frame is stored in the file. Tweening animation is a good way to smooth out the animation and reduce the file size at the same time. Flash only stores the information for the changes betwen frames instead of the entire frame using the Tweening option.

There are two types of tweened animation: motion and shape. In motion tweening, properties such as position, size, and rotation for a symbol at one Keyframe and then change these properties at another Keyframe. In shape tweening, a shape is drawn in one Keyframe and then changed at another Keyframe. Flash then interpolates the information from the first Keyframe to the second Keyframe causing the changes to take place, thus creating the animation.

This lesson will show you how to work with motion tweening.

 

Animating a Graphic

1. Open the file lesson8a.fla that you worked with earlier.

2. Right-click over Keyframes 5, 10, 15, and 20 and choose Create Motion Tween.

3. Notice that you obtain a solid arrow between the Keyframes and the Frames turn blue, indicating a Motion Tween.

4. Click on Frame 1 and the click the Play button from the Controller to view this animation. Notice that the ball bounces across the Stage.

5. Right-click over Keyframe 1 and choose Properties. Click on Tweening to view the dialog box as shown below. Note the various settings. These are the defaults if you use the Create Motion Tweening command from the right-click menu of a Keyframe.

The Easing setting can be used to slow the beginning of the animation (In) or theend (Out). Other settings here can be used if you use a Motion Guide (draw a line to move the object along). You will work with the Rotate options with text motion. The Tweening box will allow you to switch to Shape Tweening in a later lesson.

6. Click OK to close the Frame Properties dialog box.

7. Save this as lesson9a.fla.

8. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson9a.

9. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

 

Animating Text

1. Open the file lesson8b.fla.

2. Right-click over each of the Keyframes 5, 10, 15, and 20 and choose Clear Keyframe.

3. Right-click over Keyframe 1 and choose Tweening and select Motion.

4. From the Rotate box, choose Clockwise and enter a 3 for the number of times. Click OK to continue.

5. Click on Keyframe 1 and click the Play button from the Controller to view this animation.

6. Save this as lesson9b.fla.

7. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson9b.

8. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

Note: You could now use procedures similar to those shown earlier to create buttons that would control how these animations play. For instance, instead of having the animation play continuously, you could use a Keyframe to Stop to animation and then create a button that would go to and play the animation.

Animating an Animated Graphic

As discussed earlier, animated graphics had motion but did not move about the screen. For example, the Bird's wings flapped but the Bird did not appear to be "flying" around the screen. We will now apply a Motion Tween to this object.

1. Open the file lesson4.fla.

2. Click the Add Layer icon from the Layers area. Select this layer and move it to the first postion if it is not there already. Name it Bird Animation.

3. Click the Arrow tool and select the Bird. Use the Edit, Cut command to remove the Bird from the Foreground layer.

4. Click on Frame 1 for the Bird Animation layer and use the Edit, Paste in Place command.

Note that we are doing this because the bird is the only thing we are going to apply a Motion Tween to. Thus that symbol must be on a separate layer. This is true for any Tweening animation.

5. Shift-click to select Frame 20 for all layers. Press F6 to create a Keyframe here.

6. Click in Frame 20 of the layer named Bird Animation.

7. Click the Arrow and click away from all selected objects to deselect them. Select the Bird and move the symbol to the right side of the Stage.

8. Now right-click over Frame 1 of the Bird Animation layer and choose Create Motion Tween.

9. Click the Play button for the Controller to view this animation.

10. Save this as lesson9c.fla.

11. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson9c.

12. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.

 

Flashing Text Using Alpha Value

This lesson will show you how to change the Alpha value for a graphic (in this case text that has been converted to a graphic symbol).

1. Run Flash 4.0 from the Start menu by choosing Macromedia Flash 4 and then Flash 4 to obtain a blank stage for the first frame. If you are already in Flash use the New icon from the Tool Bar to create a new project.

2. Click on Modify, then Movie from the pull-down menu to obtain the Movie Properties dialog box. Set the size of the movie to a Width of 300 and a Height of 100. Set the Background color to a Navy Blue. Click OK to continue.

3. Select the Text tool and set the Text Color to a Bright Red. Set the Font to Arial, Bold, 28. Type FLASH 4. Use the Scale tool to make the Text box larger so that it fits most of the Stage area.

4. While the Text box is still selected, use the Insert, Convert to Symbol command.

5. Name the new symbol Flash 4 and make sure Graphic is selected. Click OK to continue.

6. Click in Frame 20 and use the F6 keystroke to create a new Keyframe.

7. Click in Frame 1 and select the Flash 4 symbol.

8. Right-click over this symbol, choose Properties, and then Color Effect. From the Color Effect box, choose Alpha and set the value to 10% .

The Alpha value defines the degree of opacity for the color.

9. Right-click over Frame 1 and choose Create Motion Tween.

10. Click the Play button for the Controller to view this.

11. Save this file as lesson9d.fla.

12. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson9d.

13. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.

Enlarging Text

This lesson will show you how to change the size of text between Keyframes and use Motion Tweening to make the text appear to be enlarging.

1. Run Flash 4.0 from the Start menu by choosing Macromedia Flash 4 and then Flash 4 to obtain a blank stage for the first frame. If you are already in Flash use the New icon from the Tool Bar to create a new project.

2. Click on Modify, then Movie from the pull-down menu to obtain the Movie Properties dialog box. Set the size of the movie to a Width of 300 and a Height of 100. Set the Background color to Black. Click OK to continue.

3. Select the Text tool and set the Text Color to a Bright Yellow. Set the Font to Arial, Bold, 28. Type TCC PUBLISHING. Use the Scale tool to make the Text box larger so that it fits most of the Stage area. Use the Modify, Align command and choose the options Vertical and Horizontal Alignment.

4. Select the Text box and use the Insert, Convert to Symbol command. Name the symbol Enlarging. Choose Graphic for the type of Symbol.

5. Create a Keyframe at Frame 20 using F6. Return to Frame 1, select the Symbol and make it much smaller. Repeat the procedure for Alignment as you did earlier. Go to the Instance Properties dialog box (use right-click menu to access Properties command) for this instance of the Symbol and change the Alpha value for the Color Effect to 25%.

This shows a bit about Instances. You now have one Symbol in the Library but have used it twice. In one instance, the Symbol is small and has an Alpha value set for the Color Effect while the other instance is a large symbol with no Alpha effect.

6. Right-click over Keyframe 1 and select Create Motion Tween.

7. Click the Play button for the Controller to view this.

8. Save this file as lesson9e.fla.

9. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson9e.

10. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.

By now, you should be noticing that when you test the movie, it plays continuously. Go back and right-click over the Symbol and choose Properties. Take a look at the settings for the Definition tab. Notice that the Play Mode Options has Loop checked and the Frame set to 1. This is the default and is what makes this so.