home > tutorials > flash
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:

Non-adjusted image

Then adjust it so it's horizontally seamless:

Adjusted image

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.

Centered rectangle on the Stage

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.

Two images on the same 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.

Aligned images on the layer

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.)

Tweening the image

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.

 
 
home | news | tutorials | reviews | resources | forum | about
 

search web search flash-mx.com


www.flashthefuture.com   www.flash-mx.com   swift dev   www.ejepo.com


©2003 ejepo.com | advertise | legal info | site design
 
Hosting provided by DataRide, Inc.