Flash CS5 for Designers: Using TLF Text as a Button

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.

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();
this.addChild( containerSprite );
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.

Step 8: linkHoverFormat

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

var textFlow :TextFlow = new TextFlow();
var p  aragraphElement  = new ParagraphElement();
p.linkHoverFormat  = { color:0XFF0000 };
p.linkNormalFormat = { color:0x0000FF,textDecoration:TextDecoration.NONE };

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();
link.addEventListener(FlowElementMouseEvent.CLICK, linkClicked);

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();
linkSpan.text = "Click here" ;
link.addChild(linkSpan);

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

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.addController(container);
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.LinkElement;
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;