Tutorial For Flash

Drawing a Car

In this exercise you will create a car. You will use the car later.

Draw a Hubcap

Start your car by drawing a hubcap.

1. Choose View > Snapping > Snap to Grid from the menu.
2. Choose the Oval tool.
3. Click the Stroke color box and choose gray as the stroke color.
4. Click the Fill color box and choose gray as the fill color.
5. Click in the upper corner of a square of the grid, hold down the Shift key, and drag diagonally to draw a circle. Holding down the shift key as you drag creates a perfect circle when you are using the Oval tool.

Convert the Hubcap to a Symbol

Converting the hubcap to a symbol places the hubcap in the Library. Later you will take two copies of the hubcap out of the Library and place one copy on each tire.

1. Choose the Selection tool.
2. Double-click the circle. Double-clicking the circle selects the fill and the stroke.
3. Choose Modify > Convert to Symbol from the menu. The Symbol Properties dialog box opens.
4. Type Cap in the Name field.
5. Choose Graphic as the Behavior type.
6. Click OK.
7. Press the Delete key to remove the hubcap from the Stage.

Draw the Tires

Draw two tires. Look at the graphic below and place the tires on the grid exactly as shown. Remember: When using the Oval tool, holding down the Shift key as you click and drag creates a perfect circle.

1. Choose the Oval tool.
2. Click the Stroke color box and choose black as the stroke color.
3. Click the Fill color box and choose black as the fill color.
4. If selected, deselect Obect Drawing mode.
5. Click and drag while holding down the Shift key to draw the two tires as show in the graphic.

Draw the Chassis

You use the Line tool to draw straight lines. Use the Line tool to draw the car chassis. But first, you need to set the Stroke line size.

1. Choose the Line tool.

2. Move to the Property inspector. If the Property inspector is not open, choose Window > Properties > Properties from the menu to open it.
3. Choose Solid from the drop-down menu.
4. Type 3 in the Stroke height field to set the line thickness.
5. Draw the chassis as shown in this graphic.

Fill the Car with the Color Red

1. Choose the Paint Bucket tool.

2. Click the Fill color box and choose red as the fill color.
3. Click the car to apply the fill color.

Fill the Headlights with the Color White

1. Choose the Paint Bucket tool.
2. Click the Fill color box and choose white as the fill color.
3. Click inside the headlight area.

Add the Hubcaps

1. Choose the Selection tool.
2. Move to the Library panel. Choose Window > Library from the menu if the Library is not open.
3. Click the icon next to Cap and drag a copy of Cap to the center of one tire.

4. Click the icon next to Cap again and drag another copy of Cap to the center of the other tire.
5. Use the arrow keys on the keyboard to adjust the location of the hubcaps. Your car should look like the one shown here.

Group the Car

You want Flash to view the car as a single object. You need to group the car.

1. Choose the Selection tool.
2. Create a rectangle around the car to select the car.
3. Choose Modify > Group from the menu.

Convert the Car to a Symbol

1. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box opens.
2. Type Car in the Name field.
3. Choose Graphic as the Behavior.
4. Click OK. Flash stores the graphic in the Library.
5. Press Delete to remove the car from the Stage.

The Pencil Tool

You use the Pencil tool to draw freehand shapes. You need to draw a tree trunk and a treetop to create a tree.

Create the Tree Trunk

1. Choose View > Grid > Edit Grid from the menu.
2. Deselect Snap to Grid.
3. Click OK.
4. Choose the Pencil tool.

5. Click the Stroke color box and choose brown as the stroke color.
6. Click the Fill color box and choose brown as the fill color.
7. On the Modifier panel, if Object Drawing is selected, deselect Object Drawing.
8. On the Modifier panel, choose the Smooth option. This option rounds the corners of your drawing.

9. Draw the tree trunk. Make sure the starting point and the ending point connect.

10. Choose the Paint Bucket tool. You use the Paint Bucket tool to fill enclosed areas with color.

11. Click inside the trunk to fill the trunk with color.

Note: If your tree trunk does not fill with color, you might have gaps. To close the gaps, click on the Gap Size modifier and choose Close Large Gaps.

Create the Tree Top

1. Choose the Pencil tool.
2. Click the Stroke color box and choose green as the stroke color.
3. Click the Fill color box and choose green as the fill color.
4. Draw a treetop like the one shown here.

5. Choose the Paint Bucket tool.
6. Click inside the treetop to fill the treetop with color.

Create the Tree

1. Choose the Selection tool.
2. Double-click the treetop to choose the treetop.
3. Drag the treetop over the tree trunk.

Grouping

Flash Professional 8 views the tree as two objects, the treetop and the tree trunk. In the next exercise you will group the treetop and the tree trunk to cause Flash Professional 8 to view the tree as a single object. Then you will turn the tree into a symbol.

1. Choose the Selection tool.
2. Use the Selection tool to create a rectangle around the tree. This selects the tree.
3. Choose Modify > Group from the menu to make the treetop and the tree trunk a single object.
4. Choose Modify > Convert to Symbol from the menu. The Symbol Properties box will open.
5. Type Tree in the Name field.
6. Choose Graphic as the Behavior type.
7. Click OK. The tree now appears in the Library.
8. Press the Delete key to remove the tree from the Stage.

Creating a Symbol

You are now ready to turn the graphic (the ellipse) you created into a symbol and store the graphic in the Library. Items stored in the Library can be used later.

1. Choose the Selection tool.

2. Click and drag to create a rectangle around the ellipse to select it.
3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box opens.

4. Type Start Button in the Name field.
5. Choose Button as the type of behavior.
6. Click OK.
7. Choose Window > Library from the menu. The Library panel opens. You should see Start Button in the Library window.

8. Press the Delete key to delete the ellipse from the Stage. Don’t worry. You have a copy of the Start Button in the Library.

Gradients

When you click a Fill Color box, the Fill dialog box shown here opens.

Gradients show gradations of color. They display on the bottom row of the Fill dialog box. You will use a gradient to create the movie’s sky. But first, you must create the gradient you will use.

To create the gradient:

1. Click the first Color box on the gradient row.
2. Choose Window > Color Mixer from the menu. The Color Mixer panel opens.

2. Choose Linear from the drop-down menu.
3. Double-click on the first Edit Gradient Range icon. Color boxes appear.

4. Click the color blue to select blue.
5. Double-click the second Fill Gradient Range icon. Click the color box and select white.

6. Click and drag the second Fill Gradient Range icon to the three-quarter point on the Gradient Range slider.
7. Click the Menu Options icon.
8. Click Add Swatch. Flash adds the gradient you created to the color box.

The Rectangle Tool

You use the Rectangle Tool to draw rectangles and squares. In this exercise you will create a rectangle and fill it with the gradient you just created. You will then turn the resulting graphic into a symbol and use it later to create the sky.

1. Choose the Rectangle tool.

2. Move to the Property inspector. If the Property inspector is not open, choose Window > Properties > Properties from the menu to open it.
3. Select NoColor in the Stroke color box.

4. In the Fill color box, select the gradient you created.
5. Click the Stage and drag diagonally to create a rectangle.

Later you will use the graphic you just created. For now, turn it into a symbol.

1. Choose the Selection tool.
2. Click the graphic.
3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box opens.
4. Type Sky in the Name field.
5. Choose Graphic as the Behavior.
6. Click OK to store the graphic in the Library. If the Library is not already open, click Window > Library to open the Library. You can see the graphic in the Library.
7. Press the Delete key to remove the graphic from the Stage.

The Grid

In the exercises that follow, you will be creating graphics. When creating graphics, the grid is often helpful. To turn on the grid:

1. Choose View > Grid > Edit Grid from the menu. The Grid dialog box opens.

2. Click the Color box and select gray to have the grid lines display in gray.
3. Choose Show Grid to cause the grid to display.
4. Choose Snap to Grid to cause the edges of your graphic to align with the grid lines.
5. Set the Horizontal field to 20 px to separate horizontal lines by 20 pixels.
6. Set the Vertical field to 20 px to separate vertical lines by 20 pixels.
7. Set the Snap Accuracy to Normal.
8. Click OK.

• Choose Window > Properties> Properties from the menu. The Property inspector appears at the bottom of the screen.

The Oval Tool

In the exercise that follows, you will use the Oval tool to draw an ellipse. You will then turn the ellipse into a symbol. Symbols are reusable graphics you store in the Library. Later in the tutorial you will turn the ellipse into the button movie viewers press to start the movie.

1. Choose the Oval tool. There are two color boxes on the Modifier panel. These color boxes are used to set the stroke and fill colors. The stroke color outlines your drawing. The fill color fills the center of your drawing.

2. Click the Stroke Color box and then click the color black to choose black as your stroke color.
3. Click the Fill Color box and then click the color navy to choose navy as your fill color.
4. If selected, click to deselect the Object Drawing option. The Object Drawing option enables you to draw your ellipse as a grouped object that will not merge with other objects you draw. You want this option turned off.

1. If the Property inspector is not open, choose Window > Properties> Properties from the menu. The Property inspector appears at the bottom of the screen.

2. Choose Solid from the drop-down menu to select the type of line that will outline your drawing.
3. Type 3 in the Stroke Height field to set the line thickness.
4. Click on the Stage and drag diagonally to draw the ellipse.

Note: You can also use the Property inspector to set the stroke and fill colors.

By Denise Etheridge

In this tutorial I take you step-by-step through the process of creating this Flash Professional 8 movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to your movie.

You will need Flash Professional 8 to take this tutorial. If you do not have a copy of Flash Professional 8, you can download the trial version by clicking here.

Getting Started

To begin, open Flash Professional 8. You will be presented with the screen shown here.

Click Flash Document. The screen shown here appears:

The upper left corner of the screen displays the Tools palette, which contains tools you can use to create or modify graphics and text. You select a tool by clicking on it. Tool modifiers for the selected tool display below the Tools palette. You use modifiers to set tool options.

The Timeline appears in the upper portion of the screen. You use the Timeline to lay out the sequence of your movie.

The Stage displays in the center of the screen. You create your movie on the Stage.

Movie Properties

You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler Units.

You set these properties in the Movie Properties dialog box. To set the properties for the movie you are going to create:

2. Type 400 px in the Width field.
3. Type 400 px in the Height field.
4. Click the Background color box and choose white as the background color.
5. Type 12 in the Frame Rate field.
6. Choose Pixels from the drop-down menu in the Ruler Units field.
7. Click OK.