- Deciding When to Animate
- Layers, Blends, Animation!
- Exporting and Previewing the Flash SWF
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Layers, Blends, Animation!
If you've ever done any Flash animation, you're familiar with the concepts of frames and keyframes. Since Illustrator isn't an animation program, it doesn't have frames; instead, it uses layers to contain the objects to be animated. Blending the start and end objects creates the "tweens"—the layers between the beginning and the end of the animation. Each segment of the animation goes on its own layer and is then exported to frames. If you'd like to follow along, download the starter file and open it. (The zip also includes the final file, so you can refer to it if you get stuck.)
Animating the Tap Event
The first thing to do is to set up your layers. For this interaction, we want to capture the tap event, the expanding tab, and the fade-in of the tab content. Each of these events goes on a separate layer. We'll start with the tap animation:
- Open the Layers panel and click the Add New Layer button at the bottom of the panel (see Figure 2).
- Double-click the title of the new layer and rename it info animation (see Figure 3). Then add two more layers, naming them expand and tap. Make sure that the layers are in the order shown in Figure 3, so the animation will happen in the right order. When the animation is exported, Illustrator will create the frames in order from the top layer down.
- Click the "tap" layer to make it active. With the Ellipse tool (press L), draw a circle of 44 x 44 pixels and place it toward the middle-right side of the screen, as shown in Figure 5. This circle will represent a fingertip. Give the circle a black fill and an opacity of 50%. This will be the starting point of the tap animation.
- With the circle still selected, copy it and paste it to position another circle on top of the first athlete's tile, as shown in Figure 6.
- Select both circles; then choose Object > Blend > Make. The default blend setting is Smooth Color. We need to change this to a specified number of steps to determine how many frames of animation the blend will take. To do this, double-click the Blend tool (see Figure 7) and change the drop-down Spacing setting to Specified Steps.
- Because we plan to export the animation with a frame rate of 30 fps, set the number of steps to 30. so the finger movement and tap will happen in one second (see Figure 8). When you're done, click OK to exit the dialog. Figure 9 shows the finished blend objects.
- Finish off this process by hiding the "tap" layer so you can work on the next piece of the animation without distraction. (Click the eye icon next to the layer to turn off its visibility.)
)
Figure 2 Adding a new layer in the Layers panel.
)
Figure 3 Double-click a layer name to rename it.
)
Figure 4 Each animation event gets its own layer.
)
Figure 5 Creating the starting point of the finger-tap animation.
)
Figure 6 The ending point of the animation comes next.
){kind=small}
Figure 7 Double-click the Blend tool to set the number of steps in the blend.
)
Figure 8 Setting the number of blend steps.
)
Figure 9 Finished blend for the finger-tap animation.
Expanding the Tile
Now let's move on to expanding the athlete tile. For this animation, we'll turn the upper-left tile into a symbol with 9-slice scaling enabled. This technique will allow us to animate the tile and the triangle at the same time. Here's how it's done:
- Select all elements of the John Doe tile in the upper-left corner of the screen (see Figure 10). Press Command-C (Windows: Ctrl-C) to copy the objects. Then click the "expand" layer in the Layers panel and press Command-Shift-V (Windows: Ctrl-Shift-V) to paste the objects into place on the layer.
- Select the tile rectangle and the arrow in the lower-right corner (see Figure 11) and press F8 to make these objects into a symbol. Name this new symbol athlete tile and make sure that 9-Slice Scaling guides are enabled, as shown in Figure 12. This option will allow us to resize the symbol more easily. Click OK to save the new symbol.
- We need to adjust 9-slice scaling guides for this symbol. Double-click the symbol to enter isolation mode. Then arrange the guides so the small triangle doesn't distort when you resize the symbol (see Figure 13). When you're finished, press Escape to exit isolation mode.
- Select the symbol and press Command-C (Windows: Ctrl-C) to copy the tile. Then press Command-B (Windows: Ctrl-B) to paste the copy behind the original. Now you can use the Free Transform tool (press E) to resize the copy so that it fills part of the screen (see Figure 14).
- Select both objects and create the blend by pressing Command-Option-B (Windows: Ctrl-Alt-B). Double-click the Blend tool again and change the number of steps to 15 so that the "expand" animation will last a half-second.
- Because this animation consists of more than just one object, we need to release the blend to layers. To do so, click the disclosure triangle on the "expand" layer to show the sublayer where the blend is located (see Figure 15).
- Click the Blend layer to select it, and then select Release to Layers (Sequence) from the Layers panel menu (see Figure 16). This action breaks the blend apart and puts each stage of the blend on a separate sublayer (see Figure 17). When the file is exported as a Flash SWF, each of these layers will become an animation frame.
- The athlete name and position need to be part of the animation, so we'll need to put a copy of those objects into each layer. With keyboard shortcuts, it's simple to do: Select the name and position text and press Command-X (Windows: Ctrl-X) to cut it to the clipboard. In the Layers panel, click the first layer in the animation and press Command-Shift-V (Windows: Ctrl-Shift-V) to paste the text into place (see Figure 18). We'll need to repeat the paste step for every layer in the animation.
- Before we hide this layer, we need to copy the largest tile symbol—the athlete's name and position—in the expand animation so we can use them in the next step. Select those objects (see Figure 19) and then press Command-C (Windows: Ctrl-C) to copy them to the clipboard. Then hide the "expand" layer and move to the next step.
)
Figure 10 Copy-and-paste the tile and its contents into the "expand" layer.
)
Figure 11 Turn this tile into a symbol to make it easier to animate.
)
Figure 12 Naming the symbol.
)
Figure 13 Setting 9-slice scaling guides to protect the little corner arrow from stretching.
)
Figure 14 Transform the bottom tile to its expanded position.
)
Figure 15 Select the blend to be released to layers.
)
Figure 16 The Release to Layers command breaks the blend apart and puts each step on its own layer.
)
Figure 17 The expanded blend.
)
Figure 18 Select a layer and press Command-Shift-V (Windows: Ctrl-Shift-V) to paste objects into it.
)
Figure 19 Select the biggest tile and copy it to the clipboard for the next step.
Fading in Expanded Information
This will be the final step before we export our animation. To finish this interaction, we need to show the content within this tile. We want to fade it in over a half-second after the tile has expanded. First we need to create the tile details and make the whole thing a symbol:
- We need to paste the objects we copied in the preceding section. To do this, select the "info" animation layer and press Command-Opt-V (Windows: Ctrl-Alt-V) to paste the objects into place.
- Let's create some content for this tab that will fade in. Once we have the wireframe done, we'll select it and create a symbol, as shown in Figure 20.
- To create the starting keyframe for this animation, press Command-C (Windows: Ctrl-C) to copy the symbol and then Command-B (Windows: Ctrl-B) to paste the duplicate directly behind the original. Using the Appearance panel, change the opacity of the bottom object to 0%.
- Time for the animation! To select the two symbols to be blended, we'll use the Layers panel. Hold down the Shift key and click the blank area in the right side of each layer. A little square indicates that they're selected (see Figure 21).
- Press Command-Opt-B (Windows: Ctrl-Alt-B) to create the blend, and then double-click the Blend tool to change the number of steps to 12.
- Release this blend to layers by selecting Release to Layers (Sequence) from the Layers panel menu.
- For the first step, we need to copy-and-paste the athlete's name and position above the tile content. Select the name and position text and press Command-X (Windows: Ctrl-X) to cut it to the clipboard. In the Layers panel, click the first layer in the animation and press Command-Shift-V (Windows: Ctrl-Shift-V) to paste the text into place (see Figure 22). We'll need to repeat the paste step for every layer in the animation.
- Select the expanded tile symbol (see Figure 23) and cut it to the clipboard by pressing Command-X (Windows: Ctrl-X).
- Select the first layer in this animation and press Command-Shift-V (Windows: Ctrl-Shift-V) to paste the athlete tile into place, and then press Command-Shift-[ (Windows: Ctrl-Shift-[) to move it to the bottom of the stack. Do this for each layer in the animation.
)
Figure 20 Create a symbol with the tile contents.
)
Figure 21 Using the Layers panel to make a complex selection.
As with the expand animation, we need to copy-and-paste the athlete's name, position, and bottom tile into each layer of the blend so that they're part of the animation. This is the trickiest part, since the tile is below the info, and the name and position are on top. This will be a two-step process for each layer in the animation.
)
Figure 22 Paste the athlete's name and tile into each step of the animation.
)
Figure 23 This tile must be copied, pasted, and moved to the back of each animation layer in this step.
That finishes the animation! Now we can move on to exporting the file to a Flash SWF.