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
Related
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.
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);
I'm trying to make a button(movieClip-button), that when you hover over it(MOUSE_OVER), it calls a function that displays some text. The only problem is that it doesn't work :p. Or atleast not the way i want it to work. The thing is when i hover over it the first time, nothing displays. If i then remove the mouse from the movieclip and hover over it again it works just fine. Here's my code:
private var priceString:TextField = new TextField();
private function addText(price:String):void{
var priceStringFormat = new TextFormat;
priceStringFormat.color = 0xFF0000;
priceStringFormat.font = 'TradeGothic';
priceStringFormat.size = 30;
priceString.x = 285;
priceString.y = 15;
priceString.setTextFormat(priceStringFormat);
priceString.autoSize = TextFieldAutoSize.LEFT;
priceString.text = "Upgrade Costs: " + price;
getStage.addChild(priceString);
}
I can't myself see the problem:s. Other text fields in the same format in the same class works just fine. The getStage var is holding the stage access. (It works with other text fields). Strange is also that if i try to add a movieclip instead of the textfield, it works just fine.
This is how it should look:
http://i.stack.imgur.com/5a0jf.png
setTextFormat needs to happen after you set the text property. If for whatever reason you need to do the formatting before you set the textFormat, use
priceString.defaultTextFormat = priceStringFormat
If you're saying you want to create a tooltip when you hover over a button, you should probably put the TextField into a Sprite object. Add the TextField as a child of the Sprite, and the Sprite as a child of the stage. Then, either tween the alpha value of the Sprite or toggle its visibility using Sprite.visible.
PS: for a detailed tutorial, see:
http://hub.tutsplus.com/tutorials/create-a-customizable-tooltip-in-actionscript-30--active-1793
EDIT:
Based on the image you provided, what you would need is to create a sprite with the TextField as its child in the constructor of your button, and set the sprite's visible property to false.
In your mouseover handler for the button, set the sprite's visible property to true, and in reset it in your mouseout handler.
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
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.