Flash CS3: Made-To-Order Text

CATEGORIES: Flash, Tutorials | Lee Brimelow | July 24, 2008

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.

Share This

Visitor Comments »

Excellent tutorial.

Comment by Mick | July 29, 2008 @ 12:57 pm

I have checked and double checked the script but I can not get it to work. The box containing the text just flashes rapidly on and off.

Comment by Mark | July 31, 2008 @ 3:03 pm

worked a treat thanks a lot

Comment by greg | August 5, 2008 @ 6:44 am

nice, but how to give gap between paragraph?

Comment by Maclan | August 12, 2008 @ 6:34 am

I’m new to Flash, and your tutorial worked like a charm! Thank you. It was the first time I was able to trouble shoot through the error log. The screen just blinked off and on rapidly when I played it and an error message popped up saying something about an extra bracket at the end. Once I deleted the extra bracket, the text appeared, a beautiful site.

Comment by Patricia Wiskur | October 17, 2008 @ 2:17 pm

Great tutorial, i’m also new on flash. Thanks

Comment by Marcos | November 7, 2008 @ 12:21 pm

Mark :

Mine did the same at first. Make sure

var tf:TextFormat = new TextFormat(”Myriad Pro”, 12);

see the :

Make sure its not a =

Thats where I messed up at least.

Comment by jason | November 30, 2008 @ 4:21 pm

u u can use — \n — wherever u require line break

Comment by Bhavesh | December 11, 2008 @ 1:01 am

I am new to flash and in part 8 it says you can format the color of the font. What is the code to format the color?

Comment by Robert | December 14, 2008 @ 12:08 am

That’s really simple.
I try to do the same thing with a radiobutton, but that don”t work.

Comment by David | December 17, 2008 @ 3:16 pm

the actionscript from my attempt
having the blinking problem that maclan had on testmovie
what do I need to remove?

import fl.events.*;

ta.text = “ipsom lori petty tank girl ipsom lori petty tank girl”

var tf:TextFormat = new TextFormat(”Myriad Pro”, 12);

slyda.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);

function slydaChange(e:SliderEvent)void
{
tf.size = slyda.value;
ta.setStyle(”textFormat”, tf);
ns.value = e.value;
}

ns.addEventListener(Event.CHANGE, nsChange);

function nsChange(e:Event):void
{
tf.size = ns.value;
ta.setStyle(”textformat”, tf);
slyda.value = ns.value;
}

Comment by Johnny | January 15, 2009 @ 8:57 am

I have notice a flaw.
Regardless of what point size I set in the ‘var’ line or the component, it always defaults to 12 point. Not good if you want the text tp 18 point.
Try it and see if it just me
Regards

Comment by rl | January 18, 2009 @ 9:21 am

Thanks for this great tutorial!
Now need help for the following….

1) What is coding for positioning the textarea vertical scrollbar to the left side.

2) What is coding for transparent textarea background.

3) What is coding for textarea font color.

4) What is coding for textarea content to be justified.

Looking forward to your help!

Comment by Pierre Hardy | February 23, 2009 @ 12:11 pm

I have the same blinking issue as the others above. I’ve tried their fixes, but it’s not working. These are my error messages:

1095: Syntax error: A string literal must be terminated before the line break.

Comment by DMA | March 13, 2009 @ 8:17 am

Hi,

I managed to get this working (on PC).
But… the correct font did not appear before i changed the size via the slider or the number stepper.
Can anyone explain??

——————-

import fl.events.*;

//S1_Frame.text = “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet lacus sit amet erat. Curabitur dictum. Sed ac tellus. Pellentesque tristique lacus at metus. Vivamus id dolor. Integer sem mi, iaculis congue, egestas vulputate, imperdiet non, felis. Nam interdum est id dolor. Nam nibh mauris, ultricies laoreet, pretium nec, luctus non, risus. Etiam vulputate interdum ligula. Vestibulum est orci, dignissim et, euismod nec, varius a, augue. Quisque diam leo, aliquet quis, dignissim quis, congue et, metus. Proin dignissim nibh at ipsum. Pellentesque non orci venenatis ipsum fermentum cursus. Praesent egestas sollicitudin quam. Praesent dictum, mi tincidunt feugiat ornare, lorem nulla auctor nisl, sit amet varius tellus sapien sed augue. “;

var s:Sprite = new Sprite();

var ta:TextArea = new TextArea();
//ta.text = “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet lacus sit amet erat. Curabitur dictum. Sed ac tellus. Pellentesque tristique lacus at metus. Vivamus id dolor. Integer sem mi, iaculis congue, egestas vulputate, imperdiet non, felis. Nam interdum est id dolor. Nam nibh mauris, ultricies laoreet, pretium nec, luctus non, risus. Etiam vulputate interdum ligula. Vestibulum est orci, dignissim et, euismod nec, varius a, augue. Quisque diam leo, aliquet quis, dignissim quis, congue et, metus. Proin dignissim nibh at ipsum. Pellentesque non orci venenatis ipsum fermentum cursus. Praesent egestas sollicitudin quam. Praesent dictum, mi tincidunt feugiat ornare, lorem nulla auctor nisl, sit amet varius tellus sapien sed augue. “;
ta.x=34;
ta.y=21;
ta.width = 486;
ta.height = 340;

ta.appendText(”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet lacus sit amet erat. Curabitur dictum. Sed ac tellus. Pellentesque tristique lacus at metus. Vivamus id dolor. Integer sem mi, iaculis congue, egestas vulputate, imperdiet non, felis. Nam interdum est id dolor. Nam nibh mauris, ultricies laoreet, pretium nec, luctus non, risus. Etiam vulputate interdum ligula. Vestibulum est orci, dignissim et, euismod nec, varius a, augue. Quisque diam leo, aliquet quis, dignissim quis, congue et, metus. Proin dignissim nibh at ipsum. Pellentesque non orci venenatis ipsum fermentum cursus. Praesent egestas sollicitudin quam. Praesent dictum, mi tincidunt feugiat ornare, lorem nulla auctor nisl, sit amet varius tellus sapien sed augue. “);

var tf:TextFormat = new TextFormat(”Wingdings”, 12);
tf.size = 12;

MySlider.maximum = 100;
MySlider.minimum = 12;
MySlider.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);
function slydaChange(e:SliderEvent):void
{
tf.size = MySlider.value;
ta.setStyle(”textFormat”, tf);
NumberStepper.value = e.value;
}

NumberStepper.addEventListener(Event.CHANGE, nsChange);
NumberStepper.maximum = 100;
NumberStepper.minimum = 12;
function nsChange(e:Event):void
{
tf.size = NumberStepper.value;
ta.setStyle(”textformat”, tf);
MySlider.value = NumberStepper.value;
}

stop();

Comment by pinquingiraf | March 21, 2009 @ 7:47 pm

Sorry about all the Lorem ipsum

This is better i think

————

import fl.events.*;

var s:Sprite = new Sprite();

var ta:TextArea = new TextArea();
ta.x=34;
ta.y=21;
ta.width = 486;
ta.height = 340;

ta.appendText(”Lorem ipsum skipsome..”);

var tf:TextFormat = new TextFormat(”Wingdings”, 12);
tf.size = 12;

MySlider.maximum = 100;
MySlider.minimum = 12;
MySlider.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);
function slydaChange(e:SliderEvent):void
{
tf.size = MySlider.value;
ta.setStyle(”textFormat”, tf);
NumberStepper.value = e.value;
}

NumberStepper.addEventListener(Event.CHANGE, nsChange);
NumberStepper.maximum = 100;
NumberStepper.minimum = 12;
function nsChange(e:Event):void
{
tf.size = NumberStepper.value;
ta.setStyle(”textformat”, tf);
MySlider.value = NumberStepper.value;
}

stop();

Comment by pinquingiraf | March 21, 2009 @ 7:51 pm

Forgot the addChild statement.
Still doesnt work.

——

import fl.events.*;

var s:Sprite = new Sprite();

var ta:TextArea = new TextArea();
ta.x=34;
ta.y=21;
ta.width = 486;
ta.height = 340;

