Designs in Motion
You’ve just spent countless hours huddled in front of your computer, pushing pixels and dragging vectors to create the perfect identity for your big new client. You’re thrilled as you listen to the client rave about how much they love your work and how they plan to call you regularly for new design projects. But before you can finish patting yourself on the back, the client asks if you can turn your brilliant designs into a motion graphics sequence to play behind the CEO, while he delivers the keynote at the annual sales conference.
Things go from bad to worse as they also ask you to convert that animation into a Flash piece to be prominently displayed on their corporate website. If this likely scenario happens to you, there are two ways you can deal with it. You can explain to the client that you only do print work and static graphics and thoughtfully pass along the name of an interactive studio that you’ve heard good things about. Or you can spend some time learning how to put those beautiful creations into motion. Luckily for you, Adobe just happens to have two of the world’s best animation tools in its arsenal to help you get started.
Getting Your Designs from Here to There
One of the hardest aspects of animating Photoshop and Illustrator files is getting them over to After Effects or Flash in one piece. Unfortunately, in most cases, simply copying and pasting your assets directly will surely result in a major disappointment. It’s crucial that you learn the optimal methods for transferring files back and forth between the design and animation applications. Let’s review some typical workflows and explore the optimal methods available for moving your files.
Photoshop to Flash
In this workflow, you’ll be working primarily with bitmap graphics, so your main concern will be to preserve the quality and transparency in your image as you send it over to Flash. The optimal method is to export each of your Photoshop layers as a separate 24-bit PNG file, which is a lossless format that also retains full alpha channel information. You should never import bitmap graphics into Flash in any other format because it’s best to let Flash compress your images as it publishes your final SWF file.
But exporting each layer separately will quickly become tedious if you have a large number of layers in your document. One popular method for speeding up this workflow is to use ImageReady to automate the process of exporting your PNG files. First, open your PSD in ImageReady by clicking on the ImageReady icon at the bottom of the Photoshop Toolbox. Once in ImageReady, choose File>Export>Layers as Files to open the Export Layers as Files dialog. Choose the settings you want for exporting your PNG files and then click OK.
Once your layers have been exported, you can then import them into Flash (File>Import>Import to Stage) and start animating them. But to be sure that your graphics retain the level of quality that you expect, you need to tell Flash how much compression to apply to them when it publishes your final SWF file. All bitmap graphics in Flash get compressed to JPEGs when your final movie is created. You can set the global default compression setting by adjusting the JPEG Quality compression slider, which you can find on the Flash tab of the Publish Settings dialog (File>Publish Settings).
In most cases, however, you’ll want to adjust the compression settings individually for each imported bitmap, as a drop shadow graphic can be compressed much more than that beautiful shot of Half Dome that will serve as the main focus of your movie. To adjust individual bitmap settings, Control-click (PC: Right-click) on the file in the Library panel and choose Properties. Choose Photo (JPEG) from the Compression pop-up menu, deselect Use Document Default Quality (PC: Use Imported JPEG Data), and set the appropriate amount of compression in the Quality field.
Photoshop to After Effects
Of all the workflows that we’ll be looking at, this is probably the most straightforward. The biggest concern here is dealing with the different pixel aspect ratios that exist in some video formats. DV and DVD both use rectangular pixels, as opposed to the square pixels that Photoshop is accustomed to. When your file’s pixels are set to a different aspect ratio using rectangular pixels (Image>Pixel Aspect Ratio), you can see a preview of what your Photoshop file will look like by choosing View>Pixel Aspect Ratio Correction.
When you import your PSD file into After Effects, you’ll be happy to find out that most layers emerge unscathed. Not only that but any text layers in your document remain editable in After Effects. One of the few exceptions to watch for is a layer that has a layer style applied to it. Before importing into After Effects, flatten any layers that contain styles by merging each with a blank layer (place the layer with the style above the blank layer in the Layers palette and press Command-E [PC: Control-E]).
To import your Photoshop document into After Effects, double-click anywhere on the After Effects Project panel to launch the Import File dialog. Select your PSD file and choose Composition from the Import Kind pop-up menu and click OK. This will create a new composition with the identical layer structure as your PSD file.
New to After Effects 7 is the ability to create a new Photoshop file directly from within After Effects. Choose File>New>Adobe Photoshop File to create a PSD file with the same dimensions and settings as your After Effects composition. This method also adds handy guides for title- and action-safe areas.
Illustrator to Flash
Integrating Illustrator artwork has always been the cause of major frustrations for Flash developers. Getting Flash to decipher Illustrator’s vector content has been such a challenge that many designers end up abandoning Illustrator altogether and simply designing directly from within Flash. Luckily, there are some things you can do to ensure the best possible results.
First, convert any text to outlines (Type>Create Outlines) and any strokes to fills (Object>Path>Outline Stroke) in your Illustrator artwork, as these are two areas that Flash has a particularly hard time with. Also be aware that any complex gradients and effects, such as drop shadows, will be rasterized and exported as bitmaps from Illustrator. For best results, add complex gradients and effects inside of Flash after you’ve imported your artwork.
There are a few different options available for exporting Illustrator files to the Flash SWF format. The most common method is to separate your artwork onto individual layers inside of Illustrator so that they match the layer structure you plan to use inside Flash. Then choose File>Export and select Macromedia Flash (SWF) from the Format pop-up menu. After naming the file and clicking the Export button, the Macromedia Flash (SWF) Format Options dialog appears. In the Export As pop-up menu, choose AI Layers to SWF Frames.
This will create a SWF file that you can then import directly into your Flash file. When you import the SWF file into Flash, you’ll see a series of frames on the Timeline in Layer 1 that each represents a layer from your Illustrator file. To re-create the layer structure that you used in Illustrator, simply click the Insert Layer icon to create a new layer for each frame and move each of the frames onto one of the new layers on the Flash Timeline.
Illustrator to After Effects
As with Photoshop, you can import an Illustrator (AI) file into After Effects by double-clicking on the Project panel and choosing Composition from the Import Kind pop-up menu. This will create a new composition with the same content and layer structure as the Illustrator file.
One strange thing you may notice when you begin animating Illustrator files in After Effects is that sometimes your artwork will look pixelated when scaled. This doesn’t seem right since the benefit of using vectors is that they’re supposed to scale without any degradation. What’s actually happening here is After Effects is rasterizing any vector content that’s contained in your composition. But you can force After Effects to keep your vectors clean and crisp by checking off the Continuously Rasterize box located on the Layers panel. When this option is turned on, it tells After Effects to re-rasterize your artwork whenever it changes in your composition.
Now that the hard part is over, you can finally get to the fun stuff! But wait, you didn’t think it was going to be quite that easy did you? Before you can even think about creating sexy motion graphic sequences, you’ll have to pay your dues learning the basics of both Flash and After Effects. To do this, you’ll need to complete the de facto standard tutorial that all other would-be animators must conquer: moving a ball from one side of the screen to the other.
Flash Animation Basics
Once you’ve imported your files into Flash, you’ll then need to convert them into symbols before they can be animated. There’s a feature in Flash known as shape tweening that allows you to animate raw vector shapes, but this is rarely useful.
To create a symbol, select an imported graphic on the Stage with the Selection tool (V) and hit the F8 key. This brings up the Convert to Symbol dialog. Here you can choose between three different types of symbols: Graphic, Button, or MovieClip. A Graphic symbol is the lowest level symbol in Flash, which allows for animation but not the ability to respond to user interaction. A Button symbol builds upon the Graphic symbol, adding mouse states as well as the ability to be referenced from ActionScript. A MovieClip is the most powerful symbol in Flash, giving you all the functionality of the Graphic and Button symbols, plus its own independent timeline. More often than not, you’ll want to create MovieClips, as their versatility allows you to add more complexity later on, should your project need it.
Now that you’ve converted your artwork into symbols, you can roll up your sleeves and get animating. Basic animation in Flash is accomplished by creating keyframes on the Timeline at any key points that represent changes to your symbol. Then you’ll convert these keyframes into a motion tween, which tells Flash to go through your keyframes and interpolate the value of the in-between frames. When setting keyframes on your symbols, you can animate almost any property, including position, opacity, rotation, scale, color, as well as a whole slew of effects such as glows and drop shadows.
You’re now ready to attempt the all-important ball slide animation. Our example movie consists of a single layer that contains a MovieClip symbol of a ball. Go out and select frame 30 on the Timeline and insert a new keyframe by hitting the F6 key. How long does 30 frames of animation last? Well that all depends on your movie’s frame rate. If your movie is set to 30 frames per second, which is a general standard, 30 frames will correspond to exactly one second of animation.
Now, select the ball and move it to the other side of the stage. With the keyframe now set, hit the Enter key to preview your animation. Not seeing anything? This is because we defined the start and end points for our animation, but we still need to tell Flash to fill in the in-between frames with a motion tween. To create a motion tween, Control-click (PC: Right-click) on the Timeline anywhere along your animation and choose Create Motion Tween.
If everything works as planned, you should now see the animation highlighted in blue in the Timeline with an arrow going through it. (Note: You shouldn’t animate multiple items on the same layer if they need to move independently of each other, as they will be grouped together and treated as a single object by the motion tween.)
After Effects Animation Basics
Animation in After Effects has long been regarded as being more intuitive than in Flash, partly due to its time-based approach. It also allows you animate specific properties, which it will then automatically keyframe whenever their values change. For this example, we have a bitmap version of our favorite ball on the Timeline.
To animate its position, first select the layer and press the P key. You should see the Position property displayed beneath the layer name. Click the little Stopwatch icon to the left of the property name to enable keyframing for that property. Now any changes you make will be automatically keyframed by After Effects. Position the play head at the point on the Timeline where you want your animation to end. Now, click-and-drag the ball to a new position in the composition to set a new keyframe value. Hit the Spacebar to preview your finished animation.
Advanced Animation Techniques
The examples we’ve seen thus far represent only the simplest form of animation. Our ball only moves from point A to point B at a consistent speed, which is also known as linear animation. The problem with linear animation is that things don’t actually move this way in the real world. When you kick a soccer ball across a field, it starts out at a very high rate of speed and then gradually comes to a stop as it’s subjected to the forces of friction. To mimic this type of real-world animation using software, you’ll need to add what’s known as easing.
You can add easing to the beginning of an animation, to the end of an animation, or to both. The procedures for applying easing are essentially the same for Flash and After Effects. Both involve adjusting a Bézier curve that represents the velocity of the animation. If you’re familiar with the Curves editor in Photoshop, you should have no problems working with this curve.
In Flash, select a frame anywhere along your motion tween and click the Edit Ease button located in the Properties panel. This opens a curve editor where you can adjust the velocity of your animation by adjusting the Bézier curve handles and adding new control points. Here’s an example of a typical ease out curve.
In After Effects 7, you can find a similar curve editor by selecting the animated property and clicking the Graph Editor Button at the top right of the Timeline. You can pull Bézier handles, skew and scale the overall animation, as well as adjust multiple animation curves at the same time. For an even easier approach, select the animation curve and choose Animation>Keyframe Assistants>Easy Ease Out to automatically apply a perfect ease out curve to your animation.
I’ve given you the basics of how to move your Illustrator and Photoshop designs over to After Effects and Flash as well as learning the basics of both animation systems. Not surprisingly, there’s enough information available on these topics to fill a small public library. So you’ll definitely want to take what you’ve learned here and build upon it by finding some good books and video tutorials. In fact, you’ll find two video tutorials at www.layersmagazine.com where I go even more in-depth on taking your designs and adding motion and show you step-by-step how to create animations in both Flash and After Effects. Now get moving!
Five Tips for Better Animations
Here are some things to keep when mind when you first start animating.
Don’t go overboard
It’s very common for beginners to let their excitement and passion take over, resulting in cheesy, over-the-top animations. As a general rule, I usually take my initial vision for an animation and cut it in half, as it’s always safer to err on the side of too little rather than too much.
Make it quick
The easiest way to spot an amateurish animation is by watching the speed. Beginners tend to animate things too slowly, sometimes painfully so. Take a few hours and watch some TV promos or opening title sequences and you’ll notice that things are often moving so fast that you can barely register what’s actually happening.
It’s all about timing
Another rookie mistake is to animate things in a linear sequence, wherein the next animation doesn’t start until the current one finishes. Try creating a sense of fluid movement by overlapping animations and playing with the velocity curves to create a dramatic sense of motion.
Adding sound to your animations can give them a sense of realism and drama. Try experimenting with panning your sound effects from one channel to the other. If, for example, you have a ball sliding from left to right, make your sound effect also pan from the left to the right.
Add a new dimension
Giving your animations some subtle 3D effects will definitely get people’s attention. But be careful, as it’s very easy to overdo it. After Effects ships with 3D support built right in. In Flash however, creating 3D effects often requires ActionScript code that resembles something out of an advanced calculus textbook.