Building an Animation


Recall that an animation is a series of images or frames. You can create these frames in Paint Shop Pro or, to some extent, in Animation Shop.

You can start Animation Shop by clicking Start and choosing Programs, Jasc Software, Animation Shop 3. Alternatively, if you're running Paint Shop Pro, you can choose File, Jasc Software Products, Launch Animation Shop.

Animation Shop's interface is simple and quite similar to Paint Shop Pro's (see Figure 44.1).

Figure 44.1. Animation Shop's interface.

graphics/44fig01.gif

The tools are quite basic and are more useful for touching up an animation than creating one. Creating an animation with both Paint Shop Pro and Animation Shop is quite easy, though, as the following exercise shows.

Creating Your First Animation

The best way to how to use Paint Shop Pro to create an animation is to dive right in. Try this exercise:

  1. Start Paint Shop Pro.

  2. Create a new 400x100, 72-pixel-per-inch image with the background color set to black and the image type set to 16.7 million colors.

  3. Create a second image with the same settings.

  4. Turn on the grid (View, Grid).

  5. Select the Preset Shapes tool (it resembles a small blue rectangle with a red ellipse in front of it).

  6. In the Tool Options window, set the shape to Ellipse.

  7. Set the foreground color to blue, the background color to green and, in the first image, draw a circle near the left side. I used the grid, placed the mouse pointer at the center of the second vertical line (with the grid set to 50 pixels), and drew a 50-pixel circle.

    I repeated this process with red as the background color and drew a circle in the second image at the center of the second-to-last vertical line (see Figure 44.2).

    Figure 44.2. Two images containing colorful circles.

    graphics/44fig02.jpg

  8. Use the Layers, Merge, Merge All (Flatten) command to merge the two layers in each file into a single layer.

  9. Save each image. I saved them both as PSP files in a temporary folder and called the first one green and the second one red ( inventive , eh?).

  10. With the images safely saved on your hard drive, run Animation Shop.

  11. Choose File, Open and open the Green.psp image. You should see the image appear on the screen.

  12. Choose Animation, Insert Frames, From File.

  13. Browse to the folder where you stored the PSP files and choose the Red.psp file. You'll now have one image with two frames.

    You might see only one frame, but you can use the slider bar at the bottom of the image to scroll between both images (see Figure 44.3).

    Figure 44.3. Two-frame animation in Animation Shop.

    graphics/44fig03.gif

Now you have all that's necessary for an animation. It might be a simple one, granted, but it is indeed an animation. To see your new movie, click the View Animation button.

When the flashing circles start to drive you crazy, turn off the animation by clicking the small X in the upper-right corner of the window or View Animation button again. That's it! You've created an animated GIF!

graphics/bookpencil_icon.gif

When you play an animation, the new VCR Controls toolbar becomes active (see Figure 44.3). With its buttons, you can step through an animation frame by frame, fast forward (or fast reverse) the animation, and even pause the animation when you get too dizzy! Play the green-red animation again and try out each of these nifty buttons .

Of course, it was small, and it didn't do much. However, with a little tweaking, it could be pretty cool, as simple as it is. In fact, I have a similar animation running in the middle of an image on my Web page. You can view the animation by entering the following URL into your Web browser: http://www.grafx-design.com/HireUs.html.

On that page, you'll see a rocket ship, and below it, two small blinking lights. The concept behind those lights is the same as the ones you've just created.

The lights I used are smaller (and a little less annoying). I also played around with adding frames with the lights turned off and turned on, and I played with the inter-frame timing, as well.

Even as small as those lights are, they grab your attention. They're almost hypnotic (and that's the intent).

Saving and Previewing an Animation in Your Web Browser

