Non selectable transparent textfield with embedded font

Some of the V2 Flash Components are less than intuitive now and then. While working on the new trophy tour for Heineken we had to create an application with a transparent textarea with non selectable non editable text using a non standard (embedded) font with Spanish characters.

Oh and the text had to be rendered smoothy using advanced anti-aliasing.

This leaves you with different options. Although I was tempted to simply use a standard textfield, this should be easy to implement using a TextArea component as well, right? As a reference for our own and your convenience, here is a step by step approach.

Creating the test movie

  1. create a new flash movie, size it 300 x 300, and choose a background other than white
  2. drag a TextArea on stage, name it ‘ta_test’ and enter some text for the text parameter in the parameter section
  3. compile the movie, you’ll see a textarea with a border, a white background, whose text is editable and selectable

ActionScript 2, timeline scripting or parameter settings?

You’ll have to decide if you want to approach this using the parameter settings, timeline code or actionscript 2 code. In some cases you can choose, and in some I found timeline code was the easy/only option. This can probably be fixed by waiting a few frames after instantiating the TextArea, but this sounds like a nice exercise for some other time. Let’s keep it simple for now and use whatever works for demonstration purposes.

Making the label non selectable

  • wrong:  switch the editable parameter to false, test the movie again, the text is no longer editable, but still selectable
  • wrong: add some actionscript on the timeline:import mx.controls.TextArea;
    var ta_test:TextArea;
    ta_test.enabled = false;
    You’ll see this code disables the text selection, but it disables the scrollbar and grays out the text as well, so this is not an option
  • right: replace that last actionscript on the timeline with:import mx.controls.TextArea;
    var ta_test:TextArea;
    ta_test.label.selectable  = false;

    This code accesses the underlying label, and does exactly what we want.

Hiding the background

It gets even better now, there is no real good way to hide the background. However digging through the original sources, we see we can do:

ta_test["depthChild0"]._visible = false;

Add this code to what you already had.  Google comes up with alternative solutions, and not one of them worked for me.  If you put this code in an actionscript class, you probably have to wait a bit after initializing the component before executing it.

Using a non standard font

Now we choose a non standard font. This means you’ll have to acquire a non standard font first. A great test font can be found here. It’s called Amped For Evil, by Ryan Splint

  1. download the font
  2. install the font (eg goto c:\windows\fonts, click install new fonts, and install it)
  3. now based on the font you have actually chosen, multiple things can apply. It might be enough to do:ta_test.setStyle ("fontFamily", "YourFontName"); eg ta_test.setStyle (“fontFamily”, “Amped For Evil”);Note that this code assumes you are using the default of ta_text.html = false;

For some fonts you will actually see text, but one way or another, assuming this font does not exist on another system, this will not be enough to display the font there. You’ll need to embed the font as well using:
ta_test.setStyle ("embedFonts", true);
If you test the movie now, nothing will appear, since although you have told the TextArea to use an embedded font, the font itself still has to be embedded as well.
Embedding the font can be done it two ways:

  • selectively
  • completely

Selective font embedding

Create an empty movieclip, drop a textfield in it, select the font you want to embed, and click the embed button. Select the characters you need. I’m definitely not an expert on all the different charactersets, but here is a short overview taken from http://www.p22.com/support/Opentype.html
It is by no means complete, but I found it to come in pretty handy at times.
For this example just select Basic Latin. Make sure your other selections match the text you are using. For example don’t select bold if you are not using a bold text or you won’t see anything. If you see nothing, you either haven’t embedded the font correctly, or you are leaving out some other important steps such as making sure the characters are exported as well. For example if the movieclip containing your textfield with the embedded characters is not on stage, you will have to select “export for actionscript” and “export in first frame”. If you see squares, you did right, but your font doesn’t support them. Scroll through the example text to see how that looks.
Of course you can mix fonts as well. If you replace:

ta_test.setStyle ("fontFamily", "Amped For Evil");
ta_test.setStyle (“fontSize”, 20);

with:

ta_test.html = true;ta_test.text = “<html><font size=’20’ face=’Amped For Evil’><b>Bold</b> Normal</font></html>”;

…and make sure you have two textfields in your library, one with normal characters and the other with bold characters, the text will show up fine.

Complete font embedding

Another option is to embed a complete font. In this case the font shown will be the font you created in the library (choose New Font..). Enter a font name, and make sure that after creating it, you enable “Export for ActionScript” and “Export in first frame”. Note the linkage id you have entered for “Export for ActionScript”. When you are using ta_test.setStyle (“fontFamily”,… you can refer to your font using either the linkage id or the font’s full name. Don’t be fooled by the name you enter for the font upon creation. When you are referring to the font from html font tags however only the linkage id will work.
Mixing fonts works entirely the same as with selective character embedding.

Advanced Anti Aliasing
Is easy as (w/h)ell :
ta_test.label.antiAliasType = "advanced";

So wrapping it up (no pun intended), in the end it’s all pretty simple. Below is an example of a text (Betrayed by Avenged Sevenfold) over an image (Dimebag Darrel).


image_pdfimage_print
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *