Actionscript event listener on rectangle containing larger TextField

Question

I have a rectangle on which I would like to display a label. I have tried to do this by creating a rectangle sprite, and then adding a textField to the display tree of the sprite.

The problem is that there seems to be a lot of extra blank padding surrounding the textField. Although the text fits within the box, the boundaries of the textField extend beyond the visible region of it's containing rectangle. This causes the rectangle's width and height to change also.

The issue is that I want the user to be able to drag the rectangle around the screen. I added an event listener on MOUSE_DOWN to initiate the drag. However, the user can start the drag by clicking on the area surrounding the visible rectangle, rather than only on the rectangle itself. I assume this is because the user will actually be clicking on the extra blank space coming from the the TextField and seeping out over the edges

Any ideas?

Answer 1

I think what you're looking for is the textField.autoSize parameter. It makes the text field bounds shrink to the size of the text (otherwise it has a default height/width regardless of the text it contains)

import flash.text.TextField;
import flash.text.TextFieldAutoSize;

var textField:TextField = new TextField();

textField.autoSize = TextFieldAutoSize.LEFT;
textField.text = "your text"; //set this AFTER autoSize

You can also set the width of the your textField to the width of your rectangle. Or forgo the autosize property and manually set the height/width of your text box to the height/width of the rectangle, though this would truncate any text that doesn't fit.

There is always some padding on the text field. Getting the exact bounds of the actual text can be tricky (though it is possible). An easier way is to just mask your text box.

If your rectangle is drawn with the graphics class, you could do this:

var rectangle:Sprite = new Sprite();
rectangle.graphics.beginFill(0xFF0000);
rectangle.graphics.drawRect(0,0,100,100);
addChild(rectangle);

var myMask:Shape = new Shape();
myMask.graphics.copyFrom(rectangle.graphics);
rectangle.addChild(myMask);

var textField:TextField = new TextField();
textField.width = rectangle.width;
textField.height = rectangle.height;
textField.mask = myMask;

rectangle.addChild(textField);

One other option you could do, is in your event listener, check to see if the target is the text box and exit the function. (just make sure your text field's mouseEnabled property is true (default) if you use this method)

function rectangleClickHandler(e:Event):void {
    if(e.target == myTextField) return;
    //rest of your code
}

Answer 2

One other thing you could do, and may be simpler than masks etc is just make the text field not receive mouse events. This will stop any mouse events being fired from interaction with the text field, but you'll still be able to process them on your rectangle.

The important item here is the mouseEnabled flag. You leave the mouseChildren enabled on your container, but disable the mouseEnabled of both the container and the textfield.

var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.text = "Testing the text mouse enabled";

var rectangle:Sprite = new Sprite();
rectangle.graphics.beginFill(0xFF0000);
rectangle.graphics.drawRect(0,0,100,100);

var container:Sprite = new Sprite();
container.addChild( rectangle );
container.addChild( tf );
addChild( container );

// IMPORTANT FLAGS HERE
tf.mouseEnabled = false;
container.mouseEnabled = false;
container.mouseChildren = true;

container.addEventListener( MouseEvent.ROLL_OVER, rollOverHandler, false, 0, true );

The event handler will only fire when other children of the container are rolled over, not the text field. Using this method you can selectively active mouse enabled components in a container object.