Scrolling Text from ImageReady

Using an animated GIF, you can create scrolling text that can be viewed in any Web browser, without a plug-in. And it’s as easy as copying layers and editing a type block.

Start with a new document. Use the pixel size you want for the scrolling text box on your Web page. Make it RGB, fill it with white or your background color. Add a pattern or other background content. We’ll keep it simple.

Select the Type tool from the Toolbox. In the Options Bar, choose your font, size, color, and other options. Remember that sans serif fonts, such as Arial, look better in a Web browser than more complex fonts, such as Times.

Drag the tool to create a rectangular text container. Using a text box (“area type”) rather than simply clicking the Type tool (“point type”) creates a text column. When your typing hits the edge of the box, a new line will start automatically – there’s no need to hit the Return/Enter key at the end of each line. And if you re-size the bounding box, the type automatically re-flows to match the new dimensions.

Type your message. Make sure that it runs longer than the height of your image, just so you have something to scroll.
TIP: In the Character palette menu, select the option No Breaks to prevent hyphenation.

When you type more content than fits in the type container, there will be a little symbol at the bottom of the bounding box. You can keep typing – even if it doesn’t show in the bounding box, the type is still being added. If you want to see the type, you can reposition the box in the window and drag the bottom of the bounding box downward to expand it.

Don’t get too carried away. If you try to write a scrolling book, you’re going to have a very large GIF file. Once the message is complete, move to the beginning of your text and add a bunch of returns, pushing the top line downward to the bottom of the image window. (The text isn’t being replaced, just moved downward in the bounding box.)

Now it’s time to make the layers that will serve as the frames of the animation:
• Drag the type layer to the New Layer button at the bottom of the Layers Palette. This creates a duplicate. Click the eyeball icon to hide the original type layer.

• With the duplicate type layer active, position the Type tool just before the first word of your message and hit the Delete/Backspace key. That removes on of the extra Returns from above the type and moves the text up one line.

Repeat these steps, duplicating the most recent type layer, hiding the previous, moving the text up one line. After several repetitions, your Layers Palette should look something like this:

When your first test line reaches the top of the bounding box, continue making new layers, but delete an entire line of text from the top. Continue until you reach the end of the text. You can keep deleting lines from the top of the type container until your message “scrolls” right off the top of the image.

When you’ve got your layers copied and edited, jump to ImageReady. In ImageReady, you’ll be working with the Layers Palette and the Animation palette.

The process is this:

• Hide all the type layers, leaving just your background visible.

• Click the New Frame button in the Animation palette.

• Make the bottom type layer visible.

• Click the New Frame button.

• Hide the bottom type layer, make the next type layer visible.

• Click the New Frame button.

• Hide the current type layer, make the next higher type layer visible.

Continue until you have a frame for every type layer. Each frame should show only one type layer.

In the Animations palette menu, choose Optimize Animation and check the boxes for both Bounding Box and Redundant Pixel Removal.

From the Animation palette menu, choose Select All Frames. At the bottom of the Animation palette, click on the Timing pop-up menu and select something reasonable for your message frames. This is the delay between frames. Too short and no one can read the message as it flashes by; too long and the “scroll” becomes too jerky.

Test the speed by clicking the Play button. For narrow messages, just a word or a couple of words per line, consider using the Other option and 0.3 or 0.4 seconds per frame. Use the menu command File> Save Optimized As. Select a name and location and save the image.

TIPS:

• You can change the delay on an individual frame to make it hold on screen longer.

• Try duplicating a frame a couple of times and adding frames between with only the background showing. That makes the frame flash on and off.