Flash Actionscript 3.0 drawString equivalent [Update]

I’m coming from the Java world where you could ‘just’ draw Strings. However, in Flash it’s not as easy to actually draw a String on the screen.

For that purpose I use following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
textSprite = new Sprite();
 
//automatically shows a hand as mouse cursor when the mouse hovers 
//over the text field
textSprite.buttonMode = true;
 
addChild(textSprite);
var labelType : TextField = new TextField();
labelType.text = "Text in a line.";
labelType.autoSize = TextFieldAutoSize.LEFT;
labelType.wordWrap = true;
 
//copy TextField into a bitmap
var typeTextBitmap : BitmapData = new BitmapData(labelType.width, 
                                labelType.height,true,0x00000000);
typeTextBitmap.draw(labelType);
 
//calculate center of TextField
var typeTextTranslationX:Number = -0.5*labelType.width;
var typeTextTranslationY:Number = -0.5*labelType.height;
 
//create Matrix which moves the TextField to the center
var matrix:Matrix = new Matrix();
matrix.translate(typeTextTranslationX, typeTextTranslationY);
 
//draw invisible rect in the background that will serve as click area
textSprite.graphics.beginFill(0xfff0000,0);
textSprite.graphics.drawRect(-0.5*labelType.width,-0.5*labelType.height, 
                                labelType.width, labelType.height);
textSprite.graphics.endFill();
 
//actually draw the text on the stage (with no-repeat and anti-aliasing)
textSprite.graphics.beginBitmapFill(typeTextBitmap,matrix,false,true);
textSprite.graphics.drawRect(typeTextTranslationX, typeTextTranslationY, 
                                labelType.width, labelType.height);
textSprite.graphics.endFill();
//...

Update: I’ve enhanced the drawString code with a mouse listener by putting another sprite on top of it by drawing an invisible rectangle behind the text in the same Sprite. You can see/download the complete example here.

Posted in Actionscript, Flash
  • zmrcic

    I had same problem…only with VS to AS3.0
    OK…drawing is fine but how about adding event on text I had drown?

  • hi zmrcic,
    i’ve made an update of this post where i’ve added a mouse listener to the string. you can see the code here.

    to put it shortly: i’ve stacked another transparent sprite on top of the text sprite and added a few listeners to it. i hope this will do the trick for you.

  • GaryC

    I’m confused.

    Surely if you add an empty sprite for event purposes, you could have simply addChild’ed a textbox object directly to the parent.

    Unless this is for flat (hierarchy free) double-buffer setups. Oh, wait… no, because you’re still adding sprites : / Surely with doublebuffering you’d event the main stage and then do your own, more optimal, hit-testing from there, no ?

    Before you throw something at me, I’m an actionscript newbie so I’m quite probably missing something rather obvious : )

    Still, nice article – pulling a bitmap from a textfield will certainly help me optimise my current project by pre-rendering much of it. Actually, I think of so many interesting applications of this that it makes my head spin…

    Nice article.

    -Gary

  • >>Surely if you add an empty sprite for event purposes, you could have simply addChild’ed a textbox object directly to the parent.

    True. I’ve updated the code and the example above and hope that I fixed the issue.

    As it comes to the question why I would probably need the code: I used that code to make one big Sprite with a Bitmap Graphic and text for the center of the person Sprite in Vispol. As I can have very much persons on the stage I need as few DisplayObjects as possible per person.