Flash Education: Scrolling Text	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Text Scroll using simple ActionScript

Free Flash Tutorial

Step Five: Setting up the Main Stage

1. If you are not on the Main Stage return to it by clicking on the Scene 1 Tab:
2. In the Timeline use the Insert Layer Button to add five more layers so that you end up with: 6 Layers
3. Rename the Layers as follows:
   
   
   Layer Names in the Timeline.
   
   
4. Open the Library panel if it is not already open. Go to: Window > Library (F11)
   
   
   Top Button Layer
5. Drag an instance of the Top Button symbol from the Library to Frame 1 of the: Top Button Layer
   Place it on the upper left corner of the stage.
   
6. Right click in Frame 15 in the Top Button Layer and select: Insert Keyframe (F6)
   
   Note: The frame number determines the speed of the scrolling text when you keep the buttons pressed. Greater the frame number slower the scroll speed.
   
   
   Bottom Button Layer
7. Drag an instance of the Bottom Button from the Library to Frame 1 of the: Bottom Button Layer
   Place it on the lower left corner of the stage.
   
8. Right click in Frame 15 in the Bottom Button Layer and select: Insert Frame (F5)
   
   
   Mask Layer
9. Draw a rectangle in the: Mask Layer
   
   
   The purple rectangle will become my masked area.
   

   Note: The rectangle represents the area where the text will be visible, therefore remember to keep the width of the rectangle greater than the width of the Text Movie Clip you created earlier. Otherwise the text would be clipped at either end.

10. Right click in Frame 15 in the Mask Layer and select: Insert Frame (F5)
11. Make the Mask Layer invisible by clicking on the dot next to the layer name in the eye column:
    
    
    Text Layer
12. Drag an instance of the Text Movie Clip from the Library to Frame 1 of the: Text Layer
13. Position it in a place where you want the text to appear by default before scrolling similar to the picture below:
    
    
    Top of text is aligned in the correct start position.
    
    
14. Right click in Frame 15 in the Text Layer and select: Insert Keyframe (F6)
15. Reposition the Text Movie Clip in this frame so that only the last few lines may overlap the rectangle in the Mask Layer.
    
    Turn on the visibility of the Mask Layer to check this. The new position of the text movie clip must be directly above the position of the Text Movie Clip in Frame 1 of this layer so that the text scrolls up in a straight line.
    
    
    Bottom of text is aligned in the correct end position.
    
    
16. Click on Frame 1 of the: Text Layer
17. Go to: Insert > Create Motion Tween to create a motion tween.
    Alternately you can choose Motion Tween from the Property Inspector.
    
    
    The Layer will now have an arrow between the two Keyframes.
    
    
    Mask Layer
18. If the Mask Layer visibility is off , turn it on: Mask Layer Visibility On
19. Right click on the Mask Layer name and choose: Mask
    
    
    The Mask and Text Layers should now have these icons:    
    
    
    Note: The text will be masked by the rectangle now. When you play the Movie the text will scroll without control from the buttons.
    
    
    Components Layer
20. Right click on Frame 2 of the Components Layer and select: Insert Blank Keyframe (F7)

Note: The first frame in this layer remains a blank keyframe.

21. Drag an instance of the Controller Movie Clip from the library to Frame 2 of the: Components Layer
22. In the Property Inspector give it the Instance Name: controller


Instance name: controller

23. Right click on Frame 15 in the same layer and select: Insert Keyframe
    
    
    ActionScript Layer
24. Place the following ActionScript in Frame 1 of the Actions Layer:
    
    //Stops the Movie from playing
    stop();
    
25. Right click on Frame 15 of the Actions Layer and select: Insert Keyframe
26. Place the following ActionScript in Frame 15 of the Actions Layer:
    
    stop();
    
    The timeline would now appear as shown in the picture below:
    
    
    All the Layers Complete.