Getting Started In this tutorial I take you step-by-step through the process of creating this Flash CS4 Professional

movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to your movie. You will need Flash CS4 Professional to take this tutorial Get Started To begin, open Flash CS4 Professional. The window shown here appears:

Click Flash File (ActionScript 3.0). The window shown here appears:

Note: The window shown is the default layout and is named Essentials. If your window has a different layout, click the down-arrow to the right of Help on the Menu bar and then select Essentials. On the far right edge of the window, you see the Tools panel, which contains the tools you use to create or modify drawings and text. You select a tool by clicking it. If there are multiple tools in a single well, click the visible tool a second time and a popup menu appears. You can then choose the tool you want. Wells with multiple tools have a small triangle in the bottom-right corner. Tool modifiers for the selected tool are shown at the bottom of the Tools panel. You use modifiers to set tool options. When you hover your mouse pointer over a tool or display a tool menu, you will see that each tool has a letter associated with it. You can choose a tool by pressing the letter. For example, when you hover your mouse pointer over the Selection tool activates the Selection tool. , you see "Selection Tool (V)." Pressing "v"

The Property inspector and the Library panels appear to the left of the Tools panel. You use the Property inspector to set object and tool properties. You store objects in the Library. The Timeline appears in the bottom portion of the window. You use the Timeline to lay out the sequence of your movie. The Stage is in the center of the window. You create your movie on the Stage. Set Document Properties You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler Units. Frame Rate The speed of the movie. The number of frames per second. The size of the Stage. The color of the Stage. The unit of measure shown on the rulers. To display the rulers, choose View > Rulers from the menu.

Dimension Background Color Ruler Units

You can set these properties in the Document Properties dialog box. Set Document Properties

1. Choose Modify > Document from the menu or press Ctrl+J. The Document Properties dialog
box appears.

2. 3. 4. 5.

Type 400 px in the Width field to set the width of the Stage to 400 pixels. Type 400 px in the Height field to set the height of the Stage to 400 pixels. Click the Background Color box and then choose white as the background color. Type 12 in the Frame Rate field. 6. Choose Pixels from the drop-down menu in the Ruler Units field. 7. Click OK. Flash sets the document properties Display a Grid In the exercises that follow, you will be drawing. Displaying a grid of horizontal and vertical lines is often helpful when drawing. Display a Grid

1. Choose View > Grid > Edit Grid from the menu or press Ctrl+Alt+G. The Grid dialog box
appears.

2. Click the Color box and then choose gray to make the grid lines gray.

3. Choose Show Grid to cause the grid to appear. 4. Choose Snap to Grid to cause the edges of your drawing to align with the grid lines.

5. Set the Horizontal field 6. Set the Vertical field

to 20 px to separate horizontal lines by 20 pixels.

to 20 px to separate vertical lines by 20 pixels. 7. Set the Snap Accuracy to Normal to tell Flash how close your drawing has to be to the gridline for Flash to use the gridline to determine where to place the drawing. 8. Click OK. Flash creates a grid on the Stage. Work with the Property Inspector The Property inspector, which is located on the Properties tab, is one of the most frequently used panels in Flash. You use it to set the attributes of objects as you work. If the Property inspector is not open: Choose Window > Properties from the menu. The Property inspector appears on the right side of the window.

The Property inspector is one of many panels found in Flash. When you are not working in a panel, you can collapse it. To collapse a panel, click the Collapse icon . The Collapse icon turns into an Expand icon . To open the panel again, click the Expand icon . The Property inspector for a particular tool or object may be divided into several sections. Each section heading is preceded by a triangle. Clicking the triangle toggles the section between open and closed . When a section is open, you can set options. Work with the Rectangle Tool In the exercise that follows, you will use the Rectangle tool to draw a rectangle. Symbols are reusable objects you store in the Library. Later in this tutorial you will turn the rectangle into the button symbol that movie viewers press to start the movie. After you choose the Rectangle tool, the Rectangle tool options appear in the Property inspector. There are two color boxes. You use the color boxes to set the stroke and fill colors. The stroke color outlines your drawing. The fill color fills the center of your drawing. Stroke lines can be thin, solid, dashed, and so on. You choose the line style. You can also set the line thickness. The line thickness can be any value from 1 to 200; the larger the number, the thicker the line. The corners of a rectangle can be squared-off or rounded. For squared-off corners, set the Rectangle Corner Radius fields to 0. For rounded corners, set the field values to any value between -100 and +100. Negative numbers round inward; positive numbers round outward. The further the number is from 0, the rounder the corner. Draw a Rectangle

