Flash MX TUTORIAL
In this tutorial I take you step-by-step through the process of creating this Flash MX movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to your movie.Getting Started
To begin, open Flash MX. You will be presented with the screen shown here.
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, Background Color, and Ruler Units.
Frame Rate The speed of the movie
Dimension The size of the Stage.
Background Color The color of the Stage.
Ruler Units The unit of measure the ruler displays. 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 > Document from the menu. The Movie Properties dialog box will open. 2. Type 5 in the Frame Rate field.
3. Type 400 px in the Width field.
4. Type 400 px 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.
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 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.
Note: When a panel is open (for example, the Library or Stroke panel) you can leave it open for future use. If a panel gets in your way, use the Tab key to toggle the panel display on and off.
1. Press the Tab key. The Library panel (and the Stroke panel if it is open) should disappear.
2. Press the Tab key again. The Library panel (and the Stroke panel if it is open) should reappear.
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 Sky 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.
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 from the menu. Deselect Snap to Grid.
2. Select the Pencil tool. 3. Click on the Stroke color box and select brown as the stroke color.
4. Click on the Fill color box and select brown as the fill color.
5. On the Modifier panel, select the Smooth option. This option rounds the corners of your drawing.