ta.appendText(”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet lacus sit amet erat. Curabitur dictum. Sed ac tellus. Pellentesque tristique lacus at metus. Vivamus id dolor. Integer sem mi, iaculis congue, egestas vulputate, imperdiet non, felis. Nam interdum est id dolor. Nam nibh mauris, ultricies laoreet, pretium nec, luctus non, risus. Etiam vulputate interdum ligula. Vestibulum est orci, dignissim et, euismod nec, varius a, augue. Quisque diam leo, aliquet quis, dignissim quis, congue et, metus. Proin dignissim nibh at ipsum. Pellentesque non orci venenatis ipsum fermentum cursus. Praesent egestas sollicitudin quam. Praesent dictum, mi tincidunt feugiat ornare, lorem nulla auctor nisl, sit amet varius tellus sapien sed augue. “);

var tf:TextFormat = new TextFormat(”Wingdings”, 12);
tf.size = 22;
ta.setStyle(”textformat”, tf);
this.addChild(ta);

MySlider.maximum = 100;
MySlider.minimum = 12;
MySlider.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);
function slydaChange(e:SliderEvent):void
{
tf.size = MySlider.value;
ta.setStyle(”textFormat”, tf);
NumberStepper.value = e.value;
}

NumberStepper.addEventListener(Event.CHANGE, nsChange);
NumberStepper.maximum = 100;
NumberStepper.minimum = 12;
function nsChange(e:Event):void
{
tf.size = NumberStepper.value;
ta.setStyle(”textformat”, tf);
MySlider.value = NumberStepper.value;
}

stop();

Comment by pinquingiraf | March 21, 2009 @ 8:13 pm

After a little messing around i got something that, at least works on a PC.

After discovering that the font type changes on the slider change event. I tried to create a slider event manually on runtime.
It worked! but the font size did not change accordingly.
So i tried to call it assyncronously via setTimeout.
And it worked… Butifully.. erhmm

Im used to ASP.Net which is a sickening technology.
So i thought i would try to look at Flash + Flex and some other alternatives to extend my skillset.
And i think that Flash as a proven technology has an advantage over MS’s upcoming Silverlight.

I think i can make a class that hides the below hackish approach.
But..Hello Adobeee
——————

import fl.events.*;

var s:Sprite = new Sprite();

var ta:TextArea = new TextArea();
ta.x=34;
ta.y=21;
ta.width = 486;
ta.height = 340;

ta.appendText(”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet lacus sit amet erat. Curabitur dictum. Sed ac tellus. Pellentesque tristique lacus at metus. Vivamus id dolor. Integer sem mi, iaculis congue, egestas vulputate, imperdiet non, felis. Nam interdum est id dolor. Nam nibh mauris, ultricies laoreet, pretium nec, luctus non, risus. Etiam vulputate interdum ligula. Vestibulum est orci, dignissim et, euismod nec, varius a, augue. Quisque diam leo, aliquet quis, dignissim quis, congue et, metus. Proin dignissim nibh at ipsum. Pellentesque non orci venenatis ipsum fermentum cursus. Praesent egestas sollicitudin quam. Praesent dictum, mi tincidunt feugiat ornare, lorem nulla auctor nisl, sit amet varius tellus sapien sed augue. “);

var tf:TextFormat = new TextFormat(”Wingdings”, 12);
MySlider.value = 52;
this.addChild(ta);

MySlider.maximum = 100;
MySlider.minimum = 12;

setTimeout(function(){slydaChange(new SliderEvent(”Slider”, 0, “MySlider”, “SliderEvent”))}, 0);
MySlider.value = 33;

MySlider.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);

function slydaChange(e:SliderEvent):void
{
tf.size = MySlider.value;
ta.setStyle(”textFormat”, tf);
NumberStepper.value = e.value;
}
NumberStepper.addEventListener(Event.CHANGE, nsChange);
NumberStepper.maximum = 100;
NumberStepper.minimum = 12;
function nsChange(e:Event):void
{
tf.size = NumberStepper.value;
ta.setStyle(”textformat”, tf);
MySlider.value = NumberStepper.value;
}

stop();