Trouble with positioning dynamic text for a menu

pixel_streamer · July 3, 2008, 6:55pm

I’ve got some simple code that I’m struggling with. Can someone point out what I’ve done incorrectly? I can’t position the text in the center of gradient_mc, and the trace reports that the gradient_mc is NOT 200 wide, like it should be.

What am I missing?

All that’s required is a linked font symbol in the library.

Thanks everyone

QUICK EDIT:
if I change the numbers in the creation of the textField and comment out the line for autosize, the height and width seem to be correct.
What if I can’t know the width of the text? Shouldn’t autosize do the trick?


gradient_mc.createTextField("myText", gradient_mc.getNextHighestDepth(), 0, 0, 200, 32);


var SW:Number = Stage.width;
var SH:Number = Stage.height;
var _gradientWidth:Number = 200;
var _gradientHeight:Number = 32;
//_textsize set to the approximate width of a letter
var _textsize:Number = 18;
this.createEmptyMovieClip("gradient_mc", this.getNextHighestDepth());

gradient_mc.createTextField("myText", gradient_mc.getNextHighestDepth(), 0, 0, 0, 0);
var myTextFormat:TextFormat = new TextFormat();
//TextField myText;
//TextFormat myTextFormat;
myTextFormat.font = "Artist_Choice";
myTextFormat.size = _textsize;
myTextFormat.color = 0xFFFFFF;
myTextFormat.align = "left";
gradient_mc.myText.autoSize = "left";
gradient_mc.myText.multiline = true;
gradient_mc.myText.border = "true";
gradient_mc.myText.embedFonts = true;
gradient_mc.myText.antiAliasType = "advanced";
gradient_mc.myText.gridFitType = "subpixel";
gradient_mc.myText.sharpness = 75;
gradient_mc.myText.thickness = -15;
gradient_mc.myText.text = "hey there";
gradient_mc.myText.setTextFormat(myTextFormat);
//
gradient_mc.myText._x = gradient_mc._width / 2;
gradient_mc.myText._y = gradient_mc._height / 2;
trace("gradient_mc.myText._x	" + gradient_mc.myText._x);
trace("gradient_mc.myText._y	" + gradient_mc.myText._y);
trace("gradient_mc._width	" + gradient_mc._width);
trace("gradient_mc._height	" + gradient_mc._height);
trace("gradient_mc.myText._width	" + gradient_mc.myText._width);
trace("gradient_mc.myText._height	" + gradient_mc.myText._height);
/*
gradient_mc.myText._x = (gradient_mc._width/2) - (gradient_mc.myText._width/2);
gradient_mc.myText._y = (gradient_mc._height/2) - (gradient_mc.myText._height/2);
*/
var fillType:String = "radial";
var colors:Array = [0x651178, 0x8888FF];
var alphas:Array = [100, 100];
var ratios:Array = [0, 0xFF];
var matrix:Object = {a:_gradientWidth, b:0, c:0, d:0, e:_gradientHeight, f:0, g:_gradientHeight, h:_gradientHeight, i:1};
var spreadMethod:String = "reflect";
var interpolationMethod:String = "linearRGB";
var focalPointRatio:Number = .95;
with (gradient_mc) {
    beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
    moveTo(0, 0);
    lineTo(_gradientWidth, 0);
    lineTo(_gradientWidth, _gradientHeight);
    lineTo(0, _gradientHeight);
    lineTo(0, 0);
    endFill();
}

randomagain · July 3, 2008, 9:02pm

you would have to count the characters to know roughly how width big the text was then move the text field thus

pixel_streamer · July 4, 2008, 5:06pm

So if I understand correctly, I’d have to write a function that parses the text string going into the textfield to an array (letter by letter), and then run a math function that creates a variable (lettercount) to store the answer of (lettercount*letterbyletter.length). That function would return the answer to my text display function. All that just to get a number that moves text a variable of _x?

Am I missing something fundamental?
That seems like really long way to center text of an unknown width. Isn’t there an automatic way?

What’s the width number to use as a base? 18 as _textsize?

The code below will allow for width changes, but the _y height is always wrong

I found a reference to TextField.getLineMetrics in the help files, but it doesn’t say how to use that method. Time for some more research, YEAH!


