Updated March 18, 2007

Frame Panel | Ulead GIF Animator 5 Basics

This is where you can view all the frames of your animation. It displays each frame in your animation as a thumbnail. Each thumbnail frame also displays the time delay of the frame. There are also shortcut buttons on the Frame Panel for quick access to commands like Play Animation. Double-clicking on a frame thumbnail opens the Frame Properties dialog box. You can also click and drag a frame to another position if you wish.

If you need to select more than one frame at a time, hold the CTRL key, then left-click with the mouse on each frame you want to select. If you have several frames in succession to select, select the first frame; then hold the SHIFT key and click the last frame. All frames from the first to last will be selected. (You could now deselect any frame or frames in between by using 'CTRL' + click.)

Frame Panel

The bottom row of the Frame Panel has several buttons. Starting at the left, we have Play and Stop. These allow you to watch your animation in the workspace. The dual arrow buttons are for rewinding or fast forwarding to the next frame or the first or last frame.

The next set of three buttons are: Add a blank (empty) frame (to which you may add objects); Duplicate the currently selected frame (or frames); and Delete frame. Deleting a frame deletes only the frame, not the objects in it. The objects remain shown in the Object Manager Panel.

The Tween button is rather useful. Using it can be confusing. Here is what Tweening is and how to do it.

Tweening is a method for creating new frames, or updating the frames between two frames that contain the same objects but with different attributes - either different positions or transparency. By doing this, the objects appear to be moving or fading when the animation is played.

For example, you have a two-frame animation. The first frame has a car on the left of the frame. The second frame has the car on the right. You then click the tween button, and set it to add frames, adjusting the position of the selected object (the car). When done, you will have an animation of the car moving from the left to the right. You can adjust how many frames are added, as well as the frame delay for those frames.

Before you tween: The following procedure outlines how to prepare for position tweening; however, a similar procedure can be used for transparency tweening.

In order to prepare your objects for position tweening, you should first decide which frames you will use for the start and end frames.
Position the objects in the start frame the way you would like them to appear before the movement begins.
Position the objects in the end frame the way you would like them to appear when the movement ceases.

Creating newly tweened frames: This procedure outlines how to insert tweened frames into your animation; however, a similar procedure can be used for updating intermediate frames.

Note: While the Tween dialog box is open, you can select frames and/or objects in the workspace, Frame Panel or Object Manager Panel. This is so you can adjust what you would like to tween or select intermediate frames that you would like to update.

Select Frame, Tween from the standard menu bar or click the Tween button on the Frame Panel.
On the Frame tab, select the Start and End Key Frames by entering the frame numbers in the respective boxes.
In the How to generate frames section, select Insert frames and then type in the number of frames you want to insert between the start and end frames. A larger number of frames will create a smoother animation, but will also increase the file size.
Enter a number in the Frame delay box. This sets the duration each frame will be displayed, in hundredths of a second. A value of 10 means 10/100ths (or 1/10th) of a second.
On the Objects tab, select to tween all visible objects or only those selected on the Object Manager Panel.
Select to tween the objects' position and/or transparency.
Click Start Preview to preview the animation in the workspace and the Frame Panel. Click Stop Preview when done.
Click OK when you are satisfied with the previewed result.

For more details, see the tweening tutorials listed on the Tutorials main page.

Add Banner Text. This gets complicated... For a full tutorial on Banner Text, see my new Banner Text tutorial.

This allows you to create text banners anywhere in your animation. These banners can be added to your animation as a single banner object, which can be edited later, or as separate objects, which will be treated as text objects. Also, the banner can be distributed to existing frames or added to new frames using the starting frame as its background.

To add banner text to your animation:

