Free Flash Tutorials	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial - Scrolling Dynamically Loaded Text

Free Flash Tutorial

With this tutorial you will learn how to scroll dynamically loaded text using the loadVars class from an external Text File. Once you understand the concepts in this tutorial, they can be applied outside text and text boxes to graphics, swf files, and other objects.

In this Flash tutorial I will show you how to load external data from Text file (both plain and HTML) but the principles are the same as other forms of external data (for example PHP, ASP, and XML files)

Cross-Ref: If you are unfamiliar with creating buttons or basic use of functions you might want to look at these tutorials first: Buttons Functions Intro

Note: Scrolling can also be easily done in MX2004 Pro with the use of the UIScrollBar Component (regular MX2004 does not come equipped with this component). But always make note; just the placement of any one component on your stage automatically adds at least 40KB to your flash movie. If you are really trying to trim down your movie, then this would be a better method for you, as this swf file in its entirety takes only 4KB.

Download the Flash File Int 146a

Example of 3 dynamically loaded pages and their scrollbars

Step One: Setting up the Text Documents

1. Download the following zip files and extract the 3 text documents into a folder of your choosing. My folder is called: scrolltext
   
   
   
   My Folder with the three text files.


Note: Download the Text files: Here
Or view them individually: page1.txt   page2.txt   page2.txt



2. Open page1.txt with Notepad or any other Text Editor. In Windows go to: Start > All Programs > Accessories > Notepad



Note: Notepad has nothing to do with Flash. It is a PC's default Text editor. All computers come with a Text Editor as standard. If you are not on a Windows PC you will have an equivalent program somewhere in your computers program menu. You can also create Text files in programs such as Dreamweaver:


Using Dreamweaver to create Text Files.


3. In your Text Editor you should see the following:

info=Hello, this is Page One of this flash movie. This information was loaded ...

Note: The Text above is split into sections:

a. Defining a Variable:

    info=

b. The Text (know as a String) that will be seen in Flash:

    Hello, this is Page One of this flash movie. This information was loaded ...

For Flash to be able to read data in an external file you have to use a variable. The variable is simply a way of defining and naming the text data to be used. The reason it must be named is so that when you are in Flash the ActionScript can refer to it. In this way Flash can remember the text or move it about the Movie. Makes sure no spaces are around the "=" sign

Cross Ref: To learn more about Variables see the tutorial: Variables

Quotes: It is also worth noting that in Flash you always use "quote marks" to define text that you use in variables. If you are loading text from an external file you do not use the "quote Marks".

4. Close page1.txt and open: page2.txt

Or click here to view page2.txt

5. Look in your Text Editor and you should see the following:
   

info=<p>Hello, this is Page Two of this flash movie. This information was, ...

The text above is similar to page1.txt except there are HTML tags in the above text document, such as:

<b></b> (bold),
<i></i> (italic),
<u></u> (underline), ect...

HTML tags enable you to format your externally loaded text. For a full list of usable tags in Flash, go here:

http://www.devarticles.com/c/a/Flash/Working-with-Text-and-HTML-in-Flash/4/



6. Close page2.txt and open: page3.txt

Or click here to view page3.txt

7. look in your Text Editor and you should see the following:

info=Hello, this is Page Three of this flash movie. This information was, ...

8. Close: page3.txt

Step Two: Setting up the Flash Document

1. Open a new: Flash Document (Ctrl N)
   
   
2. Go to: Modify > Document (Ctrl J)
3. Set the: Dimensions. The sample movie above is set to: 400 x 300 pixels
4. Set the: Background Color . The sample movie above is set to: #8080FF
5. Click: OK
   
   
6. In the timeline rename Layer 1 to: Background
7. If the Tools panel is closed, open it: Window > Tools (Ctrl + F2)
8. From the Tools panel select: Rectangle Tool (R)
9. From the Tools panel set the: Fill and Stroke Color for your text box fill . The sample movie above is set to #99FFFF and the border is #000000
10. Draw a rectangle for the text to be placed. Leave room on the side for buttons.
    
    
    Your stage should look something like this.
    
