Flash Games, Animation / Flash Games

Flash Games, Animation

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.

You might also like

My Flash animations and games
My Flash animations and games
hunger games (flash animation)
hunger games (flash animation)

Advanced Macromedia Flash classes desired...

by theLifeguard

I've recently (2006) graduated from UB with a major in Computer art, but a year later, I've realized that I only dabbled in animation, compositing, graphic design, and web design, and don't feel it will be enough to get the job I want... Now that I have been freelancing, I find myself working more with flash, and I know a lot of basic Actionscript and own 5 books on the topic, but I have an opportunity coming up in about 6 months, for which I really need to buckle down and change my whole portfolio to highlight flash webdesign and flash games. I don't know enough advanced actionscript to code games in a reasonable amount of time, and am not confident enough to be able to add that to my resume

Orphanage = jobs?

by clubber12

I am a student at SFSU and also a part-time web designer who uses Flash on the daily. I think the dot-com crash didn't really effect the local special effects/animation industry as much, now that I've worked for a while at WildBrain Animation. However, my biggest worry is the competition from all of these students who graduated or will graduate from more prestigious $$$ schools like SFAI or Academy of Art. Everyone and their mother wants to get into the video games industry, and they'll learn a variety of skills that might make them attractive to these big companies like Lucasarts, Pixar, EA

A few...

by Carnivora

- Orisinal: Morning Sunshine - a number of child-friendly flash games. Very sweet and straightforward.

- LiteBrite!

- Celtic knot artwork, including B/W versions that can be printed and coloured in

- Society for Creative Anachronism (the folks who dress up in medieval clothes on weekends) - How to be a princess on weekends. There are links from it to various costume, armour and medieval research sites, as well as children-friendly/targetted sites.

Internet game

by gamer

I build shockwave and flash games. I've done lots of game for disney and interscope record. I build the weezer fighting game in I am actually looking for any position that dealing with visaul arts. Such as 3D animation, graphic design, web design, multimedia design, or even making DVD menu. Oh... by the way check out some of my work and tell me what you think. or

Focal Press Real-World Flash Game Development: How to Follow Best Practices AND Keep Your Sanity
Book (Focal Press)