CREATING 2D AND 3D ANIMATION USING ILLUSTRATOR:

There are many ways to create simple Flash animations in Illustrator: (Download sample animations)

  1. Create a blend and release the blend sequences to layers (Same as distribute to layers in Flash) in Flash.
  2. Create layers manually one at a time and then select Release to Layers from Layers panel.
    NOTE: When layers are exported, you can identify which layer(s) get animated and which layer(s) are kept static. You can also preview the animation in a browser or in Device Central.
  3. You can also output the file as an *.ai file and then import it into Flash for more advanced animation.

Manually create layers (Option 1)

  1. Create or import the artwork you want to animate.
    NOTE: You can use symbols to reduce file size.
  2. Create a separate layer for each frame in the animation and make edit to each layer (This is akin to frame-by-frame animation in Flash)
    TIP: To rotate an object 360 degrees IN PLACE, you can import or create a shape and then double-click on the rotate tool and enter 20 degrees in the text field., Then, click the COPY button to copy and rotate the original object 20% from it original position. This will create another layer.  Click CTRL+D sixteen more times (a total of 18) which will give you a total of 360 degrees (20x18). This will create 16 more layers and rotate the object IN PLACE.
    TIP: To rotate an object 360 degrees ABOUT AN AXIS, you an import or create a shape and then single-click on the rotate tool and set registration point about the object. Then hold down the ALT (to copy) and SHIFT(to constraint) keys and drag the object to a 45 degree angle to create a copy of the original image at a 45 degree angle. Click CTRL+D seven more times to complete a circle of objects.
  3. Illustrator can only animate top-level layers. To convert all of the sub-layers to top-level layers, click the target radio button on the current top-level layer (Layer 1) to select all sub-layers.
  4. From the Layers panel menu, choose Release to Layers (Sequence) to convert all of the sub-layers to top-level layers (They will now appear with a triangle (folder) icon next to them).
  5. Delete Layer 1. You should now have Layer 2 - Layer 19 for TIP 1 or Layer 2 - Layer 7.?????
  6. Choose File > Export...  and name the file (i.e., RotatingAnObjWithLayers.swf)  and choose the Flash (swf) format and then click Save buttonn twice.
  7. In the SWF Option dialog box that appears select the AI Layers to SWF Frame as the Export As type to convert all of the AI layers to Flash frames. NOTE: If the Advanced button is NOT shown, click on the Basic button to switch to the Advanced button.
  8. Click on the Advanced button to switch to the Basic button.
  9. (Optional) To make the animation loop, ensure that Looping checkbox is selected.
  10. Click OK and then click on the Web Preview... button or the Device Central... button to see the resulting animation.

Automatcially Create Layers Using Blend with 2D or 3D Object (Option 1)

Create a 3D object using the Effect > 3D > Extrude option.

  1. After creating a 2D/3D object, make a copy of it and move it to an opposite side of the canvas from the original.
  2. Double-click on the Blend tool and select Specified Steps as the Spacing type and then type in 6 into the next text field and click OK
  3. Using the Appearance panel, move the second copy to rotate it in a different position and then click OK again.
  4. Select both objects and then select Object > Blend > Make.
  5. (Optionally) Using the Pen tool click in the center of the line that was create as a result of the blend to add a point to the path. Then use the Convert Anchor point tool to pull out a curve.
  6. Choose File > Export....  and name the file (i.e., Rotating3DObject.swf)  and choose the Flash (swf) format and then click Save button.
  7. In the SWF Option dialog box make sure you see the Advanced button and not the Basic button. Then select the AI Layers to SWF Frame as the Export As type to convert all of the AI layers to Flash frames and the Flash Player 9 as the Version.
  8. Click to Advanced button to go to the Basic option and select Looping (optional) to make the animation loop and Animate Blends checkboxes and the In Sequences radio button and then click the Web Preview... button to preview the animation in a browser.
  9. Click OK in the SWF Options dialog box to save changes.

Automatcially create layers (Advanced Option 2)

Create a blend between two objects to automatically create a tween between the two objects.

  1. Create two layers, name one Background and the other Text.
  2. (Optional) Add background graphics or color to the background layer and lock it.
  3. Select the Text Layer and insert some text  (i.e., [Your Name])
  4. With the text object selected, convert the text to 3D by selecting Effect > 3D > Extrude and Bevel... and then click on the Preview checkbox to see result.  Accept the default options for now and click OK.
  5. Duplicate the layer and then select its text with the Selection tool and open the Appearance panel to edit the 3D effect by double-clicking on the 3D Extrude and Bevel link.
    TIP: Drag Text layer to new layer icon at the bottom of the Layers panel to duplicate layer (similiar to Photoshop).
  6. In the Extrude and Bevel dialog box, swivel the text in the opposite direction (y-axis) of the first text and then click OK.
  7. Select both text objects and then double-click on the Blend tool and select Specified Steps and type in 10 in the next field and click OK.
    TIP: To select both text SHIFT cllck both text objects on the canvas or SHIFT+click both target icons in the Layers Panel.
  8. Apply blend between both objects by clicking CTRL+ALT+B.
  9. To make the animation loop correctly, select the first sub-layer in the Blend layer and drag it below the second sub-layer.  However, before releasing the mouse, hold down the ALT key to duplicate a copy below the second Blend layer (You should now have 3 sub-layers in the Blend main layer)
  10. Choose File > Export...  and name the file (i.e., RotatingAnObjWithBlend.swf)  and choose the Flash (swf) format and then click Save button.
  11. In the SWF Option dialog box that appears select the AI Layers to SWF Frame as the Export As type to convert all of the AI layers to Flash frames.
  12. Click on the Advanced button and ensure that looping checkbox is selected and then select the Animate Blends checkbox and the In Sequences radio button.
  13. Then click the Export Static layer and select Background, if you have a background layer you do not want to include as part of the animation. It will serve as a background for all frames.
  14. Check the Frame Rate to 6 fps.
  15. Click OK and then navigate to the swf file and double-click on it to see the animation.

Export Layer to Flash SWF format

You can also choose File > Save For Web & Devices and then choose SWF from the Optimized File Format menu.  Choose AI layers to SWF Frames from the Type Of Export menu.  Set any other options as needed. Click Save.