Create an animated character by harnessing the power of Illustrator and the flexibility of Flash.
Since Adobe acquired Macromedia in 2005, integration between Illustrator and Flash has dramatically improved. From the CS3 versions, Illustrator artwork can be ported across to Flash, making animation a far more straightforward process than it once was.
Illustrator symbols are now Flash-enabled; when you import a document into Flash all the artwork nesting and symbols are there for you, making for a massive productivity bonus.
In this tutorial you’ll create a character in Illustrator then bring it into Flash to be animated. We’ll look at some of the ways you can set up your artwork in Illustrator to simplify animation once it’s in Flash.
Understand the principles at work and the same approach will work for just about any object you want to breathe life into. Next issue, you’ll use the artwork and animations to create a simple ‘ink ‘em up’ Flash game.
01. The first step is to create some sketches. You can use our sketch (in which case skip to Step 2) or create a character in your own style. Keep your sketch clean, to make tracing over it in Illustrator quick and easy. Consider which elements of your character might be animated (eyes, limbs, mouth etc). Here, I’ve used simple lines and named the character Madame Octopus.
02. Scan your sketch in (or if you’re using my pre-prepared sketch, open the document sketch.jpg from the cover disc), and trace over it in Illustrator, using the Pen tool (or the Blob brush if you’re using Illustrator CS4). Create the outline shapes, keeping in mind that the elements you’re going to want to animate will need to be easily separated.
03. Fill in the rest of your character, adding tone and texture to create something memorable and distinctive. Here, I’ve added spots and a shaded area to the limbs, and chunky details into the hair to complete the design. The character is going to appear fairly small on screen, so try to avoid putting much fine detail in.
04. If you’ve created a single outline for your character, you’ll need to split out the parts that will be animated once we’ve taken it into Flash. Use the Scissors tool to break paths, and fill in any missing fill areas by closing the newly separated paths. Here, I’ve opted to animate one limb, both eyes and the mouth here, but I also created a background and kept the hair separate.
05. Open the Symbols panel (Window > Symbols) and select the left eye’s component parts. Drag the selected art into the Symbols panel to create a new symbol. Make sure you select ‘Movie Clip’ as the type, and name it appropriately. Repeat for each element in your character, the background and any other elements you have created.
06. Now you’ve got all your individual symbols set up, select the entire character on the artboard and drag it into the Symbols panel. The character is now a symbol itself, but is comprised of nested symbols. It’s this concept – and the fact that each symbol will have its own timeline – that will allow us to easily animate our character.
07. The Symbols panel will contain a lot of default symbols. Remove these by selecting each and clicking on the trash can in the Symbols panel. Once you’ve removed all the unrelated symbols, save your file in the normal Adobe Illustrator format. Open Flash and create a new ActionScript 2 movie. At this stage, the size isn’t important, so accept the default. Set the frame rate to 30fps.
08. Next, we need to get our artwork into Flash. Choose File > Import to Library and select your Illustrator file. Flash will bring up an import dialog box that will have each layer and symbol listed. Because we took the time to create symbols and remove unrelated artwork from our Illustrator file, you should be able to accept the defaults here – but ensure that ‘Import Unused Symbols’ is ticked.
09. Create two layers in Flash. Name the bottom layer ‘Background’ and the top one ‘Madame’. Open the Library and locate the background symbol. Drag it onto the background layer and position to cover the canvas. Repeat for the Madame symbol in the Library, this time dragging it onto the ‘Madame’ layer.
10. We’ll start off by animating the eyes. Locate the left eye symbol in the Library and double click on it (or double-click on the instance of Madame on the canvas to edit the symbol, then double-click on the left eye). Check you are editing the left eye symbol by looking for the breadcrumb trail, which should show something like Scene 1 > Madame Octopus > Left Eye.
11. In the timeline, scroll to frame 100 and add a keyframe. Choose the scale tool and grab the eyelid. Increase the vertical size to give the appearance that the eye is closing. Move to the next frame and add another keyframe. Scale the eyelid to completely cover the eye. Finally, move to the frame 102 and add one more keyframe. Set the eyelid to a similar position to frame 100.
12. Click back to Scene 1 and preview your movie (Cmd/Ctrl + Return). After 100 frames (approx 3.3 seconds) have passed, your character should wink. If you wait another three seconds or so, she should wink again. This is animation in its simplest form – but we’re not done yet. Repeat the process for the other eye.
13. Using the same technique, animate the various other body parts you decided upon when creating the character. Because each symbol is a movie clip with its own timeline, you can stagger the frequency of individual animation elements so they don’t appear all at once. The rule that less is more is often true here, but experiment to get an overall result you’re happy with.
14. Repeat the same steps to animate the background. We’ve added a couple of layered waves, and we drew a simple sandy seabed to animate. To create a seamless animation, copy your wave and seabed shape and paste the copy next to the original, so that you have a double width element. Add a keyframe and motion tween and drag both instances over so that the copy aligns with the original position.
15. Add any other elements you want to include in your animation as appropriate. Here, I’ve added bubbles that float up the screen following a motion path. By creating one bubble and using multiple instances of the symbol at different scales we can create the impression that the bubbles are closer or further away from the viewpoint, adding depth.
16. Finally, animate the Madame symbol so that she gently bobs up and down. You can also animate her into the scene if you don’t want her immediately on screen. Save and preview your animation. Next month we’ll use our basic animation to create an interactive Flash game based on the traditional shoot ’em-up genre.
Who: Sam Hampton-Smith is an illustrator and graphic designer based in Scotland. He’s a regular author of articles for the graphic and web design press, an aspiring musician and lover of good food.
Software: Adobe Illustrator CS3/CS4, Adobe Flash CS3/CS4
Time to complete: 1-2 hours
On the CD: All files for this tutorial can be downloaded here or are available on the cover CD.