Now in Animation Shop 3, you can preview how your animation will look when it appears in a Web browser. This will help you work out any flaws prior to posting the animation to your Web site. Follow these steps:

  1. Select View, Preview in Web Browser. The Preview in Web Browser dialog box, shown in Figure 44.4, appears.

    Figure 44.4. Select the options you want to use to preview animation.

    graphics/44fig04.gif

  2. Select the format(s) you want to use, such as animated GIF.

  3. Adjust the size dimensions if needed, and select the Web page Background color.

  4. Choose the Web browser(s) you want to use for the test, and click Preview. Since you have not yet saved the animation, the Animation Quality Versus Output Size dialog box appears. After you have saved the animation, you'll be able to skip the remaining steps; the animation simply appears in your Web browser(s).

  5. You can create a smaller file if you're willing to sacrifice some quality. Adjust the Quality vs. Size slider as desired, and click Next.

    You can further adjust the size of your file by clicking Customize. Here, you can remove non-visible elements from the file, save only the parts of each frame that changes, save only unique frames, make unchanged pixels transparent, and enable browser-specific optimizations.

  6. Animation Pro optimizes the file based on your selections. Click Next.

  7. A comparison between the original and optimized files is shown. Click Next.

  8. Final file statistics are displayed. Click Finish to view the animation in your selected Web browser(s). Figure 44.5 shows our animation in Internet Explorer.

    Figure 44.5. A preview of our animation.

    graphics/44fig05.gif

Editing Your First Animation

If you'd like to tweak the animation you just created, you can do so in Animation Shop. The first step is to create a blank, black rectangle to serve as a frame in which both lights are off. To do so, follow these steps:

  1. From Animation Shop, choose Animation, Insert Frames, Empty.

  2. For the moment, leave the defaults set in the Insert Empty Frames dialog box and click OK. You'll now have a new frame in your animation.

  3. The frame appears in front of the other two frames. You can use the scrollbar at the bottom of the window to scroll to the frame. You'll see that it's emptytransparent, in fact.

  4. You can fill it with black by setting the foreground color to black and using the Flood Fill tool to fill the entire frame with black.

  5. Click the View Animation button to view the new version of your animation. Because of the speed with which your frames are being displayed, the extra frame is hard to see.

Now try this:

  1. Stop the animation if it's still running.

  2. Select the Arrow tool and use it to choose the all-black frame. (A red border appears at the top and bottom of the selected frame.)

  3. Choose Animation, Frame Properties.

  4. Under the Display Time tab, enter 100 for the display time and click OK.

  5. Run your animation again (click the View Animation button). Be sure to save this animation, as you will use it in the following sections.

Notice the difference? The lights flash, then there's a pause, followed by the lights flashing, another pause, and so on.

You can edit this animation further by adding other black frames (adding blank frames) or changing the amount of time that a frame is displayed.

Using the Mover Tool to Edit the Animation

You can use the new Mover tool in Animation Pro 3 to move the contents of a single animation within its frame. We'll use this tool to add a falling effect to our animation. Follow these steps:

  1. Use the Pointer tool to select the frame with the red ball.

  2. Click Copy, and then click Paste Before Current. A copy of the red ball frame is pasted in front of it.

  3. Click the Mover tool, and then move the frame contents up, so that the red ball appears near the top of the frame, as shown in Figure 44.6.

    Figure 44.6. Move the red ball to the top of its frame.

    graphics/44fig06.gif

  4. Use the Fill tool to add black to the blank area that was created at the bottom of the frame.

  5. Click the frame that shows the red ball in the middle of the frame (F:3), and then click Paste After Current.

  6. Use the Mover tool to move the contents of F:4 (the fourth frame) so that its red ball appears near the bottom. Use the Fill tool to fill the blank area that's created with black. The sequence of red ball frames looks something like the one shown in Figure 44.7.

    Figure 44.7. Down goes the red ball.

    graphics/44fig07.gif

  7. Repeat steps 1 to 6 to add similar frames for the green ball.

  8. Save, and then view the animation by clicking the View Animation button. Neat, eh?

You could get a ball to "bounce" by simply adding additional frames with the ball in the middle of a frame, and then at the top again.



Sams Teach Yourself Internet and Web Basics All in One
Sams Teach Yourself Internet and Web Basics All in One
ISBN: 0672325330
EAN: 2147483647
Year: 2003
Pages: 350
Authors: Ned Snell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net