madasczik
asked on
Vertically Align Center Dynamic Text
How do I vertically align center the text in this menu ? http://dev.fusionapps.com/wboe/flash/right_nav/flashmenu.html
Here's the code so far:
data_var = new LoadVars();
data_var.path = this;
data_var.onLoad = function(ok)
{
if(ok){
this.path.menuGeneration(t his);
} else {
trace("CFM PAGE MISSING");
}
};
function menuGeneration()
{
var startY = 1, depth = 0;
var temp = data_var.cats.split("|");
var style1_fmt = new TextFormat("textFont", 13, 0x000000, false, false, false, "", "", "center");
var style2_fmt = new TextFormat("textFont", 10, 0x000000, false, false, false, "", "", "left");
for(var i = 0; i < temp.length; i++){
var mc = this.createEmptyMovieClip( "main" + depth, depth);
depth++;
mc.lineStyle(1, 0x912211, 100);
mc.beginFill(0xFF0000, 20);
mc.lineTo(198, 0); mc.lineTo(198, 18); mc.lineTo(0, 18); mc.lineTo(0, 0);
mc.endFill();
mc.createTextField("text_t xt", 1, 0, 0, 198, 18);
mc.text_txt.selectable = false;
mc.text_txt.embedFonts = true;
mc.text_txt.text = temp[i];
mc.text_txt.setTextFormat( style1_fmt );
mc._x = 1; mc._y = startY;
startY += mc._height + 3;
var subText = data_var["subcats" + i].split("|");
var subLink = data_var["urls" + i].split("|");
for(var j = 0; j < subText.length; j++){
var sc = this.createEmptyMovieClip( "sub" + depth, depth);
depth++;
sc.createTextField("text_t xt", 3, 0, 0, 198, 18);
sc.text_txt.multiline = true;
sc.text_txt.wordWrap = true;
sc.text_txt.autoSize = "left";
sc.text_txt.selectable = false;
sc.text_txt.embedFonts = true;
sc.text_txt.text = subText[j];
sc.text_txt.setTextFormat( style2_fmt );
var hgt = sc.text_txt._height + 1 > 18 ? sc.text_txt._height + 1 : 18;
sc.lineStyle(1, 0x912211, 100);
sc.lineTo(198, 0); sc.lineTo(198, hgt); sc.lineTo(0, hgt); sc.lineTo(0, 0);
sc._x = 1; sc._y = startY;
startY += sc._height + 3;
var lc = sc.createEmptyMovieClip("c lick_btn", 2);
lc._x = lc._y = 1;
lc.lineStyle(0, 0, 0);
lc.beginFill(0xEDD593, 100);
lc.lineTo(196, 0); lc.lineTo(196, hgt - 2); lc.lineTo(0, hgt - 2); lc.lineTo(0, 0);
lc.endFill(); lc._alpha = 0;
lc.link = subLink[j];
lc.onRollOut = lc.onDragOut = function() { this._alpha = 0; };
lc.onPress = lc.onDragOver = function() { this._alpha = 100; };
lc.onRelease = function() { this.getURL(this.link); };
}
}
delete data_var;
}
data_var.load("cats.cfm");
Here's the code so far:
data_var = new LoadVars();
data_var.path = this;
data_var.onLoad = function(ok)
{
if(ok){
this.path.menuGeneration(t
} else {
trace("CFM PAGE MISSING");
}
};
function menuGeneration()
{
var startY = 1, depth = 0;
var temp = data_var.cats.split("|");
var style1_fmt = new TextFormat("textFont", 13, 0x000000, false, false, false, "", "", "center");
var style2_fmt = new TextFormat("textFont", 10, 0x000000, false, false, false, "", "", "left");
for(var i = 0; i < temp.length; i++){
var mc = this.createEmptyMovieClip(
depth++;
mc.lineStyle(1, 0x912211, 100);
mc.beginFill(0xFF0000, 20);
mc.lineTo(198, 0); mc.lineTo(198, 18); mc.lineTo(0, 18); mc.lineTo(0, 0);
mc.endFill();
mc.createTextField("text_t
mc.text_txt.selectable = false;
mc.text_txt.embedFonts = true;
mc.text_txt.text = temp[i];
mc.text_txt.setTextFormat(
mc._x = 1; mc._y = startY;
startY += mc._height + 3;
var subText = data_var["subcats" + i].split("|");
var subLink = data_var["urls" + i].split("|");
for(var j = 0; j < subText.length; j++){
var sc = this.createEmptyMovieClip(
depth++;
sc.createTextField("text_t
sc.text_txt.multiline = true;
sc.text_txt.wordWrap = true;
sc.text_txt.autoSize = "left";
sc.text_txt.selectable = false;
sc.text_txt.embedFonts = true;
sc.text_txt.text = subText[j];
sc.text_txt.setTextFormat(
var hgt = sc.text_txt._height + 1 > 18 ? sc.text_txt._height + 1 : 18;
sc.lineStyle(1, 0x912211, 100);
sc.lineTo(198, 0); sc.lineTo(198, hgt); sc.lineTo(0, hgt); sc.lineTo(0, 0);
sc._x = 1; sc._y = startY;
startY += sc._height + 3;
var lc = sc.createEmptyMovieClip("c
lc._x = lc._y = 1;
lc.lineStyle(0, 0, 0);
lc.beginFill(0xEDD593, 100);
lc.lineTo(196, 0); lc.lineTo(196, hgt - 2); lc.lineTo(0, hgt - 2); lc.lineTo(0, 0);
lc.endFill(); lc._alpha = 0;
lc.link = subLink[j];
lc.onRollOut = lc.onDragOut = function() { this._alpha = 0; };
lc.onPress = lc.onDragOver = function() { this._alpha = 100; };
lc.onRelease = function() { this.getURL(this.link); };
}
}
delete data_var;
}
data_var.load("cats.cfm");
ASKER
that's not what I was looking for, sc.text_txt.autoSize = "center" is for horizontal alignment, and I can't select and center the text because the text boxes are created dynamically. I messed around with the positioning of the text fields in the code to get it the text exactly where I wanted. It was a real pain to get it just right, I guess what I want to do is find an easier way to do it. Ideally I would like to make the border and the text field the same size and position and have some code that determines the height of the text in pixels and adjusts the variables I changed automatically so I don't need to spend so much time when I change the font.
Here's the changes I made:
data_var = new LoadVars();
data_var.path = this;
data_var.onLoad = function(ok)
{
if(ok){
this.path.menuGeneration(t his);
} else {
trace("CFM PAGE MISSING");
}
};
function menuGeneration()
{
var startY = 1, depth = 0;
var temp = data_var.cats.split("|");
//new TextFormat([font, [size, [color, [bold, [italic, [underline, [url, [target, [align, [leftMargin, [rightMargin, [indent, [leading]]]]]]]]]]]]])
var style1_fmt = new TextFormat("textFont", 14, 0x000000, bold, false, false, "", "", "center");
var style2_fmt = new TextFormat("Verdana", 12, 0x000000, true, false, false, "", "", "left", "3", "5", "");
for(var i = 0; i < temp.length; i++){
var mc = this.createEmptyMovieClip( "main" + depth, depth);
depth++;
mc.lineStyle(1, 0x912211, 100);
mc.beginFill(0xEDD593, 100);
mc.lineTo(198, 0); mc.lineTo(198, 20); mc.lineTo(0, 20); mc.lineTo(0, 0);
mc.endFill();
mc.createTextField("text_t xt", 1, 0, 0, 198, 20); //name, depth, x, y, width, height
mc.text_txt.selectable = false;
mc.text_txt.embedFonts = true;
mc.text_txt.text = temp[i];
mc.text_txt.setTextFormat( style1_fmt );
mc._x = 1; mc._y = startY;
startY += mc._height + 4;
var subText = data_var["subcats" + i].split("|");
var subLink = data_var["urls" + i].split("|");
for(var j = 0; j < subText.length; j++){
var sc = this.createEmptyMovieClip( "sub" + depth, depth);
depth++;
sc.createTextField("text_t xt", 3, 0, 1, 198, 20); //name, depth, x, y, width, height
sc.text_txt.multiline = true;
sc.text_txt.wordWrap = true;
sc.text_txt.autoSize = "left";
sc.text_txt.selectable = false;
sc.text_txt.embedFonts = false;
sc.text_txt.text = subText[j];
sc.text_txt.setTextFormat( style2_fmt );
var hgt = sc.text_txt._height + 2 > 20 ? sc.text_txt._height + 2 : 20;
sc.lineStyle(1, 0x912211, 100);
sc.lineTo(198, 0); sc.lineTo(198, hgt); sc.lineTo(0, hgt); sc.lineTo(0, 0);
sc._x = 1; sc._y = startY;
startY += sc._height + 4;
var lc = sc.createEmptyMovieClip("c lick_btn", 2);
lc._x = lc._y = 1;
lc.lineStyle(0, 0, 0);
lc.beginFill(0xEDD593, 100);
lc.lineTo(197, 0); lc.lineTo(197, hgt - 1); lc.lineTo(0, hgt - 1); lc.lineTo(0, 0);
lc.endFill(); lc._alpha = 0;
lc.link = subLink[j];
lc.onRollOver = function() { this._alpha = 100; };
lc.onRollOut = lc.onDragOut = function() { this._alpha = 0; };
lc.onPress = lc.onDragOver = function() { this._alpha = 100; };
lc.onRelease = function() { this.getURL(this.link); };
}
}
delete data_var;
}
data_var.load("cats.cfm");
Here's the changes I made:
data_var = new LoadVars();
data_var.path = this;
data_var.onLoad = function(ok)
{
if(ok){
this.path.menuGeneration(t
} else {
trace("CFM PAGE MISSING");
}
};
function menuGeneration()
{
var startY = 1, depth = 0;
var temp = data_var.cats.split("|");
//new TextFormat([font, [size, [color, [bold, [italic, [underline, [url, [target, [align, [leftMargin, [rightMargin, [indent, [leading]]]]]]]]]]]]])
var style1_fmt = new TextFormat("textFont", 14, 0x000000, bold, false, false, "", "", "center");
var style2_fmt = new TextFormat("Verdana", 12, 0x000000, true, false, false, "", "", "left", "3", "5", "");
for(var i = 0; i < temp.length; i++){
var mc = this.createEmptyMovieClip(
depth++;
mc.lineStyle(1, 0x912211, 100);
mc.beginFill(0xEDD593, 100);
mc.lineTo(198, 0); mc.lineTo(198, 20); mc.lineTo(0, 20); mc.lineTo(0, 0);
mc.endFill();
mc.createTextField("text_t
mc.text_txt.selectable = false;
mc.text_txt.embedFonts = true;
mc.text_txt.text = temp[i];
mc.text_txt.setTextFormat(
mc._x = 1; mc._y = startY;
startY += mc._height + 4;
var subText = data_var["subcats" + i].split("|");
var subLink = data_var["urls" + i].split("|");
for(var j = 0; j < subText.length; j++){
var sc = this.createEmptyMovieClip(
depth++;
sc.createTextField("text_t
sc.text_txt.multiline = true;
sc.text_txt.wordWrap = true;
sc.text_txt.autoSize = "left";
sc.text_txt.selectable = false;
sc.text_txt.embedFonts = false;
sc.text_txt.text = subText[j];
sc.text_txt.setTextFormat(
var hgt = sc.text_txt._height + 2 > 20 ? sc.text_txt._height + 2 : 20;
sc.lineStyle(1, 0x912211, 100);
sc.lineTo(198, 0); sc.lineTo(198, hgt); sc.lineTo(0, hgt); sc.lineTo(0, 0);
sc._x = 1; sc._y = startY;
startY += sc._height + 4;
var lc = sc.createEmptyMovieClip("c
lc._x = lc._y = 1;
lc.lineStyle(0, 0, 0);
lc.beginFill(0xEDD593, 100);
lc.lineTo(197, 0); lc.lineTo(197, hgt - 1); lc.lineTo(0, hgt - 1); lc.lineTo(0, 0);
lc.endFill(); lc._alpha = 0;
lc.link = subLink[j];
lc.onRollOver = function() { this._alpha = 100; };
lc.onRollOut = lc.onDragOut = function() { this._alpha = 0; };
lc.onPress = lc.onDragOver = function() { this._alpha = 100; };
lc.onRelease = function() { this.getURL(this.link); };
}
}
delete data_var;
}
data_var.load("cats.cfm");
I don't understand the question. Do you want to center the text, or the buttons to dinamically resize to fit the font size?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
sc.text_txt.autoSize = "center" ?
I would just highlight the text and choose:
Text>Align>Center
or, select all text boxes and choose:
Modify>align>center vertically
Good luck,
j