Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
Before I tell you how to add an effect to your text, I must explain what I told you on the previous page: the Instance name of your text field.
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.
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.
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.
Download the zipped source FLA file for this lesson.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
