Let’s make a text field appear.

In flash you can use the visual IDE, Actionscript, or both to create content. This allows for a lot of flexibility for the developer or designer. For example, if you want to create a text field you can literally draw one with the IDE or your can create one with actionscript (AS).

As a developer I prefer to create as much content as I can with AS because it gives me more flexibility and also allows me to create objects like a text field on the fly dynamically.

For this example we are working in the Actions panel of the Flash IDE.

The first thing you need to do is create a variable to hold the text field object:

var myText:TextField = new TextField();

Next I want to make sure that the text field expands to match the text that I assign to it. In this case I want the text field to expand to the left:

myText.autoSize = TextFieldAutoSize.LEFT;

Now that we have created the text field we can go ahead and put some data in to it:

myText.text = "Hello world!"

At this point if you run your program you will not see anything even though you did everything correctly. What you need to do it add the text field to the stage. You can do that with a very simple command:

addChild(myText);

Now if you look you have text on the stage when you run your movie.

Okay... that was great right? What if we want to add formatting to the text?

As you might have guessed we created another object to contain our formatting information:

var textFormat:TextFormat = new Format();

Now that we have a place to store the formatting information we can set the font and the size of the formatting object.

textFormat.size = 20;
textFormat.color = 0xFF0000;

If you are wondering what 0xFF0000 is... it is red in hex format. Flash likes its colors defined in hex.

textFormat.font = "Helvetica";

The font needs to be installed on your computer. If Helvetica does not work try Arial.

Now we need to apply the formatting to the text object we created earlier.

myText.setTextFormat(textFormat);

Now you should have text on your screen formatted to your liking. As you might expect you can apply your text formatting object over and over to whatever text objects you want. This is great because like CSS it allows you to change all your text of a similar type with one bit of code instead of going in to the IDE and changing every field one by one.

Here is the code:

Actionscript:
  1. // Set your text formating up
  2. var textFormat:TextFormat = new TextFormat();
  3. textFormat.font = "Arial";
  4. textFormat.size = 20;
  5. textFormat.color = 0xFF0000;
  6.  
  7. //  Set your text field up
  8. var myText:TextField = new TextField();
  9. myText.autoSize = TextFieldAutoSize.LEFT;
  10. theText = "Hello world.";
  11. myText.text = theText;
  12. myText.setTextFormat(textFormat);
  13.  
  14. // put it on the stage
  15. addChild(myText);

In the next entry we will discuss some problems that can occur when you try to animate a text field and how it can be solved by embedding fonts.

1 Comment »

  1. Flash Flood :: Embedding Fonts said,

    December 5, 2007 @ 8:29 pm

    […] really not much else left to do.? For the sake of saving space I wiill refer to my previous post Let’s make a text field appear.? We just need to change a few more things to apply the font object to the text.? First we need […]

RSS feed for comments on this post · TrackBack URI

Leave a Comment