Flash Site

Looking for a Flash site? Visit us. Then take our Flash tutorial. Our Flash tutorial covers creating graphics, working with layers, and adding motion, sound, and text to your Flash CS4 movie.

Table of Contents

Work with Frames

Each layer of a Flash movie is divided into frames. Frame numbers appear along the top of the Timeline. You can create motion by changing the placement of an object in successive frames.

Each layer in your movie is one frame long. Inserting a frame at Frame 60 will cause each layer to remain on the screen until Frame 60.

Extend the Sky Layer

  1. Click in Frame 60 of the Sky layer.
  2. Choose Insert > Timeline > Frame from the menu.

Extend the Buildings Layer

  1. Click in Frame 60 of the Buildings layer.
  2. Choose Insert > Timeline > Frame from the menu.

Extend the Trees Layer

  1. Click in Frame 60 of the Trees layer.
  2. Choose Insert > Timeline > Frame from the menu.

Create a Motion Tween

In Flash, you create motion by changing the position of an object in successive frames. You can use a motion tween to create motion. With a motion tween, you tell Flash the starting position and the ending position of an object. Flash interpolates all the positions in between. In this exercise, you are going to use a tween to move the car across the Stage.

You are ready to add the car to the Stage. Create a new layer. Name the layer Car.

Create a Layer Named Car

  1. Make the Trees layer the active layer by clicking on the Trees layer name.
  2. Choose Insert > Timeline > Layer from the menu to create a new layer above the Trees layer.
  3. Choose Modify > Timeline > Layer Properties from the menu to open the Layer Properties dialog box.
  4. Type Car in the Name field.
  5. Click OK. Flash names the new layer Car.

Add the Car and Driver to the Stage

  1. Click in the first frame of the Car layer.
  2. Activate the Library panel.
  3. Click the icon next to Car and Driver and drag a copy of Car and Driver onto the Stage.
  4. Choose the Free Transform tool Free Transform Tool.
  5. Choose the Scale modifier Scale Modifier.
  6. Click and drag a corner handle until the car is the appropriate size. Corner handles resize the selected object proportionally.
Create a Tween
  1. Choose the Selection tool.
  2. Click and drag the car to the right side of the Stage as shown here.

Motion Tween

 

  1. Choose Insert > Motion Tween from the menu.
  2. Click in Frame 60 of the Car layer to select it.
  3. Hold down the Shift key and drag the car to the other side of the Stage. Flash creates a motion tween. Holding down the Shift key ensures that the car moves in a straight line.

Motion Tween

  1. Choose Control > Play from the menu or press Enter to play the movie. The car moves across the Stage.

Add Sound

To have a horn honk as the car rolls through town, you need to add the horn sound. You should have downloaded a Zip file that contains the horn sound earlier in this tutorial. If you didn't, click here to download it now. Open the Zip file and place the contents in a folder.

Import the Sound

  1. Choose File > Import > Import to Library from the menu.
  2. Find and select shorthrn.wav and then click Open. The file shorthrm.wav appears in the Library.

Create and Name a New Layer

  1. Click the Car layer name to make the Car layer the active layer.
  2. Choose Insert > Timeline> Layer from the menu to create a new layer. The new layer appears above the Car layer.
  3. Choose Modify > Timeline > Layer Properties from the menu and type Horn in the Name field.
  4. Click OK. Flash names the layer Horn.

Add Sound

  1. Click in Frame 30 on the Horn layer.
  2. Choose Insert > Timeline > Keyframe from the menu to make Frame 30 a keyframe. You use a keyframe when a new symbol or instance appears on the Timeline.
  3. Activate the Library.
  4. Drag shorthrn.wav from the Library onto the Stage. You will not be able to see it on the Stage.
  5. Click in Frame 30.
  6. Activate the Property inspector.
  7. Choose Event from the drop-down menu in the Sync field. This causes your sound to begin playing in Frame 30 and continue playing until it is finished.
  8. Choose Control > Play from the menu to play the movie. You hear the horn.

Add ActionScript

If you published your movie now, the car would start moving as soon as the viewer opened the Web page or started Flash player. You want the viewer to click on a button to make the car move across the Stage.

ActionScript is a programming language you can use to send instructions to a Flash movie. Each instruction is known as a statement. Statements can include commands. A statement must follow a particular syntax or set of rules. You use the stop() command to stop a movie.

Explanation of stop();
stop
The command you are issuing. It stops the Timeline.
()
Parentheses indicate that you are instructing the command to perform an action. They sometimes enclose parameters. Parameters are additional information needed to perform the command. Parameters are separated by commas.
;
Marks the end of a statement.

You can use the Actions panel to add ActionScript to a movie. You open the Actions panel by choosing Window > Actions from the menu or by pressing F9. You can use the Actions panel by using either the Script pane or Script Assist. In the exercise that follows, use the Script pane. You toggle between Script Assist and and the Script pane by clicking the Script Assist button. When you are using Script Assist, the Actions panel looks like this:

ScriptAssist

When you are using the Script pane, the Actions panel looks like this:

Script Pane

When using ActionScript 3.0, it is a good practice to put all of your ActionScript on the top layer, by itself, in frame1, to make it easy to find. Flash places a small a in the frame.

Add a New Layer

  1. Click the Horn layer to make it the active layer.
  2. Choose Insert > Timeline > Layer from the menu to add a new layer.
  3. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box appears.
  4. Type Actions in the Name field.
  5. Click OK. Flash names the layer Actions.

Add ActionScript

  1. Click in Frame 1 on the Actions layer.
  2. Choose Window > Actions from the menu or press F9 to open the Actions panel.
  3. If you are not in the Script pane, click ScriptAssist.
  4. Type stop();
  5. Close the Actions panel. Flash saves the ActionScript you wrote.

Test the Movie

Thus far, you have been selecting Control > Play from the menu to view your movie. This option starts in Frame 1 and moves sequentially through each frame. However, it does not read your ActionScript. To test your movie including the ActionScript, you must use the Test Movie option on the Control menu.

Test the Movie

  1. Choose Control > Test Movie from the menu to test the movie. Your car should not move.
  2. Click the Close button to return to Flash.

Add a Button

You need to add a button to your movie. When the viewer presses the button, the movie starts. Buttons have four states: up, over, down, and hit and have their own Timelines. The Timelines have four frames: Up, Over, Down, and Hit. You can set each frame's properties.

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 it

Hit

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

You want to add a button that reads "Start Movie" and is blue in the up state, green in the over state, gold in the down state and responds when you click it.

Create a New Layer

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

Take the Button from the Library

  1. Activate the Library.
  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 or press Ctrl+E to change to the symbol-editing mode. You can now see the button's Timeline.
  2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box appears.
  3. Type State in the Name field.
  4. Click OK. Flash changes the name of the layer to State.

Add a Text Layer

  1. Choose Insert > Timeline > Layer from the menu to create a new layer.
  2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box appears.
  3. Type Text in the Name Field.
  4. Click OK. Flash changes the name of the layer to Text.

Work with the Text Tool

In Flash, you use the Text tool to add text.

Add Text to the Button

  1. Select the Text tool Text Tool.
  2. Choose Text > Font from the menu and select a font. I used Arial Black.
  3. Choose Text > Size > 12 from the menu to set the font size to 12.
  4. Activate the Property inspector.
  5. Click the Color box and then select white as the color.
  6. Click on the button.
  7. Type Start Movie.
  8. Click anywhere outside the button.
  9. Use the Selection tool and the arrows on the keyboard to adjust the placement of the text.
  10. Click in the Hit field on the Text layer.
  11. Choose Insert > TimeLine > Frame from the menu. Flash extends the number of frames in which the text appears.
  12. Click the dot under the Lock icon Lock on the Text layer. This locks the layer and prevents you from inadvertantly making a change to it. If later you want to make a change, click the lock that appears when you click the dot to unlock the layer.

The Over Frame

  1. Choose the Selection tool.
  2. Click in the Over frame to select it.
  3. Choose Insert > Timeline > Keyframe from the menu. The Over frame becomes a keyframe.
  4. Click outside the button to deselect it.
  5. Click the fill color to select it.
  6. Activate the Property inspector.
  7. Click the Fill color box and then select green to change the fill color to green.

The Down Frame

  1. Click in the Down frame to select it.
  2. Choose Insert > Timeline > Keyframe from the menu.
  3. Click outside the button to deselect it.
  4. Click the fill color to select it.
  5. Click the Fill color box and then select gold to change the fill color to gold.

