Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
From the author of

Beginning to Animate with ActionScript

The actions discussed so far in this chapter, scripts that let you control and test virtually all aspects of the movie clip-appearance, position, draggability, collisions, depth level, and duplication-are the basic tools for animating entirely using ActionScript. While motion tweens and shape tweens are created before playback, ActionScript animation is generated during playback, so it can respond to and change according to your viewer's actions.

The following Flash example is a simple game of tag. It's a good demonstration of how ActionScript can animate objects in response to user events. You create a movie clip that follows your pointer, and if the movie clip catches up to you, you lose the game.

To create a mouse-tracking game:

  1. Create a movie-clip symbol with two keyframes. The first keyframe contains a graphic and a stop action, and the second keyframe contains a "You lose" message (Figure 7).

    Figure 7

    This cat movie clip displays a cat graphic in Keyframe 1 when it chases your pointer, and a different graphic in Keyframe 2 when you lose the game.

  2. Place an instance of the movie clip on the Stage. In the Instance panel, give it a name. In this example, it's called cat.

  3. Select the instance, and open the Actions panel.

  4. Choose Actions > onClipEvent. Select Enter frame for the event.

  5. Choose Actions > set variable.

  6. In the Variable field of the Actions panel, enter the absolute path of the movie clip, a dot, then the X Position property. The statement should look like the following:

    _root.cat._x

  7. In the Value field, enter the following:

    _root.cat._x + (_root._xmouse - _root.cat._x)/10

    Check the Expression box next to the Value field. This statement starts with the x position of the cat movie clip and adds the difference between the mouse position and the cat position. If the mouse is to the right of the cat, it adds a positive value. If the mouse is to the left of the cat, it adds a negative value. In either case, the cat gets closer to the mouse. The division by 10 makes sure the cat doesn't immediately jump on the mouse. The increment is small (one-tenth of the distance), so the cat lags behind the position of the mouse.

  1. Choose Actions > set variable. In the Variable field and Value field, enter the same information for the y coordinates as for the x coordinates (Figure 8).

    Figure 8

    The x and y positions of the cat movie-clip instance change according to the position of the pointer.

  2. Choose Actions > if.

  3. In the Condition field, enter the following:

    _root.cat.hitTest(_root._xmouse, _root._ymouse, true)

    This statement uses the hitTest method to test whether the x and y positions of the mouse intersect the cat movie clip. The shapeflag argument is set to true so that only the graphics of the cat movie clip are considered, rather than the entire bounding box (Figure 9).

    Figure 9

    The condition checks if the pointer intersects the cat movie-clip instance.

  4. Choose Actions > evaluate. Enter the target path for the cat movie clip, a dot, and the nextFrame() method.

    When the hitTest returns true, the cat movie clip goes to the next frame, displaying the "You lose" message (Figure 10).

    Figure 10

    The cat movie clip advances to the next frame in its Timeline.

  5. Chose Actions > setProperty.

  6. From the Property pull-down menu, select Name. In the Target field, enter the absolute path of the cat movie clip. Check the Expression box. In the Value field, enter a new name (Figure 11).

    The instance name of the cat movie clip changes, preventing the first set of action statements from moving the cat movie clip around any more.

    Figure 11

    These parameters for setProperty change the instance name of the cat movie clip to youLoseMessage.

  7. Test your movie (Figure 12).

    Figure 12

    The ActionScript assigned to the cat movie clip instance (top) provides all the interactivity for the mouse-chasing game. The cat movie clip chases the pointer (left) and displays a message that was hidden on frame 2 of its Timeline when it intersects with the pointer (right).

  • + Share This
  • 🔖 Save To Your Account