Animation for Flash Games (part 1): Sprite Creation for the Animator

By Patrick Fram

Adobe* Flash* is a powerful animation tool; these days, it's commonly used by animation studios to create animated TV shows, but animating for games takes a special touch. The animations you create need to be functional in a game engine, and to accomplish this goal, you must adapt the way you think about animating. This multi-part article shows how to create animated sprites in Flash*.

Drawing in Flash

When creating a game in Flash*, the art style needs to take certain things into consideration. If the characters in the game are going to be small, too much detail on their sprites may just end up looking muddy and blurry during runtime. If you use the Flash* line tool on the sprite, you must be aware that lines do not always scale as you expect them to. For example, if a character's size will change during gameplay, this scaling could have unexpected results. I find that the safest art style for character graphics is to use mostly flat colors and few internal outlines.

Getting Started on a Character Sprite

In part 1 of this series, you're going to make a sprite-a collection of graphics and animations for a game character. In Flash*, that means that you create a movie clip symbol whose timeline contains all animations for the character that the scripters will later be able to queue up. (Note that even though I'm talking about sprites, I'm not talking about the Adobe* ActionScript* Sprite class. You always create your sprites as movie clip symbols.)

To start, you need a character concept. Figure 1 is a sketch of a robot character that I'm using as my game's character.

Figure 1. A character concept sketch

If you have a concept sketch that you drew in another program or scanned in, you can import it into Flash*, and trace over it if you like. To do so in Flash, click File > Import > Import to Stage, and then create a new layer to draw on above the layer on which you placed the reference picture.

Note: You may want to lock the reference picture's layer to avoid accidentally modifying it.

Start by filling in the form of the character with a fill. If using a tablet, it is easiest to use the brush tool. If you're using a mouse, the brush tool might be a little unwieldy; an alternative is to use the line tool to trace the outline, and then fill the enclosed area with the paint bucket tool. Then, double-click the line to select it and press Delete to remove it. (When using the line tool this way, I often select a very bright and obvious color so that I don't accidentally leave any lines behind.)

Figure 2 shows both methods. On the left, I traced over the sketch with a grey fill. On the right, I outlined the sketch with a green line and am just about to fill it with the paint bucket and delete the lines. You can also see that I set the sketch's layer to show as outlines, which made it easier to draw on top of.

Figure 2. Vector filling the character

Creating a Character Rig

Next, slice the character into pieces. When the character has been separated into movable pieces, you'll be able to animate it without having to draw anything from scratch for each frame of animation. In this way, you create what's called a character rig (see Figure 3).

Figure 3. Splitting and coloring the character

In Figure 3, you can see how I drew some temporary green lines to break up the fill, then selected each section and pulled it apart. (Alternatively, you can use the lasso tool, but I prefer the line tool because it allows me the opportunity to fine-tune the lines before I make the selection.) Then, I removed the lines and filled in each piece as it would look if nothing were overlapping it. After that, I colored and detailed the pieces. Cell-shading is the style of coloring I used here: It refers to using flat shapes to shade and highlight the surface to show dimensionality. Using gradients to shade is very time-consuming and complicated in Flash* for complex characters like this, so a simple shading method like cel-shading can add a lot of detail in a short time. I generally use three-step shading: Each area has a normal, highlight, and shadow color. After coloring, I outlined each piece with a black stroke (see Figure 4).

Figure 4. Grouped and layered in a movie clip

Next, I selected all the pieces and created a movie clip out of them by clicking Modify > Convert to Symbol. Name your symbol whatever you like (mine is named robot), select Movie clip in the dialog box, and then click OK. This movie clip is the entirety of your sprite. All animation will exist on this movie clip's timeline.

To make the rig pieces easier to work with, you can select all the art for one and group them by pressing Ctrl+G or clicking Modify > Group. When grouped, the shapes behave as a single object, and they will have a green outline around them.

It is a good practice to use groups instead of symbols whenever possible. Although groups lack internal layers and timelines and cannot be motion tweened, they have a higher degree of flexibility. You can group or ungroup graphics as the need arises and even make groups out of several other groups. (To ungroup an image, click Modify > Ungroup or press Ctrl+Shft+G.) You can edit one group's contents without affecting the contents of another copy of the same group, unlike with symbols. Furthermore, groups do not show up in the library, which can become difficult to navigate when full of every rig piece in the whole project.

To edit the art in a group, double-click the group, just like editing a symbol. I grouped each of the rig pieces, put each on a different layer, and arranged them where they belong (see Figure 4). Where the art should be relative to the origin (the small + in Figure 4) depends on what the scripters will use this sprite for and how they wish to code it. If working in a team, ask your game scripters where they would like the origin. If unsure, the most common places are at the center of mass or at the base of the feet.


