How To Format Text In Flash (Using ActionScript 3)

Although Flash applications and development has had a mixed press over the past couple of years, it still remains a popular and versatile technology, with the CS6 series of applications released by Adobe recently.

In this ‘how-to’ we are going to cover the formatting of text in text fields.  Now, most, dare I say all Flash developers will be aware of how to format text using the GUI provided in Flash.  However, what happens if you want to change the formatting of the text during runtime?  Well, obviously, the fancy GUI can’t help you out there.

This is where we have to move onto using ActionScript.  The following examples are in ActionScript 3 – currently the latest and standard version of ActionScript.  Again, most Flash developers will know ActionScript and use it on a regular basis, however there are some users who mainly or solely use the GUI so you will probably find this guide most helpful.  It can also act as a great refresher for the experienced Flash developers.

Obviously we need to start up flash – here’s a picture of my blank canvas ready for work to begin!

So, firstly we need a text field.  This can either be created using the GUI or in ActionScript.  Seen as though we’re covering text formatting using ActionScript we’ll use the ActionScript method but if you feel more comfortable creating the text field initially in the GUI then that’s perfectly fine, it’ll still work for this example.

So, as a minimum we’re going to need an import: (depending on your setting this may be done automatically as required, but if not, make sure you insert the import statement yourself)

[codebox 1]

Now, we are able to create the textfield (a TLF Textfield in this case) below our import statement:

[codebox 2]

So, just to briefly explain the code above.  First we create a variable of type TLFTextField and call that variable txtOurText.  We then assign this a value of new TLFTextField() – this basically creates a new text field instance to assign to the variable using the TLFTextField constructor.  Then, we set the initial contents of our text field, in this case – DPS Computing Limited Rocks! .  We set its initial position on stage to be at 30, 30.  Please note, the initial position of the textfield has been set, however the text box doesn’t exist on the stage yet so at the moment, that’s just a theoretical position which indicates where the textfield will go when it is added to the stage.  This is where the addChild() function comes in which finally adds the textfield to the stage using the criteria that we specified directly above it.

Right, so at the moment our text is probably going to be quite boring.  Probably standard paragraph sized black text.  You preview should look just as exciting as below (please note, if it looks more exciting you’ve probably done it wrong ;)).

Now for the exciting stuff (well as exciting as it’s going to get formatting text anyway!).  The common mistake and cause of frustration at this point is to start trying to apply new values to attributes of txtOurText.  Hold on one second!!!  That won’t work.  And you’ve possibly already realised that after you became that frustrated that it wasn’t working that you used Google to perform a search and found this guide!!

Anyway, I digress, back on topic.  To avoid this common mistake, we don’t apply changes to the style of the textfield directly to the textfield.  This may sound a little bit odd, but bear with me.

We want to do a bit of text formatting, so logically we look to the TextFormat class – and low and behold, it actually exists, hurrah!  Now, lets concentrate on doing some formatting and worry about the applying further on.

So, firstly, we need another import.  Again depending on your settings, this may be inserted automatically, but just to be on the safe side you can put it in anyway.  If you’re copying and pasting this code in, the imports are not likely to be automatically included, irregardless of your settings.  This is due to Flash only checking whether it needs any more inputs as your type in new code – and copying and pasting doesn’t count as typing unfortunately.  From past experience, the automatic import statements fail to materialise occasionally, typically resulting in 3000 runtime errors at which point you are ready to throw your computer out of the second floor window (and sometimes, when it gets really bad, you also consider following the computer!).  So, import statement:

[codebox 3]

Tada!  Text formatting ability activity.  Now, we need a variable to for the text formatting (of type Text Format) and we need to set some of its attributes.  Please note, in the following code we are setting the attributes of the TextFormat variable not the TextField variable:

[codebox 4]

Right so here we’ve created the new text format variable (fmtOurText – thats ‘format our text’ when spoken, not something like ‘furmert our text’ ;)) and we’ve decided that we don’t like (and hence want to change) the colour, typeface and size of our so-far boring text.  For the non-Americans of us reading, please remember that although we use colour, in Flash its the US English spelling, in line with most other programming languages, so use color instead (please note, automatic spell checkers that sit ‘on top’ of all your programs may try to correct your spelling if it’s set to British English, disable them if possible or they can become frustrating!  Mine just automatically corrected my spelling of colour (when I wanted the US English spelling), obviously in an attempt to make me look silly!).  0x0000FF is the hex for blue so we’re going to have bigger, bluer and more aesthetically pleasing (Verdana) text.

Now, we have our textfield, our text and a nice new format.  Now we just need the format to apply to our text field.  This can be done by using the following simple statement:

[codebox 5]

Change the width that we previously set to 500 (we need this so when the text grows we’ll be able to see it all still).  After you’ve done that, give it a test run and you should see something like this:

Beautiful isn’t it!  Well at least better than what we had.  And we’ve only just scratched the surface here.  You can use the TextFormat class to change all the attributes you can think of (and more) that relate to text fields and text holding containers in general.  Obviously the main benefit of formatting text in this way is the ability to change text dynamically at runtime.  This can be for the purposes of animating text, grabbing the users attention, highlighting an error or responding to an event or condition.

There’s a few important notes to add about ordering of the code.  All imports go at the top, nothing before them.  Then the TextFormat code, followed by the TextField code.  And make sure that you apply the format before you add the text field to the stage.

Now if you’ve been confronted be the dreaded errors, sample shown below….

…don’t despair!  We can fix it.

Look at the working code listing below if you’re having trouble getting the code in the right order:

[codebox 6]

If you’ve still got errors, check you’ve not missed out any semi colons or quotation marks.  You’re code should be coloured similar to below if you’ve punctuated it correctly:

And if you’ve truly lost the will to live, you can download the fla file (and heres the swf as well) and have a play around with it!

Now hopefully everything hasn’t come crashing down and you’ve managed to run the example in the tutorial error free. And hopefully some of your previous stress has been relieved due to finding out the solution to your AS3 formatting problems and this guide interspersed with witty comments ;).

Happy developing! 🙂