I have tried googling for so long now, but I cannot find the solution for this problem.
I have a textfield, with 3 strings and 3 variables. When the variables change I want the textField to display the updated version of the variables, so I use textfield.text = "newly updated text" but then the text is not visible. After the update event triggers, the text "disappears", but it's still there If I trace(textField.text) it outputs the right info. I have embedded the text aswell.
Any help is deeply appreciated
public var infoBox:TextField = new TextField ;
public var myFormat:TextFormat = new TextFormat;
myFormat.color = 0xAA0000;
myFormat.size = 30;
myFormat.font = "Font1";
myFormat.italic = false;
myFormat.align = TextFormatAlign.LEFT;
infoBox.text = "BonusbonusDamage: " + bonusDamage + "\nFlame: " + flame + "\nSticky" + sticky;
infoBox.type = "dynamic";
infoBox.width = 300;
infoBox.height = 150;
infoBox.border = true;
infoBox.borderColor = 0xFFFFFF;
infoBox.background = true;
infoBox.backgroundColor = 0x000000;
infoBox.wordWrap = true;
infoBox.setTextFormat(myFormat);
infoBox.x = 25;
infoBox.y = 20;
addChild(infoBox);
public function updateText()
{
infoBox.text = "BonusbonusDamage: " + bonusDamage + "\nFlame: " + flame + "\nSticky" + sticky;
This is where the text becomes invisible, even thoug its .visible is true and .alpha Is 100.
}
Try infobox.embedFonts = true; as your Font1 is apparently an embedded font. This is a pretty known issue with custom fonts in a text field.
TextField.embedFonts manual
EDIT: Yep, you are using setTextFormat() and this format is cleared whenever you replace text property. Use defaultTextFormat property instead.
infoBox.defaultTextFormat=myFormat;
Related
I'm pretty frustrated with AS3 right now. It seems like there must be serious issues with how things scale inside of movieclips. From the stage everything seems to work fine.
On one of my projects I try to set a textfield.width equal to its container(movieclip)
tf.width = mc.width; Of course it says everything is even but when I look at the border of the textfield it's nowhere near the size of the movie clip it's contained within.
While trying to make a much smaller sample to share with you guys for help, that part worked, but trying to resize text did something completely different. Can anyone help me make sense of all this? The code below seemingly randomly starts changing the size of everything.
Also, I was trying to follow this code from here but just kept getting an error when trying to change the format size in a while loop: Autosize text to fit the width of a button
var square:MovieClip = new MovieClip();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = 0;
square.y = 0;
square.width = 200;
square.height = 200;
var tffSize = 400;
var tffOr:TextFormat = new TextFormat();
tffOr.size = tffSize;
tffOr.align = TextFormatAlign.CENTER;
var tf:TextField = new TextField();
square.addChild(tf);
tf.defaultTextFormat = tffOr;
tf.text = "Hello";
tf.border = true;
tf.width = square.width;
tf.height = square.height;
trace(tf.textWidth);
trace(square.width);
while (tf.textWidth > square.width || tf.textHeight > square.height)
{
trace("too Big");
newTFF();
trace(tf.textWidth + " vs " + square.width);
square.width = 200;
trace(tf.textWidth + " vs " + square.width);
}
function newTFF()
{
tffSize = tffSize - 1;
var tff:TextFormat = new TextFormat();
tff.size = tffSize;
tff.align = TextFormatAlign.CENTER;
//tf.defaultTextFormat = tff;
tf.setTextFormat(tff);
tf.autoSize = "left";
}
I need the text in an input TLF text field to be modified when the user changes it. As for example, I'm trying to make it uppercase every time the user adds or deletes a character:
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var myTLFTextField:TLFTextField = new TLFTextField();
addChild(myTLFTextField);
myTLFTextField.x = 10;
myTLFTextField.y = 10;
myTLFTextField.width = 200
myTLFTextField.height = 100;
myTLFTextField.text = "This is my text";
var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.textIndent = 8;
myFormat.color = 0x336633;
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 24;
var myTextFlow:TextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers();
//--
myTLFTextField.addEventListener(Event.CHANGE, this.onTextFieldChange);
function onTextFieldChange(event:Event):void
{
myTLFTextField.text = myTLFTextField.text.toUpperCase();
}
The code that goes before //-- is taken from the TLFTextField documentation, the very first example on the page.
When I try to edit the text, it does become uppercase, but after that the text field stops responding to any input and the output says
TypeError: Error #1009: Cannot access a property or method of a null
object reference. at
flashx.textLayout.container::TextContainerManager/getController() at
flashx.textLayout.container::TextContainerManager/mouseDownHandler()
When I comment out the addEventListener line, all appears to be working fine.
Does it mean that it's not possible to make changes to the text in a TLF text field on user input event like it is possible with the classic text fields?
Why? Because TLF has got problems. As others have pointed out, changing TLF text inside an Event.CHANGE handler causes the change handler to be called a second time. At that point, things break down.
I had come up with a solution that's similar to the one #Abe posted, but it's more general – it doesn't rely on checking for upper case characters. You listen for TextEvent.TEXT_INPUT, then toggle an Event.CHANGE listener inside the text input handler.
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flash.text.TextFieldType;
import flash.events.TextEvent;
var myTLFTextField:TLFTextField = new TLFTextField();
addChild(myTLFTextField);
myTLFTextField.x = 10;
myTLFTextField.y = 10;
myTLFTextField.width = 500
myTLFTextField.height = 100;
myTLFTextField.text = "This is my text";
myTLFTextField.border = true;
myTLFTextField.multiline = true;
myTLFTextField.type = TextFieldType.INPUT;
var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.textIndent = 8;
myFormat.color = 0x336633;
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 24;
var myTextFlow:TextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers();
myTLFTextField.addEventListener(TextEvent.TEXT_INPUT, onTextInput);
var selectionIndex:uint;
function onTextInput(e:TextEvent):void
{
trace("onTextInput");
selectionIndex = myTLFTextField.selectionEndIndex;
myTLFTextField.addEventListener(Event.CHANGE, onTextChanged);
}
function onTextChanged(e:Event):void
{
trace("onTextChanged");
myTLFTextField.removeEventListener(Event.CHANGE, onTextChanged);
// Do whatever you need to do here:
myTLFTextField.text = myTLFTextField.text.toUpperCase();
myTLFTextField.setSelection(selectionIndex + 1, selectionIndex + 1);
}
Can't try your code right now so this is a wild guess, but the controllers seem to disappear when you set the text. what happens if you symply do this :
private var m_dontupdate:Boolean;
function onTextFieldChange(event:Event):void
{
if(m_dontupdate) return;
m_dontupdate = true;
myTLFTextField.text = myTLFTextField.text.toUpperCase();
myTLFTextField.textFlow.flowComposer.updateAllControllers();
m_dontupdate = false;
}
? (I can't try it because I use FB 4.7 and TLFTextField is nowhere to be found).
First - you doing infinite loop in event listener! Your code in event handler invokes it selves! TLF.text = VALUE produce event like TLF.dispatch(new Event(Event.CHANGE));
So add event listener to user actions not text change! E.g. for KEY_UP
Second - correct formatting code so it will be applied to new text:
myTLFTextField.text = NEW_VALUE;
myTextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
Edit: For more clarity I add full code:
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flash.events.KeyboardEvent;
var myTLFTextField:TLFTextField = new TLFTextField();
addChild(myTLFTextField);
myTLFTextField.x = 10;
myTLFTextField.y = 10;
myTLFTextField.width = 400;
myTLFTextField.height = 100;
myTLFTextField.text = "This is my text";
myTLFTextField.type = "input";
//allow user to wirte in filed
var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.textIndent = 8;
myFormat.color = 0x336633;
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 24;
var myTextFlow:TextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers();
//--;
myTLFTextField.addEventListener(Event.CHANGE, wrongHandler);
myTLFTextField.addEventListener(KeyboardEvent.KEY_UP, goodHandler);
myTLFTextField.text = 'TEXT';
//this invoke CHANGE and trace '-' in console
setTimeout(function(){ myTLFTextField.text = 'text';}, 500);
//this invoke CHANGE and trace '-' in console
function wrongHandler(event:Event):void
{
//myTLFTextField.text = myTLFTextField.text.toUpperCase();
//myTextFlow = myTLFTextField.textFlow;
//myTextFlow.hostFormat = myFormat;
// above code will run infinity loop of changing text! test it by uncomment and comment KEY_UP listener!
trace('-'); // to see in console when and how many event was triggered
}
function goodHandler(event:Event):void
{
myTLFTextField.text = myTLFTextField.text.toUpperCase();
myTextFlow = myTLFTextField.textFlow; // reasign formating
myTextFlow.hostFormat = myFormat;
var i:uint = myTLFTextField.text.length;
myTLFTextField.setSelection(i,i); // move carret to last sign
trace('+'); // to see in console when and how many event was triggered
}
Output:
-
-
Output after writing 'a' character in field:
-
-
-
-
+
-
Result on stage:
TEXTA
I am trying to get some words from xml and put them an the stage side by side in the center of the stage. I achieved this by the code below. I auto resize textfield according to text inside. But this time there comes space between words. What I accomplish is to have autoresized and adjacent words without space between them. But I could not solve the problem.
Could you please help me to solve it.
Thanks in advance
var partsWidth=100;
var wordTf = new TextField();
wordTf.name =thispart;
wordTf.text =thispart;
wordTf.width=partsWidth;
xStartPoint=stage.stageWidth / 2 - (numberOfWords * partsWidth )/2;
wordTf.height=partsHeight;
wordTf.x= xStartPoint + (index * partsWidth) ;
wordTf.y=150;
wordTf.background=true;
wordTf.backgroundColor = 0xe3e3e3;
wordTf.border = true;
var myFormat:TextFormat = new TextFormat();
myFormat.size = 16;
myFormat.align = TextFormatAlign.CENTER;
wordTf.setTextFormat(myFormat);
wordTf.autoSize=TextFieldAutoSize.CENTER;
addChild(wordTf);
you are setting the width explicit with wordTf.width=partsWidth;. this will override the autosize option. I would use the following code.
var container:Sprite = new Sprite();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 16;
myFormat.align = TextFormatAlign.CENTER;
for each( var thispart:String in parts )
{
var wordTf = new TextField();
wordTf.defaultTextFormat = myFormat;
wordTf.name = thispart;
wordTf.text = thispart;
wordTf.height=partsHeight;
wordTf.background=true;
wordTf.backgroundColor = 0xe3e3e3;
wordTf.border = true;
wordTf.width = wordTf.textWidth + 4;
wordTf.y=150;
wordTf.x = container.width;
container.addChild(wordTf);
}
container.x = (stage.stageWidth - container.width) / 2;
addChild(container);
add your words to a separate sprite, and after all words added, add this sprite to the stage and center it.
The line
wordTf.width = wordTf.textWidth + 4;
is the important one. After setting the text, flash can calculate the width of the text. now set this text width (+4 is a fixed padding around the text in a text field you can't modify) as width of your textfield.
So, I've built a little site for a client that doesn't seem to have any problems for me. I post it, and my client reports to me that some of the text is being clipped off in the text fields. I try to recreate the problem on my pc with chrome and firefox, but everything works fine. But he sends me screenshots from his mac with firefox, and sure enough they are being clipped. He claims its only fire-fox, and it is not a factor of window size. so here are the images to show whats going on:
Further most right words should be "Alabama" & "growing"
and here is the code that produces that text (descTextNew is the culprit here):
nameText.text = names[elementNumber];
nameText.autoSize = "center";
nameText.x = object.x + (.5 * videoWidth) - (.5 * nameText.width);
nameText.y = object.y + videoHeight + 8;
nameText.background = true;
nameText.backgroundColor = 0x000000;
textStyling.color = 0xFFFFFF;
textStyling.size = 20;
textStyling.font = myFont.fontName;
textStyling.letterSpacing = 3;
textStyling.align = "center";
nameText.embedFonts = true;
nameText.setTextFormat(textStyling);
container.addChild(nameText);
descTextNew.text = descArrayContent[elementNumber];
descTextNew.y = object.y + videoHeight + nameText.textHeight + margin - 15;
descTextNew.width = nameText.textWidth + 30;
descTextNew.x = object.x + ( (videoWidth - descTextNew.width) / 2 );
descTextNew.wordWrap = true;
descTextNew.autoSize = "left";
descTextNew.background = true;
descTextNew.backgroundColor = 0x000000;
descTextStyling.color = 0xFFFFFF;
descTextStyling.size = Math.round(11 * 1000/stage.stageWidth);
descTextStyling.font = myFont.fontName;
descTextStyling.letterSpacing = .5;
descTextStyling.align = "left";
descTextNew.setTextFormat(descTextStyling);
container.addChild(descTextNew);
Some of these variables are declared as instance variables prior like this:
var names:Array = new Array();
var nameText:TextField = new TextField();
var textStyling:TextFormat = new TextFormat();
var descTextNew:TextField = new TextField();
var descTextStyling:TextFormat = new TextFormat();
var margin:int = 28;
var videoWidth:int = 267;
var videoHeight:int = 150;
arrays names and descArrayContent have the strings "Paul Rollins, Sr." and "Paul Rollins runs a funeral... " added to them at an index number determined by the variable elementNumber. Also object is the image you see in the pic. don't think its necessary to show you that code.
Here's a link if you want to see it in action:
www.footsoldiers.org/test2/
Any ideas what the hell is going on? I don't know where to start.
Have you tried invalidating the control for redraw manually?
this.invalidateDisplayList();
this.invalidateLayering();
this.invalidateLayoutDirection();
this.invalidateProperties();
this.invalidateSize();
I would try to set the .text property after you have set all the other properties.
So try putting the descTextNew.text = descArrayContent[elementNumber] action on the last line.
If this still doesn't fix your problem, I would recommend to also include the descTextNew.multiline = true property.
Good luck!
Is it possible to save text of textarea (flash 10, as3, cs5) in some variable or so and with its textformat (more than one color) and then reuse it to replace text in textarea?
I tried saving htmlText of textarea but the problem is when i replace it in textarea tags causes problem. There will always be another extra line.
If anyone wants to view p tags problem try following. Just click on text and then move your down arrow key, cursor will go to next line.
import fl.controls.TextArea;
var txtHTML:TextArea = new TextArea();
txtHTML.move(0,0);
var default_format:TextFormat = new TextFormat();
default_format.font = "Arial";
default_format.bold = false;
default_format.align = "center";
default_format.color = 0xFFFF00;
default_format.size = 14;
var field:TextField = txtHTML.textField;
field.defaultTextFormat = default_format;
field.setTextFormat(default_format);
field.alwaysShowSelection = true;
field.background = true;
field.type = 'input';
field.multiline = true;
field.backgroundColor = 0x777777;
field.embedFonts = true;
txtHTML.htmlText = '<P ALIGN="CENTER"><FONT FACE="_sans" SIZE="14" COLOR="#FFFF00" LETTERSPACING="0" KERNING="0">ASDF</FONT></P>';
field.x = 0;
field.y = 0;
field.width = 400;
field.height = 200;
field.text = "";
addChild(txtHTML);
Is there a way to do this?
Just copy the text and remove the last character i.e. '>'. So there won't be <p></p> tags problem of extra line.
Regards