11. Save the file in the same directory as the text files. (Ctrl + S) I called mine: scrollText in the directory scrolltext

    Note: For file names do not use spaces or any punctuation. You may use letters, numbers, underscore _ and hyphen - only! You can use capitals if you want.

Step Three: Creating the Text box

1. Create a new Layer above your background layer by clicking on the Insert Layer Button:
2. Rename the Layer to: Text box
3. From the Tools panel select: Text Tool (T)
4. Drag a Text Box to fill the area of the rectangle with some space on the sides and an extra amount of space on the right for the scroll buttons and scroll bar
5. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
6. Set the properties of the text box to match those below:
   
   
   The positioning of the text box and the property inspector for the text box should look like this

Note: It is unnecessary to match the Width, Height, X and Y coordinates.

7. Double-Click the text box to edit and you will find the small white handle in the corner
8. Lock the text box to its size by: Double-Click the handle while holding Shift at the same time
   
   
   The handle changes from a white to black square

Step Four: Creating the Scroll Button Up

1. If the Timeline is closed, open it: Window > Timeline (Ctrl Alt T)
2. Create three new Layers above your previous layers by clicking on the Insert Layer Button three times:
3. Rename the layers as follows:
   
   
   Your timeline should look like this
   
4. Go to: Insert > New Symbol
5. Type the name: Scroll Button Up
6. Select Behavior: Button
7. Select: OK
   
   
8. Create a button within your Scroll Button Up with Up, Over and Down states (Hit state is unnecessary). Try to make it a size of about 20 x 20 pixels (zoom in if necessary).
   
   
   Sample Up, Over, and Down states for a scroll button.

Try it here:

Note: If you need help creating buttons take a look at this tutorial: Buttons

9. When your button is finished, return to Scene 1 by selecting Scene 1 above the Timeline:
10. If the Library is closed, open it: Window > Library (Ctrl L)
11. Select the first frame of the Scroll Button Up layer on the timeline
12. Drag the Scroll Button Up from the Library onto the stage and place it next to the text box within the rectangle
13. If the Align panel is closed, open it: Window > Design Panels > Align (Ctrl K)
14. Select both the text box and the Scroll Button Up (click one, hold shift, and click the other) and select Align Top Edge

Step Five: Creating the Scroll Button Down

1. Select your Scroll Button Up from the stage and go to Edit > Copy (Ctrl C)
2. Select the first frame of the Scroll Button Down layer on the timeline
3. Click your stage and go to Edit > Paste in Center (Ctrl V)
4. Right click the pasted object and select Duplicate Symbol...
   
   
   Select Duplicate Symbol...
   
5. From the Duplicate Symbol Box, name the symbol: Scroll Button Down
6. Click: OK
7. Double Click your Scroll Button Down to edit it
8. Make any necessary changes so that your Scroll Button Down and Scroll Button Up button's are different; they should be distinguishable as Up and Down arrows:
   
   
   Distinguishable Up and Down buttons.
   
9. Return to Scene 1 by selecting the Scene 1 button:
   
   
10. Select both the Text Box and the Scroll Button Down and from the Align panel select: Align Bottom Edge
11. Select both the Scroll Button Down and the Scroll Button Up and from the Align panel select: Align Right Edge
    
    
    Your stage should look something like this.

Step Six: Creating the Scroll Bar MC

1. Go to: Insert > New Symbol
2. Type the name: Scroll Bar MC
3. Set the Behavior Type: Movie Clip
4. Select: OK
   
   
5. Create a Scroll Bar within your Scroll Bar MC (Up, Over, and Down states are not needed). Try to make the movie clip 20 x 60 pixels
   
   
   Sample Scroll Bar
   
6. Return to Scene 1 by selecting Scene 1 button:
7. Select the first frame of the Scroll Bar layer on the: Timeline
8. Drag the Scroll Bar MC from the Library onto the stage and place it next to the text box and under the: Scroll Button Up
9. Select the Scroll Button Up , Scroll Button Down , and the Scroll Bar MC and select: Align Left Edge
10. Using the Up Arrow Key, move the Scroll Bar MC so its top touches the bottom of the Scroll Button MC (zoom in if necessary).
    
    
    Scroll Bar MC touching the bottom of the Scroll Button MC
    
11. Right-click the Scroll Button MC and select: Convert to Symbol
12. Type the name: Scroll Track MC
13. Set the behavior: Movie Clip
14. Select: OK

Step Seven: LoadVars() - ActionScript

1. Create a new Layer above your Scroll Button Down layer by clicking on the Insert Layer Button:
2. Rename the layer to: Actions
3. If the Actions panel is closed, open it: Window > Development Panels > Actions (F9)
4. Place the following ActionScript in frame 1 of the Actions layer:
   
   //strict-typed variables to be used later in the movie.
   var scrollDirection:String;
   var scrollBarMax:Number = _root.scrollDown._y - _root.scrollTrackbar._y - _root.scrollTrackbar._height
   
   //creates a new loadVars object that will load the text
   var myLV:LoadVars = new LoadVars();
   myLV.onLoad = function(success) {
       if (success) {
           loadedInfo.htmlText = myLV.info;
           _root.loadedInfo.scroll = 1;
           _root.scrollTrackbar.scrollBar._y = 0;
           scrollCheck();
       } else {
           loadedInfo.text = "There has been an error loading the requested information. Please contact the Webmaster and report your error.";
       }
   };
   
   //automatically starts the loading of "page1.txt" when the movie loads
   myLV.load("page1.txt");

ActionScript Explained:
var scrollBarMax:Number = _root.scrollDown._y - _root.scrollTrackbar._y - _root.scrollTrackbar._height
This line determines how far the scroll Bar can move down before touching the scroll down button.

