| The initial image should look 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 a 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 the command
Mask > Color Mask. To do this, use the Eyedropper within the
Color Mask dialog, as shown at right, and sample the sky about one-third
of the way from the upper-left corner to set the first color range. Set
Color Tolerance at 25. |
(Step 4)
|
| (Step 5)
|
5. |
Step 4 results 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 Toolbox, hold Shift
and 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 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 the right. |
(Step 7)
|
| (Step 8)
|
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 so that you can go back to it if you need to re-create the
animation. |
| 9. |
To convert this static image into a movie, go to Movie [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 seven
frames after frame 1. Make sure to use the setting Copy Current Frame to
duplicate the cloudy sky background in each frame. |
(Steps 9-10)
|
| (Step 11)
|
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. |
(Step 12)
|
| (Step 13)
|
13. |
Repeat this process of pasting and transforming objects
until you have seven 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 seven 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+Down 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. |
(Step 15)
|
|
16. |
Moving to each successive frame, repeat this process of
merging (combining) the right-most object with the current frame. (Note
that frame 8 will be empty in order to provide a break, the timing of which
you can adjust, as the animation loops back to the beginning.) |
| The Finished Animation
|
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
Image > Mode > Paletted. Choose Optimized Palette for the
best results. |
| 18. |
Finally, either go to File > Save As or File
> Export, and save it as a GIF animation (either will work).
In the dialog, choose None for Transparency and adjust the delays for each
frame to your liking, previewing the result until you are satisfied.
The only task remaining is to place the animation in an HTML document
like we’ve done here. You place it the same way you would place any other
Web graphic. |