Lesson 6

Animate Text

 

OBJECTIVE:  In this lesson, you will animate text by scrolling, rotating, zooming, and resizing it.

 

Lesson:  Select, copy, and paste frames

  1. Open fl4_10.fla from the Digital Design folder on the server
  2. Save the movie to your server folder as Fl_C4_L6_textAn_your username – this document has a frame-by-frame animation of a car where the front end rotates up and down, and then the car moves off the screen
  3. Play the movie, then click frame 1 on the Timeline
  4. Press the period [.] key to move through the animation one frame at a time and notice the changes to the object in each frame
  5. Change the view to Fit in Window
  6. Click frame 9 on the carGo layer, press and hold Shift, then click frame 1 to select all the frames
  7. Click Edit on the menu bar, point to Timeline, then click Cut Frames
  8. Click the Frame View icon near the upper right of the Timeline, then click Small
  9. Click frame 71 on the carGo layer
  10. Click Edit on the menu bar, point to Timeline, then click Paste Frames
  11. Click frame 1 on the carGo layer
  12. Point to the vertical line on the Timeline until the double-arrow mouse appears, then drag it to the left until frame 80 appears on the Timeline
  13. Change the view to 100%
  14. Play the movie, then save your work

Summary:  You selected frames and moved them from one location on the Timeline to another location on the Timeline.

 

Lesson:  Create animated text

  1. Insert a new layer, then name it scrollText
  2. Click frame 1 on the scrollText layer
  3. Click the Text tool on the Tools panel, click the pointer outside the Stage in the upper-left corner of the pasteboard
    [TIP:  You may need to scroll the Stage to make room for the text box]
  4. Click the Family list arrow in the Properties panel, then click Times New Roman
  5. Change the Character size to 20
  6. Click the Text (fill) color swatch, then click the blue color swatch on the left column of the color palette
  7. Type The Classic Car Club
  8. Click the Selection tool, click Insert on the menu bar, then click Motion Tween
  9. Click frame 20 on the scrollText layer, then insert a keyframe
  10. Drag the text block horizontally to the top center of the Stage [about ½” from the top – this will be the position of the text block at the end of the animation]
  11. Click frame 1 on the Timeline, then play the movie – the text moves to center Stage from offstage left

Summary:  You created a text block object and applied a motion tween animation to it.

 

Lesson:  Create rotating text

  1. Insert a new layer, then name it rotateText
  2. Insert a keyframe in frame 21 on the rotateText layer
  3. Click the Text tool on the Tools panel, position the pointer beneath the “a” in “Classic,” then click to display a blank text box
  4. Change the Character size in the Properties panel to 24, type Annual
  5. Click the Selection tool on the Tools panel, verify Annual is selected, click Insert on the menu bar, then click Motion Tween
  6. Set the Rotate value in the Properties panel to 2 times with a CW (clockwise) direction
    [TIP:  You may need to click the frame in the Timeline to have the rotate setting appear]
  7. Point to the end of the tween span (frame 79) until the pointer changes to a double-arrow, then drag the pointer to frame 30
  8. Click frame 79 on the rotateText layer, then insert a keyframe
  9. Click frame 1 on the Timeline, then play the movie – the Annual text rotates clockwise two times

Summary:  You inserted a new layer, created a rotating text block, applied a motion tween to text, and used the Properties panel to rotate the text box.

 

Lesson:  Resize and fade in text

  1. Insert a new layer, name it zoomOutText, then insert a keyframe in frame 40 on the layer
  2. Click the Text tool, position the pointer beneath the Annual text box, aligning it with the “h” in “The,” then type ROAD RALLY
  3. Click the Selection tool, click frame 40 on the zoomOutText layer, click Insert on the menu bar, then click Motion Tween
  4. Click frame 40 on the zoomOutText layer, click the Free Transform tool, then click the Scale button in the Options area of the Tools panel
  5. Drag the upper-left corner handle inward to resize the text block
  6. Click frame 79 on the zoomOutText layer, verify the Scale option in the Options area of the Tools panel is selected, then drag the upper-left corner handle outward to resize the text block to its original size
  7. Test the movie, then close the Flash Player window

Summary:  You created a motion animation that caused a text block to zoom out.

 

Lesson:  Make a text block into a button

  1. Insert a new layer, then name it continue
  2. Insert a keyframe in frame 71 on the continue layer
  3. Click the Text tool on the Tools panel, position the Text tool pointer beneath the back wheel of the car, then type Click to continue
  4. Drag the pointer over the text to select it, change the character size in the Properties panel to 12, click the Selection tool on the Tools panel
  5. Verify that the text box is selected, click Modify on the menu bar, click Convert to Symbol, type b_continue in the Name text box, set the Type to Button, then click OK
  6. Double-click the text block to edit the button
  7. Insert a keyframe in the Over frame, set the fill color to the black color swatch in the left column of the color palette
  8. Insert a keyframe in the Down frame, set the fill color to the bright green color swatch in the left column of the color palette
  9. Insert a keyframe in the Hit frame, select the Rectangle tool on the Tools panel, then draw a rectangle that covers the text block
  10. Click Scene 1 at the top left of the edit window to return to the main timeline

Summary:  You made the text block into a button.

 

Lesson:  Add an action to the button

  1. Display the Actions panel
  2. Click the Selection tool on the Tools panel, then click the Click to continue button on the Stage
  3. Verify the Script Assist button is turned on, then verify the button symbol and b_continue are displayed in the lower-left corner of the Actions panel [Note:  You need to have ActionScript 2.0 active – you can check your ActionScript version by choosing Publish Settings on the Edit menu, then selecting the Flash tab]
  4. Click the Add a new item to the script button in the Script Assist window, point to Global Functions, point to Timeline Control, then click play
  5. Insert a new layer, name it stopmovie, then insert a keyframe in frame 71 on that layer
  6. Verify that stopmovie:71 is displayed in the lower-left corner of the Actions panel
  7. Click the Add a new item to the script button in the Script Assist window, point to Global Functions, point to Timeline Control, then click stop
  8. Click Control on the menu bar, click Test Movie, then click the Click to continue button when it appears – the movie plays the animated text blocks, then plays the animated car when you click the click to continue button
  9. Close the Flash Player  movie window, save and close the movie, then exit Flash

Summary:  You inserted a play button and added a play action to it, then inserted a stop action on another layer.