PI5 Lighting Gallery Animation

Animated Lighting ImageOne of the coolest new features of PI 5.0 is the Lighting Gallery. You can add dramatic lightning, fireworks, lens flare, spotlight, comets, lasers and other lighting effects to your images. But what's even better is that you can turn those lighting effects into incredible animations! 

This tutorial shows you how to use the Lighting Gallery's keyframes feature to edit a lighting animation. Then we'll take the animation apart in the GIF Animator and use the Optimization Wizard to make the file size smaller. 

For the lighting effects to show up well, a darker image is best. Choose File, Visual Open, and browse your hard drive to Program Files\Ulead Systems\Ulead PhotoImpact 5\Samples. 

Open the file called Night Scenes.  Choose Format, Dimensions, and reduce the file to 35% size. Be sure to maintain the height to width ratio.

Night Scenes, 35% size

The image will look a little blurry from the size reduction, so choose Format, Focus. When the Focus box opens, choose the option shown below and click OK.

Format, Focus

Open the EasyPalette's Lighting Gallery. If all we wanted to do was apply a static fireworks image, we'd just have to drag and drop (or double click) on the desired thumbnail. However, don't do that because we're going to create an animation instead.

Fireworks 3

Right click on Fireworks 3 and select "Modify Properties and Apply" to open the large Lighting dialog box. On the left side is a preview window, and to the right of the preview window is the part of the dialog box (shown below) that we'll use to edit the preset animations. By default, the Basic tab is selected.

basic tab

Notice the "Key frame control" section of this box. There are 31 frames, and the 4 key frames (look like little diamonds) have already created a preset animation. To view it in the preview window, click on the Play button. You'll see a streaking comet enter the image at the lower right corner, moving at a 45 degree angle across the image, turning into multicolored star fireworks. Key frames are blue when selected and gray when deselected. You'll see the key frame diamonds turn colors as the animation passes over their associated frames. 

After you've played the fireworks animation through several times, click on the Stop button to stop the animation. If you wanted to, you could just click Save now to save this preset sequence, without leaving the PI 5.0 work space, either as an animated GIF or as a series of BMP images. But instead we're going to tweak the animation by adding our own key frames, and we'll edit the effects associated with one of the predetermined key frames. 

Press and drag back and forth on the key frame control slider. Stop at frame 10. Alternatively, click on the forward and backward arrows to get to frame 10, or just enter 10 in the appropriate box. Click the plus sign to add a key frame. Click in the Body color box and choose bright Magenta. Now the box looks like this:

changing body color 

Drag the slider to frame 15 and add another key frame by clicking on the plus sign again. Now click in the Body color box again and choose bright aqua, so the box looks like this:

changing body color 

Drag the slider to frame 23, which is the 4th key frame in the series. Click on the Advanced tab, and enter a value of 75 for Change Head Position. This will reverse the thickness of the comet, so it will get narrower at the top and wider at the bottom, just before the big fireworks display takes place in the upper left corner.

 advanced tab

To save the edited fireworks sequence as an animation, you could just click on the Save button now, to save the animation to your hard drive as a GIF. It's a beautiful animated effect, but the file size is 399 kb. You could open it up in the GIF Animator and use the Optimization Wizard to reduce the file size, but it would still be a pretty big file.

Instead, I'm going to show you how to save the animation as 30 individual BMP images, only half of which we'll reassemble in the GIF Animator for a significantly smaller file size. 

Click on the Save button. When the Save As box opens, save it to a new file folder called "lighting." If you don't save to a separate folder just for this animation, you may have trouble later finding all of the frames, then deleting them after the GIF animation is complete. Save "anilighting" as a "Sequence of Bmp Files (*BMP)," and click OK.

save sequence as BMP files

After saving the images, open up the GIF Animator. When the Start Up Wizard opens, choose "Create a New GIF Animation Using the Animation Wizard."  When the Animation Wizard opens, click the Add Image button and browse to the "lighting" folder. Select the first image in the sequence, "anilighting00001.bmp" and click on the Open button.

first frame

You'll be returned to the Animation Wizard. Click on the Add Image button again and browse to the lighting folder again. This time, skip the second frame ("anilighting00002.bmp").  Instead, select "anilighting00003.bmp" and click the Open button. 

adding second frame

When you're returned to the Animation Wizard, repeat these steps again, adding only the odd numbered frames, skipping the even ones except Frame 30, which you will add last. So you'll have 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29 and 30. Click on the Next button.

click on the Next button

In the Source Box, chose "Photo Oriented (Dither)" and click the Next button.

In the Frame Duration box, change the delay time to 40 (40/100ths of a second per frame). Since we have fewer frames now, we want to slow the animation down a bit. Click on the Next button.

Click on the Finish button. At the top of the GIF Animator work space, click on the Start Preview button to view your fireworks animation. Despite going from 30 frames down to 17 frames, the animation still looks good. Click Stop Preview when you're ready for the next step.

To make the animation file size as small as possible, choose File, Optimization Wizard. When the Wizard opens, choose the default of Yes to control the number of colors with a super palette, then click Next.

In the next box, leave the default value for 64  for the number of colors and choose Yes for dithering. Click Next.

Choose the defaults in the next box and click Next. In the final box of the Optimization Wizard, click Finish. Notice that the file size is down to about 59 kb.

64 colors file size

Let's preview the animation by clicking on the Preview button. Click on the Play button to view the animation. Click on the Stop button to stop the animation and click on the X to close the preview box. You probably noticed the unattractive color banding and graininess in the animation resulting from too few colors (screen shot below):

screen shot of 64 color animation

It's really not acceptable as it is, so we'll add back some colors. Click on the Another Try button.

This time choose 128 colors colors, say Yes to dithering, and leave the other values set to the defaults. The file size goes up to a little over 113 kb now.

128 colors file size

Click the Preview button to take a look at the animation with 128 colors. Close the preview box by clicking on the X.

The animation looks a lot better than it did with only 64 colors, but it's still not great. Maybe I'm just picky, but it looks like it needs more than 128 colors to create the best result.  Click on the Another Try button again.

This time choose 256 colors colors, say Yes to dithering, and leave the other values set to the defaults. The file size goes up to a little over 123 kb. Still, it's only 10 kb more than the 128 color animation.

256 colors file size

Test the animation by clicking on the Preview button. This animation, which contains the full range of colors allowed by the GIF format, is the best of the 3 we've tested. To save it, click on the Save As button. When the Save As box opens, give the animation a name (e.g., "anilighting") and save it to your hard drive.

The proof of the success of this technique comes when you upload your "doctored" animation to your web page. Even though we had to accept the biggest file size to get the best animation, this 123 kb animation will download a lot faster than the original 30 frame lighting animation weighing in at almost 400 kb! Visitors to your site are much more likely to wait a 40 seconds or so for the smaller animation to download completely.

Remember that you can use this testing and adding of colors technique on any GIF animation which needs paring down, not just the ones you make in the the fabulous Lighting Gallery!

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage