Design Center Tutorial
Creating a 3D button animation for Flash
Table of Contents
Create a 3D button
Prior to the introduction of Flash video in Flash MX, video was essentially a hit or miss proposition. The video could be embedded into the timeline, but the result was one seriously bloated SWF file. A couple of developers, most notably Hillman Curtis, discovered a rather nifty way of faking video in a movie clip. Instead of embedding the video, rotoscope the video—rotoscoping converts a video to a series of still images—and import the images into a Flash movie clip. Though it sounds rather complex, you will discover Flash isn’t as dumb as it looks when it comes to this technique. We start by creating a button that rotates in all three dimensions in space. Here’s how:
- Open After Effects and create a new Comp using these values:
- Composition Name: Button
- Width: 140
- Height: 50
- Frame Rate: 15
- Duration: 0:00:03:15
- Background Color: #FFFFFF (white)
- Select the Text tool and enter the text Click me. In the Character panel, set the font to Arial Black or Arial Bold, the size to 20 pixels, and the color to #FF0000 (red).
- Open Effects & Presets > Perspective and drag a copy of the Drop Shadow filter onto the text in the Comp window.
- Open the Effect Controls panel and set the Distance value for the Drop Shadow filter to 11 and the Softness value to 14.
Note: That’s the good news. The bad news is they can’t be applied to light and camera layers.
- Click the 3D switch for the Text layer and twirl down the layer’s Transform properties. You now have the stage set to put the button in motion (see Figure 1).
(+) view larger
Figure 1: Combine a drop shadow with a 3D layer for a little extra jazz.
