Banner Text

Ulead GIF Animator 5's Banner Text function is a great tool for creating animated banners for your website. The image below was created with 5 different Banner Text objects.

Animated Banner Text

To add banner text, select the frame where you want to add it. You can either use the Banner Text button banner text button from the Frame Panel, or from the main menu up top by clicking Frame, Add Banner Text... If you can remember keyboard shortcuts, Ctrl+Alt+B will also do it.

Banner Area

banner text dialogue box The banner area will always initially be the same size as your canvas size. However, you can change the dimensions of the banner area by clicking and dragging on the little square "nodes" along the borders. You will see a double-headed arrow when the cursor is in the right spot. Click and drag the node to move the border to where you want it.

Why change the border? Perhaps you want to have a logo on the left of your animation, and you want banner text on just the right side. In this case you would need to move the left border far enough to the right to keep from covering the logo.

As you can see from the animation to the right, you can move the position of the text itself, as well as the banner area (the area bordered by the nodes). This area is where the banner text is visible. Anywhere outside that border, the text will not appear.

Above where the banner text appears, you can see the coordinate info - the banner area, x-y axis, and the text coordinates. The first set of coordinates are the x-y coordinates of the text within the banner itself, the second set are the coordinates within the animation as a whole.

To the right of that area, a zoom in, zoom out, and "reset to 1:1" buttons. At the far right, the last button centers the text in the banner area.

The text you see in your banner area is what's in the "Key Frame" - the frame in between your Enter and Exit effects. So where it is positioned here is where it will be on that Key Frame.

Text Tab

The function of the Text tab is fairly obvious. Here's where you enter your text, select the font, and it's size and color. It's just the same as the regular text dialogue box. (See Text Tool for more information.) Turning the Neon effect on or off is done on the Neon tab (see below for more on the Neon tab).


Effect Tab

Banner Text box, Effect tabThis is where you select the effect or effects you want. How the text enters the scene, and how it exits the scene. The "scene," of course, is the area inside the banner area. There are several effects to choose from:

The Frames section below the Enter scene and Exit scene colums is the number of frames used to create the effect. The more frames, the smoother the effect, but a higher file size comes along with that.

Click the Start Preview button to view the effects you have selected. Once you are satisfied, click OK, or continue to the Frame Delay and/or Neon tabs. Clicking Cancel closes the Banner Text dialogue box.


Frame Control

Banner Text box, Frame Control tab Here is where you set your frame delay times. The first Delay time section is the delay time of the banner effect animation. The Key frame delay section is how long your still text will display for, before the Exit scene effect starts.

The Distribute to frames checkbox. Select this to have the banner object interlaced with the underlying animation. Otherwise, the banner object will create new frames using the currently selected frame as the background. This will "interrupt" any existing animation you may have "underneath." That is, it will insert itself after the frame selected in the Frame Panel. Any frames following that frame will be bumped, and will follow your banner text.

Click the Start Preview button to view the effects and frame delay times you have selected. Once you are satisfied, click OK or continue to the Neon tab. Clicking Cancel closes the Banner Text dialogue box.

And now for the final tab...


Neon Tab

Banner Text box, Neon tab If you are familiar with the Neon function in the regular Text tool (see Text Tool for more information,) this is similar, but different...

Clicking the Neon box toggles the neon effect on or off.

The Direction control has three settings - Inside, Outside, and Both Sides. The most often used setting is Outside. Inside will set the glow to within the text characters, which could obliterate your selected text color, if you set the width wider than half the thickness of the text.

Width is the width in pixels of the neon effect. The maximum, 99, is insanely high... that will just make a big blog around your text unless the font size is insanely big, too.

Click the Color box to select the neon color. This opens the Ulead Color Picker. Start picking.Ulead Color Picker

Clicking the Glow box toggles the glow effect on or off. This effect usually looks best when the Enter and Exit effects are both set to Still. On the first frame of the Enter scene, the glow size will be at one pixel. It will increase to the number set on the Width setting once the Key frame is reached. It will then shrink back to 1 (and start increasing again if it's not done) by the end of the Exit scene.

Neon Glow banner text example

The last item left on this tab is Transparency. If you enable that, your text becomes transparent, and all that's left behind is the glow.

transparent Neon Glow banner text example


create options Once you're happy with your banner text and click OK, you'll have to choose how to create your banner text - as Individual Objects, or as Banner Text (the recommended option). If you don't select as Banner Text then editing it afterwards becomes a lot harder. You'll have created as many individual text objects as you have frames, and to change anything, you'll have to edit each text object one at a time. (Of course, you could click the Undo button until you're back where you were before you added it...)

How to Edit Banner Text

That brings us to how to edit that banner text object. All you have to do is double-click the banner text object in the Object Manager, and you'll get a little menu:

Edit Banner Text

Just select Edit Banner Text and you'll have the Edit Banner Text dialogue box up. It's just the same as the Add Banner Text box, just has a different title.

You can, of course, change the frame delay times and other frame properties from the Frame Panel once you've inserted the banner text. You can also delete or move a frame or two, or change the frame order, or whatever else you want to do in the frame panel.

And that, my fellow animators, wraps up Banner Text. Open up Ulead GIF Animator 5 and have at it!

I hope you enjoyed this tutorial and learned something from it. Happy Animating!


For my tutorial on Ulead GIF Animator 5's basics, click the following banner...

Ulead GIF Animator 5 banner

longship bar

Valid HTML 4.01 Transitional  Valid CSS!