Here’s what my realization entailed:

As some of you may know, I’m always a big fan of keeping live text — be it static or dynamic — in Flash files, so that when I or anyone needs to go back in and make an update, it can be done w/o opening a Photoshop file, slicing and dicing image(s), and importing them into Flash.  Not only is it easier, but it’s a tremendous help in keeping file size down.

One aspect that is sometimes difficult is when a design calls for an effect on text, such as a gradient.  In Flash, we’re all probably aware that you can create a static text field and a shape (such as a gradient box), set the text field on the layer above said shape, and right-click the text layer to set it as a mask over the shape.  But here’s where my realization came…

It’s very true — this same effect can be done with pure ActionScript, for more dynamic scenarios… or if you’re one of those people who hate the stage with a passion.  All I’d need to do in the code is create a text field and a gradient box, layer them appropriately, and set the text as the mask on the gradient box.  And, since you can embed fonts in Flash (see the previous post about Embedding Fonts Using ActionScript 3.0), it can be done with any crazy display font that a design calls for (Immi 505 in the example below).

With that in mind, I put together a little demo to prove to myself (and you) that it was as easy as I thought it would be.  The demo has an input text field that you can use to change and update the text — which happens on the fly each time the input field is updated (so you know it’s truly live and dynamic, and not slight of hand).  So go ahead and play around with it.

So there you have it.  Dynamic text with a gradient fill effect.  Easy peasy, eh?

Until next time, happy coding!

Download

What’s that, you say? You want to see the source code to make this work? Well, ask and ye shall receive. Just click the button below to download the source FLA and AS file for this demo.

As we did when embedding in ActionScript 2.0, you’ll need to make a new Font item in your Library. Click on the Library menu, and select “New Font…”. Find your Font and Style from the dropdown menus in the dialog box, and give it a unique name. I generally give it a name that includes reference to both the Font and Style (in this example, I am using RockwellBold). Then, make sure the “Export for ActionScript” checkbox is checked under the Linkage section of the dialog box, which will auto-check the “Export in frame 1″ checkbox. Lastly, give your new Font a unique identifier in the “Class” field beneath the checkboxes. I like to make this Class the same as the Name I gave it above. Once all that is done, click OK.

(Note: You may get a dialog box that tells you, “A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export.” This is fine. It’s just telling you that the Class you identified isn’t a built-in Flash Class. As long as you don’t need to access additional functionality beyond that of the Font class, you don’t have to worry.)

Next comes the ActionScript:

var rockwellBold:Font = new RockwellBold as Font;
var rockwellBoldTF:TextFormat = new TextFormat();
rockwellBoldTF.font = rockwellBold.fontName;

myText_txt.text = "Hello World!";
myText_txt.setTextFormat(rockwellBoldTF);
myText_txt.embedFonts = true;
myText_txt.antiAliasType = AntiAliasType.ADVANCED;

First, we create a new Font object, and assign it to our Font Class we created above (RockwellBold). Then, we create a new TextFormat, and give it the font attribute with the name of the Font object you just created, appended with fontName property. Then, set the text of your text field ("Hello World!"). After setting the text, use the setTextFormat attribute, and pass in the TextFormat variable you created in the first line. Next, set the embedFonts attribute to "true". Lastly, you can optionally set the antiAliasType attribute of your text to either ADVANCED or NORMAL. By anti-aliasing your text, you effectively smooth the edges of your font to avoid any distortion artifacts that may be introduced through screen display. According to Adobe's documentation, the ADVANCED setting is most useful for applications that have a lot of small text, and isn't recommended for font sizes above 48 pts. The NORMAL setting is most useful for applications that don't have a lot of text, and sets the anti-aliasing to the setting that was used in Flash Player 7. Once these steps are done, you're all set.

As with embedding fonts in AS 2.0, it's nothing too complicated. Until next time, happy coding!

To start, you’ll need to make a new Font item in your Library. Click on the Library menu, and select “New Font…”. Find your Font and Style from the dropdown menus in the dialog box, and give it a unique name. I generally give it a name that includes reference to both the Font and Style (in this example, I am using RockwellBold). Then, make sure the “Export for ActionScript” checkbox is checked under the Linkage section of the dialog box, which will auto-check the “Export in frame 1″ checkbox. Lastly, give your new Font a unique identifier in the “Identifier” field beneath the checkboxes. I like to make this Identifier the same as the Name I gave it above. Once all that is done, click OK.

Next comes the ActionScript:

var rockwellBoldTF:TextFormat = new TextFormat();
rockwellBoldTF.font = "RockwellBold";

myText_txt.text = "Hello World!";
myText_txt.setTextFormat(rockwellBoldTF);
myText_txt.embedFonts = true;

First, we create a new TextFormat, and give it the font attribute with the name of the Font in your Library that you just created. Then, set the text of your text field (“Hello World!”). After setting the text, use the setTextFormat attribute, and pass in the TextFormat variable you created in the first line. Lastly, set the embedFonts attribute to “true“, and you’re all set.

As you no doubt noticed, it’s nothing too complicated to embed fonts. I’d also urge you to explore more of the options of text formatting, colors, etc. And while this example uses ActionScript 2.0, make sure you keep an eye out for a post on how to make it happen in ActionScript 3.0. Until next time, happy coding!