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.

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.

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:

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, I told you to call your dynamic text field monitor_txt. Now why that and not monitor only instead? You'll see, just do this:

25. You will write a piece of code just to have an idea how the suffix _txt can have a very practical value for you. Go to the end of your current code and press the Enter key a few times, to make some space between the existing code and the tryout you are going to make now.

26. Type in

monitor_txt

27. And now just add a dot (point, fullstop) immediately after that Instance name, with no spaces in between:

monitor_txt.

As soon as you typed in the dot, a menu has appeared!

In this menu, all the available methods (commands, something an object can do) and properties (things that change the appearance or other aspects of your object) for the text field object are listed. If you, for example, type in the letter b now, the menu will instantly jump to the first method or property beginning with the letter b.

This is very practical because you don't have to type a property or method by yourself, you can just press Enter and the highlited menu item will be inserted into your code. Also, if you don't remember how exactly a property or method is written, here you can see that.

This menu shows only the properties and methods available for the text field object. You can't make a mistake and click on something that would be inteded for a button or movie clip.

How is this possible? Thanks to the _txt suffix. You can assign an Instance name like monitor or readOutScreen to your text field if you like, but you will lose all the benefits listed above.

When you give the suffix _txt to your text field Instance name, Flash instantly knows that it is a text field that you are talking about. For movie clips, add the suffix _mc, and for buttons _btn.

Now erase this line you just wrote, so that your code doesn't show any errors. Cool! Let me show you now how to add an additional effect to your autotext display.

Adding a cool text character at the end of the automatic readout text

If you paid attention, you certainly noticed that the text in the Flash example at the beginning of this tutorial has a nice character et the end while it is appearing.

I remember seeing this on old computer monitors and in films. How to achieve this? With a simple change to your ActionScript code and the dynamic text field. I will show you now how to include a special character like the one on the image above in your SWF.

28.a. If you are a Windows user, go to Start > All Programs > Accessories > System Tools > Character Map. The Character Map window will open up. Most likely, it will be set to the default font - Times New Roman. If it isn't, make it so. It is important to find this specific character, the font type isn't.

Scroll down with the scroller on the right side of this window until you find it. You can see the character I'm talking about in the image below - it is outlined with a red line.

Click on this character - it will become big. Now click on the Select button at the bottom of this window, and after that on the Copy button.

28.b. If you are working on a Mac, open the TextEdit program.

Open a new document. Go to Edit > Special Characters. The Characters Palette will open. Select unicode from the View drop-down menu in this window and click on the Unicode Table tab (the middle one).

You will see row numbers on the left. Go to row 2580 and find the symbol in the A column. Click on it and then click Insert.

It will appear in your TextEdit document. You can now select it and copy it (Cmd+C).

Note to all users, regardless of operating system: if you didn't succeed in finding this character, here it is: █. Just select and copy it.

30. Go to the fifth line of your ActionScript code:

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

and add the following chunk of code:

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

Just before the semicolon (;) at the end of the line, you added a plus sign, followed by your special character between quotation marks. To insert the special character there, just press Ctrl+V to paste it inside.

Pay attention not to copy anything after you copied this character from the Character Map window or it will be lost and you'll have to do it again.

So that character which is inside the quotation marks will just be added to the message text, at its end. Because anything you type between quotation marks will literally be displayed in text field.

31. Unlock the text field layer, click once on the dynamic text field with the Selection tool (V) to select it.

32. In the Properties panel, click the Embed button. Paste (Ctrl+V) this same character in the Include these characters input box. Click OK.

And that's it! Try testing your movie (Control > Test Movie) and you'll see it in action! WIth this method you can put inside any character you like or deem appropriate for your design.

Let's see how you can enable your site visitors to repeat the autowriting text effect. It is really easy, you will see in a moment.

Designing and scripting the button that will replay the text readout

33. Lock both layers if they aren't already locked. Create a new layer between the existing ones and call it button.

34. Select the Rectangle tool (R). In the Properties panel, select hairline as type of line. Put the stroke color to the same green one you used for the text (#00CC00) and the fill color to black.

35. Draw a rectangle about 100x30 pixels below your text field.

36. Select the rectangle (both the fill and the outline) with the Selection tool (V). Press F8 (or select Modify > Convert to Symbol) to make this rectangle a button.

In the Convert to Symbol window that appears, select Button as type, call it restart button and click OK.

37. Double-click on the newly made button on the scene to enter inside it. The labels above the layers tell you that you are now inside this button symbol and not on the main scene anymore.

38. Lock the first layer inside this button and call it rectangle. Create a new layer and call it label.

39. Select the Text tool (T). In the Properties panel, select Static as type of text. This makes sense, since this text is going to serve only as the label for the button.

Also, make sure that the Selectable option is turned off (see the little icon marked with red in the screenshot above). Had this option been left turned on, your button might not function at all. Even if it did, the cursor for selecting text would appear once a user moved his mouse over the button. Which is really ugly for a button, and you don't want that.

40. Click and write Restart or anything else you deem appropriate here.

41. Click on the Scene 1 link above the layers to return to the main scene.

42. With the button still selected, go to the Properties panel and give it the Instance name restart_btn.

Remember, with the suffix _btn, you make possible for Flash to recognize that this is a button that you are mentioning in your ActionScript code. Also, it reminds you that this is a button! Imagine returning to your code after a month or more. When you encounter something with this suffix, you will instantly know that this is a button you made!

43. Click on the first keyframe of the actions layer to select it - the one with the small a letter inside it.

44. Hit F9 to open the Actions panel. Add this chunk of code below the existing one:

restart_btn.onRelease = function():Void {
i = 0;
writingInterval = setInterval(autoWrite, 20);
}

Test your movie (Ctrl+Enter). Wait for the text finish appearing. Click the button and see it do the same effect all over again!

45. And just what this button does? It simply sets the i variable back to zero and makes the same setInterval function call as the one you wrote before. And that's it. All this inside a function that is tied to the button's onRelease event - which means when a user click and releases his mouse over the button, those two lines will get executed.

46. Just one little tip before the end of this tutorial: you probably noticed that the SWF example at the beginning of this lesson has text divided in a few paragraphs. How to do this?

Simple. If you want a piece of text to start on a new line, just insert the newline character before it: \n. That's right, it's a backslash (\) followed by the letter n.

Here is how to do it (notice the bolded newline character):

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

Everything after the newline character will begin on a new line. If you want to separate a piece of text from another one and make them look like two distinct paragraphs, just add two newline characters. Here it is:

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

Well, it's been a pleasure explaining this to you. If interested in more cool tricks and effects, check out my cool design tutorials section. Also, you can download the source file for this tutorial below.

Download the zipped source FLA file for this lesson.