1. Choose the Rectangle tool

2. Activate the Property inspector (click the Properties tab).

3. Click the Stroke Color box

color.

and then click the color white to choose white as your stroke

4. Click the Fill Color box and then click the color blue to choose blue as your fill color. 5. Type 3.00 in the Stroke Height field to set the line thickness. 6. Choose Solid from the drop-down menu in the Style field to select the Stroke line style. 7. Under Rectangle Options, type 10.00 in the first Rectangle Corners Radius field
to set the corner radius. Flash sets the values for the other Rectangle Corners Radius fields to the same value. 8. Click on the Stage and drag diagonally to draw the rectangle. Make the rectangle two grid boxes high and five grid boxes wide.

Note: You can also use the Modifiers area of the Tools panel to set the stroke and fill colors Create a Symbol You are now ready to turn the drawing (the rectangle) you created into a button and store the drawing as a button in the Library. In Flash, a symbol is defined as a graphic, button, or movie clip. A graphic symbol is a static image. You can use a graphic when creating an animation. A button symbol responds when you click the mouse, roll over it, or perform some other action. A movie clip symbol is a static image or a piece of animation. Symbols and other items stored in the Library can be used more than once. Create a Button Symbol

1. Choose the Selection tool

. 2. Click and drag around the rectangle you drew to select it. 3. Choose Modify > Convert to Symbol from the menu or press F8. The Convert to Symbol dialog box appears.

4. Type Start Button in the Name field.

5. Choose Button as the type. 6. Click OK. 7. Activate the Library, which is located to the right of the Properties tab. The Library panel opens. You should see the Start Button in the Library panel. Note: If the Library tab is not available, choose Window > Library from the menu. The Library opens. If you do not see the Start Button, click and drag downward to open the viewing area.

8. Press the Delete key to delete the rectangle from the Stage. Don't worry. You have a copy of the Start Button in the Library. Create a Gradient When you click a color box, the color dialog box shown here appears.

Gradients show changes in color. They are located on the bottom row of the Color dialog box. You will use a gradient to create the movie's sky. But first, you must create the gradient you will use. Create a Gradient

1. Choose Window > Color from the menu or press Shift+F9. The Color panel appears.

2. Choose Linear in the Type field. 3. Near the bottom of the panel, double-click on the first Edit Gradient Range icon boxes appear.

. Color

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

6. Click and drag the second Fill Gradient Range icon to the three-quarter point on the Gradient Range slider to increase the amount of white in your gradient. 7. Click the Menu Options button to open the menu. 8. Click Add Swatch. 9. Close the Color panel. Flash adds the gradient you created to the color box. Use a Gradient In this exercise you will create a rectangle and fill it with the gradient you just created. You will then turn the resulting drawing into a symbol and use it later to create the sky. Use a Gradient

1. Choose the Rectangle tool

. 2. Activate the Property inspector.

3. Click the Stroke color box and then click No Color so the stroke will not have a color. 4. Click the Fill color box and then click the gradient you created. 5. Type 0 in the Rectangle Corners Radius field
. 6. Click the Stage and drag diagonally to create a rectangle.

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

1. Choose the Selection tool. 2. Click and drag to create a rectangle around the drawing to select it. 3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box appears. 4. Type Sky in the Name field. 5. Choose Graphic as the Type. 6. Click OK. 7. Activate the Library to view the graphic in the Library. 8. Press the Delete key to remove the graphic from the Stage Work with the Pencil Tool and the Paint Bucket Tool When working in Flash, you can use the Pencil tool to draw freehand shapes and the Paint Bucket tool to fill enclosed areas with color. In this exercise, you will use both of these tools to draw the tree trunk and treetop you will use later to create a tree. Create the Tree Trunk

