Adobe has done a lot to improve the integration between Flash CS3 and Illustrator CS3. The workflow between these two applications has moved from almost nonexistent to one thats powerful and user-friendly. In this tutorial, well walk you through a typical project workflow from preparing graphic symbols in Illustrator CS3 to importing and animating those symbols inside Flash CS3.
[If youd like to download the project file used here to follow along with this tutorial (as well as preview the final effect), click here . All files are for personal use only.]
1 OPEN THE ILLUSTRATION
In Illustrator CS3, choose File>Open and navigate to the butterflyDream.ai download file. This file has lots of different design elements that well turn into symbols to use in Flash CS3. This workflow has been helped tremendously by allowing designers to create Movie Clips directly from within Illustrator. Illustrator artwork will also now render perfectly inside Flash, which it certainly didnt do before CS3. Now lets get started by creating our symbols.
2 CREATE THE BACKGROUND SYMBOL
With the Selection tool (V), click the green background to select it and all of the white elements, then press the F8 key to make it a symbol. In the Symbol Options dialog, choose Movie Clip and name it background. Click OK and then open the Symbols panel (Window>Symbols) and youll see your background symbol in the panel. (You can already see the enhanced Flash integration because you can now create Flash symbols from within Illustrator.)
3 CREATE A BUTTERFLY SYMBOL
Next, choose specific design elements on the artboard to turn into symbols. Choose one of the butterflies and once again press F8 to open the Symbol Options dialog. As well be scaling this symbol in our animation, we need to set the Flash Registration point to the center, as shown in the graphic. This will make the symbol scale up from the center when we animate it in Flash.
4 CREATE THE REMAINING SYMBOLS
Now go ahead and create symbols from the other design elements that you plan to use in your animation. You can choose your own set of elements or you can choose the ones that we did (shown here). Make sure that you set the Flash Registration point of the symbol to the center if you plan on scaling it in Flash; otherwise, you can just leave it in the upper-left corner.
5 ASSEMBLE YOUR MASTERPIECE
Now that youve created all the symbols, you can select and delete everything thats on the artboard. This will give you a clean slate to begin assembling your final scene. First, drag the background symbol from the Symbols panel onto the artboard and align it on the artboard. Then you can assemble your scene however you like by dragging symbols onto the artboard and positioning them where you want. When youre finished, Save the file and open Flash CS3. Heres our finished scene.
6 CREATE A NEW FLASH FILE
In the Flash CS3 welcome dialog, under the Create New section, choose Flash File (ActionScript 3.0), which creates a blank Flash document that, when published, will be playable in Flash Player 9 and above. Go ahead and change the Frame Rate of the movie to 30 fps in the Property inspectorthis ensures that our animations will be nice and smooth. Thats all we need to set up our Flash document. Now we can import our Illustrator file.
7 IMPORT THE ILLUSTRATOR FILE
Choose File>Import>Import to Stage to open the Import dialog, then choose your Illustrator file, and click open. This will launch the Illustrator Import dialog, where you can specify all of the different import options that are available. Because we did most of our prep work in Illustrator, we only need to check the second box (circled) to ensure that our Flash movie will have the same dimensions as the Illustrator file. Click OK to import the Illustrator file.
8 DISTRIBUTE SYMBOLS TO LAYERS
Notice that all of the symbols came into Flash on the same layer. We could have put them on different layers in Illustrator to remedy this, but I prefer this faster approach: Select all of the items on the Stage by pressing Command-A (PC: Ctrl-A). Now Control-click (PC: Right-click) on the items and choose Distribute to Layers. This will take each symbol on the Stage and place it on its own layer in the correct stacking order. You can delete Layer 1, which should now be empty. Also lock the background layer so you dont accidentally select it.
9 SET UP THE TIMELINE
Next, we need to add some frames to the Timeline to begin animating. Select frame 90 on all layers by clicking-and-dragging down the entire layer stack on frame 90. Press the F5 key to insert new frames on all layersthese new frames equal 3 seconds because we set our movies frame rate to 30. You can add or remove frames based on how long you want your animation to be.
10 CREATE A MASK LAYER
Now choose a layer that you want to animate using a mask; for our example, we chose one of the green branches. Click the Insert Layer icon to create a new layer above this layer and rename it mask. Click on the Rectangle tool (R) in the Toolbox, then choose a Fill color that wont be mistaken as part of the artwork, and draw a rectangle at the bottom of the symbol (as shown). Make sure that this rectangle isnt covering any part of the symbol that youre revealing with the mask.
11 SCALE THE MASK SHAPE
Lets insert a new keyframe on the mask layer at frame 15 by selecting the frame and pressing the F6 key. Now Control-click (PC: Right-click) on the rectangle, choose Free Transform, and scale the rectangle up so that it completely covers the symbol, creating the two endpoints for our mask animation. (Note: Simply scaling a rectangle mask over a symbol is a quick-and-dirty way to reveal an item in Flash. Of course, you can create a more complicated mask reveal, but this is fine for our example.)
12 CREATE SHAPE TWEEN
Now that the endpoints of the mask are set, we can fill the other frames of our animation using a shape tween: Control-click (PC: Right-click) anywhere between the two keyframes and select Create Shape Tween. With the tween selected, set its Ease to 100 in the Property inspector to give it a more realistic movement.
To make this an actual mask layer, Control-click (PC: Right-click) on the layer name and choose Mask. Now if you test the movie (Control>Test Movie) you should see the item reveal itself.
13 SCALE THE PINWHEEL
Next, well look at how to scale up one of the symbols (were using the pinwheel in our graphic). Select one of the circular symbols on the Stage at frame 1 of the Timeline and open the Transform panel (Window>Transform). Check the Constrain box and then set the scale down to 0. Now insert a new keyframe on the layer at frame 10 and another at frame 20. With frame 20 selected, set the scale back up to 100%.
14 CREATE THE SCALE ANIMATION
Now Control-click (PC: Right-click) anywhere between frames 10 and 20, choose Create Motion Tween, and then set the Ease to 100 in the Property inspector. Also select CW from the Rotate pop-up menu in the Property inspector to make the symbol rotate once during the animation.
From this point, just continue animating using the techniques shown above. Be creative and be sure to experiment.