Creating a screen with autotyping readout text

In this really simple Flash 8 tutorial, I will show you how to create an old monitor readout. It is easy: you will only have to set up a dynamic text field, tweak it a little bit and then write a few lines of ActionScript to give it life.

You will see how to:

• Set up a Dynamic text field with all the necessary adjustements,
• Power the text field and manipulate it via ActionScript,
• Make a button that repeats the text effect,
• What is a conditional statement and how it works,
• How to repeatedly call a function,
• name your objects properly in Flash, and more.

Below is the example of what you'll do in this lesson. Just press the "Restart" button if you missed the effect.

Setting up the Dynamic text field

1. Open a new Flash document. Select Modify > Document to open the Document Properties window.

Set the document dimensions (1 in the image below) to 500 by 380 pixels (you can choose any size you want once you'll make your Flash site, these dimensions are here just for the easier following of this tutorial).

Set the framerate - speed of your movie (2) to 30 fps.

Make the background color (3) pure black. Click OK.

2. Call the first layer text field.

3. Select the Text tool (T). In the Properties panel below the scene, make the following selections:

Select Dynamic as type of text field (see 1 below). This is a must if you wish to control the contents of your text field with ActionScript. The other options are Input text, which serves for gathering information entered by a visitor to your site, and Static text, that serves for display and animation purposes only.

Select a font you like (see 2 above), that will preferably mimic a terminal screen readout.

Set the font size to 12, or maybe some smaller value if you think it will be appropriate for your website (3).

Choose #00CC00 as font color (4). This is a nice green hue like the one found on those stone-age monitors :)

Select Anti-alias for readability (5). Since this is a message for your site visitors, this option is the best from the available ones.

Select Multiline for your textfield (6). This is important! Without it, your text would stretch endlessly in one single line.

4. Click and drag out a big text field on the stage. Make it a little bit smaller than the stage itself.

Hit Esc on your keyboard to exit the text field - because when you create a text field, you are by default in text editing mode - the cursor inside the field appears immediately.

There are a few more things that you need to do before all the tweaking with the text field is over:

5. Make sure that your text field is positioned on round coordinates. To check that out, go to the bottom left side of the Properties panel and see if both the X and Y fields and with a zero.

This is made in order to be sure that the text in the field renders properly - sharply and not blurry. By putting zeros at the and of the X and Y coordinates, you are placing the text field on round pixels.

6. Click the Embed button in the Properties panel.

The Character Embedding window will open up. This is where you select what font characters will be embedded into your SWF file once you publish it.

What this means is that no matter if a visitor to your site has the font in question installed on his computer or not, the font will be displayed exactly as on your machine. Also, it doesn't matter if the visitor is a Windows, Mac or Linux user. Everyone will see the same font as you are.

So, if your text field will display a few paragraphs of text and not just a few words, I recommend that you select both the Uppercase and Lowercase character groups for embedding.

How to select more than one group of characters? Simple: just hold Shift while you click on different groups.

You can also include the numeric characters if there are any in your message. If you aren't going to have too many special characters and punctuation marks in your text, I suggest that you manually enter the characters you know you are going to use.

As you can see in the image above, you can enter those characters in the Include these characters field. Once finished, click OK.

IMPORTANT Never, ever embed all the available characters. If you aren't going to use them, what's the point? This is important because every character that you embed in your SWF movie, adds to its filesize. If you select Uppercase, Lowercase and Numerals group, your SWF will have a filesize of about 5 KB. If you include all the characters, your file size will grow to 170 KB. And that surely doesn't make any sense.

7. Last thing: you must give your text field an Instance name if you want to control it via ActionScript. So once again go to the Properties panel. On its left side, you'll find the Instance name box. Type in monitor_txt and hit Enter to confirm.

Why did I chose monitor_txt and not monitortxt for example, you will see later. It is for a very good reason.

Top of page

ActionScript code that makes the text scroll

8. Lock the current (text field) layer. Create a new layer and call it actions.

9. Click on the first (and only) keyframe of the actions layer to select it.

10. Open the Actions panel by selecting Window > Actions.

11. Enter this code inside it:

var i:Number = 0;
var myMessage:String = "This is some dummy text made for this tutorial. Blah blah blah.";
function autoWrite():Void {
if (i <= myMessage.length) {
monitor_txt.text = myMessage.substr(0, i);
i = i+1;
} else {
clearInterval(writingInterval);
}
}
var writingInterval:Number = setInterval(autoWrite, 20);

12. Press Ctrl+Enter to test your movie and see the text scrolling! Nice, huh? A cool effect with only a text field and a few lines of ActionScript. Let me explain you now how this works.

Top of page

Explaining ALL the ActionScript (used in this tutorial :)

13. The first line,

var i:Number = 0;

defines a variable, called i. This name is commonly used for variables that hold a numerical value (:Number) that is incremented (increased) by 1 each time a loop repeats or a function is called that increases it. So here you set its starting value to zero.

14. The second line holds the message that you want to appear on the screen:

var myMessage:String = "This is some dummy text made for this tutorial. Blah blah blah.";

It is just dummy text - written for the purpose of this tutorial. You can type in anything you want, just be careful that all the characters that are used in your message are included in the embedding option for the text field, explained in step 6 of this tutorial.

So the part var myMessage:String creates a variable called myString and defines it as a String type of variable. String means text - a variable that will hold literal text. This text is on the right side of the = sign, and it has to be written between quotation marks ("blah blah blah").

15. Now comes the function that serves for writing out the text in the message_txt dynamic text field.

function autoWrite():Void {
if (i <= myMessage.length) {
monitor_txt.text = myMessage.substr(0, i);
i = i+1;
} else {
clearInterval(writingInterval);
}
}

You define a function in ActionScript by first writing the keyword function, followed by function's name (autoWrite), and the type of value the function returns. Since this particular function does not return a value, but performs some actions, you have to write :Void after the function's name and the parentheses.

Note that I chose the name autoWrite deliberately. You can call it myFunction or whatever you like, as long as you follow some basic rules - like not using spaces (for example, auto Write would be a wrong and unusable function name), not using special characters ($, %, &, etc) and not using ActionScript keywords. For example, you cannot call a function var or text, because those are ActionScript keywords reserved for particular purposes.

Then come the curly braces - { and }. Those two hold the function's actions. So once the function is called, these lines between the function's curly braces are executed. Let's see what's inside this function that you are using.

16. The following block of code is a conditional if/else statement.

if (i <= myMessage.length) {
monitor_txt.text = myMessage.substr(0, i);
i = i+1;
} else {
clearInterval(writingInterval);
}

This kind of statement works like this: Flash checks if the condition between the parentheses (i<=myMessage.length) is true. If it turns out to be true, it runs the ActionScript code between the if's curly braces (shown in bold):

if (i <= myMessage.length) {
monitor_txt.text = myMessage.substr(0, i);
i = i+1;
}

If it turns out to be false, it skips the previous lines of code (like they don't exist at all!) and runs instead the code between the else's curly braces (shown in bold too):

} else {
clearInterval(writingInterval);
}

17. And just what is this condition that is being evaluated if it is true or false?

i <= myMessage.length

First let me explain you what's on the right side of the <= operator. The keyword length is used to see how many characters there are in a String variable. So the above line looks at how many text characters there are in the myMessage variable (67 in this case). Note that the spaces are counted as characters too.

So, the condition is true if the value of i is lesser than or equal to (<=) the number of characters in the myMessage variable. At the beginning, i equals zero (you set this up in the first line of code). So Flash evaluates the condition as follows:

i <= myMessage.length
0 <= 67
True! 0 really is lesser than 67!

The condition evaluates as true. So the code block between the curly braces following the if is being executed.

monitor_txt.text = myMessage.substr(0, i);
i = i+1;

18. The line:

monitor_txt.text = myMessage.substr(0, i);

serves to display text in the monitor_txt dynamic text field which you created in the first part of this lesson. When you write the Instance name of a text field (monitor_txt) followed by a dot (.) and the keyword text, what's on the right side of the = sign will be displayed in that text field.

19. And there's an interesting thing there: myMessage.substr(0, i). As I just explained, the length keyword is used to get the number of characters stored in a String variable. And the substr keyword is used to retrieve a part of text from a String variable.

The first parameter between the parentheses of a substr command is the starting place for the piece of text you wish to retrieve from your variable. The second one is the length (counted in number of characters) of text you wish to retrieve. To make things more clear, let me show you a simple example. Suppose you have a String variable that holds a little piece of text, like this one:

var myMotto:String = "Flash rules!";

So, if I wrote this:

myMotto.substr(2, 8);

The resulting text from that command would be

ash rule

Why? Just look at this picture:

So, the first number inside the parentheses (2 in the above example) is the starting point - it is in fact the third character from the left (the letter a), because the characters are counted starting from zero. The second number, 8, indicates how many characters are to be retrieved, including the first one.

REMEMBER The substr method does not change the text of a String variable, it just reads the portion of text you specified and makes a new variable out of it.

20. Back to the monitor readout text, let's see what the substr command does there.

monitor_txt.text = myMessage.substr(0, i);

So, the text displayed in your text field will in fact be a portion of he whole message. The zero (0) inside the parentheses tells Flash to start retrieving the text from the first character and that the length of this text should be equal to i. The first time the function is called, i equals 0 (remember, you defined it like that at the beginning of your code). So nothing will be displayed.

21. But the line just coming next increases the value of i.

i = i+1;

Flash takes the existing value of i, adds 1 to it and that becomes the new value of i. It goes like this when your SWF is running:

i = i+1;
i = 0+1;
i = 1;
...function is called again...
i = i+1;
i = 1+1;
i = 2;
...and so on...

So what this effectively does is that a bigger portion of your message will be displayed in the dynamic text field each time the function is called. Like this:

i = 0
i = 1	T
i = 2	Th
i = 3	Thi
i = 4	This
i = 67	This is some dummy text made for this tutorial. Blah blah blah.

So this is how the auto-scrolling text appears! This function is called over and over again (I will explain to you how it is called later) and each time that i is lesser or equal to the length of your message, a bigger portion of the message is displayed - always 1 character longer than the previously displayed one. The line

monitor_txt.text = myMessage.substr(0, i);

serves to display the portion of the message in the text field. Each time Flash reads the above line, any previous text that was present there gets erased and replaced by the new one. Hence the autotext readout effect.

22. And when does it stop? When the condition is not true anymore. Then the else portion of the conditional if/else statement gets executed, which stops the function from being called again.

} else {
clearInterval(writingInterval);
}

To explain this, let me first show you how the function is called in the first place.

23. The last line of the ActionScript code is

var writingInterval:Number = setInterval(autoWrite, 20);

The setInterval command is used when you wish to call and execute a function in regular time periods. This command has to be stored inside a variable, so that's why you have var writingInterval:Number on the left side of the = sign. It is an interval, so it has to be specified as a Number type of variable.

The setInterval command (or method, as a command is called in programmers' jargon) has two parameters included.

The first one is the name of the function you wish to call. Since your function is named autoWrite, that same exact name has to appear here. You can't type in autowrite or AutoWrite, because ActionScript is case-sensitive. You must write the function's name exactly as you did it when you created it.

The second parameter is the regular time interval at which the function si going to be called. It's value is written in milliseconds. So in this example, 20 is used. It means 20 milliseconds, which is 0.02 seconds. That's pretty fast. It has to be that way, otherwise the autotyping text would start appearing on the screen waaay too slowly.

Try putting in 500 (half a second) instead of 20, test your movie (Ctrl+Enter) and see what happens. It will take ages for the whole message to display.

24. Ok. So that was how the function is being called regularly. Once all the message text has been displayed, the function is no longer being called. And that is done by the following line:

clearInterval(writingInterval);

As you can see, a setInterval function call is stopped with the clearInterval command. Very important: between the parentheses you have to place the name of the variable in which the setInterval function call is placed (writingInterval), and NOT the function's name (autoWrite)!

Fine! That would be it for the explanations of ActionScript. I will now show you how to add a nice trick to your auto-appearing text and make a button that can repeat this effect. So please continue onto the next page.