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

Flash Tutorial - Text Scroll using simple ActionScript

Free Flash Tutorial

In this Flash Tutorial you will learn how to make text scroll up and down in Flash. This tutorial uses a standard animation method called Tweening that moves the text up and down. This gives the text the appearance of scrolling up and scrolling down. The text is held inside a Movie Clip and learn some easy ActionScript to control the movement of the text and the Movie Clip. You will also learn how to Mask any unwanted text.

Cross Ref: If you do not know how to create a Motion Tween or how to create buttons you may want to look at these tutorials first: Tweening    Buttons

  Download the flash file  Int 142a

Example of Scrolling Text.

Step One: Setting up the Flash Document

1. Create a new Flash Movie: File > New (Ctrl+N)
2. Go to: Modify > Document (Ctrl+J)
3. Set the page size to : 300 x 175 pixels (You can actually set it to your desired value depending upon the width and height of the text you want to scroll)
4. Select a suitable: Background colour (Make sure that the background colour contrasts well enough with your text and scroll button colours)
5. Click: OK
6. If the Timeline is not visible go to Window > Timeline to view it. (Ctrl+Alt+T)

Step Two: Creating Buttons

1. Go to: Insert > New Symbol (Ctrl+F8)
2. For Name select: Top Button
3. For behaviour select: Button
4. Click on the OK
   You can now start editing the button. Your scene title and timeline should look like this:
   
   
   Button Timeline.
   
   
5. Draw a shape in the: Up Frame (I drew a triangle.)
6. Fill the shape with a suitable colour. (The fill colour must contrast with the background colour of the stage.)
   
   
   My button shape.
   
   
   
7. In the Timeline select the Over Frame
8. Right Click (Mac: Ctrl click) in the timeline Over Frame and select: Keyframe (F6)
9. Change the fill colour of the button (which is automatically placed) in this frame (So that the button changes colour on mouse rollover).

   Note: You do not need to modify the other two frames in the button.

10. Return to the Main Stage by clicking on the Scene 1 Tab:
    
    
11. Repeat steps 1 to 10 to create a button named: Bottom Button.

Step Three: Creating the Text you want to Scroll

1. If you are not on the Main Stage return to it by clicking on the Scene 1 Tab:
2. Go to : Insert > New Symbol (Ctrl+F8)
3. For Name type: Text
4. For behavior select: Movie Clip
5. For Registration select: Centred:
6. Click: OK
7. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
8. Click on the Text Tool:
9. Drag a Text Box out on the the Stage of suitable height and width.

   Note: The width of the text should be smaller than the width of the document, i.e. less than 300 pixels. The centre of the movie clip should coincide with the centre of the text - you can adjust this after typing in the text.

10. In the Property Inspector select: Static Text
    
    
    Selecting Static Text.
    
    
11. Select the font, size, colour etc. (Remember to choose a text colour that will contrast with the background colour)
12. Type in your text.
13. Return to the Main Stage by clicking on the Scene 1 Tab:

Step Four: ActionScript for Scrolling Text

1. If you are not on the Main Stage return to it by clicking on the Scene 1 Tab:
2. Go to : Insert > New Symbol (Ctrl+F8)
3. For Name type: Controller
4. For behaviour select: Movie Clip
5. Click: OK
   
   
6. In the Timeline select the: First Frame
7. If the Actions panel is closed, open it: Window > Actions (F9)

   Note: For Flash MX or Flash 5 choose the Expert Mode for editing the actionscript. (Ctrl+Shift+E). Flash MX 2004 only has one Edit Mode which is the same as Expert Mode in previous versions.

8. Place the following ActionScript in Frame 1 (you do not need to type the gray comments):
   
   //Stops the movie that is currently playing in that frame
   stop();
   
   
9. In the Timeline right click on Frame 2 and select: Insert Blank Keyframe
10. Place the following ActionScript in Frame 2:
    
    //Sends the playhead (on the Main Stage) back one frame
    _root.prevFrame();
    
    
11. In the Timeline right click on Frame 3 and select: Insert Blank Keyframe
12. Place the following ActionScript in Frame 3:
    
    //Sends the playhead back to frame 2 (in the Controller Movie Clip) so that the above instruction is looped
    gotoAndPlay(2);

    Note: This ActionScript makes the Movie play in reverse. This makes the text scroll back up when the scroll up button is pressed. The exact implication of this script will be explained in the final stage.

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.

Step Six: Adding ActionScript for the Buttons

1. Select the instance of Top Button in Frame 1. Place the following ActionScript on the button:

//Events during mouse click
on(press) {
    play();
}

//Events after mouse click
on(release) {
    stop();
}

Action Script Explained:
The Movie will stop in the first frame itself due to the stop(); in frame 1 of the Actions Layer. When the Top Button is pressed the Movie will start to play, i.e. the text would move in it's path as a motion tween. The masked layer gives the effect of text being scrolled downwards. When the Top Button is released the playhead will stop in that frame and the text will stop scrolling.

2. Select the instance of Bottom Button in Frame 1 of the Bottom Button Layer. Place the following ActionScript on the button:

//Events during mouse click
on(press) {
    _root.controller.gotoAndPlay (2);
}

//Events after mouse click
on(release) {
    _root.controller.gotoAndStop (1);
}

Action Script Explained:
What needs to be done is to get the Movie to play backwards so that the text will scroll back up to the start position. The problem with this is that there is no ActionScript to make a Movie play backwards. This is why you needed to create the Controller Movie Clip. This enables the movie to play backwards. When some one clicks the Bottom Button it sends the Playhead to Frame 2 of the Controller Movie Clip:

_root.controller.gotoAndPlay(2);

The Controller Movie Clip in turn sends the Play Head on the Main Stage back one space.

_root.prevFrame();

If you recall the ActionScript on Frame 3 of the Controller Movie Clip send the Controllers Play Head back to Frame 2:

gotoAndPlay(2);

This makes the above script loop so that the Play Head on the Main Stage continually goes back one space. This is a ridiculously complicated way to get the Movie to play backwards but there is no simple way. So when the bottom button is kept pressed the entire Motion Tween goes in the reverse direction from the current frame until frame 1 is reached. The Motion Tween will in effect play in the reverse direction to give the effect of the text being scrolled upwards.

When the Bottom Button is released the Play Head in the Controller Movie Clip is sent back to Frame 1 and stopped:

_root.controller.gotoAndStop(1);

This stops the loop and the Movie will stop playing in reverse.

End of the tutorial

I hope this tutorial will have helped you to create a text scroll function. The text field can be changed to dynamic text in the Property Inspector. This means that text can be loaded from an external text file with a little help from some ActionScript. This makes the Movie more flexible.

I hope you found this tutorial useful.