myLV.onLoad = function(success) {
This line defines a function to be called when the handler onLoad is called. Whenever any called text file is completely downloaded from the server and ready to be imported into the movie, this line will call the following function, passing the Boolean variable "success" to indicate whether the text file was found and of the correct type.

loadedInfo.htmlText = myLV.info;
This sets the text in the loadedInfo text box to the text in the text file with the variable name "info". The property htmlText specifies that the text to be imported should be formatted for any html tags.

_root.loadedInfo.scroll = 1;
_root.scrollTrackbar.scrollBar._y = 0;
_root.loadedInfo.mouseWheelEnabled = false
This line will reset the scroll property of the text box and also reset the position of the scroll Bar. The scroll property will be explained in detail later.

scrollCheck();
This line runs the function scrollCheck() which will be later defined. The scrollCheck() function will test to see if the text file is long enough to need scrolling.

loadedInfo.text = "There has been an error loading the requested information. Please contact the Webmaster and report your error."
If the success value from the onLoad handler is returned false, then the text file was either corrupted or was not found. It is always a good idea to put a message just in case an error like this occurs.

Step Eight: Scroll Functions - ActionScript

1. Underneath the previous script add the following code:

//defines function called scrollCheck() (with no parameters)
function scrollCheck() {
    if (loadedInfo.maxscroll == loadedInfo.scroll) {
        scrollUp.enabled = false;
        scrollUp._alpha = 50;
        scrollDown.enabled = false;
        scrollDown._alpha = 50;
        scrollTrackbar.scrollBar.enabled = false;
        scrollTrackbar.scrollBar._alpha = 50;
    } else {
        scrollUp.enabled = true;
        scrollUp._alpha = 100;
        scrollDown.enabled = true;
        scrollDown._alpha = 100;
        scrollTrackbar.scrollBar.enabled = true;
        scrollTrackbar.scrollBar._alpha = 100;
    }
}

//defines another function called scrollText() (also with no parameters)
function scrollText() {
    _root.onEnterFrame = function() {
        //checks to see if the scrollDirection variable has been set to "up" by a button
        if (scrollDirection == "up") {
            loadedInfo.scroll -= 1;
        //checks to see if the scrollDirection variable has been set to "down" by a button
        } else if (scrollDirection == "down") {
            loadedInfo.scroll += 1;
        }
        scrollPercent = ((loadedInfo.maxscroll-loadedInfo.scroll) / (loadedInfo.maxscroll-1));
        scrollTrackbar.scrollBar._y = scrollBarMax-(scrollBarMax*scrollPercent);
    };
}

ActionScript Explained

if (loadedInfo.maxscroll == loadedInfo.scroll) {
This line of ActionScript checks to see if the scrolled position is already the maximum position, meaning the text cannot be scrolled.

Note: Every dynamic text box has a .scroll and .maxscroll property. The scroll property refers to the line that the text box is currently scrolled to (scroll = 1 is what the textbox starts out as, then if you scroll the text box down 1 line then scroll = 2 and so on). The maxscroll property is a read-only property that tells you the maximum value for the scroll property.

scrollButtonUp.enabled = false;
...
scrollTrackbar.scrollBar._alpha = 50;
These next six lines set the properties "enabled" and "_alpha" for the scroll buttons and scroll bar (the instance names will be named later). If "enabled" is false, then any mouse events (on(press,release,rollover...)) will not be called and the button's Up, Over, and Down animations will not play. The _alpha (or transparency) for each button must be set so users will know that the scrolling function is disabled ("grayed-out" buttons usually indicate that they are disabled).

_root.onEnterFrame = function() {
This line defines an enterFrame function on the root timeline.

Note: An enterframe function is a function that is called every time flash updates its frame. This speed is determined by the movie's frame rate (frames per second).

loadedInfo.scroll -= 1;
This line takes the current line that the user has scrolled to and subtracts one from it. This line is the equivalent to:
loadedInfo.scroll = loadedInfo.scroll - 1.

loadedInfo.scroll += 1;
This line takes the current line that the user has scrolled to and add one to it. This line is the equivalent to:
loadedInfo.scroll = loadedInfo.scroll + 1;

scrollPercent = ((loadedInfo.maxscroll-loadedInfo.scroll)/(loadedInfo.maxscroll-1));
This line is a formula for determining the percentage that the text has been scrolled. The variable will be a decimal with a value between 0 and 1.

scrollTrackbar.scrollBar._y = scrollBarMax-(scrollBarMax*scrollPercent);
This line updates the position of the scroll Bar according to the percentage that has been scrolled. This value will be a number between 0 and the scrollBarMax variable.

Step Nine: Scroll Buttons - ActionScript

1. Select your Scroll Button Up MC on your stage and give it the following instance name: scrollUp
2. Select your Scroll Button Down MC on your stage and give it the following instance name: scrollDown
3. Attach the following ActionScript to the scrollUp button:
   
   on (press) {
       //sets the direction that the text should scroll and then runs the function
       _root.scrollDirection = "up"
       _root.scrollText()
   }
   on (release) {
       //stops the actions under the enterframe from continuing
       delete _root.onEnterFrame
   }
   on (releaseOutside) {
       delete _root.onEnterFrame
   }
   
4. Attach the following ActionScript to the scrollDown button:
   
   on (press) {
       _root.scrollDirection = "down"
       _root.scrollText()
   }
   on (release) {
       delete _root.onEnterFrame
   }
   on (releaseOutside) {
       delete _root.onEnterFrame
   }

Step Ten: Scroll Bar - ActionScript

1. Select your Scroll Track MC on your stage and give it the following instance name: scrollTrackbar
2. Double-click your Scroll Track MC to edit it
3. Select your Scroll Bar MC within your Scroll Track MC and give it the following instance name: scrollBar
4. Rename Layer 1 to: Scroll Bar
5. Attach the following ActionScript to your scrollBar Movie Clip:
   
   on (press) {
       this.startDrag(false, 0, 0, 0, _root.scrollBarMax)
           //creates another enterframe function using the Scroll Track MC's timeline
       this.onEnterFrame = function() {
           //sets the variable yPos to the current _y position of the Scroll Bar MC
           yPos = this._y
           //sets the variable scrollPos to the percentage of how much the scroll Bar has been dragged; the variable is a decimal between 0 and 1
           scrollPos = (yPos/_root.scrollBarMax)
           //sets the loadedInfo to scroll according to how much the scrollBar has been dragged
           _root.loadedInfo.scroll = Math.round(_root.loadedInfo.maxscroll * scrollPos)
       }
   }
   
   on (release) {
       //stops this Movie Clip from being dragable
       this.stopDrag()
       //stops the above enterFrame function
       delete this.onEnterFrame
   }

   on (releaseOutside) {
       this.stopDrag()
       delete this.onEnterFrame
   }

ActionScript Explained:

this.startDrag(false, 0, 0, 0, _root.scrollBarMax)
This line allows the scroll Bar to be dragged to a confined space. The "false" parameter indicates whether the movie clip's center should "snap" to the mouse when it is clicked. The next three numbers (0, 0, 0) nd the variable (_root.scrollBarMax) refer to the boundary of how far you can drag the movie clip (left, top, right, bottom) with coordinates from the movie clip's axis. Remember that _root.scrollBarMax indicates how far down the scroll Bar should be able to be dragged

Note: You may be wondering why the scrollBar is a movie clip instead of a button; after all, it has mouse events like a button. But it is important to note that startDrag() will only work for movie clips; not buttons. Mouse events, on the other hand, will work with both.

Step Eleven: Creating the Page Links

1. Return to Scene 1 by selecting Scene 1 button:
   
   
2. Go to: Insert > New Symbol
3. Type the name: page1
4. Select Behavior: Button
5. Select: OK
   
   
6. Create a button for your first page link with Up, Over, and Down states. Place a static text box in your button that says: Load Page 1. (Make sure Selectable is off!) Try to make your button about 85 x 20 pixels
   
   
   Sample page1 button
   
7. Repeat 1-6 two more times to create 3 buttons total. Name the two buttons: page2 and page3 and change the labels as needed.
8. From your Timeline, create a new Layer above your Scroll Button Down layer by clicking on the: Insert Layer Button and dragging it below your Actions layer:
9. Rename the layer to: Links
10. From your Library, drag each button onto the stage (in the first frame of your Links layer) and place them next to the text box rectangle. Align and space if necessary
    
    
    Your stage should look something like this
    
11. Attach this ActionScript to page1 button
    
    on (release) {
        //loads this text file using the myLV LoadVars() object
        _root.myLV.load("page1.txt");
    }
    
12. Add the same code to the next two page buttons, but change "page1.txt" to "page2.txt" & "page3.txt" for the page2 and page3 buttons, respectively.

Step Twelve: Thorough Testing!

Note: Always test your movie before publishing to check for mistakes, bugs, and any other problems. In this tutorial you will want to check that:

1. Your loadvars() works and the text file loads correctly
2. The scroll buttons and scroll bar correctly scroll your text.
   

1. Save the flash file in the same directory as the Text Files: File > Save (Ctrl + S)

Warning: This file will not work correctly if the Publish settings are not set to ActionScript 2

2. Go to: File > Publish Settings (Ctrl Shift F12)
3. For Type select:
4. Select the: Flash Tab
5. For ActionScript Version select: ActionScript 2.0
   
   
   
6. Click: OK
   
   
7. Go to: Control > Test Movie (Ctrl Enter)
8. Take a look at your Movie in the Test Window.
   
• Check that all three text files load correctly.
• Make sure that the scroll buttons scroll the text when you press them.
• Make sure the scroll bar scrolls the text when you drag it.
  
  
9. Close scrollText.swf
   
   
   Close the test swf file by pressing the small X in the corner

Note: Now you must test to make sure the error message works. It is always important to test every aspect of your movies

10. Go to the directory where your .fla and .swf files are saved. Mine is called scrolltext
11. Relocate your page3.txt to a retrievable location outside your directory
12. Go back to: Control > Test Movie (Ctrl Enter)
13. Now take a look at the third page by pressing your Load Page 3 button. Your window should look like this:
    
    
    You should get an output error and a message displayed in your textbox
    
14. Find your page3.txt file and place it back in the directory with your .fla and .swf file.

End of Tutorial

With the aid of this tutorial I hope you have learned to use the scroll property of a text box to scroll its contents, and also how to implement a fully functional scrolling system. Also I hope the use of the LoadVars() will help you to cut down file size in the future by placing as much information as you can outside your flash document.

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here