Me and My Cintiq: Using the Brush Tool In Flash

Flash Brush Tools

Getting the most out of your Brush Tools
One of the things that frustrates me a bit with Flash is how the brush tools react when you zoom in and out. Unlike Photoshop, the brushes in Flash don't adjust to the zoom. For example, let's say you're zoomed into your drawing at 300% and draw a line with the #3 sized pen tool. If you zoom back out to 100% and draw a line with the same size brush, the line will be thicker than the one you just drew.
This is particularly frustrating is you create symbols outside of your stage area, and then use them as instances, only to realize your line thickness doesn't match! Here's an example of this problem in a screen grab from my most recent animation. The lines on the penguin are much thinner than the lines used for the other elements in his environment, pulling him out of the scene visually. In some animation, this may be something the artist would want to happen as part of their project, but for this piece, a fun poke at the Pittsburgh Penguins hockey team, it is counter productive to the scene. The trick is to draw the outlines of your symbols right onto the stage to make sure the line thickness is the same as the rest of your animation, and then create symbols from the outlines. Here's how:
		Step 01 Make sure you're in your main scene and create a new layer for your outline. It helps to lock all the other layers, so you don't accidentally grab anything on them when it's time to make your symbol.
Step 02 Choose the brush tool size that matches the thickness of any other lines you've drawn in your animation. If you're just beginning, choose a brush size and make a note of it when you go to create your other symbols.
Step 03 Draw the outline of your character or object on the stage. If you zoom in to get detail, don't forget to resize your brush so the line thickness remains consistent. Zooming in - use a larger brush size, zooming out - use a smaller brush.
Step 04 When you've got your outline complete, click on the keyframe in your timeline to make sure you've got the whole thing. You can select the drawing itself if it's one solid piece, but clicking the keyframe makes sure you've got every little bit. Notice how your drawing has a pattern on it to show that it's been selected. Make sure all elements of your new drawing have this pattern on them, or they'll be left out when you make your symbol.

Step 05 CNTL + click or right click on the drawing to get the pop-up menu. Select 'Convert to Symbol', and then give it a unique name to add it to the library. If you're doing any coding with this Flash document, you may want to click 'Export for ActionScript' if you'll be dynamically adding this symbol to the stage. But for you animators, just give the drawing a name and make it a 'Graphic'

Step 06 You'll see your drawing now has a blue box around it, with the dot representing the object axis point (you can set this to be in 9 different places in your graphic, and that will be the default rotation point for the symbol. We'll talk more about setting the 'center point' in a later blog). It's also now in your library.
If you double-click on this new symbol, Flash will open the symbol into the editing view, with the stage ghosted in the background. What's really nice about this feature is you can see exactly how your new symbol will look on stage, so you can match the colors, layout, line width - everything that has to do with that object to the existing layout.
		Maintaining line consistency is a little bit of a chore, but with this 'work around' you'll be able to keep all your lines looking like they belong in the same place. Happy animating!

06/10/09