The Hit Frame

  1. Click in the Hit frame to select it.
  2. Choose Insert > Timeline > Keyframe from the menu.
  3. Choose Edit > Edit Document from the menu. You have created a button.

Add a Filter

You can use filters to apply visuals effects to buttons, movie clips, and text. To make your button look more like a button, add a Gradient Bevel effect.

  1. Choose the Selection tool.
  2. Click the button to select it.
  3. Activate the Property inspector.

Apply Filters

  1. Open the Filters section.
  2. Click the Add filter button Add Filter Buutton at the bottom on the section.
  3. Click Gradient Bevel.
  4. Set the Distance field to -2. Flash adds a gradient bevel effect to your button.

Test the Button

By default, Flash disables buttons. This give you the ability to move them around the Stage and manipulate them in other ways. If you want to see the changes in your button's states, you must enable it.

  1. Use the Selection tool to place the button where you want it.
  2. Choose Control > Enable Simple Buttons from the menu or press Ctrl+Alt+B.
  3. Place your pointer over the button and then click it. The button is blue. When you place your pointer over the button, it turns green. When you click it, it turns gold.
  4. Choose Control > Enable Simple Buttons from the menu again to disable the button.
Add ActionScript

You want your movie to start when the viewer clicks the button. You must add the following ActionScript:

function playMovie(event:MouseEvent):void
{
play();
}

startButton.addEventListener(MouseEvent.CLICK, playMovie);

Whenever you drag an object from the Library onto the Stage, you create an instance of the object. You can use the Property inspector to name an instance. This allows you to discern one instance from another instance. A function is a block of code that performs a specific task. This function and line of code instruct Flash to play the movie when the viewer clicks the button with the instance name startButton.

When you want Flash to respond to an action such as a mouse click, you must use a function and the addEventListener() command. In this example, the function, which is named playMovie, executes when the viewer clicks the startButton instance.

Code Explanation
function
Tells ActionScript to create a function. Functions are enclosed in curly braces.
playMovie
The name of the function. You name the function.
event:MouseEvent
The event object and data type. In this case, an event that involves the mouse.
:void
Indicates that the function cannot return a value.
play();
The command you want to execute.
startButton
The name of the instance for which you want to detect an event. You use the Property inspector to name the instance.
addEventListener
Command that tells ActionScript to detect (listen for) a specific event.
MouseEvent.CLICK
The event you want to detect. In this example, a mouse click on the startButton.
playMovie
The function you want to execute when the viewer clicks the startButton. In this example, the function you created and named playMovie.

Add ActionScript

  1. Activate the Property inspector.
  2. Choose the Selection tool.
  3. Click the button to select it.
  4. Type startButton in the instance Name field. Flash names the instance.
  5. Click in frame 1 on the Actions panel.
  6. Choose Window > Actions from the menu. The Actions panel appears.
  7. Type the code under the stop(); statement.
  8. Close the Actions panel. Flash saves your code.

Test the Movie

  1. Choose Control > Test Movie from the menu. The Test Movie window appears.
  2. Click the Start Button. The car rolls across the screen.
  3. Close the window.

Finish Up

You can finish up your movie by adding a title.

Add a Layer

  1. Make the Button layer the active layer by clicking on the Button layer name.
  2. Choose Insert > Timeline > Layer from the menu to create a new layer above the Button layer.
  3. Choose Modify > Timeline > Layer Properties from the menu to open the Layer Properties dialog box.
  4. Type Title in the Name field.
  5. Click OK. Flash names the new layer Title.

Add a Title

  1. Choose the Text tool.
  2. Activate the Property inspector.
  3. Click the Color box and select white.
  4. Choose Text > Size > 24 from the menu.
  5. Click the lower-left corner of the Stage.
  6. Type My First Movie.
  7. Click anywhere outside the Stage.
  8. Use the Selection tool and the arrow keys to place the text where you want it.

Add a Filter

  1. Activate the Property inspector.
  2. Open the Filters section.
  3. Click the Add Filters button.
  4. Click Drop Shadow. Flash adds a drop shadow to the text.

Test the Movie

  1. Choose Control > Test Movie from the menu. The Test Movie window appears.
  2. Click the Start Movie button. The movie plays.

Table of Contents

Legal Dot Privacy