Drawing repeating elements in Flash can be a real asspain. This tutorial will teach you a valuable trick with the timeline to help you draw things like starbursts, buzzsaws, clock faces, and repeating elements along a path.
Check out this vector graphic of a sun. Sure, you can individually copy and rotate all those flames and then meticulously hand-position them, but life’s too short and you’ve got too much other awesome stuff to do. There’s a faster, easier way!
Step 1: Draw your graphics
To begin, I’ve just drawn a circle and a little flame graphic. I filled them both with a gradient so they look less junky.
Step 2: Symbolize your graphics
Select the circle and press F8, or click Modify > Convert to Symbol. Enter a name for your symbol – anything you like – and make sure the Registration point is in the center. Press OK when you’re finished.
Step 3: Create an Empty Movie Clip
Press CTRL+F8 or click Insert > New Symbol … to create an empty Movie Clip. Again, call it whatever you like and click OK. Then click the Scene 1 tab to jump back out to the main timeline.
Press CTRL + L or click Window > Library to bring up the Library. Click and drag the empty Movie Clip you just created and drag it to the Stage. The empty Movie Clip looks like a white dot.
Step 4: Align the two Movie Clips
Press CTRL + K or click Window > Align in the menus to bring up the Align panel. Click and drag to range-select both Movie Clips at once. Click the “Align horizontal center” and “Align vertical center” buttons (highlighted in red in the image) to align the center points of the two clips.
Step 5: Cut and paste the repeated element into the empty Movie Clip.
Select the artwork for the repeated element and press CTRL+X or Edit > Cut in the menus to delete it and copy it to memory in the clipboard.
Now, double-click the empty Movie Clip (the white dot) to edit it. If you accidentally double-click the circle, click the Scene 1 button to jump back out to the main timeline and try again. Alternately, you can double-click the empty clip from the library to edit it.
Finally, press CTRL+V or Edit > Paste to paste the repeated element artwork from the clipboard into the empty Movie Clip. Position the artwork where you’d like it to appear; in the case of our sun graphic, we’ll move the little flame to the edge of the circle. Click the Scene 1 button to jump back out to the main timeline when you’re ready.
Step 6: Prep the timeline.
Select the repeated element (in this case, the flame Movie Clip) and press CTRL+X or Edit > Cut to delete it and copy it to the clipboard.
Click the New Layer button at the bottom left of the Timeline window. Click on the first frame of the newly-added layer, and press CTRL+SHIFT+V to paste the repeated element in exactly the same place.
Step 7: Spin the clip.
Click on frame 30 of the main timeline in the newly-added layer. Press F6 or click Insert > Timeline > Keyframe to drop a new Keyframe there. You’ll see a black dot on frame 30.
Click on Frame 1 of the new layer. Right-click and select Create Classic Tween. An arrow with a blue background appears to indicate that Flash will interpolate the position, rotation, scale and color effects of this Movie Clip across the frame range.
Open the Properties panel (Windows > Properties or CTRL+F3). Select the repeated element Movie Clip. The context-sensitive Properties panel updates to show Movie Clip properties.
Under the Tweening heading, choose CW (clockwise) from the Rotate: dropdown. (You may need to click the little triangle to expand the Tweening section). This makes the repeated element rotate around its registration point for the duration of the animation span.
Step 8: Adjust the animation with Onion-Skinning.
Click the Onion Skin button at the bottom of the Timeline window to turn on Onion Skinning. Click and drag the grey animation range gizmo at the top of the Timeline window to stretch across the entire animation range.
Now you can clearly see how your repeated element is distributed around its registration point. If the distribution is too sparse, click the pink rectangular Playhead at the top of the Timeline window and hold down the F5 key (or repeatedly click Insert > Timeline > Frame if you’re a sucker) until the distribution is to your likely. If the distribution is too dense, press SHIFT+F5 to delete frames until it looks good. If you’re deleting frames, make sure you either lock the lower layer, or move away from Frame 1, or else you’ll delete the lower layer artwork!
The following images show how differing frame range lengths can affect the distribution of your repeated elements:
Step 9: Turn the interpolated frames into symbol instances.
Right now, those repeated elements may look exactly the way you want them, but they’re not “real”. What you’re seeing is just the motion trail of a single Movie Clip instance as it revolves through its animation.
To turn these phantoms into actual symbol instances, click and drag to select the entire range of animated frames, and press F6 to convert them all to keyframes. Now, each frame contains an actual “physical” instance of the Movie Clip.
Step 10: Gather the elements together on one frame.
Click the Edit Multiple Frames button at the bottom of the Timeline window.
Click the dot beneath the Lock column on the lower layer, to keep from messing with the graphics on the lower frame.
Press CTRL+A to select all of the (unlocked) repeated elements. The Edit Multiple Frames mode enables you to select all of the instances across the frame range.
Press CTRL+X or Edit > Cut to delete all of the repeated elements and copy them to the clipboard.
Uncheck the Edit Multiple Frames button. Click on the first frame, and press CTRL+SHIFT+V to paste the repeated elements in place.
Step 11: Tidy up.
Click and drag to select the animation range from frame 2 to the last frame. Press CTRL+F6 to delete all of the empty, blue animated keyframes. Press SHIFT+F5 to delete the frames so that your timeline is back to a single frame.
Click and drag the top layer below the bottom layer to swap their z-depth order. This put the repeated elements behind the circle. Looks pretty good!
This trick works for more than just straight lathe effects. You can animate a MovieClip along a path and add scale effects to it before F6-ing the whole affair. Check out the tail scales on this super-realistic dinosaur: