Archive for November, 2007

Let’s make a text field appear.

November 28, 2007 at 9:17 pm · Filed under as3 tutorial

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:

PLAIN TEXT
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.

Comments (1)

This will be good.

November 27, 2007 at 6:56 pm · Filed under Nonsense, as3 tutorial

I am putting this together as a reaction to learning Actionscript 3. I am a web developer and designer for the Virginia House of Delegates and also run a web development business in Richmond, VA. ? Recently I have started developing Flash CS 3 applications and websites with actionscript 3.? Though there are tutorials on the web there are still no "great" actionscript 3 references out there yet. Over the last couple of weeks I have been stumbling through AS3 and I will use this blog to share with you what I have figured out so far.? I would go in to how excited I am about it but i figure you probably feel the same way if you are taking the time to read my posts.? I hope this is helpful to you!

Comments