FAST FLASH MX TECHNIQUES

by Ellen Finkelstein and Gurdy Leete

Coauthors of Macromedia Flash MX For Dummies

Step-by-step recipes for amazing animations, effects, and interfaces

CD-ROM includes sample movies from the book and a Macromedia Flash MX trial version

TECHNIQUE

KALEIDOSCOPE

. (CP 7)

o you remember looking into a kaleidoscope when you were a kid turning the tube and being amazed? You can create a similar effect in Flash. You can create infinite variations by choosing different tweens.

STEP 1: CREATE A WEDGE

Start with a new movie (File New). You may remember that a kaleidoscope is divided into wedge-shaped sections. Creating the wedge is easy.


1. Draw a circle that covers most of the visible Stage when the zoom is at 100%. You need only the stroke on the circumference. You can delete any fill. Press the Shift key as you use the Oval tool to create a perfect circle. 2. Select the circle. Cut and paste it to center it onto the Stage. (This works only if you havent scrolled to move the view of the Stage; otherwise, use the Align panel.) 3. On the side of the circle, use the Line tool to draw a vertical line that is a little longer than the diameter of the circle. Press the Shift key as you draw to make it perfectly vertical. 4. Copy the line to the Clipboard and paste it. The line will be centered on the Stage and across the circle. 5. With the line still selected, choose Modify Transform Scale and Rotate. In the Rotate text box, enter 22.5 and press Enter. 6. Select the line still remaining on the side of the circle. Cut and paste it to center it, as shown in Figure 8.2. 7. Delete everything except the wedge shape as shown in the figure. All the lines are segmented so that you can easily delete the segments you dont need. 8. Select the wedge and choose Insert Convert to Symbol. Name it wedge, keep the movie clip default, and click OK. 9. Delete the wedge symbol on the Stage. (You have it saved in the Library.)

Chapter 1 2D Animation

N OT E You can find our kaleidoscope in the Techniques folder of the CD-ROM. Look for 08.fla.

STEP 2: CREATE THE KALEIDOSCOPE

Now you want to create a circle of wedges, creating the look of a kaleidoscope.
1. Rename Layer 1 to wedges. 2. Open the Library (Window Library) and

drag in an instance of the wedge symbol. Place the instance at the top-center of the Stage, in approximately the same position it occupied originally when you created it. 3. With the wedge still selected, choose the Free Transform tool. Drag the transformation point the circle at the center of the wedge to the lower-left corner of the wedge. 4. Copy the wedge to the Clipboard. Choose Edit Paste in Place (Ctrl+Shift+V (Win)/ +Shift+V(Mac)). 5. Choose Modify Transform Scale and Rotate (Alt+Ctrl+S (Win)/Option++S(Mac)). In the Rotate text box, enter 22.5 and press Enter. 6. Repeat Steps 4 and 5 until the circle is completely filled up with wedges. (Using the keyboard shortcuts makes this process go faster.) 7. Click the wedges layer to select everything on the layer. Choose Insert Convert to Symbol. Name the symbol kaleidoscope, keep the default movie clip behavior, and click OK.
STEP 3: CREATE THE MOTION TWEENS

You now have a lot of wedges. To create the kaleidoscope effect, you now create a symbol of shapes to tween in the wedge symbol. When youre done, each of the wedges becomes animated.

Double-click wedge in the Library (Window Library) to edit it.

Kaleidoscope

Rename the existing layer to wedge. Insert a new layer and drag it below the existing layer. Call it shapes. Lock the wedge layer. On the shapes layer, create several shapes in bright colors. Youll get the best results with bright colors. Thick contrasting strokes also create a nice effect. We used circles and ovals. You want to fill up most of the wedge and extend out to the left with lots of shapes. Figure 8.3 shows the symbol that we created. Click the shapes layer to select all the shapes. Choose Insert Convert to Symbol and call the symbol shapes. Click the symbol and look at its X and Y coordinates in the Property inspector (Window Properties). Write them down. You want the shapes to end up in the same position at the end of their motion tween journey so they dont jump when the movie loops. On the shapes layer, add a keyframe at Frame 20. Click Frame 20 and move the shape symbol to the right, but make sure that it still covers the wedge. Select Frames 1 through 20

and choose Motion from the Tween drop-down list of the Property inspector. Add a keyframe at Frame 40. Move the shapes symbol back to its original coordinates (you can type them in the X and Y text boxes of the Property inspector). Select Frames 20 through 40 and choose Motion from the Tween drop-down list of the Property inspector. This time select CW (clockwise) from the Rotate drop-down list and set the tween to rotate 1 time in the Times text box.
STEP 4: CREATE A MASK

Now you want to turn the wedge into a mask, hiding everything outside of the wedge shape. All you see is the shape tweens, repeated inside every wedge shape. Unlock the wedge layer. Use the Paint Bucket tool to fill in the wedge symbol. Right-click (Win)/Ctrl-click(Mac) the wedge layer and choose Mask from the menu. The wedge disappears.

Test your movie and prepare to be hypnotized!