Graphics created for games published in Macromedia Flash cannot be illustrated or animated as usual. One must understand that most games developed in Flash can be processor-intensive, with quite a bit of user interaction and several animations playing at once, which means your graphics and animations must be optimized. Since most of these games are served up over the Internet, by keeping an optimized approach you will be able to deliver a more streamlined gaming experience. To streamline your game graphics creation several concepts have been developed, like formatting button creation and color change, making the production process more automated. We will also be reviewing how preparing your game graphics as many separate game pieces plays an important role in game creation.

Game Pieces
One game may contain hundreds of individual graphics and animations and once they are arranged together they can seamlessly display a functional game. The idea of separating many graphics as individual game pieces is nothing new. In fact in the video game console and PC gaming industry it is very common to separate game graphics as individual pieces which are referred to as sprites. For example, a character animation or an item in the gaming environment is considered a sprite. We will not go into too many gaming industry terms but it is good to understand that most of these techniques are nothing new, yet very critical to know if you wish to create professional games in Flash.

Hero Character
In most games there is a single character called the hero and the user controls it to ultimately complete certain goals. The user controls the hero by interacting with a keyboard or controller, which manipulates the character to walk forward, shoot bad guys, or pick up items. Understanding that the hero has a set number of things the user can control it to do, you will realize that the hero sprite alone could be made up of over half a dozen still graphics and animations. For the Game Techniques chapter an army and alien-type characters have been designed along with an alien-looking environment. A solid approach to getting these graphics created cannot all happen in Macromedia Flash. It is recommended that characters and all game graphics are designed and sketched out on paper first, as shown in Figure 9.1. There they can be signed off by the client before investing many hours illustrating and animating them in Flash.

Where Macromedia Flash comes into the picture is once you have scanned your drawings and they are imported into the program as raster graphics to be traced with the Line tool or Brush tool. In this case, the Brush tool was used to trace the sketch, yet the strokes of black color had to be optimized several times to the final drawing you see in Figure 9.2. Since this character graphic is quite small the Zoom tool was used to zoom up close to trace and zoom back out 100% to view exactly what the user will see. This has to be done since small intricate vector graphics appear clean and sharp up close but can look aliased and a bit different in shape if viewed at 100%. This is just one of the quirks of working with fills in Flash. Just remember, whatever you see at 100% is what the user will see, so that is what matters.

Once the illustration is fully outlined, colors are chosen with the Color Mixer and the colors are applied with the Paint Bucket tool, as shown in Figure 9.3. Another rule of thumb is that with creating small graphics like this one linear and radial gradients are not noticeable. Plus the more gradient and alpha fills used, the more processor-intensive your graphic or animation can be to the gaming experience, so solid fills will work just fine.

Villain Character
The same approach was used to create the villain character. A rough sketch was drawn with pencil and paper, as shown in Figure 9.4.

Then the drawing was scanned in and imported into Flash where it was traced with the Brush tool and optimized to get a result as shown in Figure 9.5.

Now that the character is fully outlined, colors are chosen and applied, as shown in Figure 9.6.

Buttons Made Easy
A game consists of many buttons for the user to select game modes, load saved games, and edit global options, just to name a few. To create all these buttons individually is a big task, especially since each button contains different text and possibly a different size. In this section we will review a clever way to make creating many different buttons of the same type easy and more efficient in file size.

The basic concept is that a button is made up of three distinct parts, as shown in Figure 9.7. The three parts are the text, end piece, and body. The end piece and body are symbols so when they are used more than once we save on file size.

The end piece is duplicated, flipped horizontally, and moved to the opposite side of the body of the button. The text is placed in the center of the body and changed to the appropriate color, as shown in Figure 9.8.

The two end pieces are connected to the ends of the body by using the Selection tool with Snap to Objects feature on; that way the end pieces are connected precisely, as shown in Figure 9.9.

Well, that takes care of one button, but what about the others you have to create? Using this first button as your template when making the others, just follow these two easy steps. Let us say the next button you need to make has to say "Character Selection." First, change the text from "Submit" to "Character Selection." If you are working with white text on a white background feel free for the time being to changing the color of the text to black. Make sure when you retype the text that it is justified left; that way we will be scaling the button in one direction, to the right. Now take the right side end piece and move it to the right, as shown in Figure 9.10. Use the Selection tool to select it and use the right arrow key on your keyboard while holding down the Shift key to move it quickly to the right.

