Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding a Layer-Based Animation
The next step in the process is to add a layer-based animation to the banner we've been creating. This type of animation works by inserting content onto multiple layers. The SWF file simply turns the visibility of each layer on and then off, in a certain order, to create an animation in a movie–in this case, a series of numbers that flashes from 1 through 5.
- In the Layers panel, create a new layer at the top of the Layers panel and name it 1.
- On the "1" layer, create the text number 1. I went a little further and added a graphic of an old-fashioned filmstrip to make the number look better, and I hid the curtain layer so the content of the background layer would be visible (see Figure 11).
)
Figure 11 The new layer added to the artwork.
Now we'll copy layer "1" and use it to create layer "2." Follow these steps:
- In the Layers panel, select layer "1" and choose Duplicate "1" from the Layers panel menu. There are many ways to duplicate layers, so if you know another way, go for it.
- Name the new layer 2.
- Hide the layer named "1."
- Change the text number 1 to 2 on the new layer named "2."
- Duplicate the layer a few more times and repeat these steps to create layers named 3, 4, and 5" (see Figure 12).
)
Figure 12 Number layers 1–5 are added to the artwork.
Creating a simple layer-based animation (also known as a frame-by-frame animation in a program like Adobe Flash) can be a great way to add animation. It can also be very tedious and time-consuming. I'll show you a way to create a simple animation by using a blend.
Let's test the animation:
- In the Layers panel, make sure that all layers are showing (including the curtain layer). Layers that are hidden in the Layers panel are not exported.
- Choose File > Export. In the Export dialog box, choose a folder and name for the file, and choose Flash (swf) from the Format menu. Click Export.
- In the SWF Options dialog box, select AI Layers to SWF Frames from the Export As menu, select Clip to Artboard Size, and click the Advanced button. Select Animate Blends and In Sequence. Select Bottom Up from the Layer Order menu. Select Export Static Layers and select the background layer in the list below that option.
- Click Web Preview to open a browser and preview the animation (see Figure 13).
- Close the browser and return to Illustrator. Click Cancel to close the SWF Options dialog box.
)
Figure 13 The animation with static background content.
Notice that the animation runs in layer order from the bottom of the layers upward. After the curtain blend animation runs, the curtain disappears completely. This is because the animation went to the next layer, and the curtain isn't (and cannot be) a static layer.
Next, we'll add a static curtain:
- With the Selection tool, double-click the curtain blend.
- Select the top red curtain shape.
- Choose Edit > Copy.
- Press the Escape key to exit the isolation mode.
- Create a new layer on the top of the layer stack in the Layers panel. Name the layer curtain top.
- With the new "curtain top" layer selected in the Layers panel, choose Edit > Paste in Place. Try deselecting the visibility for the curtain layer to see the new shape.
- Test the animation, following the same procedure you used previously, but making sure that the background and the curtain top layers are both selected in the list below the Export Static Layers option in the Export dialog box (see Figure 14).
)
Figure 14 Static curtain content added to the artwork.
At this point, you could add anything you want to the animation–text on the screen that fades in or out, animation content for the "movie," etc. In this final procedure, you'll export the animation.
- Choose File > Export. In the Export dialog box, choose a folder and name for the file, and choose Flash (swf) from the Format menu. Click Export.
- In the SWF Options dialog box, select AI Layers to SWF Frames from the Export As menu, select Clip to Artboard Size, select Compress File to make the file size smaller (if possible), and click the Advanced button.
- Make sure that the Frame Rate is set to 12. You can test different frame rates, if you like; the higher the number, the faster the animation runs. The typical frame rate for a SWF animation created in Adobe Flash is 24.
- If you want to loop the animation continuously, select Looping. By default, this option is not selected. Unless you change this setting, the Flash Player plays the animation once and then stops.
- Select Animate Blends and In Sequence. Select Bottom Up from the Layer Order menu. Select Export Static Layers and select the background layer and the curtain top layer in the list below that option.
- Click Web Preview to open a browser and preview the animation. Make any necessary adjustments to the settings in Illustrator; for example, you might try another frame rate, such as 2.
- Click OK to export the SWF file.