Alexis West shows how to bring your vector characters to life in Flash, turning an Illustrator image into a cool interactive animation.
Being able to dream up and create a cool character or picture is one thing, but Adobe Flash lets you take your work to a whole new level.
Creating animations is a simple, if rather time-consuming, process – and you can even make your image interactive by adding buttons and other elements. As Alexis West shows in this tutorial, with Flash and a bit of creative thinking, the possibilities really are endless.
01. In Illustrator, take your character creation from last month (if you missed last month’s tutorial, the Illustrator file is p_hen.eps on the cover CD), and check through your drawn elements, looking for any details that can be simplified without losing the character’s edge.
This will ensure a great transition into Flash. When satisfied, go to File > Export, and select SWF as the format. Save the background and foreground elements of your illustration using the ‘For Web’ settings, as .png files.
02. Open Flash; the ActionScript version used in this tutorial will be AS2. Go to Modify > Document, and set the stage dimensions to match your illustration, with a frame rate of 32fps. Import your character .swf file onto the stage, and spend some time selecting each element of your character, and converting them to separate movie clips (Modify > Convert to Symbol > Movie Clip), giving each a relevant name so that, for example, the character’s head would be head_mc. Create a new layer below, name it backdrop and import your background file (or open bd.png on the cover CD).
03. Select all the elements that make up the illustrated eye. Go to Modify > Convert to Symbol > Movie Clip, name it movie_eye, and give it the instance name of eye_mc. Double-click this ‘parent’ movie clip, to get to the ‘child’ elements inside. Highlight all the elements, and go to Modify > Timeline > Distribute to Layers. With each element of the eye now on a separate layer, plot out a series of keyframes along the timeline, ensuring the first and the last are the same.
04. In each keyframe, start to animate the eye so that it twitches back and forth. It’s a good idea to experiment with spaces between keyframes to alternate the speed of movement: eyes generally twitch fast when they move, and you’ll want emphasize this in your animation.
When you have completed your series of movements, open up the Properties panel and add a motion tween between each keyframe. Once happy with your beady eye, select the white of the eye, duplicate the shape, and paste it onto a layer above all the other elements. Right-click the layer to set it to mask any overspill from the pupil.
05. Go back to the main timeline, select the shape that represents the character’s hair. The shape in the original drawing is a little complex to animate, so click within the hair clip, and use the pen tool to create a simpler shape.
Plot a series of keyframes along its timeline, ensuring that the first and last keyframes are the same. Using the direct selection tool, manipulate the shape slightly on each keyframe, and add shape tweens, to give the impression of billowing hair. Don’t over-complicate the shape manipulations, as Flash will render the tween distorted. Use these techniques along with masking layers to create a rippling effect on the skirt and legs.
06. Now we have looping elements, return to the root timeline, duplicate the character, and select Edit > Paste in Place onto two more layers so you have three copies, giving each a separate instance name. Select them all, go to Modify > Convert to Symbol > Movie Clip, and name it movie_transition. Repeat Step 03 on the child elements.
With each on a new layer, keep a copy of the character on Frame 1, drag the second copy to frame 16, and the third to frame 105. Create a new layer called actions and on the last frame of this layer type stop(); into the Actions panel.
07. Each of these characters represents a transitional point in our animation. To ensure they change at the correct time, on each relevant character layer, insert a keyframe, just before the next layer begins, and insert a blank keyframe, exactly when the preceding layer begins. So the first character begins at frame 1 and ends at 20, so this layer should have a keyframe on frame 19, and a blank keyframe on 20, allowing the second figure’s sequence to roll in smoothly.
08. The first character will zoom in, the second will spray graffiti, the third will loop when the timeline ends. Highlight the first character clip using the Transform tool, and on the first keyframe reduce the size drastically, and the position slightly. Add a motion tween.
Test the movie and the character should now zoom into place. Double-click the second clip to access its ‘child’ elements, use Transform to select each clip, and check the centre point is aligned with the jointed area of each element. Plot out a series of frames that are equal to the keyframes between this and the third character on the movie_transition parent timeline. Start creating a short sequence that gives the impression the character is spraying a mural.
09. In the second character movie clip, create a new layer above the rest. Import graffiti.png from the disc to this layer and convert it to a movie clip. Next, drag the keyframe out so that it aligns to the spraying sequence, insert a keyframe on the last frame, in the Properties panel set the first keyframe’s Alpha value to 0, and add a motion tween.
Return to the parent timeline, select the third character, click within it, repeat the steps from Step 03 to separate the elements onto separate layers, and using keyframes and motion tweens, create a short loop of subtle movements that depict the character hovering.
10. Go back to the parent timeline for the movie clip movie_transition, and create a new layer called button beneath the Actions layer. Open up the library panel, and drag the graffiti movie clip created in Step 09 to the stage, place it so that it aligns perfectly to the one previously embedded into the third character movie clip, give it the instance name button_mc and on the Actions layer above it, paste the script from popup_function.as off the disc into the actions panel. This will give the clip a button function that will be used in the following steps.
11. Now that the animation is complete, it’s time to make it interactive by creating a small interface. This relies on ActionScript (all of the necessary ActionScript files are included on this month’s disc). We’re going to be incorporating easing effects into some of our functions, and will need to download and install the easing equations class from http://hosted.zeh.com.br/mctween. Once you’ve installed it, go back to the root timeline, create a new layer called Actions and, in the Actions panel, type the following script: #include “mc_tween2.as”. This will import the easing class for the whole movie.
12. For our movie to have a use, we are going to incorporate an attachMovie function, to create a popup window – a great trick for a portfolio Web site. Go back to the root timeline and import to stage. Open p_hen.jpg from the disc. Draw a frame behind it and convert it to a movieclip, ensuring the alignment is set to Central. Check Export for Action Script, giving it the identifier popup_mc. Give the movie clip the instance name image_mc, and delete it from the stage. Click the movie clip in the Library panel to edit it separately. Create a new layer, draw a shape to represent a button, convert it to a movie clip, with the instance off_mc. Create a new layer called Actions, and paste the script from function_close.as off the disc to this layer.
13. Test the movie. When the sequence completes, click the graffiti button and a pop-up window should appear. However, the elements below are still selectable: on a larger-scale interface this simply would not do. Return to the root timeline, create a new layer named blackout, and use the Shape tool draw a black rectangle equal to the size of your stage.
Convert it to a movie clip, ensuring the alignment is central, give it the instance name main_button, and set its Alpha property to 0. Double-click it, and insert two keyframes on its timeline. On the first, drastically reduce the size of the shape, drag it a significant distance from the stage and set its opacity to 0. Insert a frame about 20 frames after the third keyframe, insert a new layer, and call it actions, and put the command stop(); above the first and second keyframes.
14. On the layer containing the rectangles, convert the second rectangle to a button, naming it button_btn, and give its frame the label, on. Give the third keyframe the label, off. In the Actions layer above the second keyframe, type the following ActionScript into the actions panel: button_btn.useHandCursor = false;. Test the movie, activate the pop-up window again, and note that now, when the menu pops up, the ActionScript that we incorporated into Step 09 has called the black button into play, rendering interactivity with the main movie impossible. Switching the pop-up off gets rid of the fake button once again. A combination of ActionScript and the imported easing classes have activated the pleasing fade transitions.
15. Now that the movie has a useful interactive feature that can be built upon, a nice way to finish it off is to centralize the content in a full-screen environment that reacts to the size of the stage and Web browser. Go back to the root timeline, select the elements that make up the movie (ensuring you don’t select the fake button!), the parent character/characters clip, and the background, and convert them to a new movie clip, give it the instance name main_mc. Create a new layer called actions, and paste the script from fluid.as into the Actions panel. Select main_mc on the stage and paste fluid_clip.as into the Actions panel. Test the movie and notice how the movie is central to your window, no matter the size, and that the fake button always resizes to the stage.
16. The button and attachMovie methods have been included to demonstrate how you can easily create an interface from your illustrations. If this were to be used as a Web interface, then the graffiti could be replaced for a menu that leads to other pages, or activates other pop-up windows. Experiment with the techniques outlined to create more in-depth features for your character illustrations.
Designing the character
In this tutorial, we’ll be using the Illustrator character and background created in Alexis West’s Masterclass last month (March). If you missed the issue and would like to follow the tutorial from the start, head to www.digitalartsonline.co.uk to order the issue or follow the tutorial online.
Although you can import CMYK Illustrator designs into Flash, the automatic colour conversion can be a little ropey; it’s best to ensure everything is in RGB in Illustrator before transferring it to Flash.
Who: Alexis West is a freelance illustrator who specializes in character-based work. His projects have included record covers for Atlantic Records and Sony BMG; he also produces limited-edition prints and even a figurine featuring his characters, which can be seen at his Web site. “After getting a great taste for the creative industries, I decided to put together a Web site for my foremost passion – character art,” he says. “I wanted to create a Web site that went beyond the boundaries of a conventional portfolio.”
Contact: alexiswest.com, theswingingseesaw.com
Software: Adobe Flash, Adobe Illustrator
Time to complete: 3-4 hours
Download: All files for this tutorial can be downloaded here or are available on the cover CD.