Part II: Create an Animated 3D Poker Chip

On: May 11th, 2008

Three dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you'll how to turn that into a 3D animation.

In this series we'll create a 3D poker chip in Illustrator. We'll then learn how to animate this poker chip, and export it to flash. Part II of this series covers the process of creating and exporting the animation. Let's get to it.

Animate the Poker Chip

The animation portion of this tutorial can get a little tricky. It's very important for the symbols to line up; So, when the animation completes a revolution there aren't any jumps or skips. You may have to tweak the steps in Part I to make sure everything works properly. I know I had to.

Let's Get Started

Duplicate the entire poker chip by selecting it, and pasting to front (CNTRL+C, CNTRL+F). Then select the chip copy that we just made, and double click the 3D Revolve Effect. Use the settings as shown.

Click the Map Art button and adjust the surfaces as shown. Some symbols will need to be rotated in order to create a smooth transition.

Now select both 3D objects. Go to Object > Blend > Blend Options. Select Specified Steps and enter 25. Then go to Object > Blend > Make.

In the layer palette, select the blend layer > in the fly out menu select Release to Layers (Sequence). This will place all the blend steps into separate layers.

Export the File

Now we are ready to export our swf file. Go to file > Save for Web and Devices. Use the settings as shown below. Make sure you export it as a swf file and convert the layers to swf frames. You may also loop the animation.

Conclusion

This was a fun tutorial to design. This is the first tutorial I've ever written - feedback is welcome. You may also adjust the chip's color and rotation. Or create stacks of chips if you like. The final flash file is below.

Bookmark/Search this post with: