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 that’s powerful and user-friendly. In this tutorial, we’ll walk you through a typical project workflow from preparing graphic symbols in Illustrator CS3 to importing and animating those symbols inside Flash CS3.

[If you’d 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 we’ll 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 didn’t do before CS3. Now let’s get started by creating our symbols.


ŠISTOCKPHOTO/BRANKA POPOVIC

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 you’ll 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 we’ll 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 you’ve created all the symbols, you can select and delete everything that’s 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 you’re finished, Save the file and open Flash CS3. Here’s 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 inspector—this ensures that our animations will be nice and smooth. That’s 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 don’t 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 layers—these new frames equal 3 seconds because we set our movie’s 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 won’t be mistaken as part of the artwork, and draw a rectangle at the bottom of the symbol (as shown). Make sure that this rectangle isn’t covering any part of the symbol that you’re revealing with the mask.

11 SCALE THE MASK SHAPE
Let’s 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, we’ll look at how to scale up one of the symbols (we’re 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.

Share & Enjoy


 

  1. Don (Reply) on Wednesday June 4, 2008

    Great!
    Thanks alot, I was able to follow easily along.

  2. clark S (Reply) on Wednesday June 4, 2008

    nice

  3. kc (Reply) on Wednesday June 4, 2008

    It would be nice if the tutorial were “animated”.

  4. Tomas (Reply) on Wednesday June 4, 2008

    Yeah thats very similar to this tutorial….

    http://www.cartoonsmart.com/silhouette.html

    Check out some of the examples.

  5. digitalmatt (Reply) on Wednesday June 4, 2008

    Definitely a tutorial worth putting out there. CS3 has enhanced my workflow x 10.

  6. glatha (Reply) on Wednesday June 4, 2008

    This file is used in my practicals.

  7. peral (Reply) on Wednesday June 4, 2008

    i want it

  8. tom (Reply) on Wednesday June 4, 2008

    you should have the .swf file on this page for visual aid. just so we can see the final outcome.

  9. [...] Moving Illustrator Art [...]

  10. mxky (Reply) on Wednesday June 4, 2008

    how cool

  11. amanda (Reply) on Wednesday June 4, 2008

    agreeing with tom

  12. begay (Reply) on Wednesday June 4, 2008

    no point in doing this its still confusing! :(

  13. ADW (Reply) on Wednesday June 4, 2008

    WTF.



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby