introduction to flash

Vector vs. Raster

Image via Flickr creative commons: http://www.flickr.com/photos/75905404@N00/4301009954/

It is important to understand the difference between vector graphics and raster (Bitmap) images. Vectors are color-shape-based line art, while bitmaps are photographic images made up of pixels.

Vectors are made up of lines called paths. These lines are connected by dots called anchor points. Vectors are not made up of pixels, and thus their size can be changed without losing any quality. Vectors don’t take up much memory, but they can be taxing on a computer’s processor the more complex they become. Vectors are designed to be simple shapes, graphics or animations.

Bitmaps are photographic images that are comprised of tiny squares called pixels. Bitmaps lose quality when they are resized, especially when their size is increased from their native size. Newer algorithms in the way Adobe resizes bitmaps have allowed quality loss to be minimal in many cases where the percentage change in size is a small. Bitmaps take up much more memory (and increase loading time on a webpage) however, they are not as taxing on processing.

Tools

There are dozens of tools in Flash that one can use for many various purposes in creating art. We will go over a few essential tools to start with.

The first are the two arrow tools; the Selection Tool (black arrow) and the Sub-selection Tool (white arrow). The Selection Tool is used for selecting and moving elements on the stage. It can also be used to bend and modify vector shapes. The Sub-selection Tool (white arrow) is only used for selecting drawing paths in shapes. The Selection Tool is generally used much more often and is the default tool for most tasks. The Sub-selection Tool is only used in specific cases when drawing or modifying vector shapes.

The Free Transform tool is used to change the size of an object on the stage. When using the Free Transform tool, you must first click on an object on the stage to select it, and then use the eight black handle points that appear around the box to change the shape of your object. When selecting objects with the Free Transform Tool, a small white circle will appear, usually in the center of the object. This is called the reference point, and can be moved with the mouse. This reference point will determine how the tool rotates and scales the object. It is also possible to skew an object by moving the cursor just outside the bound of the box.

The Lasso Tool is used for selecting object on the stage. It is done by drawing a circle around the objects you wish to be selected. It can also be used for selecting portions of a shape.

The Text Tool is used to create text boxes for entering text. The tool can be used by simply clicking the stage once to create a default text box (which can be resized later) or by clicking and drawing a text box to a desired shape. Static text boxes can only be drawn to a specified width and always start out as one line of text. This means you won’t be able to give your text box a height. As you type, you can press return to create additional lines of text. Dynamic text boxes can be given a height.

The Shape Tool is for drawing some basic preset shapes, like a rectangle, circle or polygon. Click and hold down on the tool item to select the shape type you want. There are settings in your property inspector for specifying characteristics of the rectangle and oval tools when you draw them. The primitive version of those shapes allow you to continuously edit those properties after you’ve drawn the shape (such as the rounded corners on the rectangle, and the shape of an oval). You will need to either break apart or convert the primitive shapes in order to further edit them.

The Color Picker Tools allow you to specify the colors of shapes either before you draw them, or you can change the color after you draw a shape if it's currently selected. The colors can be selected by clicking on the the colored boxes just below the icon of a pencil and the icon of a paint bucket. The pencil icon represents the color for the stroke, and the paint bucket represents the color for the fill. The stroke and fill are discussed in greater detail in a future section.

The Color Picker pallete has several options for choosing a color. Of notable interest are the options along the top of the window which allow you to turn off the color, or specify an Alpha (transparency) setting. If you have the six-digit color hexadecimal color code, you can type it in by clicking the code at the top of this box.

Parts of Basic Shapes in Flash

There are two parts to drawing basic shapes in the Flash. The stroke is the outline, and the fill is the color shape itself. It is important to realize that the stroke and fill are two independent parts of a shape, and can be drawn separately.

For people who have never use vector-based drawing software, shapes can seem oddly non-intuitive. It is important to understand all of the quirks to drawing in Flash, and why shapes respond to certain actions. With a little practice, shape manipulation can become like second nature.

Selecting Shapes

The first thing to understand about shapes is how they respond to selection with the selection tool (black arrow tool). Draw a rectangle on the stage, and use the selection tool to click on the various portions of the shape.

When single clicking on a stroke, only one segment of the stroke will highlight (indicated by a stipple pattern). When double-clicking a stroke, any adjoining segments of the stroke will also be highlighted. This also true for any strokes on the same layer that are touching the shape. For example, if an oval was drawn touching the rectangle, double-clicking a stroke would select all adjoining pieces.

Fills operate a little differently in Flash. Single clicking a fill will select and highlight the entire fill area. However, double clicking a fill will select the fill as well as any adjoining strokes. Double-clicking the fill is an easy way to select an entire shape if you wish to move it around on the stage.

Two separate fill shapes will become one fill shape if they are moved on top of each other and are deselected. This is important to note when drawing, as it can often be counter-intuitive to what most people expect.

Shapes of different colors do not mix in the same fashion. Instead, they will absorb, or remove other shapes. The most recently selected shape is what takes precedence. 

This characteristic of fill shapes (either connecting or absorbing other shapes) can be prevented if you wish by grouping objects into a number of different containers, such as a drawing object, a group or a symbol.

Modifying Shapes

There are a number of ways to modify shapes in Flash. The most basic method is to use the Free Transform tool to select a shape and adjust its size, rotation or skew properties.

When selecting an object with the free transform tool, eight black boxes will appear around the shape. You can click on any of these boxes to modify the size and general shape of the object. Hold down the shift key on your keyboard to keep the ratio, and perspective, the same while resizing. This will prevent objects like images from becoming distorted as you resize them. You can also flip an object by grabbing one side and moving it past the opposte side of the shape (however, this is only noticeable with objects like images.)

Shapes can be skewed by moving the mouse cursor just outside the object between the center box and a corner box. Click and drag to skew the shape.

Shapes and objects can also be rotated by moving the cursor just outside the corner of the object. The cursor will turn into a small circular symbol, and you can drag to rotate the object.

The white dot in the center of the object is called the reference point. It can be moved by clicking on it and dragging it anywhere on or even outside the shape. The reference point will affect the pivot point the object uses when rotating, as well as the reference when resizing.

Bending Shapes with the Selection Tool

You can also modify shapes using only the Selection Tool (black arrow tool). This is useful for reshaping fills, or bending a stroke. Modifying shapes can be a little tricky. It takes practice to really get it down.

Move the selection arrow close to an un-selected shape. As the cursor approaches (but is not over) the shape, a small curvy line will appear just below the arrow. This will allow you to click and drag out the side of the shape.

This allows you to reshape the edges of the object into curves. It is also possible to push an edge into the shape.

You can also modify the corners of a shape in much the same fashion. When you move the selection arrow cursor just outside a corner of the shape, you will see a small corner symbol appear next to the arrow. This signifies that you can click and drag the corner point to a new location.

Modifying Shapes with the Sub-Selection Tool and Pen Tool

You can modify shapes with fine-grain precision using the sub-selection or pen tools. These tools allow you to change the paths that make up the shape at a fundamental level. All shapes in Flash are made up of lines and points in a connect-the-dots fashion. Some of the dots, called anchor points, are designed to be curved (known as bezier curves) and will have handles. Others are corner points and have straight lines connecting them. Lastly, some points are both, they have a curved line on one side, and a straight line on the other.

Using the sub-selection tool (the white arrow) click on the edge of a shape to see its paths. You can click on the small green anchor points and reposition them. If an anchor point is a bezier curve, some handles will appear when you select it.  You can click the handles and drag them to modify the curve of the shape. 

To add anchor points, delete anchor points or change an anchor point from curve to corner, you will have to use the pen tool options.

The Pen Tools are the animators most used tools. The first two tools, the Pen Tool and Freeform Pen Tool, are used by illustrators and animators to create shapes from scratch. Usage of these tools goes beyond the scope of this tutorial. The last three tools, Add Anchor Point, Delete Anchor Point and Convert Point are used to modify existing shapes.