Basic Text Scrolling Flash

Continuing from our previous Flash movie example with the computer parts catalog, we demonstrate basic scrolling text using Motion Tween animation and Button actions. We demonstrate this technique for one product in the catalog to get you started.

  1. In the mainMovie.fla from the previous section, double-click the productMovie instance on the productMovie layer, located on the Main Timeline. Flash switches to Symbol Editing Mode.
  2. Add a new layer, and rename it scrollingText. On frame 1 of the scrollingText layer, draw a filled rectangle shape (with any fill color) to the right of the product graphic. The size of the rectangle should match the size of the text area you wish to display in the scrolling text window. The rectangle shape will become a Mask Layer inside another symbol for the text.
  3. Select the rectangle shape, and press F8 to convert it into a symbol. Give the new symbol the name scrollingText, and keep the default Movie Clip behavior.
  4. Double-click the instance on the Stage, and Flash switches to Symbol Editing Mode. The timeline of the scrollingText symbol will be displayed.
  5. This rectangle will be used to mask the text in our scrolling text window.

    This rectangle will be used to mask the text in our scrolling text window.

  6. Rename Layer 1 to textMask. Add a new layer, rename it text, and move this layer below the textMask layer. Switch the viewing mode of the textMask to Outline Mode by clicking the colored square at the right end of the textMask layer options. Also, lock the textMask layer so that you won’t accidentally alter its shape or position. The outline of the shape will indicate where our text should be placed.
  7. Select the first frame of the text layer, and, using the Text Tool, insert the text that follows into a Static Text block, as shown in Figure below. You can copy and paste this text from the monitor_1_text symbol in the content.fla Library.Keep the right margin of the text block at the right edge of the outlined rectangle in the textMask layer, and don’t worry about the text that extends below the Stage edge:
  8. Select the Static Text block you created in Step 6, and press F8. This new symbol will be named monitor_1_text, and will have a Graphic symbol behavior.
  9. Now we create a Motion Tween over ten frames. We add buttons that will move the playhead one frame with each click. Therefore, nine clicks will get us to the end of the text. Select frame 10 in both the textMask and text layers, and then press F5. Then, select just the frame 10 of the text layer, and press F6. Right-click (or Ctrl+click on the Mac) any frame between frames 1 and 10 of the text layer, and select Create Motion Tween from the contextual menu.
  10. On frame 10 of the text layer, select the monitor_1_text instance, and move the instance toward the top edge of the Stage, until the bottom edge of the text aligns with the bottom edge of the mask outline, as shown below. For greater accuracy, use the up arrow key (with the Shift key pressed) to move the instance.
  11. The text in Step 6 will be too lengthy to keep within the area of the rectangle outline. Don’t worry we’ll be adding scroll buttons that will enable the viewer to see the text outside of the mask.


    By aligning the contents of the end keyframe, you are setting the lower limit of the scrolling window.

    aligning the contents of the end keyframe, you are setting the lower limit of the scrolling window.

  12. To complete the masking effect, right-click (or Ctrl+click on the Mac) the label name for the textMask layer. Select Mask from the contextual menu. This automatically nests the text layer with the textMask layer.
  13. Now, add two Button instances to this timeline, just like we did in the product Movie symbol. Create a new layer named buttons, and place it above the textMask layer. Open the Buttons Library (Window➪ Common Libraries ➪ Button), and drag an arrow button from the Library on to the scrollingText Stage.
  14. If necessary, rotate the arrow instance so that it points upwards.
  15. With the arrow instance selected, open the Actions Panel, and add a Go To action, changing the Type to Previous Frame. The Actions list should read:
  16. Select the arrow instance and duplicate it (Ctrl+D or Command+D). Move this instance below the original arrow instance, and rotate the arrow so that it points downward. With the instance selected, open the Actions Panel. Select the prevFrame() action in the Actions list, and, in the parameters area, change the Type menu to Next Frame. The Actions list should now read:
  17. Now we should draw a visual frame from our scrolling text area. Create a new layer, and rename it frame. Place this layer underneath the buttons layer, but above the textMask layer. Draw an unfilled rectangle with a 1-point black stroke, just slightly larger than the original rectangle used to create the textMask.
  18. Finally, we need to stop this timeline from automatically playing. Add a new layer, and rename it actions. Place this layer above the buttons layer. Select frame 1 of the actions layer, and open the Actions Panel. Add a Stop action (stop();) to this keyframe, as shown in Figure below. Optionally, you can add a frame comment of //stop in the Label field of the Frame Panel.
  19. Go back to the productMovie symbol timeline, and select frame 2 of the scrollingText layer. Press F7 to add a blank keyframe. This restricts the scrollingText layer to the first keyframe, for the monitor_1 graphic.
  20. Save your Flash movie, and test it. You should be able to click the Products button, and scroll the description text for the first monitor graphic in the catalog.To add more descriptions for each product, simply duplicate the scrollingText symbol, change the text (and alignment) in the duplicate symbol, and place it on the corresponding keyframe in the productMovie symbol. Of course, this example is just a functional prototype with placeholder graphics. The next step in real production would be to finesse the artwork, and to add transitional effects between each area of the movie. Perhaps some sound effects would be useful, too.
  21. The complete scrollingText timeline

    The complete scrollingText timeline

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics