Flash Reference Guide

There are two types of graphical format predominantly on the Internet: raster and vector. The difference between the two can be seen through a simple experiment.

A common raster graphic is either a JPEG or GIF graphic. These graphic formats can be found on almost any web page. When you stretch a raster graphic, you will see that the graphic starts to become grainy, or pixilated. This is because raster graphics, typically used for photographic images, are created pixel by pixel. The images can not stretch elegantly.

Now find a Flash movie. When you open a Flash movie and stretch it, the image does not become pixilated. The edges remain crisp and sharp. The reason for this is that Flash likes to build imagers as vectors, and vector images are created mathematically. Each line is a coordinate from one point to another. Stretching the image does not affect the underlying mathematics to the image.

Macromedia FreeHand, Adobe Illustrator, and Flash all create vector-based images. The bonus with Flash is that the images can also be animated along a timeline. To create vector-based images in Flash, you need to know the ins and outs of the Shape tools.

Shape Tools

Flash comes with three different Drawing tools that enable you to create shapes:

• Line tool
• Pencil tool
• Oval/Rectangle tool

Each of these tools is located on the Tools panel (choose Windows > Tools). I find that I use these tools a lot and that it is quicker to access these tools using the keyboard shortcuts in Flash. After the title for each tool you will find the keyboard shortcut.

Keyboard shortcuts are great. You can access a great deal of functionality directly from the keyboard. If you do not like the default keyboard shortcuts, you can change them. To do so, choose Edit > Keyboard shortcuts. This opens the Keyboard Shortcuts window. Here you can access all of the tools that are enabled to support keyboard shortcuts. You can then change the shortcut with your own custom command. The only caveat is that the new keyboard shortcut you create cannot be the same any existing shortcut.

Using the Line Tool

As you might expect, the Line tool allows you to draw straight lines across the stage. This tool is useful for adding borders and connecting objects together. The Line tool has several parameters that allow you to control color, line thickness, and line design. The following exercise demonstrates how you can draw with the line.

1. Open a new document in Flash.
2. Press N on the keyboard. The cursor changes to the line control.
3. Click on the stage, then hold and drag the line. You will see that the Properties Inspector has changed to reflect the controls that can be managed through the Line tool.
4. With the line still selected, click on the color picker tool in the Properties panel. Change the color to #FF6600 (it is a dark orange color). Press Enter for the color to take effect on the stage. The line is now orange.
5. On the right of the color picker is a text field into which you can enter a number from 1-10. This is the thickness, or stroke, of the line, expressed in pixels. Change the setting to 5. The line on the stage becomes thicker.
6. To the right of the Stroke field is the Stroke Style. This is where you can apply a custom design to the line on the stage. From the Stroke Style menu drop down menu, choose the dashed style. The effect is reflected on the stage. The line is now dashed instead of solid.

Additional stroke styles, colors, and sizes can be applied to lines. Experiment with them to see what kind of effects you come up with.

Using the Pencil Tool

The function of the Pencil tool is to create irregular shaped lines on the stage. This can be a fun tool to play with. The Pencil tool has the same controls in the Properties Inspector as the Line tool. It does, however, come with a couple of extras.

1. Create a new document in Flash. Save this file as Pencil.fla.
2. Press Y on the keyboard. The cursor changes to the pencil control.
3. Draw on the stage. You can make the drawing irregular. You will notice that you can draw any shape you like.
4. In the Properties panel, change the color of the line to #996666. You will see that you can also change the stroke thickness and style in much the same way you did with the Line tool. Change the thickness to 2 and the style to Solid. On the stage you now have an irregular shaped line. You can control the roundness of the curves and the straightness of the lines.
5. Choose Edit > Select All to highlight the Pencil line on the Stage. Click the Smooth button at the bottom of the Tools Bar. This smoothes the line. Click the Straighten button to straighten the outline of the line.

Using the Oval Tool or Rectangle Tool

The two final shape tools that I am going to cover are the Oval and Rectangle. These shapes form the foundation for almost every graphic drawn. They are very powerful in their simplicity.

As with the Line and Pencil tools, the Oval and Rectangle tools are located on the Tools Bar. The only difference the two shapes have over the Line and Pencil tool is that when you draw an Oval or Rectangle, the area within the shape is colored. This internal color is called the Fill Color.

Writing Text in Flash

Whatever you draw in Flash, you will likely need to use the Text tool at some point to add labels or any other text.

With Flash 5, you had three different panels that managed all of the tools needed to format a text field. Thankfully, these tools are now all merged into the Properties Inspector.

Within Flash there are three distinct Text types, all of which share some similar functionality. For each type, you can change the font, color, size, paragraph alignment, and text decoration (Boldness and Italics). The three different types are:

• Static
• Dynamic
• Input

Static text is arguably the most basic of the text formats. It allows you add text to the stage in Text Area Boxes. Whatever font you use for this style of text will be preserved by Flash. That means when you preview the page, you will see the text in the font you chose (when you are working with HTML, you are limited to a finite set of fonts as font embedding is not a standard on the Internet).

For me the most interesting Text type is Dynamic. Dynamic text can be created through ActionScript. This is extremely useful. It allows Flash to connect to databases and present the content from the database directly into a Flash movie.

The Input Text fields is very similar to the an input field within a web page. The text field allows you to enter in your own values. Input Text fields are indispensable for creating forms within Flash.

Applying Color

The final section of the Shape tools is focused on Color. The Tools Bar has two main color controls: the Stroke and Fill colors.

The Stroke Color controls the outline of a shape or a line. Earlier you changed the color of the lines created with Pencil and Line tools. Pressing the Stroke Color selector gives you 256 Web-safe colors. The colors are guaranteed to appear as intended, no matter what computer is used to display them, be in Windows, Mac, or Linux.

The Fill Color enables you to pour color in areas, such as the inside of rectangle. As with the Stroke Color, you can press the Color Selector to choose your desired color.

In addition to the Color Selector, you can also use the Color Mixer panel to apply colors to objects. The Color Mixer allows you to add new color to the bottom of the Color Picker. New colors can include bitmap images gradients and non-Web safe colors.

1. Create a new file and save it as Color Mixer.
2. Choose Windows > Color Mixer.
3. Choose the Fill Color selector. Now choose Solid from the drop down menu. This will allow you to create a solid color. You can choose your color from either the spectrum of colors in the top grid or by entering the Red, Green, Blue (R, G, B) value. Enter in R = 203, G = 138, and B = 68. This is a new color. You may have also noticed that you can add an Alpha transparency to the color. Slide the Alpha setting to 75%. Observe that you can see the grid now appearing through the color swatch.
4. Select the Rectangle tool and draw a rectangle. The shape will be filled with the new color. Draw another rectangle on top of the first to see the effect of the Alpha transparency. You can keep the new color swatch to use later. To do this, choose Windows > Color Swatches, then move the cursor over the color swatch area until you see the Paint Can icon. Click and you will see a new swatch of color is added. You can now access this new color any time you want to apply Stroke or Fill Colors.
5. Now you will create a gradient color with the Color Mixer. There are two types of gradient color: Linear and Radial. Linear gradients move from one edge to the other. Radial gradients begin in the center of a fill and move outward. In the Color Mixer, select Linear from the drop down menu. A horizontal line appears with a Black indicator on the left and a White indicator on the right. Select the Black indicator and slide it back and forth. The effect of the selector is immediately shown in the preview window. With the Black indicator still selected, change the color by choosing Red from the color picker above the preview window. Add the new Linear color to the Color Swatches panel.
6. Draw a square with the Rectangle tool. Fill the shape with the new linear gradient. The gradient can be change to Radial in the Color Mixer. From the Style drop down menu choose Radial. This will change the gradient to appear to be coming from the center of the shape.

The Free Transform tool is new to Flash. You can access the tool from the Tool Bar or by pressing "T" on the keyboard. The Free Transform tool enables you to stretch, skew, and resize any selected object on the stage. All you have to do is select the Free Transform tool and then select a shape or library instance on the stage. The image is then free to be manipulated. Very nice to have.

Summary

What you have covered here is the fundamentals of drawing in Flash. There is a lot more to Flash than just art. In the next section of the guide you will start taking your steps towards animation through mastering the Library tool and understanding instances.