Beep Beep Car Tutorial
Part 8b

 

CS6

Controlling the Action Script 3.0

 

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. Click the Code Snippet Icon to open the Code Snippets dialog box


  2. Open the Timeline Navigation folder, And select 'Stop at this Frame'


    3. The Actions script window will open the following as shown in blue should appear.


 

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

 

 

Adding a the Start 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. Choose Insert >Timeline > Layer from the menu to create a new layer above the active layer.
  2. Rename this layer to Button

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 in a postion similar to that shown above.

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

  1. Click in the Hit Frame to select it.
  2. Choose Insert > Keyframe from the menu.

Return to the Scene

1. Choose Edit > Edit Document from the menu to change back to the Scene mode.

Test the Movie

  1. Choose Control > Test Movie from the menu. The Test Movie window will open.
  2. Move your mouse over the 'Button ' at the bottom of the scene, it should change its colour to green
  3. Click your mouse on the 'Button" it should change its colour to brown.

 

Adding the action to play the movie

  1. Be sure the 'Start Button' symbol is selected on the Stage. (click once on the start button)

  2. Click the Code Snippet Icon to open the Code Snippets dialog box


  3. Open the Timeline Navigation folder, And select 'Click to Go to Frame and Play'

4. The Actions script window will open the following, as shown in blue, should appear.

5. Notice the instruction indicate to 'Replace the number 5 with the number you would like the playhead to move to.....

6. We wish to move the playhead to frame 2, so replace the 5 with a 2

 

 

The meaning of the command line {gotoAndPlay(2);}

gotoAndPlay(2) - goto frame 2 of the scene and play it
Note: It is frame 2 because frame 1 has the stop action

 

Test the Movie

  1. Choose Control > Test Movie > Test from the menu. The Test Movie window will open.
  2. Click on the Start Button to make the car move.
  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 Start Button

  1. Double click the start button to edit the symbol. The top left corner of the screen will change and the timeline will change.


  2. You need to add a NEW layer to the Start Button, click the New Layer icon in the timeline.


    3. Change the name of this new layer to text


  3. Click on the Text tool to select it.
  4. Select a font from the Properties panel. The sample I used is Arial Black.
  5. Set the font size to approx. 18.
  6. Click on the Fill color box and select a suitable color. I used a gold colour
  7. Type Start on the button.
  8. Click anywhere outside the Stage to close the text box.
  9. Use the Selection tool to adjust the placement of the text.
  10. Click anywhere outside the Stage to deselect the text box.

  11. Add keyframes to the Over, Down



  12. Exit the editing of thes ymbol by clicking on Scene 1 in the top left corner of the screen.

 

 

 

 

Add a Title at the bottom

  1. Add a new layer for the title text
  2. Select the Text tool.
  3. Set the Font Size to approx 28,
  4. Select an appropriate fill colour, and font family
  5. Click on the lower left corner of the Stage.
  6. Type your name Beep Beep Car .
  7. Click anywhere outside the Stage.

Test the Movie

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