I first added a movieClip to my library, then I right clicked the MC in the library and clicked Properties and then named it 'blueBox' and created an Actionscript linkage with the class name as 'blueBox' and base as 'flash.display.MovieClip'. I added this movieclip to the stage like so:
var myText:TextField = new TextField();
var myFormat:TextFormat = new TextFormat();
myFormat.size = 15;
myFormat.color = 0xFFFFFF;
myFormat.align = TextFormatAlign.CENTER;
myText.defaultTextFormat = myFormat;
myText.wordWrap = true;
var blueBoxOne:blueBox = new blueBox();
blueBoxOne.width = 400;
blueBoxOne.addChild(myText);
blueBoxOne.x = 400;
blueBoxOne.y = 40;
myText.x = 0;
addChild(blueBoxOne);
Now, what is myText's x position relative to? It appears as if it is a few pixels to the right of the middle of blueBoxOne. How do I make the center of the text be in the center of the blueBoxOne MovieClip?
The position of a child display object is always relative to its parent. Your TextField shows the text centered but its width is too small - to center the text inside the parent, set its width equal to the parent:
myText.width = blueBoxOne.width;
This is because you never set the width of the TextField and the default width (100px) is just too small for your box.
Related
I have dynamically created a bunch of textfields, the number of which depends on xml input. The textfields need to be button-enabled, so I thought the easiest solution is to put them in a movieclip and buttonMode that movieclip.
The hierarchy looks like this: main (extends MovieClip) -> klankoefening (a MovieClip) -> Textfieldparent (a MovieClip) -> Textfield
I have a variable maxw which contains the biggest textfield's width and I want all my Textfieldparents to have this width.
I'm trying to do it like this:
//generate textfields
keuzes = new XMLList(lijstOpties.categorie.(#cat == catname));
var nrs:int = keuzes.keuze.length(); //aantal keuzemogelijkheden
var maxw:int = 0; //grootste breedte tf, nodig voor bepalen breedte knoppen
for (var nr:int = 0; nr < nrs; nr++) {
var tf:TextField = createTextfield(werkfmt);
tf.text = keuzes.keuze[nr].toString();
tf.autoSize = "center";
tf.background = true;
tf.backgroundColor = 0xffcc33;
tf.border = true;
tf.borderColor = 0x000000;
tf.name = "keuzetf";
tf.selectable = false;
tf.x = 0;
tf.y = 0;
if (tf.width > maxw) {maxw = tf.width;}
var tfcontainer:MovieClip = new MovieClip();
tfcontainer.buttonMode = true;
tfcontainer.name = keuzes.keuze[nr].toString();
tfcontainer.addChild(tf);
klankoefening.addChildAt(tfcontainer,nr);
}
for (var an:int = 0; an < 3; an++) {
var mcs:MovieClip = klankoefening.getChildAt(an) as MovieClip;
mcs.width = maxw;
trace ("mcs " + mcs.width);
var mtf:TextField = mcs.getChildAt(0) as TextField;
trace ("mtf " + mtf.text);
}
the trace results are
mcs 32.05
mcs 33
mcs 21.25
Which I find odd, because I stated in my second loop that the width for all Textfieldparents should be set to maxw. What is happening?
Consider drawing an underlaying Rectangle of desired width and height. You can use mcs.graphics to do that. The trick is, width of a DisplayObjectContainer is a calculated property, and changing it will likely result in changing scale. Say, a MC has two shapes as chilren, one at (1000,0) and another at (0,0), and both have width of 10 - the resultant width of that MC will be 1010. So, instead of changing width, simulate its change by drawing a rectangle on the MC.
mcs.graphics.clear();
mcs.graphics.lineStyle(0,0,0);
mcs.graphics.beginFill(0x808080,0); // bogus filled rect, to capture events
mcs.graphics.drawRect(0,0,maxw,maxh); // height is needed too
mcs.graphics.endFill();
After thinking a bit more about your problem, I think your issue is that the buttons you're adding the text to have a width entirely defined by the TextField, and because you're set the text to autoSize, it's snapping back to it's original width.
What you will need to do to make the width more indicative of what you need, and allow for easy clicking on the buttons is to create a transparent rectangle in the tfContainer mc, set the width of the tfContainer, and then add the text to the button.
I'm trying to make just a simple square movieclip show up on my stage, and it seems like nothing I've tried works...nothing appears on the stage! My code:
var mc:MovieClip = new MovieClip();
mc.x = 0;
mc.y = 0;
mc.width = 200;
mc.height = 200;
mc.opaqueBackground = 0xCCCCCC;
// new ColorTransform object
var obj_color:ColorTransform = new ColorTransform();
// setting the new color we want (in this case, blue)
obj_color.color = 0x0000ff;
// applying the transform to our movieclip (this will affect the whole object including strokes)
mc.transform.colorTransform = obj_color;
this.stage.addChild(mc);
mc.x = 0;
mc.y = 0;
Why isn't my movieclip appearing on the stage?
Your MovieClip contains nothing, so nothing is displayed. You are trying to cause the MovieClip to display a gray box by setting width and height and opaqueBackground, but unfortunately this doesn't work. width and height will only resize a clip that already has some content. If width and height are 0, then changing them has no effect, because trying to scale 0 results in 0. You can notice this by doing trace(width) after you set it to 200.
If you want to display a rectangle, use the drawing API to draw it in the clip:
var mc:MovieClip = new MovieClip();
mc.x = 0;
mc.y = 0;
mc.graphics.beginFill(0xCCCCCC);
mc.graphics.drawRect(0, 0, 200, 200);
mc.graphics.endFill();
addChild(mc);
I'm having strange problems with positioning of
1) a MovieClip() I've created with AS
2) a textfield inside this MovieClip().
Problem with 1): When I set MC.x = 0; MC.y = 0 the movieClip doesn't appear in the top left corner.
Problem with 2): The text isn't centered vertically nor horizontally.
My AS3 code:
var button:ButtonMC = new ButtonMC();
button.y = 100;
button.x = 100;
button.width = 260;
button.height = 50;
button.buttonMode = true;
button.useHandCursor = true;
button.mouseChildren = false;
var tf:TextFormat = new TextFormat();
tf.size = 70;
tf.bold = true;
tf.font = "Arial"
tf.color = 0xFFFFFF;
var myText:TextField = new TextField();
myText.defaultTextFormat = tf;
myText.autoSize = TextFieldAutoSize.CENTER;
button.addChild(myText);
myText.text = 'ThisIsATestText1234';
myText.y = button.height * 0.5 - myText.textHeight * 0.5;
addChild(button);
Since myText is already added to the button at the point where you try to get the height of the button it might screw up the calculation. Try to align the textfield first and the add it to the button.
You are also changing the width and height of the Button which changes the scale and therefor also affects how the textfield inside looks like and behaves (since it will become a child of the button)
Best way to tackle both problems at once is to create a background-clip within the button and give that the proper size. Then create the textfield and adjust it's scale according to the background. This way the button remains it original scale and won't mess up the stuff that's inside it.
Hope this helps.
PS: useHandCursor = true is not needed when you set buttonMode = true ;)
remove those lines:
button.width = 260;
button.height = 50;
and you will have easier to position text - also the buttons height is affected by added textfield so better use fixed value e.g.
myText.y = 25 - (myText.height * 0.5);
In a card game I use a TextField in the middle to display the playing table number, but also to detect if a playing card has been played - using myTextField.hitTestObject(myCard) - which means the TextField's position and dimensions may not change:
My current AS3 code is:
var format:TextFormat = new TextFormat();
format.color = 0xFFFFFF;
format.size = 30;
format.bold = true;
myTextField.defaultTextFormat = format;
myTextField.border = true;
myTextField.borderColor = 0xFFFFFF;
myTextField.x = W/2-Card.W/2;
myTextField.y = Card.H;
myTextField.width = Card.W;
myTextField.height = Card.H/4;
addChild(myTextField);
However the TextField's content (the String "#2029" in the above screenshot) is not in the center of it.
I can not set _middle.autoSize = TextFieldAutoSize.CENTER because this changes the width of the border and breaks hitTestObject().
Is there another way to align the text in the middle please?
Set the align property of TextFormat.
format.align = TextFormatAlign.CENTER;
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.