Flash CS3: Made-To-Order Text

Flash CS3 comes with new user interface (UI) components that allow you to rapidly create applications. These ActionScript 3 components have a smaller file size than their predecessors and are much easier to style and skin. We'll show you how to create a simple component-based Flash application that allows the user to dynamically change the font size of a text area. Font size control is nice to have for accessibility purposes, in addition to just being cool to play with.

1. Set up your movie

Open Flash CS3 and from the Welcome screen, choose Flash File (ActionScript 3.0) to create a new movie. The newly improved UI components can be used only in ActionScript 3-based Flash projects. In the Property inspector, set the frame rate to 30 fps. You can leave the Size and Background color of the movie at their default values. Save the file somewhere on your hard drive as textSizer.fla.

2. Set up your layers

You'll only need two layers in this example. Rename the first layer "actions" and click on the Lock icon to lock it. This layer will hold all of the ActionScript code. It's considered good practice to lock this layer to prevent you from placing any visual assets on it. Click the Insert Layer icon to create a new layer above the actions layer, and rename it "components." This layer will hold all of the UI components in the movie.

3. Add the textarea component

Select the first frame of the components layer and choose Window>Components. In the Components panel, twirl down the User Interface folder to see a list of all the available UI components. Click on the TextArea component and drag it onto the Stage. In the Property inspector, set the Width to 515 and the Height to 340 (make sure the Width and Height aren't linked together by clicking on the Lock icon). Set the location to x: 17 and y: 18, and give it an Instance Name of "ta."

4. Add the slider component

The next component to add is a slider. In the Components panel, click-and-drag a Slider onto the Stage. In the Property inspector, give it a Width of 180. Set the location to x: 280 and y: 380, and give it an Instance Name of "slyda." With the component still selected, choose Window>Component Inspector and set the following values: Maximum: 100; Minimum: 5; and Value: 12.

5. Add the numericstepper component

The last component you'll need to add is a NumericStepper. This component allows you to adjust numeric values by either changing the number in the text field or by clicking on the up and down arrows. Drag out the component onto the Stage. In the Property inspector, set the Width of the component to 55. Set the location to x: 477 and y: 370, and give it an Instance Name of "ns." With the component still selected, return to the Component Inspector and set the following values: Maximum: 100; Minimum: 5; and Value: 12.

6. Import the component events

Now you'll start writing the ActionScript code needed to wire up the components. Select the first keyframe of the actions layer and press Option-F9 (PC: F9) to open the Actions panel. The first piece of code is an import statement to pull in some external ActionScript classes for handling the component events. Some classes are imported automatically by Flash and others will need to be imported manually. Enter the code as shown above.

7. Populate the textarea

The next step is to fill the TextArea component with some text. You can fill it with your own content but in our example, we'll fill it with "Lorem Ipsum" filler text. This type of text is used by designers when creating design comps. (You can generate Lorem Ipsum text at www.lipsum.com.) In the Actions panel, set the text property of the TextArea as shown above. Make sure to begin on Line 3, enter ta.text = ", paste your text, then add "; and press Return (PC: Enter).

8. Create a textformat object

To modify the text properties of the TextArea component, you need to create a new instance of the TextFormat class. This class allows you to modify things such as font family, style, and color. Enter the code as shown above into the Actions panel. We used Myriad Pro as the font but you can use whatever font you want. The font size of 12 matches the current values of both the Slider and NumericStepper components.

9. Listen to the slider

Whenever the slider changes its value, we need to respond and adjust the size of the text in the TextArea. The event you'll need to listen for is the thumb drag event. Enter the code as shown above into the Actions panel. The first line of the code sets up the event listener so that whenever the event happens, it will call the slydaChange function. The remaining code is the slydaChange function block.

10. Handle slider changes

Now that you've set up the slider's event listener, it's time to write the code that will modify the text size based on the current slider value. Enter the code shown above into the Actions panel. The first line sets the size of the TextFormat object equal to the value of the slider. To see the changes, you need to call the setStyle method of the TextArea and pass in the TextFormat object as shown in the second line of code. The last line of code sets the NumericStepper to the same value as the slider.

11. Listen to the numericstepper

The NumericStepper component will fire a change event whenever the value is changed in the embedded text box or if either of the arrow buttons are clicked. Add the code shown above into the Actions panel. The first line of code sets up the event listener so that it calls the nsChange function whenever the value changes. The remaining lines of code set up the nsChange function.

12. Handle numericstepper changes

Now you'll essentially be doing the same thing for the NumericStepper component as you did for the Slider component in Step 10. Enter the code shown above into the Actions panel. The first line sets the size of the TextFormat class to the current value of the stepper. The second line applies the modified TextFormat object to the TextArea to change the text size. The third line sets the value of the Slider equal to the current value of the stepper.

13. Test the application

Test the application by choosing Control>Test Movie to see the finished result. You should be able to drag the slider and see the text size dynamically change, as well as seeing the value in the NumericStepper change. Making changes to the NumericStepper should also cause the text size to change, and also change the position of the slider. You should now have a good understanding of how to use the rich component set in Flash CS3.