How do I... Use Flash animation to duplicate the marquee tag effect?

Most Web designers and developers are glad that the marquee tag is dead and buried. However, if you have a boss or a client that is insistent upon using the marquee tag in a Web site, you do have an option. John Lee shows you how to create the marquee tag effect using animation and a few lines of ActionScript in Flash CS3.

Most Web designers and developers are glad that the marquee tag is dead and buried. However, if you have a boss or a client that is insistent upon using the marquee tag in a Web site, you do have an option that allows for a lot more control in the looks and functionality of a line of scrolling text. CSS can't help us here unless you incorporate a rather knotty chunk of JavaScript, so I'll show you how to create the marquee tag effect using animation and a few lines of ActionScript in Flash CS3.

The <marquee> tag is one of the more infamous HTML tags. It was a tag that was never fully supported by the W3C. As the name implies, text enclosed by the marquee tag scrolled from right to left when displayed in a Web browser. It was only supported by earlier versions of Microsoft Internet Explorer and was incompatible with Netscape. However, IE7 will still display the tag, as will recent versions of Firefox and Safari.

This blog post is available in PDF form in a TechRepublic download, which includes a sample Flash file.

Creating a marquee

Let's start by opening Flash CS3, and creating a new Flash file that is ActionScript 2.0 compliant. Even though ActionScript 3.0 is the most recent version of the scripting language, for the purpose of keeping our scrolling text dynamic, ActionScript 2.0 is a little easier to work with. After creating your new file, the Flash work area should appear as in Figure A.

Figure A

The new Flash file is created

The first rule of digital media creation: Save your file before you do anything else. This makes it easier to simply hit Ctrl-S (or Command-S, for you Mac users) quickly between steps, which will keep you from losing hours of work if your computer crashes.

Next, in the toolbar on the far left, select the Text tool. Then go to the stage in the center of the screen and click and drag to draw a long text box that will represent the length of the scrolling marquee animation. Make the text box fairly long, as shown in Figure B.

Figure B

Drawing the text box on the stage that will hold the scrolling marquee text

Now we need to modify the properties of the text box. Not only will we be able to define the display font, font color, and font size of our scrolling text, but we will be using ActionScript to instruct the Flash file to call the text itself from an outside .txt file.

In the Properties palette at the bottom of the screen, give the following properties these corresponding attributes (refer to Figure C if you are unfamiliar with the Properties palette):

  1. Give the text box an Instance Name of marqueetext. An Instance Name allows our ActionScript to recognize the text box on the stage later.
  2. Select Arial for the font, and give it a size of 14 pixels and set the color of the font to red. Click the capital "B" to set the font to Bold style.
  3. In the Line Type pull-down menu, select Single Line. This keeps a long line of type from wrapping and ensures that all of the copy appears in the final animation.
  4. Next to the Line Type pull-down menu, click the Render as HTML button. This will ensure that any HTML markup in or dynamic text (such as <a href>, for example) will function properly once the final Flash animation appears on your Web page.

Figure C

The settings for the text box in the Properties palette

The Properties of the text box are set, but we need to modify the stage to fit the text box precisely. Otherwise, you'll have this skinny line of text on a large empty field when you embed the animation into your Webpage.

Go to the Toolbox and select the Selection (Arrow) tool at the very top. Click on the stage, away from the text box to deselect it. Go to the Properties palette at the bottom of the screen again and click on the Size button. A dialog box will appear (Figure D). Check the button marked "Match: Contents" and change the Frame Rate of the animation to 24 Frames Per Second to allow for a smoother animation effect. Click OK to return to the Stage.

Figure D

Changing the Document Properties
Returning to the stage, you will see that the stage fits the text box precisely. Now go to the Timeline at the top of the screen, and place your mouse in frame 300 (you'll have to scroll the timeline to the right a bit to find it) and right-click (or Ctrl-click if you are on a Mac) in the frame. In the menu that appears, select Insert Keyframe. Then Double-click the name of Layer 1 and change it to Text Box. Figure E shows how the Timeline should look after you make these changes.

Figure E

Adding a keyframe for animation and renaming Layer 1

While you are still in Keyframe 300, go back to the stage. Select the Text Box and click and drag it to the right, until the right edge of the text box is off of the stage, into the gray area. Then go back to the Timeline and select Keyframe 1. Select the text box again and click and drag it to the left, until the left edge of the text box is off of the stage.


Let's move on now to the ActionScript coding. Lock the Text Box layer and add a second layer to the Timeline and name it ActionScript. The timeline should appear as shown in Figure F.

Figure F

Locking the Text Box layer and adding a new Layer to hold ActionScript
Go now to the Window menu at the top of the screen and open the Actions Palette. Into the blank white text window on the right side of the Actions palette, copy and paste the code shown in Listing A.

Listing A

Ext_text = new LoadVars();

Ext_text.onLoad = addText;


function addText() {

marqueetext.htmlText = this.messagetext;


Note the third line of code: Ext_text.load("messagetext.txt"); This line makes a call to an external text (.txt) document which will feature the text that will scroll in the Flash animation. This will make it very easy for you to change the text message itself without ever having to alter the Flash file in the future. Let's create this text file now.

In a word processing program, open a new document and copy and paste the following text:

messagetext=The Quick Brown Fox Jumps Over the Lazy Dog.

Save the file with the name messagetext.txt, and save it in the same directory (folder) that you have saved your Flash file in. Failure to do so will cause the scrolling message in the Flash animation to simply read "undefined," so be careful about this.

Scrolling message

Finally, let's animate the scrolling message. In the timeline, lock the ActionScript layer and unlock the Text Box layer. [Ctrl]-[Right-click] inside keyframe 1 and then select Create Motion Tween. Save your file and then from the Control menu at the top of the screen, select the Test Movie option to preview your animation.

Feel free to experiment with this file. You can alter the speed and direction of the scroll, in addition to the colors of the stage background as well as the color, size and style of the font to match the style of your Website.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at