Flash Tutorial

 

Getting Started

To begin, open Flash 5.The upper left corner of the screen displays the Tool 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 Tool palette. You use modifiers to set tool options. The Timeline appears in the upper portion of the screen. You use the Timeline line to lay out the sequence of the 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, Back You set these properties in the Movie Properties dialog box.

 

To set the properties for the movie you are going to create:

  1. Choose Modify > Movie from the menu. The Movie Properties dialog box will open.
  2. Type number in the Frame Rate field.
  3. Type number in the Width field.
  4. Type number in the Height field.
  5. Click on the Background color box and set the Background color to white.
  6. Select Pixels from the drop-down menu in the Ruler Units field.
  7. Click on OK.

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 will display.
  2. Click on the Color box and select gray to have the gridlines display in gray.
  3. Select Show Grid to cause the grid to display.
  4. Select Snap to Grid to cause the edges of your graphic to align with the grid lines.
  1. Set the Horizontal field to separate horizontal lines by 20 pixels.
  2. Set the Vertical field to separate vertical lines by 20 pixels.
  3. Set the Snap Accuracy to Normal.
  4. Click on OK.

 

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.

To draw the ellipse:

 

  1. Choose View > Antialias from the menu. Choosing Antialias will smooth the edges of your drawing.
  2. Select the Oval tool. Two color boxes will appear 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.

You set the thickness of the Stroke line in the Stroke panel. To set the thickness of the Stroke line:

  1. Choose Window > Panels > Stroke from the menu. The Stroke panel will open.
  2. Choose Solid from the drop down menu to select the type of line that will outline your drawing.
  3. Type 3 in the Vertical field to set the line thickness.
  4. Click on the Stroke color box and select black as your stoke color.
  5. Click on the Fill color box and select navy blue as your fill color.
  6. Click on the Stage and drag diagonally to draw an ellipse.

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. Select the Arrow tool.
  2. Double-click on the ellipse.
  3. Choose Insert > Convert to Symbol from the menu. The Symbol Properties dialog box will open.
  4. Type Start Button in the Name field.
  5. Select Button as the type of behavior.
  6. Click on OK.
  7. Choose Window > Library from the menu. The Library panel will open. 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 on the Fill color box, the Fill dialog box shown here will open.

Gradients display on the bottom row and show gradations of color. You will use a gradient to create the movie’s sky. First, you must create the gradient you will use. To create the gradient:

  1. Choose Window > Panels > Fill from the menu. The Fill panel will appear.
  2. Select Linear Gradient from the drop-down menu.
  3. Click on the first Edit Gradient Range icon. A color box will appear.
  4. Click on the color box and select blue.
  5. Click on the second Fill Gradient Range icon. Click on the color box and select white.
  6. Move the second Fill Gradient Range icon to the three-quarter point on the Gradient Range slider.
  7. Click on the Save icon.

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. Select the Rectangle tool.
  2.  Move to the Stroke panel. If the Stroke Panel is not open, choose Window > Panels > Stroke from the menu to open it.
  3. In the Stroke Panel, select Hairline from the drop-down menu.
  4. In the Stroke color box, select black.
  5. In the Fill color box, select the gradient you created.
  6. Click on 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. Select the Arrow tool.
  2. Double-click on the graphic.
  3. Choose Insert > Convert to Symbol from the menu. The Symbol Properties dialog box will open.
  4. Type name in the Name field.
  5. Select Graphic as the Behavior.
  6. Click on OK to store the graphic in the Library.
  7. Press the Delete key to remove the graphic from the Stage.

Creating Your Movie You have created all of your graphics and have stored them as symbols. You are now ready to create your movie.

Draw the picture

 

  1. Select the Line tool.
  2. Move to the Stage and draw buildings as shown in the illustration.

Add Color to the picture

Fill the first picture with color:

  1. Select the Paint Bucket tool.
  2. Select tan as the fill color.
  3. Click in the first picture to fill picture with color.

Fill the next object with color:

  1. Select green as the fill color.
  2. Click in the second building to fill the building with color.

Fill the last building with color:

  1. Select pink as the fill color.
  2. Click in the last building to fill the building with color.

Layers

Think of a layer as a transparent sheet on which you paint. You can see through each layer to the layers under it until you add color. You can add layers, delete layers, and change the position of layers. Each layer is independent of all other layers. The layer you are currently working on is called the active layer. You can view layer information on the Timeline.

Renaming a Layer Change the name of the current layer:

  1. Double-click in the layer name area of the Timeline.
  2. Type name to change the layer name

Adding New Layers Create a new layer for the picture.

  1. Choose Insert > Layer from the menu to create a new layer above the active layer.
  2. Double-click in the layer name area of the Timeline.
  3. Type name of that picture to name the layer.

Create the picture

1.      Make sure picture  is the active layer. When a layer is active, it is highlighted. You click on the layer name to make a layer active.

2.      Move to the Library panel. If the Library panel is not open, choose Window > Library from the menu to open the Library.

3.      Click on the icon next to Sky and drag a copy of Sky onto the Stage.

Rotate and Scale

You use the Arrow tool to resize (scale) and rotate an object. You need to resize and rotate the picture symbol to create the picture.

  1. Select the Arrow tool.
  2. Select the Rotate modifier.
  3. Grab a corner handle and drag to rotate the symbol so that the gradient is horizontal.
  4. Select the Scale modifier.
  5. Set the size of the symbol so it covers the buildings. To set the size, grab the handles of the symbol and drag.

Stopping the Action

If you published your movie now, the car would start moving as soon as the viewer entered the screen. You want the viewer to click on a button to make the car move. In this exercise you will add some script to stop any action before the viewer clicks a button. Later, you will add a button for the viewer to click on to start the action.

Stop the Action

To stop the action:

  1. Choose Insert > Layer from the menu to add a new layer.
  2. Choose Modify > Layer from the menu and type Stop Action in the Name field.
  3. Click on OK.
  4. Select frame 1 on the Stop Action layer.
  5. Right-click in Frame 1and choose Actions from the context menu.
  6. Click on the plus (+) icon a context menu will appear.
  7. Choose Basic Actions > Stop from the menu.

Play the Movie

 

Choose Control > Test Movie from the menu to play the movie. Your picture should not move.

Create a New Layer

  1. Click on the top layer to make the top layer the active layer.
  2. Choose Insert > Layer from the menu to create a new layer.
  3. Choose Modify > Layer from the menu.
  4. Type Button in the Name field to name the layer button.
  5. Click on OK.

Take the Start Button from the Library

  1. Move to the Library. If the Library panel is not open, choose Window > Library from the menu.
  2. Click on the icon next to Start Button and drag the Start Button onto the Stage.

Edit the Symbol

  1. Choose Edit > Edit Symbols from the menu to change to the Edit Symbols mode.

The Over Frame

  1. Click in the Over Frame to select it.
  2. Choose Insert > Key frame from the menu.
  3. Click on the Fill color box and select green.

The Down Frame

  1. Click in the Down Frame to select it.
  2. Choose Insert > Key frame from the menu.
  3. Click on the Fill color box and select brown.

The Hit Frame

  1. Click in the Hit Frame to select it.
  2. Choose Insert > Key frame from the menu.
  3. Choose Edit > Edit Movie from the menu.
  4. Right-click on the button.
  5. Choose Actions from the menu
  6. Click on the Plus icon. A context menu will appear.
  7. Choose Basic Actions > Go To from the menu.
  8. Make sure Go To and Play is selected.

Test the Movie

  1. Choose Control > Test Movie from the menu. The Test Movie window will open.
  2. Click on the Start Button to make the car roll.
  3. Close the window.

The Text Tool

You need to put a label on the Start Button and add a title to the movie. You will use the Text tool for this.

Add Text to the Button

  1. Click on the Text tool to select it.
  2. Choose Text > Font from the menu and select a font.
  1. Choose Text > Size > 12 from the menu to set the font size to 12.
  2. Click on the Fill color box and select gold as the color.
  3. Type Start Movie on the button.
  4. Click anywhere outside the Stage to close the text box.
  5. Use the Arrow tool to adjust the placement of the text.
  6. Click anywhere outside the Stage to deselect the text box.

Add a Title

  1. Choose Text > Size > 24 from the menu.
  2. Select the Text tool.
  3. Click on the lower left corner of the Stage.
  4. Type name.
  5. Click anywhere outside the Stage.

Test the Movie

  1. Choose Control > Test Movie from the menu. The Test Movie window will open.
  2. Click on the Start Movie button. The movie should play.

 

 

 

 

 

 Back

 

 

     

 
 
Yahoo! SiteBuilder

 1

Hosted by www.Geocities.ws

1