The Best Structure for your Flash Site - Page 6

target_mc._y = Math.round( yPosition );

yPosition += buttonImgHeight+3;

We move our button's vertical position (y position) down by 3 pixels each time we create a new button.

target_mc.createTextField( "buttonText", nCounter, 0, 0, buttonImgWidth, buttonImgHeight );

This creates a new, empty text field within our button movie clip. The createTextField() method takes 6 parameters:

createTextField(instanceName:String, depth:Number, x:Number, y:Number, width:Number, height:Number);

Now that we have created a new text field (buttonText), we're going to assign it a few properties.

target_mc.buttonText.border = false;

target_mc.buttonText.selectable = false;

target_mc.buttonText.wordWrap = true;

The border property for our text field is currently set to false; however, during development I often set this to true, as it makes positioning things a little easier. In addition, we want our text to wrap, but we don't want it to be selectable.

target_mc.buttonText.styleSheet = my_css;

This line assigns our CSS style, which we imported already. Notice the next line:

target_mc.buttonText.htmlText = "<.buttonStyle>"+ astrText[nCounter] +"</.buttonStyle>";

Here, you can see how to implement our CSS style. Recall that .buttonStyle is defined in our external CSS file. Also notice that we're using the htmlText property -- not just text.

target_mc.buttonText.filters = filterArray;

This line assigns our filter to the text field. Recall that we created a drop shadow filter back in frame 1. If you don't have Flash 8, you won't be using any filters.

These next few lines of code are pretty cool; they come in very handy when trying to align text vertically.

target_mc.buttonText.autoSize = true;

var nMiddle:Number = ( buttonImgHeight/2 );

target_mc.buttonText._y = nMiddle - ( target_mc.buttonText._height/2 );

We first set the autoSize property of our text field to true. This allows the text field size to match the height and width of the text that's placed in it. Next, we find the middle of our button and store it in nMiddle. If we divide buttonImgHeight by 2, we should find the middle of our button. Now we can set the y position of our text field to be in the middle of our button. To do so, take nMiddle and subtract our text field's height divided by 2.

Now we've vertically aligned our text in our buttons dynamically.

1 | 2 | 3 | 4 | 5 | 6 | 7