| The initial image should like this | 1. | Start by opening the image, flight.cpt, which you can download from here. | |
 |
2. | Because you are creating this for a Web page, you want the image to be as small as possible. So resample the image to 200 pixels wide, using the Image / Resample command. Make sure that Maintain Aspect ratio is checked while you do this. | |
| 3. | Save the file as flight2.cpt. (It is not essential to save it as a CPT file, but it is good practice. This format allows you to save masks and objects, making it easier to deal with interruptions in such projects.) | ||
| 4. | Create a mask using Mask/Color Mask… from the menu. To do this, use the Eyedropper within the Color Mask dialog, as shown at right, and sample the sky about 1/3 of the way from the upper left corner, to set the first color range. Set the color tolerance at 25. |  |
|
 |
5. | Step 4 would result in the sky being masked rather than the bi-plane. So, select the Invert button, to invert the mask Then, click OK.. (This would be a good time to go to the Edit Menu, and set a checkpoint.) Cut the masked bi-plane to the clipboard. Your image will now look like the one at the left. | |
| 6. | Use the Eyedropper tool found on the toolbar, and while holding the [Shift] key, click somewhere in the remaining sky to select a fill color. Use the Fill tool to fill the entire rectangle with that color. | ||
| 7. | Select the new Image Sprayer tool and load clouds.cpt as your “image list.” Image-Spray some clouds into your scene, and you should have something like the image at right. |  |
|
 |
8. | The bi-plane should still be on the clipboard, so paste the bi-plane back into the image. You've now got a pretty nice looking single image like the one at the left. This would be a good time to Save the cpt file. | |
| 9. | To convert this static image into a movie, go to the Movie menu and select Create from Document…. | ||
| 10. | Right now we have a movie with only one frame—not a very animated animation. To add more frames, either click on the right-hand plus sign that appears at the base of your image window, or return to the Movie menu and select Insert Frame. At the resulting dialog, insert 10 frames after frame 1. Make sure to use the setting copy current frame, in order to duplicate the cloudy sky background in each frame. |  |
|
 |
11. | Inserting frames will move you automatically to frame 2. Move back to frame 1. Resize the bi-plane to about half of its original size, and move it to the lower right corner, so that only a portion of the plane is showing in the image. (Remember to double-click inside the object to complete the transformation.) | |
| 12. | Paste another copy of the bi-plane into the image. Shrink this one, but not as much as the first. Also rotate it a few degrees counter-clockwise and move it down and to the right (but not as much as the first. Don’t forget to double-click to complete each set of transformations. |  |
|
 |
13. | Repeat this process of pasting and transforming objects,
until you have 7 different bi-planes. Resize, move, and rotate each until
you have a series moving from the lower-right to the upper-left corner,
getting progressively larger in size and rotating counter-clockwise.
Eventually, each bi-plane will be combined into the background of its own frame; but by initially placing all seven as objects visible in a single frame, it is much easier to get the size, rotation and positions relative to one another correct. |
|
| 14. | Now that you have 7 objects, select the right-most object (bi-plane), and combine it with the background of frame 1. (A quick way to do this is to press [ctrl]+[dwn arrow].) | ||
| 15. | Move to frame 2. (Notice that the object from the last step is no longer visible. Floating objects are visible in all frames, until they are merged with a particular frame. When you combine it with the background of a frame, it becomes part of that frame and will display that way in the animation sequence.) In frame 2, combine what is now the right-most object with the background. |  |
|
| 16. | Moving to each successive frame, repeat this process of merging (combining) the right-most object with the current frame. (Note that Frames 8-11 will be empty in order to provide a break as the animation loops back to the beginning). | ||
 |
17. | To save your work as a GIF file for use on the Web, you must convert the movie to paletted color. Go to the Image Menu, and select Convert to… Paletted. Choose optimized palette for the best results. | |
| 18. | Finally, go to File / Save and save it as a GIF animation.
In the dialog, choose none for transparency, interlaced, and a delay of
8. (Note: you can adjust the delay and preview the result before finalizing
the save.)
The only thing remaining is to place the animation in an HTML document like we’ve done here. It is placed in the same way as you would place any other web graphic. |