TextField height not working - actionscript-3

I'm creating a Word processing Flash desktop app, i created an INPUT text field where the user can type text and play with it, i gave it the following parameters:
//creating a the Text field
var tfield:TextField = new TextField();
//Position & Dimensions
tfield.x=0;
tfield.y=160;
tfield.width = 1280;
tfield.height = 600; // <<<==== where the probleme is
//Options
tfield.type = TextFieldType.INPUT;
tfield.background=true;
tfield.border=true;
tfield.multiline=true;
tfield.wordWrap = true;
//Add text field to stage
stage.addChild(tfield);
Everything works fine except the tfield.height = 600; the text field takes the height of one line, and if i add a 2nd or 3rd line, then it expands.
App image: https://image.ibb.co/en5BEm/qsd.png
Adding some lines: https://image.ibb.co/i7HmfR/2nd.png
I want it to be exactly 600px. any ideas?

This behavior is related to TextField's autoSize property, which alters its height and width depending on text inside and multiline property. To set the fixed height, assign this property a value of TextFieldAutoSize.NONE. This will disable automatic resize of a text field.

Related

Increase size of text on click on button

How do I increase size of a dynamic text on click of a button in AS3, Adobe flash?
I have a dynamic text box (instance name is damodara).
I tried using the following code but it didn't work.
text_big.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
damodara.size += 4;
}
I would be glad if you could help me.
Use set setTextFormat like this:
First, you need to have aTextFormat object. Like this:
var tf:TextFormat = new TextFormat();
then set the properties of that like this:
tf.size = 5; // or whatever you want here
then apply this format to your text:
myTextField.setTextFormat(tf);
Then, in the code you posted, replace size+=5 with damodara.setTextFormat(tf);
Then to change it back you could either have a different TextFormat with a different size property or change the size property of this TextFormat and reapply the format doing setTextFormat again.
You cannot increase the size of the text, instead increase the font size while you click the button , then you are good to go.
textFormat = youtTextField.getTextFormat();
textFormat.size = int(textFormat.size)-1;
youtTextField.setTextFormat(textFormat);

Formatting Dynamic textfieldtype.DYNAMIC in AS3

Hi I am trying to format a textfield called myResult with the following code. It seems to have no effect on the size or type of text when I attempt it. Is there another way to format the textfield or am I missing something. The textfieldtype is DYNAMIC as it is displaying a result. Here is the code I am using
var myFormatA:TextFormat = new TextFormat();
myFormatA.color = 0xAA0000;
myFormatA.size = 28;
myFormatA.italic = true;
myFormatA.align = TextFormatAlign.CENTER;
myResult.setTextFormat(myFormatA);
use defaultTextFormat to apply a default format to any text that will be displayed (in the future if you will) in your textfield. Use setTextFormat to format the text that is currently displayed in your textfield. This is an important difference.

Vertical align text As3 Label Coponent

I have a simple question, is it possible to vertical align the text that is displayed by the Label component in Flash CS6.
Only the TLFTextField (class in the package fl.text) has a built-in property to set the text vertical alignment.
Go to this page for more information
Unfortunately in AS3 labels are very limited in what they can do - you could use the setStyle property of the Label to reference a predefined TextFormat but still TextFormat lacks any appropriate public properties that are relevant to your question.
So I advise you just to use a textfield as a replacement for the label's text option which you can easily manipulate programatically like so:
var label1:TextField = new TextField();
label1.y = 100; // any value here for vertical text alignment
label1.width = 100; // any height
label1.height = 100; // any height
label1.text = "label 1 text"; // label text here
addChild(label1); // adds it to the stage
EDIT: added addChild - totally forgot!
Here is a simple tutorial about AS3 textfields

AS3 - Changing size of Label on Button component

I would like to increase the size of the label on a Button in flash. The label seems to only be about 3/4 the width and 3/4 the height of the button. I would like to make the label be the full width and height of the button.
The label field is just a string, and changing the width/height on the textField property of the button does not seem to change anything. Also textFormat doesn't have options for changing text width/height.
I'm out of ideas. Any help would be greatly appreciated!
The only way I know is to do it via code.
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.size = 20
var myButton:Button = new Button();
myButton.label = "Click Me";
myButton.setStyle("textFormat", myTextFormat);
myButton.setSize(120, 60);
myButton.x = 0;
myButton.y = 0;
addChild(myButton);
After much reading, I found a few that might help future viewers of this question. I am using AS3, CS5.5. 'bw' is the instance name of the button. These can be used if you are using a button 'Component'.
bw.setStyle("textFormat", new TextFormat("Verdana", 20, "bold", "italic", "underline", true));
bw.label = "Dog Snacks"; // can be also set via properties, but this is handy if you want the text to change after clicking
bw.setSize(280, 30); // can also be set via properties

Actionscript event listener on rectangle containing larger TextField

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?
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
}
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.