PI8 Animated Particles Snowglobe

PI8 put a terrific spin on its long-cherished particle effects -- animated particles! It used to be kind of tricky to make an animated snowglobe, but the animated particle feature makes it almost too easy. You don't even have to open GIF Animator at all, unless you want to tweak an animation sequence.

Start with a new True Color image 300 X 300 pixels or so. You'll want to keep the animated particle snowglobe on the small side, because large images can result in huge file sizes (and long downloads online). Also have open an image which you're going to use to fill the snowglobe. If you just want to use my globe and glass overlay instead of making them yourself, you can get the UFO file here.

Select the Path Drawing tool. In the EasyPalette's Material Gallery, All, double click on the Reset thumbnail. That way you'll be starting with a pale gray color. In the Attributes toolbar, click Shape and select the circle shape. From Mode, select 3D Round. Draw a round object in the empty white image.

round object

Right click and Duplicate. Drag the duplicate object out of the way a bit. While the duplicate is active, in the EasyPalette's Material Gallery, Glass, double click on the L01 thumbnail. This will apply a clear glass preset to the object.

If the Path Panel isn't showing in the work space, click Panel in the Attributes toolbar. From the 3D tab, drag the Border slider down so that the white highlights on the glass become smaller, showing only along the edges of the object.

drag the border slider down

Tap on the original, gray object to make it active. In the Attributes toolbar, choose Selection from the Mode dropdown list. Doing so will turn the object into a selection. Tap on the blue title bar of the image you're going to use in the snowglobe. Hit Ctrl+C to copy it into the Clipboard. Close this image out now.

Returning to the image with the round selection, choose Edit, Paste, Fit Into Selection. Alternatively, choose a different Edit, Paste option to showcase part of an image in the Clipboard, or to make it fit into the selection area.

paste photo into selection

Right click and Select All Objects. Both the globe and the glass objects will be selected. Right click, Align, Center Both. This will center the glass object on top of the photo-filled object. Right click again, Merge as Single Object. The glass overlay creates a nice, shiny, 3D look.

single object

You have one active object in the work space now. Choose Effect, Creative, Particle Effect. Doing so will open the Particle Effect dialog box. In the lower left corner of the box, select the Snow particle. The default attributes for snow will appear on the object in the Preview window. It's way too much snow and very transparent. In the upper right corner of the dialog box are two tabs: Basic and Advanced. I've edited the Basic attributes as shown below. This will create a less dense covering of snow with tinier flakes. Editing the Opacity to 100 makes the snow opaque, so it will really show against the dark background.

edit Basic attributes

Keep in mind that the Density, Size, Variance, Body and Opacity values that I've used may not look good on a different image or one of a different size. For example, on the small snowglobe I made at the top of this page, I had to use a much higher Density level and a size of 15 to even get the snow particles to show up. PI8 appears to adjust the Density and Size depending on the size of the image.

Click the Advanced tab and you'll see a number of other attributes which can be edited. To find out what each setting does, click the Help button for context-specific descriptions of Advanced options. I'm going with the default values, but it's good to know that you can edit these settings too.

Advanced attributes

Look down at the bottom right side of the dialog box and you'll see an animation time line with key frame controls. "Repeat" is selected by default. It displays all particles that cross the image boundaries while in motion. When deselected, the animation can appear spotty, so it's a good idea to leave it selected. Note that there are two diamonds in the time line, which represent key frames.

key fram controls

The first diamond is blue, indicating that you're at the beginning of the animation. We've edited the particle attributes for this key frame only. Click on the gray key frame to make it blue, signifying that you've moved to the end of the time line. In the Preview window, you'll see that the default particle effects are back on the image. Edit them from the Basic tab, using the same values you used for the first key frame.

To view your animation, click the Play button. It will play through one loop only in the Preview window. Click Loop or Reverse, then click Play again to view their effects on the animation. You'll have to click the Stop button to make it stop playing. Loop and Reverse don't appear to have an effect on the animation during the Save. Here's a tip for creating smaller file sizes -- you can edit the number of frames from the default of 10 if you like. However, I like to tweak file size in the GIF Animator so that I can preview full size to determine which frames I can live without.

When the animation looks good to you, click OK. You'll be offered two options. Select "Save Animation File and Create New Object..."

select second option

Doing so will open the Save As dialog box. Note that certain options are selected by default, including a Transparent background and Loop. If Loop is deselected, the animation will only play one time. In the screen shot below, I've edited the Frame Delay to 15, which slows down the action a little. I've also selected to open the animation file in GIF Animator so that I can tweak it a little. If you just want to save the animation without tweaking, don't select this option.

Browse to and select a folder, name the animation, then click Save. Your animation is complete. Now you can use it on a web page.

If you've elected to open the animation in Ulead GIF Animator, the program will open. Click the Preview tab to view the animation. It should look very smooth. That's because of the "tweening" frames created automatically between the first and last key frame. More frames create a nicer animation, but a much bigger file size. When I clicked the Optimize tab, I learned that this animation is going to be 166 kb. That's a pretty good-sized file.

To make the animation file size smaller by selectively eliminating frames, click the Edit tab. There is a horizontal row of thumbnails at the bottom of the screen. To delete a frame, right click on its thumbnail and choose Delete Frame. Deleting only 3 frames resulted in a slightly less smooth animation, but cut the file size by one-third. Ultimately, whether or not to delete frames will be a subjective decision. View both the unedited and edited animation and see what you think.

This tutorial uploaded 9/22/02

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



Back to Homepage