Prerequisites:

• Basic Flash Project Setup

Begin

Let’s learn to draw with Flash!

Flash is not the most feature-rich vector drawing package available. During its development lifecycle, the creators of Flash listened more closely to programmers than artists. As a result, many new features for artists fell by the wayside, while Flash developed a (near) fully-featured programming language in its own right, ActionScript 3.0. Meanwhile, other software developers came along and ate Flash’s lunch – most notably Toon Boom Animation with its Harmony product, which is used in feature film production by Disney and other animation studios.

Still, Flash contains a great set of vector drawing tools, with some decent animation capabilities. In this tutorial, we’ll cover the unique way in which Flash handles vector drawing.

Vector vs. Raster

Before we begin, we should just cover off what the word “vector” means as it pertains to drawing software. Let’s take two images: a vector image on the left, and a raster image on the right:

Now we’ll zoom into both images:

Notice that the vector image remains smooth, while we can see the individual pixels (short for “picture elements”) that make up the raster image.

This happens is because the computer draws each image differently. Raster drawing is like painting on a canvas, while vector drawing is like describing shapes with math. The computer retains the mathematical calculations it needs to redraw a vector image at any size. But when you blow up a raster image, there’s only so much picture information the computer knows about the image. It can try filling in the blanks, but the results are usually mediocre.

The other big difference between the two comes when you want to move elements around. In a vector image, elements are separate, like fridge magnets. You can move them around, and put them in front of or behind each other, and all is fine and dandy. But when you move a piece of a raster image, it’s like you’re taking a pair of scissors to a canvas and cutting a chunk out of it – you wind up with a gaping hole. Modern raster programs often have a Layers feature that keeps elements separated, but this is just essentially like working with multiple flat images composited on top of each other. The problem remains.

Some examples of raster image software include Photoshop, GIMP, and MS Paint.

Some examples of vector image software include Fireworks, Illustrator, Flash, and any 3D software (3D Studio Max, Maya, Blender, etc.)

Tricksy falseness occurs when you realize that many vector packages can import raster images. Many times, i’ve requested a vector logo from a client so that i can blow it up to a certain size without it looking pixellated. When i ask for the corporate logo “in Illustator”, i usually get an Illustrator file with an imorted raster image. Thees, of course, ees boolchit. It makes more sense to ask for a vector image instead of an Illustrator file, but not everyone knows what exactly a vector image is. Now you know! Spread the word, and share this tutorial.

1. Strokes vs. Fills

In Flash, the things you draw are called shapes. The outline of a shape (the “stroke”) is separate from the colour inside a shape (the “fill”). Witness:

1. Open Flash.
2. Click the Rectangle tool in the Tools palette, or press the R key on your keyboard. (If you can’t see the Tools palette, click Window > Tools in the menus, or hit CTRL/Command + F2 on your keyboard)

   

3. Click and drag the mouse on the Stage (the rectangular white area in the middle of the screen) to make a rectangle shape. By default, you should see a white rectangle with a black stroke. You can change the stroke and fill colours before drawing by clicking the stroke and fill colour swatches in the Tools palette, and choosing different colours.

   

4. Click the black Selection tool at the top of the Tools palette.

   

5. Click once inside the rectangle to select the white filled area. It goes “fuzzy”, indicating that it’s selected.
6. Click on any blank area on the Stage to deselect the fill.
7. Double-click on the black stroke around the edge of the rectangle. The stroke goes fuzzy too, indicating that it’s selected. (you may notice that you can also single-click the stroke to select one of the four edges individually)
8. Click and drag to move the stroke away from the fill, independently.

The stroke and fill are two separate things! If at any time you want to select the fill and the stroke together, double-click the fill, and the stroke will be selected along with it.

2. Strokes Cut Fills

Strokes can behave like cut lines in sewing, or hot wires in clay modeling. They slice fills. Let’s see that in action.

1. Press CTRL/Command+A to select everything on the stage, and then press delete to get rid of your last shapes.
2. Click the fill colour swatch in the Tools palette. Click to select a non-white colour. i like yellow, because it reminds me of delicious snow.
3. Click the Rectangle tool, then click and drag to draw a rectangle on the Stage.
4. Click the Selection tool (the black arrow)
5. As before, double-click to select the stroke around the rectangle.
6. Click and drag the stroke so that it intersects the fill.
7. Click the part of the fill on the inside of the stroke. Now click the part of the fill on the outside of the stroke. Click and drag to move either of these fills to another part of the Stage.

The stroke cut the fill in half, and made it into separate shapes. For further exploration of this, try drawing a large rectangle, and draw wiggly strokes through it with the Pencil tool. Note that your wiggly lines split the fills up into separate pieces too, because the Pencil tool creates fill-cutting strokes.

3. Working Without Strokes or Fills

How do you get a rectangle without a stroke, or one without a fill? In the colour palette fly-out, there is a small swatch with a red slash through it. Use this to cancel the fill or stroke colour for your next shape.

4. Same Colours Meld

Two shapes of the same colour automatically fuse together. Try it:

1. Clear the stage of old artwork. (CTRL/Command + A, Delete)
2. Draw a red rectangle with no stroke (see above)
3. Draw another red rectangle with no stroke overlapping the first.
4. Click the Selection tool.
5. Click on one of the two rectangles. Both rectangles are selected.

There actually aren’t two rectangles any more – there’s only one. Because they are the same colour, they melded together into the same shape.

You can meld two shapes of the same colour even without drawing them on top of each other. Draw one red rectangle over here, then draw another one over there. Using the Selection tool, drag one rectangle on top of the other. As long as the rectangle is selected, the two rectangles haven’t had colour sex yet – you can move the selected rectangle away without any fusion. If instead you click the Stage to deselect the overlapping rectangle, then BOWM-CHIKKA! What Flash has joined together, let no man put asunder.

5. Different Colours Cut

As with strokes, two shapes of different colours will cut each other when they overlap. Regard:

1. Clear your old artwork (CTRL/Command + A, Delete)
2. Draw a red rectangle on the Stage.
3. Choose a new colour for the fill swatch. i chose green, because it’s the colour i turned after i ate that delicious snow.
4. Draw your differently-coloured rectangle on the Stage, overlapping the first rectangle.
5. Click and drag either of the two rectangles away from each other.

Two differently-coloured rectangles automatically slice each other, in what i can only assume is Flash’s way of warning us about racially-motivated violence. Just as before, the two shapes don’t have to be drawn on top of each other for them to slice each other up. Try drawing two shapes at opposite ends of the stage. Then drag one on top of the other. Click on the Stage to deselect it – WHIPPOW!! That’s where the shanking happens. Now drag one shape away from the other to view the carnage.

6. Differently-Coloured Strokes are Distinct. Similarly-Coloured Strokes Become Fused.

Finally, we’ll see how strokes behave with each other depending on their colours.

1. Clear your old artwork (CTRL/Command + A, Delete)
2. Choose the no-fill option for the stroke colour swatch.
3. Choose a colour for your stroke. i choose black, to reflect the rage and despair in my soul.
4. Draw a rectangle on the Stage.
5. Draw another black-stroked rectangle, overlapping the first one.
6. Choose a different colour for your next stroke, like brown, which is the colour of chocolate when you poop it out.
7. Draw another overlapping rectangle on the first one.
8. Using the Selection tool, double-click the black stroke. The two black rectangle strokes get highlighted together, indicating that they are one shape.
9. Double-click the differently-coloured stroke. It highlights independently, indicating that it cannot be part of the black rectangles’ undying love for each other. Two days later, the brown rectangle was found at the bottom of Lake Billingsly with a cinder block tied around its ankles.

Notice, also, that strokes cut other strokes. Click on an individual line segment anywhere in your tri-rectangle shape. Any of these pieces can be moved away from the larger shape as a separate piece.

Finish

i prize the Flash drawing tools for their speed. You can draw all of the assets for your game right inside Flash, without having to buy other drawing programs to create your assets. And this cutting/joining stuff speeds up my drawing immensely. While it may seem unforgiving and awful at first, know that you can keep shapes away from each other by using layers and groups, which we’ll see in another tutorial. But when it comes down to it, the process for creating similar joins and cuts in a competing program like Illustrator is slow as molasses and unwieldy. The automatic cuts and joins in Flash, not to mention the stroke and point manipulation, are blazingly fast compared to Illustrator’s compound paths palette, and its finicky bezier handle-pulling. Once i adopted the drawing tools in Flash, i wondered how i ever got anything done in Illustrator.

Ryan Henson Creighton is a Toronto-based game developer, and founder of Untold Entertainment Inc., specializing in online games for kids, teens, tweens and preschoolers.

Ryan Henson Creighton

View all posts by Ryan Henson Creighton

Popularity: 3% [?]