1. Choose View > Grid > Edit Grid from the menu.
2. Deselect Snap to Grid. This will enable you to draw freely. 3. Click OK.

4. Choose the Pencil tool

. 5. Activate the Property inspector.

6. Click the Stroke color box

and then choose brown as the stroke color.

7. On the Modifier panel, if Object Drawing

is selected, deselect it. 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.

Note: While drawing, you may want to use the Eraser tool . Double-click the Eraser tool to erase everything on the Stage. Use the Eraser Shape modifier that is located in the modifier area of the

Tool panel to select the size and shape of your eraser. Make sure the Eraser Mode is set to Normal, and then wipe over the area you want to erase.

10. Choose the Paint Bucket tool.

11. Click the Fill color box

in the Property inspector and then choose brown as the fill color. 12. Click inside the trunk to fill the trunk with color.

Note: If your tree trunk does not fill with color, you probably have gaps. To close the gaps, click on the Gap Size modifier that is located in the modifier area of the Tool panel and then choose Close Large Gaps.

Create the Treetop

1. Choose the Pencil tool . 2. Click the Stroke color box

and then choose green as the stroke color. 3. Draw a treetop like the one shown here.

5. Choose the Paint Bucket tool . 6. Click the Fill color box in the Property inspector and then choose green as the fill color.
7. Click inside the treetop to fill the treetop with color.

Create the Tree

1. Choose the Selection tool. 2. Double-click the treetop fill. Double-clicking the treetop fill selects both the treetop stroke and the treetop fill. 3. Drag the treetop over the tree trunk. Group Objects Flash CS4 Professional 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 CS4 Professional to view the tree as a single object. Then you will turn the tree into a symbol. Group Objects 1. Choose the Selection tool. 2. Click and drag to create a rectangle around the tree. This selects the tree. 3. Choose Modify > Group from the menu or press Ctrl+ G to make the treetop and the tree trunk a single object. 4. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box appears. 5. Type Tree in the Name field.

6. Choose Graphic as the type. 7. Click OK. Flash places a copy of the tree in the Library. 8. Press the Delete key to remove the tree from the Stage.

Work with the Oval Tool You can use the Oval tool to draw circles and ovals. In this exercise you will create a car. You'll start by using the Oval tool to draw a hubcap. Create a Hubcap

1. Choose View > Snapping > Snap to Grid from the menu.

2. Choose the Oval tool. 3. Activate the Property inspector.

4. Click the Stroke color box and then choose gray as the stroke color. 5. Click the Fill color box and then choose gray as the fill color. 6. Click in the upper corner of a square on 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's fill. Double-clicking the circle's fill selects the fill and the stroke. 3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box appears. 4. Type Cap in the Name field. 5. Choose Graphic as the type. 6. Click OK. Flash places a copy of the hubcap in the Library. 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. Activate the Property inspector.

3. Click the Stroke color box and then choose black as the stroke color. 4. Click the Fill color box and then choose black as the fill color. 5. If selected, deselect Object Drawing mode
Work with the Line Tool You can use the Line tool to draw straight lines. In this exercise you use the Line tool to draw the car chassis. Draw the Chassis 1. Choose the Line tool. 2. Activate the Property inspector. 3. Choose Solid from the Style drop-down menu. 4. Type 3.00 in the Stroke height field to set the line thickness. 5. Draw the chassis as shown in this graphic. To draw a perfectly straight line, hold down the Shift key as you draw with the Line tool. . 6. Click and drag while holding down the Shift key to draw the two tires as shown in the graphic.

Fill the Car with the Color Red

1. Choose the Paint Bucket tool . 2. Click the Fill color box and then choose red as the fill color.
3. Click inside the lines that outline 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 then choose white as the fill color. 3. Click inside the headlight area. Add the Hubcaps

1. Choose the Selection tool

