ANIMATION SHOP
Getting Started
  1. Open Animation Shop
  2. Go to File, Banner Wizard
  3. The default "opaque" background is fine, so click Next
  4. For this time, use a standard size banner (468x60), so click Next
  5. Accept all settings on this screen, so click Next
  6. Put in some sample text, and choose a font if you wish, then click Next
  7. Choose a color for your text (note that you could use an image too), then click Next
  8. Choose a transition ("flag" is the default), then click Finish
  9. Your animation now appears as a series of cels
  10. Go to View and click Animation
  11. Close that window
  12. Click on any one cel (it will be highlighted in red)
  13. Go to Animation, Frame Properties (where you could change cel display time)
  14. Go to Animation, Animation Properties (where you could change Looping)
  15. Go to Effects and click Insert Image Transition (the first is Page Turn; just try it with all of the default settings)
  16. Experiment with other Effects
This introduces you to some features of Animation Shop, but it's not how professional animations are done! Using the Banner Wizard you end up with "canned" animations. Moreover, these canned animations tend to be too large (see the number of cels) and thus take too long to load. Professional animations are "custom" animations and are usually restricted to just a few cels.

Custom Animations

  1. Open Paint Shop Pro*
  2. Use your normal method to choose a background color of white and a foreground color of your choosing
  3. Create a canvas with width=468 height=60
  4. Add text, say "Visit" at the left of canvas (see Image 1)
  5. Save as image 1.gif
  6. Add text, say "my" aligned next to Visit (see Image 2)
  7. Save as image2.gif
  8. Add text, say "site." (see Image 3)
  9. Save as image3.gif
  10. Add text, say "click here" (see Image 4)
  11. Save as image4.txt
  12. Open (or go back to) Animation Shop
  13. Go to File, Animation Wizard
  14. The default "Same size as the first image frame" is fine, so click Next
  15. The default of transparent is fine, so click Next
  16. Accept the default values on the next screen and click Next
  17. Choose "play it" (say) 4 times and each frame displayed for 2 seconds, i.e., value in 100th is 200
  18. Click Add Image and, holding the Control key, click on images in reverse order (this will result in images in order in the viewing box; note that you can move up or move down if you need to)
  19. Click Next
  20. Click Finish
  21. Click View, Animation and see your first custom banner! (see the animation)
  22. To save, click File, Save As and choose a name (recall that this will save the file as a GIF) and use all default values
  23. If you insert this image into a Web site page the animation will show in a browser
  24. If your animation doesn't "flow" like you want, go to Animation, Frame Properties and make adjustments cel by cel
  25. You can also change the looping from 4 to anything else or "indefinitely"
Now, for the weekly technical goal, create an animation on your own, perhaps by combining text and graphics. Be careful adding (canned) effects since these can add to the number of cels and make the GIF file too large.

For your final project create several animated ads and put them on your ad page together with a description of the purpose of the ads.

______
*Paint Shop Pro steps assume familiarity with the program.

Real-World Animations

  1. Find a real-world animation from some Web site and save it or copy it to My Documents (note the file size—typically very small) Examples: Fogdog; Microsoft.
  2. Open the animation in Animation Shop
  3. Look at the cels
  4. Look at the Animation, Frame Properties
  5. Look at the Animation, Animation Properties