Text Input Rotation + Styling the text - actionscript-3

I have textInput on stage, it's not the component; but rather a textField which is set to behave as inputText. I also have a button on stage to bold the selected portion of the text in the inputField.
Here's the code, which works perfectly fine:
var formatDefBold: TextFormat = new TextFormat();
formatDefBold.bold = false;
var formatBold: TextFormat = new TextFormat();
formatBold.bold = true;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event: MouseEvent):void
{
var sbi:Number = myInputField.selectionBeginIndex;
var sei:Number = myInputField.selectionEndIndex;
if (sbi != sei)
{
var section:TextFormat = myInputField.getTextFormat(sbi,sei);
if (section.bold == false)
{
myInputField.setTextFormat(formatBold, sbi, sei);
}
else
{
myInputField.setTextFormat(formatDefBold, sbi, sei);
}
stage.focus = this[selectedTextField]; // highlight the selected text again.
}
}
PROBLEM:
When I rotate the textInput, the text disappears. If I embed the font and choose another anti-aliasing method like "Anti-Alias for animation", the rotated textInput displays the text fine, but the makeBold function doesn't work.
I've tried different fonts. Sans, Arial, which I embedded all it's styles (Bold, Italic, Bold-Italic). nothing!
I've tried placing the textInput inside a movieClip and rotate the movieClip instead. doesn't work.
I've also tried setting the embedFonts parameter for the textInput too, not sure if I did it correctly
myInputField.embedFonts = true;
this time the text disappears even when the textField is not rotated.
I'm really stuck and can't think of anything else to make the bold function work with a rotated textInput.

Embedding method
For any operations like rotation applied to a text field, you should first embed the text font.
myText.text = "rotation with embed font";
myText.rotation = 10;
Your text field 'myText' is physically put on the scene. When you click on it, in the window 'Properties', do that:
anti-alias (Anti-alias for animation)
font embed
To embed the font, click on 'embed' button > window 'Font Embedding' > 'Character ranges' > select: 'Uppercase', 'Lowercase', 'Numerals', 'Punctuation'. (don't click on 'All')
3D method
You can also rotate a dynamic text field without embedding fonts using the 3D methods available in Flash Player 10.
var myTextField:TextField = new TextField();
this.addChild(myTextField);
var fo:TextFormat = new TextFormat("Arial", 11, 0xFF0000);
myTextField.defaultTextFormat = fo;
myTextField.text = "3D rotation";
myTextField.rotationZ = 45;
In your case...
In your case, the following code works perfectly (you just have to put a button named 'boldBtn' on your scene):
var myInputField:TextField = new TextField();
this.addChild(myInputField);
var fo:TextFormat = new TextFormat("Verdana", 12, 0x000000, false);
myInputField.defaultTextFormat = fo;
myInputField.text = "3D rotation";
myInputField.rotationZ = 45;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event:MouseEvent):void
{
fo.bold = !fo.bold;
myInputField.setTextFormat(fo);
}

I set the anti-aliasing to it's default value which is "use device fonts" and used rotationZ to rotate the text field. and it worked!
using rotation (not rotationZ) with default anti-aliasing doesn't show the text.
and using rotation (not rotationZ) with anti-aliasing makes the bold function not work.
so this is solved with just adding this line of code:
myInputField.rotationZ = 45;

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);

As3 text field issue

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.

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.

AS3: Embedding characters

I having some trouble with TextFields and caracter embedding. As I have understood, the way to embed character in Flash, is to have a TextField in a movieclip that is exported to actionscript via some classname. Then have the TextField embed the characters.
But when i try to use that TextField in my project, I cannot auto resize the field any longer!? Is there a better way to embed charactes? or am I missing some unknow attribute? (and yes i have tried TextField.autoSize = "left" (or "center" or "right")).
The TextField is configured like this in Flash CS4:
Properties:
http://screencast.com/t/0VB6KnNO6G
Library implementation:
http://screencast.com/t/w3yQLqit0veI
And I embed the MovieClip containing the TextField like this:
protected var tabname:MovieClip = new Text(); // The property on the object
Adding the text and setting its Settings:
var txt:TextField = tabname.txt;
if( !contains(tabname) )
{
addChild(tabname);
var format:TextFormat = new TextFormat();
format.bold = true;
format.font = "Arial";
format.size = 12;
format.align = "left";
var dropShadow = new DropShadowFilter(0);
dropShadow.color = 0xFFFFFF;
dropShadow.strength = 2;
dropShadow.blurX = dropShadow.blurY = 5;
dropShadow.alpha = .7;
txt.type = TextFieldType.DYNAMIC;
txt.multiline = tabname.wordWrap = false;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.defaultTextFormat = format;
txt.filters = [dropShadow];
txt.mouseEnabled = false;
txt.x = 10;
}
txt.text = value;
txt.y = Math.ceil((tabmask.height - txt.height) /2);
To embed fonts, don't rely on wrapping them in MovieClips in the library. They should be embedded correctly as Fonts. I have included some basic steps below for embedding fonts, then an example for your particular situation:
1 - Make the textfield Dynamic and click the Embed.. button
2 - Name the font with something meaningful (like the fonts name) and tick the character sets you will be using (usually I select caps, lowercase, numbers and punctuation). Also note the Style is 'Bold', you will need to embed a font set for each style. So if you want to use Bold and Regular, you need to embed 2 fonts.
3 - If you plan on adding textfields dynamically through ActionScript, goto the ActionScript tab and add a class for it (again, use a meaningful name)
4 - Finally click ok, and away you go. I have setup an example, using these steps, and the auto size method, you can see the results below
In Flash, you can click the [Embed...] button below the TextField's character properties. In the window that you get then, you can specify which characters you want embedded in your textfield.
There's a lot more to say about font embedding but this is the simple story. Flash CS5 added TLF TextFields but I don't think you were referring to those, right?
The autoSize property really has nothing to do with font embedding but I guess your TextField is not Dynamic when you cannot auto resize it?
Are you using CS5 or CS4 or earlier by the way?