. 2. Activate the Library panel. 3. Click the icon next to Cap and drag an instance of the Cap to the center of a tire. When you drag a copy of an object from the Library onto the Stage, each copy of the object is called an instance.

4. Click the icon next to Cap again and drag an instance 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. Flash groups the car. Convert the Car to a Symbol

1. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.

2. Type Car in the Name field.

3. Choose Graphic as the type. 4. Click OK. Flash stores the graphic in the Library. 5. Press Delete to remove the car from the Stage. Import an Image You can use pre-existing graphics in your Flash movies. Simply import them. In this exercise you are going to import a driver for the car. Import an Image

1. Click here to download the driver and the horn sound zip file. 2. Open the Zip file.

3. Place the driver.wmf file and the shorthrn.wav file in a folder. You will use the shorthrn.wav file later. 4. Choose File > Import > Import to Stage from the menu. The Import dialog box appears. 5. Find and select driver.wmf and then click Open. Flash places driver.wmf on the Stage. The image is ungrouped.

6. Choose the Selection tool

. 7. Create a rectangle around the driver to select the driver. 8. Choose Modify > Group from the menu. Flash groups the driver. Convert the Driver to a Symbol

1. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears. 2. Type Driver in the Name field. 3. Choose Graphic as the type. 4. Click OK. Flash stores the graphic in the Library. Put the Driver in the Car

1. 2. 3. 4.

Drag an instance of the car from the Library onto the Stage. Place the car over the driver. Choose the Selection tool. Draw a rectangle around the car and driver to select them both. 5. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box appears. 6. Type Car and Driver in the Name field. 7. Choose Graphic as the type. 8. Click OK. Flash stores the graphic in the Library. 9. Press the Delete key to remove the car and driver from the Stage. Note: If your car and driver look like the one shown here:

1. Click the driver to select him. Do not select the car (a rectangle should not surround the car). 2. Choose Modify > Arrange > Send to Back from the menu. Flash places the driver behind the car. Draw the Buildings You have created all your graphics and have stored them as symbols. You are now ready to create your movie. Start by drawing buildings.

1. Choose the Line tool. 2. Activate the Property inspector. 3. Choose Solid from the Style drop-down menu. 4. Type 3.00 in the Stroke height field to set the line thickness. 5. Move to the Stage and draw buildings as shown in the illustration. Remember: To draw a perfectly straight line, hold down the Shift key as you draw with the Line tool. Add Color to the Buildings

Fill the first building with color:

1. Choose the Paint Bucket tool.

2. Click on the Fill color box and then choose tan as the fill color. 3. Click in the first building to fill the building with color.

Fill the next building with color: 1. Click the Fill color box and then choose blue-green as the fill color. 2. Click in the second building to fill the building with color. Fill the last building with color: 1. Click the Fill color box and then choose pink as the fill color. 2. Click in the last building to fill the building with color. Use the Paint Bucket tool to fill the doors with brown and the windows with light yellow. Understand 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. Rename a Layer When working in Flash you should give your layers relevant names. You can use the Layer Properties dialog box to rename a layer.

Rename a Layer 1. Click the layer you want to rename. In this case, you will rename Layer 1. 2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box appears. 3. Type Buildings in the Name field. 4. Click OK. Flash changes the name of the layer. Note: You can also change the layer name by double-clicking the current layer name and then typing the new layer name.

Create a New Layer You use layers to organize the artwork in your movie. You can draw on each layer without affecting the other layers. If a portion of a layer has nothing on it, you can see through to the layer below. Create a new Layer for the Sky

1. Choose Insert > Timeline > Layer from the menu to create a new layer above the active
layer. 2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box appears. 3. Type Sky in the Name field. 4. Click OK. Flash renames the layer Sky. Note: You can also create a new layer by clicking the New Layer button of the Timeline. in the bottom left corner

Create the Sky

1. Make sure Sky is the active layer. When a layer is active, it is highlighted and designated by a
pencil icon . You click on the layer name to make a layer active. .

2. Choose the Selection tool

3. Activate the Library panel. 4. Click the icon next to Sky and drag an instance of Sky onto the Stage.

Rotate an Object You can use a Modify menu option to rotate an object. You need to rotate the Sky instance 90 degrees clockwise. Rotate an Object 1. Click the Sky instance to select it. 2. Choose Modify > Transform > Rotate 90 CW from the menu. Flash rotates the Sky instance 90 degrees clockwise. Resize an Object You need the sky to fill the top part of the Stage. You must resize the Sky instance. You can use the Property inspector to resize an object. Resize an Object 1. Activate the Property inspector. 2. Choose the Selection tool. 3. Click the Sky instance to select it.

4. Click the Lock Width and Height icon in the Property inspector to deselect
Lock Width and Height option is selected proportionally, and vice versa.

it. When the

, adjusting the width changes the height

5. Set the W field to 400. That is the width of the stage. 6. Set the H field to 240. 7. Click and drag until the sky is over the buildings.

Change the Order of Layers Objects that are on higher layers appear to be in front of objects on lower layers. You can change the order of layers. You want to place the sky behind the buildings. Change the Order of Layers 1. Click the Sky layer on the Timeline. 2. Drag the Sky layer downward to place it below the Buildings layer. The sky appears behind the buildings.

Add Grass

1. 2. 3. 4. 5. 6. 7.

8.

Choose the Selection tool. Click the Buildings layer name to make the Buildings layer the active layer. Click anywhere outside the Stage to deselect the buildings. Choose the Rectangle tool. Activate the Property inspector. Click the Stroke color box and then choose no color as the stroke color. Click the Fill color box and then choose bright green as the fill color. Draw a rectangle below the buildings for the grass.

Add a Road

1. Click the Fill color box and choose bright gray as the fill color. 2. Draw a second rectangle below the green rectangle. The second rectangle is a road. Add a Title Area

1. Click the Fill color box and choose purple as the fill color. 2. Draw the last rectangle, as shown. Create a Trees Layer Now you will add two trees to your movie. Make sure Buildings is the active layer. (You click on the layer name to make a layer active.)

1. Choose Insert > Timeline > Layer from the menu. A new layer appears at the top of the
Timeline.

2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box 3. 4.
appears. Type Trees in the Name field. Click OK. Flash names the layer Trees.

Take an Object out of the Library Items stored in the Library can be used at anytime. Simply click the icon next to the Library object and drag the object into the Stage. Take an Object out of the Library 1. Activate the Library panel. 2. Click the icon next to Tree and drag a tree onto the Stage.

Work with the Free Transform Tool You can use the Free Transform tool along with the Scale modifier to change the size of an object. The Free Transform tool places a rectangle around the selected object. To change the width of the object, click and drag the side handles of the rectangle. To change the height of the object, click and drag the top or bottom handles of the rectangle. To change the size proportionately, click and drag the corner handles. Use the Free Transform Tool

1. Choose the Free Transform tool 2. Choose the Scale Modifier .

. Handles appear around the tree.

3. Drag a corner handle until the tree is the appropriate size. 4. Use the Selection tool to place the tree in front of a building. 5. Drag another tree onto the Stage and repeat the process.

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 5. Choose the 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.

3. Choose Insert > Motion Tween from the menu.

4. Click in Frame 60 of the Car layer to select it.

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

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:

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

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 Over The appearance of the button when the pointer is not over it The appearance of the button when you place the pointer over it The appearance of the button when you click it Defines the area that will respond to a click of the mouse

Down Hit

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

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.

4. Open the Filters section. 5. Click the Add filter button at the bottom on the section. 6. Click Gradient Bevel. 7. 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 playMovie event:MouseEvent :void play(); startButton addEventListener MouseEvent.CLICK Tells ActionScript to create a function. Functions are enclosed in curly braces. The name of the function. You name the function. The event object and data type. In this case, an event that involves the mouse. Indicates that the function cannot return a value. The command you want to execute. The name of the instance for which you want to detect an event. You use the Property inspector to name the instance. Command that tells ActionScript to detect (listen for) a specific event. 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. 2. 3. 4. Activate the Property inspector. Open the Filters section. Click the Add Filters button. 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.