Back to Learning Center
Ulead PhotoImpact Tutorials
Tutorial Index | Page 1 2

Web Animation with Ulead GIF Animator

Animations are a popular way of adding eyecatching components to a Web page. Although they often appear complex and difficult to create, PhotoImpact offers several solutions for producing such animations with considerable rapidity and ease. In this tutorial, we will replicate a sample GIF animation (a cow jumping over the moon) from the Ulead Web site.

Step One:

First, we will bring objects for our animation from PhotoImpact. After creating objects for the animation in PhotoImpact, save the objects in a UFO file. Click Switch in the top right corner of the PhotoImpact workspace, and select Ulead GIF Animator.

If the Wizard is shown when GIF Animator opens, click Close. A new project will automatically be started. Click Open and select the UFO file containing your objects. Click OK. All the objects are shown in the preview window, and in the Object Manager Panel on the right.

UFO file    Object Manager Panel

Using the Pick Tool, select an object on the Object Manager Panel and drag it across the canvas to its initial position in the animation. Use the Transform Tool to adjust the size and angle of each object.

This will become the first frame. View details of the frame by double-clicking the thumbnail on the Frame Panel at the bottom of the workspace. By default, the frame delay will be 0.1 seconds. This is a little too fast for this animation, so adjust the delay and click OK, then press [F6] to increase the default delay setting to 20/100 sec in the Preferences dialog box.

Frame Pane

Step Two:

Right-click the first frame and select Duplicate Frame [Ctrl+F] to create the second frame of the animation. In the second frame, we want to show the cow a little further along its trajectory and the stars twinkling. As the cow moves, it rotates clockwise slightly to follow a curved trajectory. If we rotate the cow however, it will also be rotated in the first frame. We will require a new cow altogether. Right-click the cow and select Duplicate Object(s) [Ctrl+D].

Duplicate Object(s) [Ctrl+D]

Select the second cow on the Object Manager Panel and move it to its progressed position. Then rotate it using the Transform Tool Transform Tool. Click Show/Hide Object to hide the first cow in the second frame. Similarly, for twinkling stars, duplicate each star, adjust the angle, and hide the original in the second frame.

Transform Tool   Click Show/Hide Object

Tip: Rename duplicated objects on the Object Manager Panel to avoid confusion.

Add more frames, duplicate the cow in each, then adjust its position and rotation in each frame so that it progresses over the moon. In each subsequent frame, hide and show alternate star pairs. This animation takes nine frames to complete the path over the moon.

Frame Panel

 


Tutorial Index | Page 1 2