Select the frame where you would like the banner text to commence.
Click Frame, Add Banner Text on the Standard Menu bar or click the Add Banner Text button on the Frame Panel. This opens the Add Banner Text dialog box.
On the Text tab, define the text attributes (i.e., font, size, etc.), as well as any of the other attributes and Shadow dialog boxes.
Enter the contents of your banner text in the space provided.
On the Effect tab, select the effect that you would like for the banner, both moving into and out of the animation. (Experiment with this - there is a good variety.)
Select the number of frames to use for both the moving effects.
On the Frame Control tab, define the Delay time (or the amount of time each frame is displayed) and Key frame delay (or the amount of time the key frames - first and last frames for each effect - are displayed).
Select Distribute to frames if you want to add the banner to the pre-existing frames, otherwise new frames will be created.
Select Neon tab to set the neon effect for your banner.
Reposition the text object in the preview window by dragging it to another position. The position that the text object occupies is the final position for the Enter scene effect, and the starting position for the Exit scene effect.
Adjust the banner area by dragging the blue control points on the banner bounding box.
When you are satisfied with the effect, click OK and two options will appear:
1. Create as Individual Objects, which inserts your banner as individual text objects, which can be edited as such. However, the banner itself can no longer be edited.
2. Create as Banner Text, which inserts your banner as a unique banner object, which can only be saved in the UGA file format. However, the banner itself remains intact and can be edited as such by selecting, Frame: Edit Banner Text.

Neon Banners are a bit different. Here's how.

To add a neon banner to your animation:

Click Frame, Add Banner Text on the Standard Menu bar or click the Add Banner Text button on the Frame Panel. This opens the Add Banner Text dialog box.
Click the Neon tab and select Neon.
Specify the Direction of the neon effect for the selected text object.
In the Width box, enter the thickness value for the neon effect.
To change the neon color effect, click the Color square to open the Ulead Color Picker dialog box and select the color you want.
Select Glow to make the neon effect fade in and out of your animation or select Transparency to make the text transparent so that only the neon effect is visible.
Click OK.

Reverse Frame Order. This is fairly straightforward. You can either reverse the order of all the frames, or just the frames you have selected on the Frame Panel. (Ctrl Click each desired frame, or click on the first frame and shift-click on the last frame if in an uninterrupted sequence.) A box will appear to let you select all frames or selected frames. Make your choice and click OK.

The last button is Frame Panel Commands. This will let you set the size of the thumbnails in the Frame Panel, or access the Frame Properties dialog box.

You can access the Frame Properties dialog box in several ways: double-clicking the frame thumbnail; by right-clicking on a frame thumbnail and selecting Frame Properties; or by selecting Frame, Frame Properties from the Standard Menu.

Note that you can change the properties for more than one frame at a time, if you select several frames. If not all frames have the same frame delay, removal method or title, that field will show as blank. Any change made when more than one frame is selected will apply to all selected frames.

With the Frame Properties box, you can set the delay time for the frame. This tells the program playing the GIF how long to display that frame before moving to the next one. A value of 1 equals 1/100 of a second, and 100 equals 1 second.

You can also set the Removal method. This defines how a frame is removed during the animation sequence. (Additional information can be found in the Frame Removal Method tutorial.)

The options are:

Smart - When UGA 5 saves your animation in GIF format, it will automatically choose one of two methods - Do Not Remove or To Background - depending on the frames. Smart is the default setting when you are making a new animation, and is usually the best to choose.

Note that if you have opened a previously saved GIF file, the Removal Method for each frame will be whatever was used by the software that created it.
Do Not Remove - The frame is not removed and any subsequent images are displayed over it.
To Background - Removes the frame and replaces it with the Web page background color. If frames overlap evenly, then a smooth transition effect occurs.
To Previous State - Removes the frame and replaces it with the frame preceding it. If all the frames in the sequence are set to this, then a smooth transition from one frame to the next happens regardless of how they are overlapped. Note: The To Previous State option may not be supported by some Web browsers, and is not recommended.
Web Browser Decides - The Web browser playing the animation removes the frame. How this is done varies from browser to browser and is not recommended.

Lastly, you can give the frame a name, if desired.

The Frame commands Synchronize Objects Across Frames and Flatten Frames as Single Object are detailed in the Standard Toolbar page.

That takes care of the Frame Panel.

UGA 5 Screen