Using Adobe After Effects to Create an Award Winning Website

A Wordy Splat

One of the most recognized projects to come out of the Energi Design studio in the last couple of years is the highly acclaimed Words at Play website (www.wordsatplay.com), which landed two Webby Awards, as well as a Flash Forward award. Not bad for a website that was entirely animated in After Effects! As the designer and creator of the site, my aim was to inject life and playfulness into both the character illustrations and the word games that followed them, and many people have asked me just how it was done—so here we go!

STEP 1 The Illustration(s)
The illustrations for Words at Play were designed and created by Roberto de Vicq de Cumptich, a wonderful book designer and illustrator in New York. The illustrations were for the book Words at Play, designed by Matteo Bologna, and were therefore created in Adobe Illustrator to ensure the highest quality. This was the perfect place for me to start, as After Effects imports native Illustrator files and their layers, retaining their vector quality for animation.

PHOTO CREDIT: ©ROBERTO DE VICQ DE CUMPTICH

STEP 2 Outline Fonts; Add Crop Area
First, select all the characters that make up the illustration (an illustration of Anne Sexton in our example) and go to Type>Create Outlines, to avoid any potential font issues in the future. To ensure that the layers and files come into After Effects at the correct size and position, a crop area needs to be applied. Select the Rectangle tool (M) and click on the upper-left corner of the document to bring up the Rectangle dialog. Key in 850×550 pixels and click OK. Then, go to Object>Crop Area and chose Make.

STEP 3 Save Selected Versions; Delete Characters
To make the animation process easier and more manageable, separate the Illustration into four different documents, one for each of the main parts of the character. Go to File>Save As, and save the files as “Face,” “Collar,” “Hair Outline,” and “Hair Pieces,” respectively. Then, open each file and delete all unnecessary characters from that file (e.g., Face.ai had the hair and collar removed, leaving just the eyes, nose, mouth, and ear characters).

STEP 4 Adjust Stacking Order
To further decrease the animation time in After Effects, go into each file and decide in which order each of the characters will eventually animate. Changing their stacking order accordingly will ensure they come into AE ready to animate quickly. Starting in the Face file, select the first character you want (in Anne’s case, the X in the right eye) and chose Object>Arrange>Bring to Front. Continue to do this for all of the characters, setting their order.

STEP 5 Release to Layers; Rinse & Repeat!
Once done, the characters are still part of one single layer, so with the topmost layer selected in the Layers palette, go to the flyout menu in the Layers palette and choose Release to Layers (Sequence). As the new bottom layer is now highlighted, Shift-click the second-to-top layer (Layer 2), then click-and-drag all of the selected layers to the top of the layer stack to remove them from Layer 1. Drag Layer 1 to the Trash icon and save the file. Repeat Steps 4 and 5 for the other files, to make them all ready to import into After Effects.

STEP 6 Import Compositions to After Effects
With a blank project open in After Effects, go to File>Import and chose Face.ai. At the bottom of the Import dialog in the Import As pop-up menu, choose Composition – Cropped Layers. This will make sure the crop area of the file (850×550 pixels) is respected, but each of the layers will come in with the layer boundaries respecting the size of the character on it. After clicking OK, repeat the steps to import the other three files.

STEP 7 Change Background; Access Properties
Double-click the Face composition icon in the Project pane to open it. Go to Composition>Background color, click the color swatch, and change it to white. Because the layer organization has already been done in Illustrator, the characters are ready to animate immediately. They’re in their final positions, but they need to start outside the frame. Move the Current-Time Indicator (CTI) to 20 frames, select all the layers (Command-A [PC: Control-A]), hit P on the keyboard, then hit Shift-S and Shift-R to show the layers’ Position, Scale, and Rotation values.

STEP 8 Add Keyframes; Scale Backwards; Rasterize
With the properties visible for all the selected layers, click the Stopwatch next to Position, Scale, and Rotation on the first layer. This adds a keyframe to all of the layers simultaneously. Then, hit the Home key to go back to 0 seconds, and drag your cursor over the 100% Scale value next to the top layer to scale all the layers up to 250%. Because the layers are now becoming pixelated, click the Continuously Rasterize icon next to the first layer to affect all the layers.

STEP 9 Adjust Position & Rotation
Click outside the objects to deselect them all, then select just one of them and drag it outside the frame. Hit W on the keyboard to access the Rotation tool (I remember it as W for “Wotation”!), and drag on the edge of the character to rotate it around to a different starting angle. Repeat these position and rotation steps for each of the other characters in the composition, ensuring they all start outside the frame area at 0 seconds.

STEP 10 Ease Keyframes
To smooth the speed of the characters moving into position, click-and-drag a selection over all of the final keyframes of the layers (at 20f), then hit Shift-F9 to Ease In the values, and then Shift-~ to close all of the layer properties. Now, instead of having each character play at the same time, let’s put a small time gap between them. First, check that the duration is 20 seconds under Composition>Composition Settings (having a previous comp of that length before importing the Illustrator files is a good way to get this automatically—a little tip!).

STEP 11 Sequence Layers; Rinse & Repeat!
Select the bottom layer in the Timeline (the first character decided on in Illustrator), then Shift-click the top layer to select them all in the correct order. Go to Animation>Keyframe Assistant>Sequence Layers and enter 19.25 to give roughly a five-frame overlap. AE will offset the layers perfectly, and dragging the CTI now shows the finished face. With the Face complete, repeat Steps 7–11 for each of the other three compositions—adding the keyframes, moving, scaling and rotating the pieces, and Sequencing the layers.

STEP 12 Nest Compositions; Offset Start Time
In order for the separate pieces to play together, go to File>New>Composition, and use the same pixel size and duration as the other compositions. Then, drag the four compositions from the Project pane into the Timeline. Each of the nested compositions play to completion in around 3 seconds, so move the CTI to 3 seconds, select the Hair Outline layer, and hit the Left Bracket key ([) to move its start point to 3 seconds. Do the same for the Hair Pieces at 6 seconds, and the Collar at 9 seconds.

STEP 13 The Smile, Part 1
One of the finishing touches to Anne was her cheeky smile, which was simply a rotation—but one which “grouped” the mouth elements. Double-click the Face comp in the Project pane, go to 12 seconds, then choose Layer>New>Null Object. Move the Null object so its upper-left edge (anchor point) is just below her nose. Then, select the four character layers for her mouth, and under the Parent column in the Timeline, drag the Pick Whip symbol to point at the Null layer, whose rotation will now control those elements as a whole.

STEP 14 The Smile, Part 2
Finally, at 12 seconds select the Null layer, hit R to show its Rotation property, and click the Stopwatch to add a keyframe. Around 10–15 frames further along, slightly rotate the Null to pull the mouth into a smile. Close the comp and go back to the main one. The animation is complete. The final step is to go to File>Export and choose either Macromedia Flash (SWF) or Flash Video (FLV), depending on the output requirements. These were a few steps, tips, and tricks to reveal just some of the techniques used to bring the characters to life at www.wordsatplay.com. Enjoy!