Recipe 8.8. Resizing Dynamic or Input Text Fields

Problem

You want to resize a dynamic or input text field.

Solution

Use the Text tool to select the text field, and then drag the resize square found in the lower-right corner of the text field. Alternatively, use the Selection tool.

Optionally, you can use ActionScript to resize the text at runtime. Set the autoSize property of the text field to left, right,or center in order that it will automatically resize itself to accommodate the text value:

 tField.autoSize = "left"; 

Or, you can set the _height and _width properties of the text field to specify the dimensions in pixels:

 tField._height = 200; tField._width = 300; 

Discussion

Dynamic and input text fields differ from static text fields in several ways when it comes to resizing. When resizing a dynamic or input text field at authoring time, it differs from resizing static text in two ways:

• The Text tool resize square displays in the lower-right corner of the dynamic or input text field.

• You can resize dynamic or input text fields in both the horizontal and vertical directions.

In order to resize the text field at authoring time, select the text field using the Text tool. Then, click and drag the resize square to adjust the dimensions. Optionally, click and drag from any of the resize squares using the Selection tool.

Be careful about adjusting the width and height of a text field using the Property inspector. The actual effect depends on whether you are using device fonts or an embedded font with the text field. If you are using device fonts, the text will appear to scale in the authoring time preview, but it will appear in the normal font size during runtime with the bounding box resized. On the other hand, if you are embedding the font in the text field and you use the Property inspector to resize the field, the authoring time preview accurately indicates how the text will appear at runtime. The text will scale without necessarily maintaining the aspect ratio. The effect is that the text can appear squished or stretched.

If you use the Free Transform tool to change the dimensions of dynamic or input text, the authoring time preview will not accurately reflect the runtime effect if the text uses device fonts. The authoring time preview will display the text as being scaled without maintaining the aspect ratio. However, at runtime the text does maintain the aspect ratio such that the characters are scaled proportionately. The Free Transform tool has the same effect on dynamic and input text fields regardless of whether they used device fonts or embedded fonts.

Another way that dynamic and input text fields differ greatly from static text fields is that you can also use ActionScript to resize them at runtime. There are two different techniques for resizing a text field with ActionScript. To begin with, if you want a text field to automatically resize to accommodate whatever value is assigned or entered into it, you can set its autoSize property to left, right, or center:

 tField.autoSize = "left"; 

The text field's name (tField in the example code) is the name that you entered for the instance name in the Property inspector. The autoSize property values of left, right, and center each cause the text field to resize to fit the contents. The difference is in which direction the text field resizes. If you set the value to left, the upper-left corner of the text field remains fixed while the field resizes in to the right and downward. A value of right causes the text field's upper-right corner to stay fixed. And a value of center causes the text field's upper-center point to stay fixed.

If you set the text field to autosize, both the width and height may change to accommodate the text. If you assign a nonzero width to the text field when you create it, the autosize width will not surpass that width. However, if there is not enough text to warrant the width of the text field when it was created, it is possible that the text field will have a width that is less than the original. When you want to afford more control over how the field resizes, set the _height and _width properties to specific values:

 tField._height = 60; tField._width = 150; 

Setting the width and height values adjusts the bounding box of the text field and does not stretch the text itself.