With the body of the button selected use the Free Transform tool to scale the body to the right. Make sure the center point of the Free Transform manipulator is snapped to the left side of the body, as shown in Figure 9.11. That way when you scale the body to the right, only the right side of the body will scale.

After following those two quick steps you should have a similar result as shown in Figure 9.12.

Color Change
The idea behind this technique is that in a game there are characters or objects that look similar but may be drawn in a different color. For instance, you may have four different colors of the same monster. Another instance where this technique is helpful is if you have a character that the user can change like the color of their shirt. Instead of drawing ten different-colored shirts, why not just draw one that is a symbol and change its color manually or with code. In our example we have an alien and we need to have four different color variations of it. To break down the process on how this graphic is prepared, we start with analyzing the character. We want to look for which parts of the character will be separated and colored. For instance in Figure 9.13 we point out the first color symbol, which we will set to the color of the character's skin.

In Figure 9.14 we point out the second color symbol which we will set to the color of the character's eyes, teeth, and mouth.

Analyze the layer setup as shown in Figure 9.15, which shows how the alien symbol is architected, to better understand the setup of how this color change works. Notice at the bottom of the symbol you have the COLOR skin layer which sets the color the skin will be. If you set the graphic on this layer to blue the character will look blue. The skin layer contains the different alpha fills which define the light and dark shades of the character. The COLOR eyes and teeth layer contains the symbol which sets the color the eyes and teeth will be. On the eyes, teeth layer you have the different alpha fills which define the light and dark shades of the character. The black lines layer contains the black outlines of the character. These graphics are not affected by any of the color changes.

Another way to visualize the setup is through a visual diagram of how the layers and graphics are compiled, as shown in Figure 9.16. For better understanding the black outlines have been placed in the back of this diagram. Notice how the alpha graphics are placed on top of the colored graphics. That way, when we change the color of the colored graphics you still have the alpha graphics defining the lightness and darkness of the color. See how the alpha skin layer has two different values of alpha black fills, making the feelers of the alien a darker shade of color than the tentacles of the character.

By setting the Color Styles drop-down menu to Advanced and manipulating the color settings you can come up with many different variations of the same character. The Color Style drop-down box is located in the Properties panel once the color symbol is selected.

Background and Graphics
Background graphics have a great impact in the final file size of your game, because background graphics spread across the whole display area. Most games contain various levels where game play takes place, which requires many different kinds of background graphics. If the proper techniques are not used your file size can spiral out of control. Building your backgrounds with many pieces of graphics that are pieced together like a puzzle is the most common technique used to keep a file size down. To further understand how optimized backgrounds are achieved analyze the finished background as shown in Figure 9.18.

Build From Pieces
To create the rocky-looking ground and make it repeat you have to create a piece of graphic that when duplicated and placed back-to-back the graphics connect seamlessly. To start you will want to draw a square with the Line tool and draw in the texture with the Pencil tool. For a quick trick to make sure the left side will seamlessly flow into the right side, draw the center of the texture first, then finish the texture onto the left side and Copy and Paste in Place, as shown in Figure 9.19.

Change the color of the pasted lines and move them over with the right arrow key and connect it to the right side, as shown in Figure 9.20. We changed the color of these lines so when we decide to delete them all we have to do is double-click on them and only those lines will be selected because they are a different color from the rest.

Now finish the texture on the right and make sure to connect the new line to the lines we pasted from the left and we should have something similar to Figure 9.21.

To color your texture just create a simple radial gradient and apply it with the Paint Bucket tool. Make sure the gradients on the left side of the texture will match up with the textures on the right side. To make sure they all match up use the same technique as used with the line drawing, but apply it with gradient fills. You should have a final colored graphic as shown in Figure 9.22.

To show how this texture tiles across several pieces snap together several of them, as shown in Figure 9.23. If you can notice where they connect from viewing the textures at 100%, go back and make the minor adjustments needed.

To create the platforms and prepare them so they can be scaled horizontally without much distortion we will be using a technique similar to what we used on the buttons earlier in this chapter. The problem is in a game many different-sized platforms are needed and to create a new platform for every size will increase your file size and we do not want that. So the technique is to create a center piece which can be scaled horizontally and an end piece which is duplicated and repositioned horizontally based on the length of the platform, as shown in Figure 9.24.