Animating a Run Cycle

If you're making a character sprite, chances are good that the character will need to move around in the game. So, give your sprite a run cycle to use when moving. Figure 5 shows a simple eight-frame run cycle that you can use.

Figure 5. An eight-frame run cycle

Animating run cycles is its own art form entirely, but here are a few basics. You can break a run down into four key frames: two extremes and two crossing frames. The remaining four frames are called in-betweens: They simply show a state that is halfway between the poses in the key frames. In the extremes, the character is at the zenith of its step, and its arms and legs are swung out the furthest. You can see that the two extremes in the animation above are actually the same pose with the arms and legs reversed. The crossing frames are the frames in which the character is at its lowest and in contact with the ground; its arms and legs have returned from their swing and are about to swing out to the other side. These, too, are the same poses, just mirrored.

In this example run, all I have done is rotated the groups in the rig. No new art was added. You can save a lot of time by rigging a character like this. That said, such rigging won't always be possible; sometimes, you'll have to delete the grouped piece and redraw it for some of the frames. For example, the robot's feet are not flat on the ground in the crossing frames, so I could redraw the feet in these frames to make them look more natural.

In Figure 6, I use the free transform tool to move and rotate the rig pieces into position. When you select something with the transform tool, you can click and drag the little white circle (the transform center) to change the way the object rotates. I moved it on the shoulder joint so that whenever I rotate this piece, it will stay connected at the shoulder.

Figure 6. Rig animating the run cycle

You may also want to use onion skinning to help with in-betweening. See the semi-transparent arm graphics? These show where the arm piece is on the previous and next key frame. In the timeline, you can move those brackets around the playhead to show more or fewer frames in the onion skinning. Another thing to note is that locked layers will not onion skin, so I temporarily locked all the layers except the arm so that I could see more clearly.

The timing on your sprite's animations depends on the game's frame rate. It's important that the animators and scripters agree on a frame rate before any animations are made. In this example, I am using 30 frames per second-a common frame rate for Flash* games. But because this is a fairly high frame rate, I don't necessarily need a key frame on every frame. If you look at the timeline in Figure 6 you can see that only every other frame has a key frame. In traditional animation, this practice is called animating on twos. This practice saves time, because using an in-betweening every frame won't actually look that different from animating on twos at this high frame rate, but it sure will take a lot of time to do!


Labeling the Sprite's Timeline

Take another look at Figure 6. In the timeline, I have made a layer called labels that contains two named key frames. Scripters can later use these frames to tell the sprite what animation to play. The first label is still, and it just has the robot standing in its original pose. The run label contains one cycle of the eight-frame run animation. There is no convention for how to label your sprite: It's something that the animators and scripters will have to agree on. It would be easy for the scripter to control the character sprite I just made by using the labels to play the correct animation at the correct time.

This example only covered a run cycle, but a fully functional sprite may have many more animations inside. For example, think about a jump animation. It could contain three different sections: a lead-in where the character squats and leaps, a cycle that repeats for as long as the character is airborne, and a landing animation for when it hits the ground. The scripter would need to be able to call and possibly loop each of these sections independently, so each one would need a named key frame marking it. These sorts of things would need to be coordinated between the scripters and animators based on what needs to be done in the game.


Conclusion

Although this example is fairly simple, a fully animated sprite isn't really much more than this same process repeated for different animations. By breaking all the possible animation of a game character up into a labeled section on a single timeline, you'll be creating the beginnings of a flexible system of animations out of which the scripters can build the character's movements.


About the Author

Patrick Fram has been a 2D animator and game developer since childhood. His scripting background began with point-and-click authoring tools, then transitioned into BASIC, HTML, and PHP. Upon the discovery of Flash, Patrick's game development and animation background converged and the program became his primary focus. Patrick Fram is a graduate of the Savannah College of Art and Design with a major in animation and a minor in sequential art. Since college, Patrick has worked a variety of freelance jobs in the areas of illustration, graphic design, web design, advertising, animation for film, television, and gaming, and Flash development for gaming and the web. He has since branched into Flex and Air development and currently works as a professional Flash developer in Atlanta, Georgia.
Categories:
For more complete information about compiler optimizations, see our Optimization Notice.

Comments





...I can't thank you enough for this tutorial. For months I have been creating sprites frame-by-frame in Illustrator for a game! Thanks again dude :)


WOW, AMAZING really helped me alot thanx so much, also which actionscript did you make all this on? thanx


Great tutorial. A classmate linked to this in a discussion board for a game scripting class I'm in, and it was definitely helpful on the game I'm working on.


WOW THIS HELPED ME ALOT!!! thanks alot nicolas :) :) :) im gonna give credit to ya when i finish making my game(hopefully) :)




Pages