Apps

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.

Coding

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;

Ext_text.load("messagetext.txt");

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 johnleestudio.com.

7 comments
Mark W. Kaelin
Mark W. Kaelin

The marquee tag is generally frowned upon as an element on a respectable Web site. But some times people insist on elements that just don't belong. How do you handle these situations? What is the worst design decision you have been forced to implement against your better judgment? Does it still exist? More importantly, can we go there and see it?

jmgarvin
jmgarvin

I've seen marquees used on web pages where people file tickets. It notifies people of outages and various other errata in a pretty clear way (although not my favorite)

Neon Samurai
Neon Samurai

I thought the marquee died out around the same time but where appropriate, it's still usefully. I'd be more inclined to use an animaged GIF with it being the same degree of trouble and supporting non-flash also. I'm not doing site content these days though so I don't have the same deadlines to stick within.

Justin James
Justin James

By staying on top of things like Jakob Neilsen's Alertbox (www.alertbox.com), I have a ready source of *facts* (not opinions) that I can show the requester as to why these kinds of things are a bad idea. When you can frame it as, "I know you think this looks neat, but I have a pile of scientific research that shows that this can drive down sales by 10%", people quickly come around. As a result, I have never had to implement a Web page design that I felt uncomfortable with in terms of its look/feel. :) J.Ja

Neon Samurai
Neon Samurai

I thought it was going to be one of the negative example websites that uses a horrid background and every latest fancy thing like the age old blink tag. This one is going strait into the usability bookmarks and on to the guy that does content.

Neon Samurai
Neon Samurai

It's interesting to see the research then realize that you read the site the same way. I can think of many sites I've scanned in the same pattern and vaguely remember when sites started using the title and left menu with body bellow and beside. Ah.. when page includes where new too me.

Justin James
Justin James

I'm glad that was useful to you! What I really like about him is that he uses truly scientific studies, and drives conclusions from those, which makes it really difficult to disagree. The best piece on there (from a few months ago) is the eyetracking "heat map", it shows in an "infrared view" where the user's eyes spent the most time looking at the page. While it did not revolutionize my understanding of Web design (I've been reading this stuff for nearly 10 years now, so there it shaped my thinking on the topic for a while), it illuminates the points I try to make in a way that anyone can understand. The #1 sign of a Web redesign in trouble is incessant arguing over the home page. What happens is that there is this beleif that the home page gets designed first, and the rest of the site follows. The reality that the heat map shows is that the user's eye almost never gets anywhere near the part of the home page that people aregue about. It heads right for the navigation, looking to get off of the home page as quickly as possible, which makes perfect sense when you think about it. When people bicker over the home page, most of the time budget gets wasted, and then the rest of the projets gets hurried. If the project starts with a good template (which typically is a zero arguement affair), and a good site map of content has been prepared in advance, the rest comes natually. J.Ja

Editor's Picks