
| This is a quick tutorial for making looping movie clips with a one-time playing introductory scene, similar to the al fine in sheet music. The basic setup will include creating our movie clip, setting up the animations, and finally choosing which part of that animation we want to loop. This tutorial is written so that those new to Flash, or with little Flash experience should be able to complete this exercise quickly and easily. |
 |
Open a new Flash document and make sure the Library Panel is open. Create a new movie clip by clicking on the white page with a plus icon in the bottom left corner of the Library Panel, making sure to select “Movie clip” in the Behavior section and giving your new symbol a unique name (I used “animIntroToLoop”). For this example, we're going to create a widescreen TV that plays a quick, colorful blur of geometric shapes.
To make the TV, draw a black box with a dark gray border at 480x270 pixels (or 16:9 aspect ratio). Insert a layer below it (Insert > Timeline > Layer, then drag the layer underneath the current layer) and Copy-Paste in Place the black rectangle from the first layer into the bottom layer. Change the black shape on the bottom layer to a medium gray with a light gray outline, and then scale it to about 110%. Select all the objects on both layers and convert it to a Graphic Symbol (F8) named “tvScreen”. Finally, change the name of the layer to “placeholder”.
For the first layer of the animation, move the empty layer to the top and draw a quick, small circle with the fill set to “No Color”, making sure to keep it inside the “screen” of the TV. Convert this to a graphic, then create a keyframe at frame 13 and scale the circle larger and change the color however you wish. Add a Motion Tween to the first keyframe. Repeat this until you have at least a 60-frame animation (with keyframes at every 12th frame). Rename the layer to “circle1”. Select all the frames of this animation, then alt-click (option-click in Mac) and drag them right after the original frames to duplicate the animation sequence.
Continuing the building of the animation, create a new layer above “circle1” and name it “square1”. Insert a blank keyframe at any desired offset from frame 1; I chose frame 19 for a 1½ -second delay. Draw a square using the same technique you created the circle in the previous section, convert it to a graphic, and create a 60-frame animation for this too, with keyframes at every 12th frame after the keyframe at frame 19: 31, 43, 55, 67, 79. Apply some form of creativity in the scale, rotation, skew, and/or location of the square. Duplicate this 60-frame animation after the first 60-frame animation on the same “square1” layer.
If you wish, you can create a third layer for extra interest using the same method as you did for “square1”, remembering to offset it and duplicate its 60-frame animation after itself. If any of your tweens extend past the “edges” of your “TV screen”, create a mask the size of the “screen” and apply it to the offending layers.
Finally, create two new layers above the rest and title them “actions” and “labels”, respectively. Name the first keyframe of the “labels” layer “intro”, and add a new keyframe at the same frame that the “circle1” animation begins again (e.g., if your animation went from frames 1-61, or a full 5 seconds at 12 fps, the keyframe would go on frame 62). Title this keyframe “loop”; this defines the second instance of the “circle1” animation as the section of frames we plan on looping. Go to the final frame of the second “circle1” animation and note the frame number (which should be frame 122); convert the frames on all the other layers with animations to keyframes, and remove all frames after that frame on all layers. The final step is to convert the final frame of the “actions” layer to a keyframe, and add the following Action Script to the keyframe: gotoAndPlay(“loop”); This tells the movie clip to return to the first frame in the “loop” keyframe span, thus replaying that span until it gets to the end, finds the script, and continues infinitely looping.
Return to the main scene and add this movie clip to it. When you test the movie, the animation will start with only the circle then add the square and any additional animations. After it’s played through that through, it will seamlessly loop all the animations together.
In summation, the main key points to achieving a looping animation with a unique intro are:
1. Create a movie clip.
2. Create an animation inside the movie clip, and duplicate that animation after itself (adding any additional animation desired offset a number of frames).
 |
3. Designate the second instance of the animation as the section of frames to be looped by naming the first frame of that keyframe span.
|
4. “Crop” any frames on any other layers by converting all the frames under the same frame number as the last frame of the second instance of the animation to keyframes.
|
| 5. Add the necessary Action Script to create the loop: gotoAndPlay(“<loopKeyframe>”); |
|
Here's the finished SWF that I made while writing this tutorial. It's very basic in nature and doesn't go beyond what the tutorial discusses.
|
|
Finally, here's a more in-depth example of what this technique can be used for.
|
- Matthew J. Lueck
|