# Flash CS5 for Designers: Using TLF Text as a Button

##### Tutorial Details
• Difficulty: Basix
• Program: Flash CS5
• Estimated Completion Time: 10 mins

It should come as no surprise that you can use TLF text as a button to kick off an event in your movie. For example, you could have a text block on the stage that talks about a visit to Times Square in New York, and when the user clicks the phrase Times Square, a photo appears on the stage. In this example, you are going to click some text, and a yellow star you will create on the stage starts spinning.

The following is an exercise from Foundation Flash CS5 For Designers by Tom Green & Tiago Dias.

## Step 1: New Document

Open a new Flash ActionScript 3.0 document, and save it as TLF_eventLink_AS.fla. Change the name of Layer 1 to Star, and add a new layer named actions.

## Step 2: Select Polystar Tool

Click once in the first frame of the Star layer. Click and hold on the Rectangle tool on your toolbar, and select the Polystar tool.

## Step 3: Mellow Yellow

In the Properties panel, twirl down the Fill and Stroke properties and set the Stroke value to None and the Fill value to Yellow (#FFFF00).

## Step 4: Star

Twirl down the Tool Settings, and click the Options button to open the Tool Settings dialog box shown in Figure 6-26. Select Star from the Style drop-down, and enter 5 for the Number of Sides. Click OK to close the dialog box.

Use the PolyStar tool to create stars.

## Step 5: MovieClip

Draw a star somewhere in the bottom half of the stage, convert it to a movie clip named Star, set its registration point to Center, and in the Properties panel give the Star movie clip the Instance name of starMC.

## Step 6: Actions

Click the first frame of the actions layers, and open the Actions panel. When the panel opens, click once in the Script pane, and enter the following code block:

var containerSprite:Sprite = new Sprite();
containerSprite.x  = 25
containerSprite.y = 50;


A Sprite is a virtual movie clip with no timeline. We start by creating a Sprite named containerSprite, which will be used to hold the text. The reason we need this is because there is going to be some interactivity involved. This Sprite is placed 25 pixels from the left edge of the stage and 50 pixels from the top.

## Step 7: Configuration()

Press the Enter (Windows) or Return (Mac) key twice, and enter the following code:

var container :ContainerController = new ContainerController( containerSprite, 400, 300);</p>var config :Configuration = new Configuration();
var charFormat:TextLayoutFormat= new TextLayoutFormat();
charFormat.fontFamily= "Arial, Helvetica,_sans";
charFormat.fontSize = 14;
charFormat.color = 0X000000;
charFormat.textAlign = TextAlign.LEFT;
config.textFlowInitialFormat = charFormat;


Nothing new here. The container for the text is created along with the Configuration() object, and the formatting for the text to be placed in the container is created.

Press the Enter (Windows) or Return (Mac) key twice, and enter the following:

var textFlow :TextFlow = new TextFlow();
var p :ParagraphElement  = new ParagraphElement();


The last two lines are new, and their purpose is to let you change the color of a word or group of words when the user rolls over them. The linkHoverFormat property belongs to the TextFormat class and is used to tell Flash what color the text identified as a link will be when the mouse rolls over it. In this case, the color will change to Red.

As you may have guessed, the second line tells Flash what color the link is to be when the mouse rolls off. In this case, it will be blue. Naturally, links are traditionally underlined. The way the underline is removed is to use the NONE constant, which is part of the TextDecoration class. If you want the underline, it would be TextDecoration.UNDERLINE.

The next step in the process is to tell Flash what to do when the colored text is clicked.

## Step 9: Click

Press the Enter (Windows) or Return (Mac) key twice, and enter the following:

var link:LinkElement = new LinkElement();


There is, of course, nothing to click. Let’s deal with that issue.

## Step 10: Span

Press the Enter (Windows) or Return (Mac) key a couple of times, and add the following:

var linkSpan:SpanElement = new SpanElement();

var span:SpanElement = new SpanElement();
span.text = " to see your star spin on the stage";


The next step is to get the text flowing into the container.

## Step 11: Spin

Press the Enter (Windows) or Return (Mac) key, and add the following:

textFlow.addChild(p);
textFlow.flowComposer.updateAllControllers();


The final code bit is the function that gets the star spinning when the text is clicked. Enter the following:

function linkClicked(evt:FlowElementMouseEvent) :void{
evt.preventDefault();
var tween :Tween = new Tween( starMC, "rotation", Elastic.easeOut, 0, 180, 2, true);
}


The first line of code tells Flash to ignore any default settings there might be in regards to the mouse and the text in the container.

The magic happens in that second line. The parameters tell the Tween class to work with the rotation property of the star (starMC) and to apply an easeOut to the star when it finishes rotating. Naturally, Flash, being stupid, needs to be told that the rotation starts with the star at 0 degrees and to rotate across 180 degrees. It does this two times and uses seconds as the measure of time.

## Step 12: Error Checking

Click the Check Syntax button as your first skim through the code looking for errors. If there are none, your computer will ding. If errors are found, they will be shown in the Compiler panel. The most common error will be spelling or a missing import statement.

Here’s a quick tip. If a class doesn’t show up as an import, the Compiler panel will tell you the property is undefined. Select the class in the code where it appears, and delete the text. Type in the first two letters of the class, and press Ctrl+spacebar. The class will appear in the resulting code hint. Double-click the class to add it back into the code. This also creates the missing import statement.

## Step 13: Save and Test the Movie

The text is colored. When you click the mouse, the star spins. A completed version of this file is included with the source download.

### Import Statements for This Exercise

These are the import statements for this exercise:

import flash.display.Sprite;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.Configuration;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.events.FlowElementMouseEvent;
import fl.transitions.Tween;
import flashx.textLayout.formats.TextDecoration;
import fl.transitions.easing.Elastic;
import flashx.textLayout.formats.TextAlign;


Enjoyed this? Want more? You can always purchase a copy from FriendsOfEd

Tags: BasixTips
• Dylan Roberts

This is a Really Amazing Concept, I might be able to use this Soon
Nice Tut Tom!

• john

It seems that the example provided does not apply the text formatting to the text displayed, so nothing very interesting happens to the font that is displayed. The face of the font is the default font regardless of the changes made to the code (as with size and face, for example). The star works, however, but it would work anyway, with only an event handler applied. To be interesting, this example needs to actually apply the font changes to the font displayed. Maybe I am missing something, however, and I haven’t studied the example enough to say just what is needed to make the program work as, ostensibly, it is said to work. Why go to all this trouble to achieve what can be achieved with five lines of code? (Or perhaps eight if the TextField object is instantiated with code rather than created with the Flash toolbar.) My guess is that the example was not tested, or a few lines were left out by accident. Due to the code that has been left out, then, a developer can achieve the same effect by creating a text object (clickTxt), converting it to a symbol, and simply adding an event handler. Using this approach, of course, the font can be readily formatted and placed in a container if the developer so chooses. Here is the code needed for this approach–all with the default packages of the standard installation of Flash Professional:

//Create a text object and name it clickTxt
//Convert it to a symbol

//Define listener using Tween
{
var tween:Tween = new Tween(starMC, “rotation”, Elastic.easeOut,0,180,2,true);
}

Can the code sample be modified so that the code placed in the container is actually affected by all the formatting work done up front? Otherwise, aside from a helpful introduction to the packages and the classes that might be used for such work, the practical value of the exercise is undermined. (By the way, I own the book mentioned at the bottom and have found several helpful passages in it.)

Respectfully,

• Arapchoge

After all the work I did copying code, it didn’t work. All work submitted for publication should be checked for integrity.

• http://michaeljameswilliams.com/ Michael James Williams

Sorry, guys. Because this is a section taken straight from a book, we didn’t do our usual editing checks – sloppy of us! Does the second part help?