The end piece is duplicated and repositioned to the left, as shown in Figure 9.25.

Select the left end piece and flip it horizontally by selecting the following menu items: Modify > Transform > Flip Horizontal. Then select each end with the Selection tool and snap them to each end of the center platform piece, as shown in Figure 9.26.

By scaling the center graphic horizontally and repositioning the end pieces you can create any size platform you desire. As shown in Figure 9.27 many different sizes are possible and since we are only using two different symbols you can create many platforms without increasing the file size much.

Large Backgrounds
Creating large backgrounds can be a puzzle just by itself since backgrounds can be quite large and can increase your file size tremendously. The number-one way to achieve large backgrounds is to make key elements symbols and reuse them. For instance, with the horns that are sticking up from the ground, we just draw one horn and duplicate it across the stage. A simple gradient is used in the background, making it look like the characters are inside a cave.

To create the horn graphic you should start by using the Line tool to draw the outline of the object, shown in Figure 9.28. Notice extra lines are drawn in the center of the horn; these lines will divide where the different gradient fills will be placed to define the curvature of the horn.

Create two radial gradients, both the opposite of each other; one has the darker color on the inside and the other has the darker color on the outside. Apply the radial gradients with the Paint Bucket tool and position them as they are shown in Figure 9.29 with the Fill Transform tool. Figure 9.29 Two radial gradients are created and applied.

To add a final touch to make the graphic look a bit scary, you could add some red light coming from the bottom of the object. To do that, select the fills we just finished coloring and copy and paste them in place on a new layer above the previous one we were just working on. Select the new graphic and change the color to an alpha red linear gradient. That way we can see through it, as shown in Figure 9.30.

A detailed description of this new linear gradient is as follows: the left color swatch's HEX value is #990000, alpha 75% and the right color swatch's HEX value is #990000, alpha 0%, as shown in Figure 9.31.

Optimized Animations
Game animations require the most attention when it comes to being optimized. It is very important to keep the number of different keyframes down to a minimum and it is strongly recommended that every frame is optimized to make sure the least amount of vector points are used without losing the quality of your graphic. The reason for the strict optimization is that unlike normal animations, a game displays many animations at the same time and even though you may not see it, there is a lot of code working in the background. If too many un-optimized animations are playing you could jeopardize the performance of your game and then bring down the quality of the gaming experience. In this section we will analyze a character animation and a special effects animation to see how you can make them as optimized as possible.

Character Animation
Character animations involve quite a bit more frames than most game animations; therefore they require greater attention. As shown in Figure 9.32, the character is made up of many symbol graphics which are -animated together with motion tweens to display more elaborate movement.

Of course, by reusing the different body pieces many times because they are symbols we save on file size, versus if each frame of animation was a completely new graphic. As shown in Figure 9.33, the key frames of the character shooting require the body pieces to be used many different times.

Special Effects
A special effect in a game is considered a short animation that highlights a certain action or reaction. For instance, when the character shoots his gun, two special effects animations are needed, one for the fire blast coming from the tip of his gun and the flash to show the bullet hitting an object. Other special effects animations could be a splash when someone steps in a puddle, smoke from a car stopping abruptly, a starburst from a shining piece of metal, or a flash of light from a lightning strike. Special effects can be drawn as shown in Figure 9.34 or done with ActionScript.

Summary

• Finalize your character drawings on paper first to limit any character design in Macromedia Flash.
• Build game graphics in pieces; reuse and scale them to keep file size down.
• Setting up your character graphics to include a layer of color that is changed manually or with code to create many different colors of the same character will decrease file size and give you more content.
• Limit the number of frame-by-frame animations and use tween animations to achieve greater motion with fewer keyframes.

• Figure 1
• Figure 10
• Figure 11
• Figure 12
• Figure 13
• Figure 14
• Figure 15
• Figure 16
• Figure 17
• Figure 18
• Figure 19
• Figure 2
• Figure 20
• Figure 21
• Figure 22
• Figure 23
• Figure 24
• Figure 25
• Figure 26
• Figure 27
• Figure 28
• Figure 29
• Figure 3
• Figure 30
• Figure 31
• Figure 32
• Figure 33
• Figure 34
• Figure 4
• Figure 5
• Figure 6
• Figure 7
• Figure 8
• Figure 9