var SW:Number = Stage.width;
var SH:Number = Stage.height;
var _gradientWidth:Number = 125;
var _gradientHeight:Number = 32;
//_textsize set to the approximate width of a letter
var _textsize:Number = 18;
this.createEmptyMovieClip("gradient_mc", this.getNextHighestDepth());

gradient_mc.createTextField("myText", gradient_mc.getNextHighestDepth(), 0, 0,_gradientWidth, _gradientHeight);
var myTextFormat:TextFormat = new TextFormat();
//TextField myText;
//TextFormat myTextFormat;
myTextFormat.font = "Artist_Choice";
myTextFormat.size = _textsize;
myTextFormat.color = 0xFFFFFF;
**myTextFormat.align = "center";**
**//gradient_mc.myText.autoSize = "center";**
**gradient_mc.myText.multiline = true;**
gradient_mc.myText.embedFonts = true;
gradient_mc.myText.antiAliasType = "advanced";
gradient_mc.myText.gridFitType = "subpixel";
gradient_mc.myText.sharpness = 75;
gradient_mc.myText.thickness = -15;
gradient_mc.myText.text = "hey there";
gradient_mc.myText.setTextFormat(myTextFormat);
//
trace("gradient_mc.myText._x	" + gradient_mc.myText._x);
trace("gradient_mc.myText._y	" + gradient_mc.myText._y);
trace("gradient_mc._width	" + gradient_mc._width);
trace("gradient_mc._height	" + gradient_mc._height);
trace("gradient_mc.myText._width	" + gradient_mc.myText._width);
trace("gradient_mc.myText._height	" + gradient_mc.myText._height);

**gradient_mc.myText._x = (gradient_mc._width/2) - (gradient_mc.myText._width/2);
gradient_mc.myText._y = (gradient_mc._height/2) - (gradient_mc.myText._height/2);**

var fillType:String = "radial";
var colors:Array = [0x651178, 0x8888FF];
var alphas:Array = [100, 100];
var ratios:Array = [0, 0xFF];
var matrix:Object = {a:_gradientWidth, b:0, c:0, d:0, e:_gradientHeight, f:0, g:_gradientHeight, h:_gradientHeight, i:1};
var spreadMethod:String = "reflect";
var interpolationMethod:String = "linearRGB";
var focalPointRatio:Number = .95;
with (gradient_mc) {
    beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
    moveTo(0, 0);
    lineTo(_gradientWidth, 0);
    lineTo(_gradientWidth, _gradientHeight);
    lineTo(0, _gradientHeight);
    lineTo(0, 0);
    endFill();
}

pixel_streamer · July 6, 2008, 8:49am

I found some data on using text metrics, but what is being used in AS3 if getTextExtent is deprecated?

pixel_streamer · July 10, 2008, 3:50pm

Here’s the solution that I came up with for my problem, if anyone’s interested.
(Requires a font symbol linked in the library as “Artist_Choice”)

Again, what’s the alternative for getTextExtent in AS3, since it is deprecated? can someone post Examples, maybe a take-off on this one?


import flash.filters.*;
var SW:Number = Stage.width;
var SH:Number = Stage.height;
//
var filteralpha:Number = .8;
var filterangle:Number = 90;
var filterblurX:Number = 3;
var filterblurY:Number = 3;
var filtercolor:Number = 0x000000;
var filterdistance:Number = 3;
var filterhideObject:Boolean = false;
var filterinner:Boolean = false;
var filterknockout:Boolean = false;
var filterquality:Number = 1;
var filterstrength:Number = .5;
//
var filter:DropShadowFilter = new DropShadowFilter(filterdistance, filterangle, filtercolor, filteralpha, filterblurX, filterblurY, filterstrength, filterquality, filterinner, filterknockout, filterhideObject);
var filterArray:Array = new Array();
filterArray.push(filter);
//
var fillType:String = "radial";
var colors:Array = [0x651178, 0x8888FF];
var alphas:Array = [100, 100];
var ratios:Array = [0, 0xFF];
//
var _gradientWidth:Number = 100;
var _gradientHeight:Number = 32;
var _cRadius:Number = 16;
var _textColor:Number = 0xFFFFFF;
var _textsize:Number = 18;
var spreadMethod:String = "reflect";
var interpolationMethod:String = "linearRGB";
var focalPointRatio:Number = .95;
//
makeText = function ():Void {
    var myTextFormat = new TextFormat();
    //TextField myText;
    //TextFormat myTextFormat;
    myTextFormat.font = "Artist_Choice";
    myTextFormat.size = _textsize;
    myTextFormat.color = _textColor;
    myTextFormat.align = "center";
    var txtString = "hey there";
    var metrics:Object = new Object();
    metrics = myTextFormat.getTextExtent(txtString);
    trace("metrics.textFieldHeight"+" "+metrics.textFieldHeight);
    trace("metrics.textFieldWidth"+" "+metrics.textFieldWidth);
    gradient_mc.createEmptyMovieClip("txtHolder", gradient_mc.getNextHighestDepth());
    gradient_mc.txtHolder.createTextField("myText", gradient_mc.txtHolder.getNextHighestDepth(), 0, 0, metrics.textFieldWidth, metrics.textFieldHeight);
    with (gradient_mc.txtHolder.myText) {
        autoSize = "center";
        multiline = true;
        embedFonts = true;
        antiAliasType = "advanced";
        gridFitType = "subpixel";
        sharpness = 75;
        thickness = -15;
        text = txtString;
        setTextFormat(myTextFormat);
        filters = filterArray;
        //currently, the alpha, and erase blendmodes don't work with my textField
        //gradient_mc.txtHolder.blendMode = "overlay";
        //no longer need to center the text in the gradient button, as the autosize isn't working correctly.
        _x = (gradient_mc._width/2)-(gradient_mc.txtHolder.myText._width/2);
        _y = (gradient_mc._height/2)-(gradient_mc.txtHolder.myText._height/2);
    }
};

drawSquare = function (drawwidth:Number, drawheight:Number, cornerradius:Number):Void {
    this.createEmptyMovieClip("gradient_mc", this.getNextHighestDepth());
    trace("::	drawSquare started	::");
    trace("drawwidth:Number 	"+drawwidth);
    trace("drawheight:Number 	"+drawheight);
    trace("cornerradius:Number 	"+cornerradius);
    var _gradientWidth:Number = drawwidth;
    var _gradientHeight:Number = drawheight;
    with (gradient_mc) {
        beginGradientFill(fillType, colors, alphas, ratios, {a:_gradientWidth, b:0, c:0, d:0, e:_gradientHeight, f:0, g:_gradientHeight, h:_gradientHeight, i:1}, spreadMethod, interpolationMethod, focalPointRatio);
        moveTo(0, 0);
        lineTo(_gradientWidth, 0);
        lineTo(_gradientWidth, _gradientHeight);
        lineTo(0, _gradientHeight);
        lineTo(0, 0);
        endFill();
    }
    trace("::	drawSquare ended	::");
};
var dimensions:Array = [_gradientWidth, _gradientHeight, _cRadius];
//
drawSquare(dimensions[0], dimensions[1], dimensions[2]);
makeText();
stop();

glosrfc · July 10, 2008, 5:33pm

Deprecated since Flash Player 8. There is no replacement.

I believe that say’s it all. On the original topic, ._width should tell you how wide the text is within a textfield, but only once you’ve populated it with text. If you check the help files for the ._height property, you can find an example.

krilnon · July 10, 2008, 5:50pm

Again, what’s the alternative for getTextExtent in AS3, since it is deprecated?

“Use the properties of flash.text.TextField for the measurements of a field containing a line of text, and use flash.text.TextLineMetrics for the measurements of the content within the text field.”

http://livedocs.adobe.com/flex/3/langref/flash/text/TextLineMetrics.html

pixel_streamer · July 13, 2008, 6:45pm

Thanks for the helpful reply Krilnon!

Topic		Replies	Views
One last question re: Dynamic text fields flash	0	74	March 15, 2007
TxtField.width being assigned a large number flash	1	75	May 9, 2008
AS3: Centering dynamic text not working flash	0	260	March 16, 2010
MX - Dynamic Text Box Positioning flash	0	188	July 12, 2002
Position movie dynamically	0	45	March 29, 2005

Trouble with positioning dynamic text for a menu

Follow:

Popular

Loose Ends

Trouble with positioning dynamic text for a menu

Related topics

Follow:

Popular

Loose Ends