Creating a Gradient Fill on Dynamic Text in Flash ActionScript 3.0

The other day, I had a revelation. It was a moment a lot like the Microsoft commercials, where I pictured myself slightly better looking (3 inches taller, perfect hair, and more muscular), coming to a moment of self-realization…. Or something like that. Maybe you’ve already figured this out, maybe not. Either way, I think it’s pretty sweet.

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…

“Why stop there? This same effect can be done with pure ActionScript.”

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.

Note: In this demo, the text field is set to single line with 28 character max, and its width is currently hard-coded. This is all for the sake of the fact that it’s a demo, and to keep things neat and tidy.  It’s easy to base the width of the text field and gradient box to be based on the “textWidth” property of the text field, for even more coding nirvana. And with only a little more effort (duplicating your gradient box and repositioning its y position based on the line height of the text field), you can do multiline text with the same gradient on each line, though it would definitely take some more tweaking and massaging based on the individual font, line height, font size, etc.

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.

Download Sample

6 Responses to this post:

  • X10 says:

    This is brilliant!
    The only issue with using this method is no filters can be applied to it (e.g. drop shadow or outer glow), unless there is a way you can, but I haven’t figured it out yet.

    X10

  • pisco says:

    Hi mate, this looks very good, and it is really what i am looking for, can you post a sample of the code, or even the fla.

    Thanks once again for this lifesaver post.

  • Anthony says:

    @Pisco: Per your request, the sample used in this post is now included. Just click the “Download Sample” button. Hope it helps!

  • Anthony says:

    @X10: Ask and ye shall receive. The zip file with the source files from this sample have been updated, and now include logic to add a drop shadow filter (or other filter of your choosing). The key is this: Add the filter to the container movieclip that holds the text field and gradient box, not to one or the other. Hope it helps!

  • Fiodor says:

    I’m afraid that zip file is broken. It can’t be expanded. Can You fix it? 🙂

  • Anthony says:

    @Fiodor: I rezipped the files and uploaded a fresh copy. It should work now.

Leave a Comment