Mokymosi naudotis Flash MX programa

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 oon 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 tto 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 tto 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 tturn 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 tthe 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 ddisplay 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 ffield.

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 sstroke 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.

6. Draw the tree trunk.

7. Select the Paint Bucket tool. YYou use the Paint Bucket tool to fill enclosed areas with color.

8. 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. Select the Pencil tool.

2. Click on the Stroke color box and select green as the stroke color.

3. Click on the Fill color box and select green as the fill color.

4. Draw a treetop like the one shown here.

5. Select the Paint Bucket tool.

6. Click inside the treetop to fill the treetop with color.

Create the Tree

1. Select the Arrow tool.

2. Double-click on the treetop.

3. Drag the treetop over tthe tree trunk.

Grouping

Flash MX 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 MX to view the tree as a single object. Then you will turn the tree into a symbol.

1. Select the Arrow tool.

2. Use the Arrow tool to create a rectangle around the tree. This selects the tree.

3. Choose Modify > Group from the menu to make the ttreetop and the tree trunk a single object.

4. Choose Insert > Convert to Symbol from the menu. The Symbol Properties box will open.

5. Type Tree in the Name field.

6. Select Graphic as the Behavior type.

7. Click on OK. The tree should appear in the Library.

8. Press the Delete key to remove the tree from the Stage.

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 > Grid > Snap to Grid from the menu.

2. Select the Oval tool.

3. Click on the Stroke color box and select gray as the stroke color.

4. Click on the Fill color box and select gray as the fill color.

5. Click in the upper corner of a square and drag diagonally to draw a circle.

Convert the Hubcap to a Symbol

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

1. Select the Arrow tool.

2. Double-click on the circle.

3. Choose Insert > Convert to Symbol from the menu. The Symbol Properties dialog box will open.

4. Type Cap in the Name ffield.

5. Select Graphic as the Behavior type.

6. Click on OK.

7. Press the Delete key to remove the cap from the Stage.

Draw the Tires

Draw two tires. Look at the in the graphic below and place the tires on the grid exactly as shown.

1. Select the Oval tool.

2. Click on the Stroke color box and select black as the stroke color.

3. Click on the Fill color box and select black as the fill color.

4. 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. Select the Line 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. Select Solid from the drop-down menu.

4. Type 3 in the Vertical field to set the line thickness.

5. In the Modifier panel, click on the Pencil Mode icon. Select Straighten. This will help you draw straight lines.

6. Draw the chassis as shown in this graphic.

Fill the Car with the Color Red

1. Select the Paint Bucket tool.

2. Click on the Fill color box and sselect red as the fill color.

3. Click on the car to apply the fill color.

Fill the Headlights with the Color White

1. Select the Paint Bucket tool.

2. Click on the Fill color box and select white as the fill color.

3. Click inside the headlight area.

Add the Hubcaps

1. Select the Arrow tool.

2. Move to the Library panel. Choose Window > Library from the menu if the Library is not open.

3. Click on the icon next to Cap and drag a copy of Cap to the center of one tire.

4. Click in the icon next to Cap again and drag another copy of Cap to the center of the other tire.

5. Use the arrow keys 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. Select the Arrow tool.

2. Create a rectangle around the car to select to car.

3. Choose Modify > Group from the menu.

Convert the Car to a Symbol

1. Choose Insert > Convert to Symbol from the menu.

The Symbol Properties dialog box will open.

2. Type Car in the Name field

3. Select Graphic as the Behavior.

4. Click on OK. Flash MX will store the graphic in the Library.

5. Press Delete to remove the car 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. Start by drawing buildings.

Draw the Buildings

1. Select the Line tool.

2. Move to the Stage and draw buildings aas shown in the illustration.

Add Color to the Buildings

Fill the first building with color:

1. Select the Paint Bucket tool.

2. Select tan as the fill color.

3. Click in the first building to fill the building with color.

Fill the next building 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 llayer 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 Building to change the layer name.

Adding New Layers

Create a new layer for the sky.

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 Sky to name the layer.

Create the Sky

1. Make sure Sky 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 LLibrary 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 Sky symbol to create the sky.

1. Select the Arrow tool.

2. Select the Rotate modifier.

3. Grab a corner handle and drag to rotate the symbol sso 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.

Changing the Order of Layers

You want to place the sky behind the buildings.

1. Click on the Sky layer on the Timeline.

2. Drag the Sky layer downward to place it below the Building layer.

Add Grass

1. Click on the Building layer name to make the Building layer the active layer.

2. Click anywhere outside the Stage to deselect the buildings.

3. Select the Rectangle tool.

4. Select Hairline from the drop-down menu in the Stroke panel. If the panel is not open, choose Windows > Panels > Stroke from the menu.

5. Select black in the Stroke color box.

6. Select bright green in the Fill color box.

7. Draw a rectangle below the buildings.

Add a Road

1. Select gray in the Fill color box.

2. Draw a second rectangle below the green rectangle.

Add a Title Area

1. Select purple as the fill color.

2. Draw the last rectangle, as shown

Add Trees

Now you will add two trees to your movie.

Create a Trees Layers

Create a new layer and name it Trees.

1. Make sure Building is the active layer. (You click on tthe layer name to make a layer active.)

2. Choose Insert > Layer from the menu. A new layer will appear at the top of the Timeline.

3. Choose Modify > Layer from the menu. The Layer Properties dialog box will open.

4. Type Trees in the Name field.

5. Click on OK.

Get a Tree

Take a tree from the Library.

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

2. Click in the icon next to Tree and drag a tree onto the Stage.

Resize the Tree

1. Select the Arrow tool.

2. Select the Scale Modifier.

3. Drag the handles until the tree is the appropriate size.

4. Place the tree on the Stage in front of a building.

5. Repeat the process and place another tree on the Stage.

Keyframes

Keyframes are used to specify changes in the animation. At the current time, each layer in your movie is only one frame long. You want your movie to last 20 frames. Inserting a key-frame at Frame 20 will cause each layer to remain on the screen until Frame 20.

Extend the Sky Layer

1. Click in Frame 20 of the Sky layer.

2. Choose Insert > Keyframe from the menu.

Extend the Buildings Layer

1. Click iin Frame 20 of the Building layer.

2. Choose Insert > Keyframe from the menu.

Extend the Trees Layer

1. Click in Frame 20 of the Trees layer.

2. Choose Insert > Keyframe from the menu.

Create a Layer Named Car

Create a new layer. Name the layer Car.

1. Make the Trees layer the active layer by clicking on the Trees layer name.

2. Choose Insert > Layer from the menu to create a new layer above the Trees layer.

3. Choose Modify > Layer from the menu.

4. Type Car in the Name field.

5. Click on OK.

Add the Car to the Stage

1. Click in the first frame of the Car layer.

2. Move to the Library panel.

3. Click on the icon next to the car and drag the car onto the stage.

4. Select the Arrow tool.

5. Click on the Scale modifier. Handles will appear around the car.

6. Drag the handles until the car is the appropriate size.

Motion Tween

Make the Car Move

1. Place the car to the left of the Stage as shown here.

2. Click in Frame 20 of the Car layer.

3. Choose Insert > Keyframe from the menu.

4. Click in Frame 1 of the

Car layer.

5. Move the car to the right of the Stage as shown here.

6. Make sure Frame 1 is still selected.

7. Choose Insert > Create Motion Tween from the menu.

8. Choose Control > Rewind from the menu to rewind the movie.

9. Choose Control > Play from the menu to play the movie. Your car should move across the Stage.

Adding Sound

To have a horn honk as the car rolls through town, you need to add sound.

Import the Sound

1. Click hhere to download the horn sound. Open the Zip file and place the shorthrn.wav in a folder.

2. Choose File > Import from the menu. Find and select shorthrn.wav and click on Open. The file shorthrm.wav will appear in the Library.

Add the Sound

1. Click on the Car layer name to make the Car layer the active layer.

2. Choose Insert > Layer from the menu to create a new layer. The new layer should appear at the top of the stack as tthe active layer.

3. Choose Modify >Layer from the menu and type Horn in the Name field to name the layer Horn.

4. Click in Frame 10 on the Horn layer.

5. Choose Insert > Keyframe from the menu to make Frame 10 aa keyframe.

6. Right-click in Frame 10 and choose Panels > Sound from the context menu. The Sound panel should appear.

7. Choose shorthrn.wav from the drop-down menu in the Sound field.

8. Choose Event from the drop-down menu in the Sync field.

Play the Movie

1. Choose Control > Test Movie from the menu to play the movie.

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 sstart 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

1. Choose Control > Test MMovie from the menu to play the movie. Your car should not move.

Adding a Button

Buttons have four states: up, over, down, and hit.

The Four Button States

Up The appearance of the button when the pointer is not over it.

Over The appearance of the button when you place the pointer over it.

Down The appearance of the button when you click on it.

Hit Defines the area that will respond to a click of the mouse.

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 > Keyframe 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 > Keyframe from the menu.

3. Click on the Fill color box and select brown.

The Hit Frame

4. Click in the Hit Frame to select it.

5. Choose Insert > Keyframe from the menu.

1. Click in the Scene 1 on the top of your Stage frame to leave Edit mode.

2. In the Properties Window, change the Button Instance name to „MyButton“

3. Choose Objects > Movie > Button from the Action menu.

4. Choose Events > onPress > Button from the Action menu.

5. Choose Movie Control > Goto from the Action menu.

6. Change the Frame Property to 2

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. I used Jazz Poster ICG.

3. Choose Text > Size &> 12 from the menu to set the font size to 12.

4. Click on the Fill color box and select gold as the color.

5. Type Start Movie on the button.

6. Click anywhere outside the Stage to close the text box.

7. Use the Arrow tool to adjust the placement of the text.

8. 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 Ghost Town.

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.