Creating a Looping Animation -- by Sheryl Carter (whazzat)
First, you have to edit the JPG image in Photoshop or in Paint Shop Pro using a "seamless tiling" effect. I made a cheesy cloud image to illustrate. First, the original:

Then adjust it so it's horizontally seamless:

When it's seamless, you import the image into Flash's Library, then create a new movieclip. Create 2 layers in the movieclip. In the top layer, make a rectangle with no fill with the same dimensions as that of the stage of your main timeline or of the space in which your loop will reside. Then use your "Align" feature to center that rectangle on the movieclip stage. Lock the layer. This layer will eventually be deleted.

Highlight the lower layer in the movieclip's timeline, and drag one instance of the clouds image onto the Stage. Resize it if required, and then alt-click and drag on it so there are now 2 identically sized cloud images on the layer.

Now line both copies of the image up side-by-side so there are no gaps. You can use the "Align" tool to make sure they are aligned horizontally. Then, Highlight them both and go to "Modify", "Group" so that Flash will treat them as a single object. Position the grouped Cloud object under your rectangle so that the left edge is slightly past the left edge of the rectangle.

This example is working at 12fps and the clouds are moving by very quickly, so I just used 60 frames for the tweening. This is not a smooth setting. You'll have to adjust your frame rate and the number of frames you want for your own needs. Add the frames to both layers. adding a keyframe at the end of the cloud layer. On the new keyframe, highlight the cloud group and use your arrow keys to move it to the left, leaving it at the point that is just before where the image starts in the first keyframe. (This is slightly hard for me to word. See the following picture.)

Add a motion tween between the two keyframes in the cloud layer. Test the tween, make adjustments for smoothness, then delete the rectangle layer. Go back to your main timeline and drag your movieclip onto the stage. Bada-Bing, Bada-Boom! Test your movie. Make more adjustments to the movieclip as needed. Then celebrate with a frosty root-beer!
View my example here:www.whazzat.com/stuff/cloudmovement.html
Download Flash MX 2004 source file here
Download Flash MX (v6) source file here
Contributed by:
Sheryl Carter (whazzat)
cartoonist/animator/flash-a-holic
Talk about Graphics and Animation ON THE FLASH MX 2004 FORUMS.
|