Sunday, May 17, 2015

Creating text Dynamically (Flash AS3)

Putting text into a Flash movie is pretty simple—create a text box with the text tool, set the appropriate values for color, font, size, etc., and then specify if its dynamic, static or input text. To add text to a dynamic text box all you need to do is to place nameOfBox.text = "text to go in the box" in your code

Create a basic text box

Open a new Flash file and save it right away as createTextBox.fla

var myTextBox:TextField = new TextField();   
myTextBox.text = "Hello world!";   
addChild(myTextBox);


First we create an instance of the TextField class, and give it the name "myTextBox" The second line place some text into the newly created text box. Finally, if you've gone through my tutorial on adding children to the stage dynamically, you'll recognize the "addChild" method. It's what actually puts the text box on stage. Without it the text box exists only in some mystical ethereal realm, not very practical if we want to see it !

Formatting

Okay that's well and good, but the text is pretty dull right now; and it's wedged way up in the corner of the stage. How do change that? Well, the TextField class has some built-in properties that we can use to modify it's appearance. Let's start by putting a border around it so it can see it better. Add the following code :

myTextBox.border = true;   
myTextBox.borderColor = 0x000000; 

A square black border should appear around the text. You can change the color of the border by changing the hexadecimal code in the line above.

What about changing the size and position of the text box ? Try these :
myTextBox.width = 200;   
myTextBox.height = 100;   
myTextBox.x = 50;   
myTextBox.y = 20;  
These should be fairly self-explanatory.

One issue you may have is the text not fitting entirely within the box. To see this, alter the text to something longer, like this :

var myTextBox:TextField = new TextField();   
myTextBox.text = "Twas brillig, and the slithy toves did gyre and gimble in the wabe...";   
addChild(myTextBox); 
Now run your movie and you should find the statement cut off after the word "gyre." TextFields by default are single lines; to fix this we need to turn-on the "wordWrap" property :
myTextBox.wordWrap = true;   
Another way you can fix this is by using the autoSize property, which will change the size of the text box to fit the content. Try this, comment-out the wordWrap line and add the autoSize line :
// myTextBox.wordWrap = true;   
myTextBox.autoSize = TextFieldAutoSize.LEFT; 
The "LEFT" value means that the left side of the box stays put while the right side expands to allow the text to fit. If you use "RIGHT," the right margin stays put and the left side expands. You can also choose "CENTER" which will expand the box on both sides.
We can add some color to the box thus :

myTextBox.background = true;   
myTextBox.backgroundColor = 0xFFFF00;   

What about the color of the text? Well there are two ways you can do that; you can use the textColor property to add color to all of the text in the box, or use an instance of the TextFormat class, which is often the better option and we'll tackle it shortly.

Text formatting

Okay, what about things like text colors, size, and even the font? Formatting options are handled by a separate Flash class, the TextFormat class. To use it we need to create an instance of the class, and then apply to to the text in our text box.

First we create an instance of the class : 
var myFormat:TextFormat = new TextFormat();  
Now let's add some formatting:
myFormat.color = 0xAA0000;   
myFormat.size = 24;   
myFormat.italic = true;    
myFormat.align = TextFormatAlign.CENTER  
Finally, apply the format to the text in the text box :
myTextBox.setTextFormat(myFormat); 
You should now have 24px red italic centered text in your text box. Other properties can be found in the Adobe Flash documentation, including .bold, .indent, .kerning, .leading, .leftMargin, .letterSpacing, and so on.

myFormat.color = 0xAA0000;   
myFormat.size = 24;   
myFormat.italic = true;    
myFormat.align = TextFormatAlign.CENTER 

myFormat.font = "Helvetica";
myTextBox.setTextFormat(myFormat);

That will work, as long as you (or the user) has Helvetica installed. But what if they don't? Or what if you want to use a more obscure font? In that case, you must embed the font in the project.
Open your library panel and click on the options menu in the upper-right-hand corner of the panel. From the menu choose New Font.
A dialog box will open. Simply select the font you want to use from the "font" drop down menu. Then click the "Advanced" button in CS4, or press the "ActionScript" tab in CS5. In the expanded window check "Export for ActionScript." Note that the "Class" field show display a default name for the font ("Font1"). You can change it, but for now, let's just go with it. Click Okay. A warning message will likely pop up, but don't worry, simply click Okay.
Now we need to create an instance of the font class we just created, and then apply it to the format object. Add this to the code:

myFormat.color = 0xAA0000;   
myFormat.size = 24;   
myFormat.italic = true;    
myFormat.align = TextFormatAlign.CENTER 
// myFormat.font = "Helvetica";
var myFont = new Font1();     

myFormat.font = myFont.fontName;    
myTextBox.setTextFormat(myFormat);
myTextBox.setTextFormat(myFormat);  
Note that I commented-out the previous line where I set the font to Helvetica. You could also delete it altogether.
One more thing; we need to add a couple of lines to insure that the textField will properly display the font. Put these with the other myTextBox properties :
myTextBox.background = true;   
myTextBox.backgroundColor = 0xFFFF00;

myTextBox.embedFonts = true;
myTextBox.antiAliasType = AntiAliasType.ADVANCED;

Source : http://www.danfergusdesign.com
Location: United states

0 comments:

Post a Comment

Popular Posts

Categories

tutorial-nia. Powered by Blogger.