Post details: what character is under the mouse? AS3 can tell you!

10/23/05

Permalink 12:47:40 am, Categories: Flash

what character is under the mouse? AS3 can tell you!

do you know how many times on Flashcoders someone asks "how can i determine what character is at a certain x,y position?"

TextSnapshot is an interesting option - but only for static text.

while trying to get my brain off of two days of (mostly my wife) cleaning our house in NOLA, i opened up the Flex Builder 2 Alpha and started typeing in different class names and seeing what came up in the auto-complete list.

one that caught my eye was getCharIndexAtPoint() in the TextField object.

could it be? it IS!

here's a simple sample that shows how it works (copy/paste this into Flex Builder 2 as an ActionScript Project - sorry for it not being completely visible [stupid fixed-width CSS layout]):

package {
 	
  import flash.display.TextField;
  import flash.text.TextFormat;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.EventType;
 	
  public class TestTextPosition extends Sprite {

    var textfield1:TextField = new TextField();
    var textfield2:TextField = new TextField();
    var textformat1:TextFormat = new TextFormat();
    var textformat2:TextFormat = new TextFormat();
    var textformat3:TextFormat = new TextFormat();
  		
    public function TestTextPosition () {
      textformat1.font = "Arial";
      textformat1.color = 0x0000ff;
      textformat1.size = 60;

      textformat2.font = "Arial";
      textformat2.color = 0x0000ff;
      textformat2.size = 20;

      textformat3.font = "Arial";
      textformat3.color = 0x000000;
      textformat3.size = 14;

      textfield1.width = 400;
      textfield1.height = 55;
      textfield1.multiline = true;
      textfield1.wordWrap = true;
      textfield1.type = "input";
      textfield1.text = "Roll your mouse over this text to see something neat.\n";
      textfield1.text += "Change the text to see that it is really dynamic.";
      addChild(textfield1);
   			
      textfield2.x = 10;
      textfield2.y = 50;
      textfield2.width = 100;
      textfield2.height = 100;
      textfield2.selectable = false;
      textfield2.border = true;
      textfield2.background = true;
      textfield2.backgroundColor = 0xffffaa;
      textfield2.defaultTextFormat = textformat1;
      addChild(textfield2);
   			
      this.addEventListener(EventType.ENTER_FRAME, enterFrameListener);
    }
   		
    public function enterFrameListener(event:Event) {
      textfield1.setTextFormat(textformat3);
      var charIndex:int = textfield1.getCharIndexAtPoint(stage.mouseX,stage.mouseY);
      textfield1.setTextFormat(textformat2,charIndex,charIndex+1);
      textfield2.text = textfield1.text.charAt(charIndex);
    }
  }
}

if you run that from Flex Builder 2 Alpha, you'll see a nice screen with an input text field that as you mouse over it displays the character under the mouse in a different text field and turns the character blue and larger just for kicks. finally there's a real answer for the Flashcoder peeps. ;)

HOWEVER...

i noticed that there are couple of somewhat-long-standing bugs that still aren't fixed in Flash Player 8.5 - text size over 128 and leading.

from an earlier post of mine, you'll find that you cannot make text larger than the "128" value. well, you can make the value larger, but it won't get any bigger than "128".

and leading. oh sweet, elusive leading. many folks yearn for the desire to be able to adjust the leading of characters - partly to hack a way around the fact that Flash still doesn't recognize the <sup> and <sub> tags in HTML text. well, i played with leading and you CAN adjust an entire line of text up or down (well, i tried up and it worked) if you set the leading of the first character in the line to a negative value - but it does NOT work for individual characters. :-/

so i'm sure there are things that could be done better with the code, and i know it's only an alpha 8.5 player and these things may get resolved, but i figure i'd point them out now.

Permalink

Search

Misc

Syndicate this blog XML

What is RSS?

The opinions expressed on this blog are those of the author only and are not necessarily those of his employer.

Creative Commons License
This work is licensed under a
Creative Commons License.

powered by
b2evolution