Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Project 6: Creating Interactive Animation

In this chapter's project, you build a basic game in which users can match various shapes by dragging them into their respective holes. Even though building the game is fairly complex, building it demonstrates a handful of very useful techniques. The techniques you learn include creating draggable movie clips, a custom mouse pointer, timers, and even collision detection (detection when two instances on the Stage intersect). To view the final project, go to [www.FLAnimation.com/chapters/06].

Exercise 1: Setting up the project

In this exercise, you create the shapes using Flash's drawing tools. These shapes are the movie clips that you drag around the Stage in the final project. You also add ActionScript to retrieve the X and Y coordinates of each of the shapes that you create.

1. Create a new FLA file. Choose File > Save As and save the document on your hard drive as shapegame.fla.

2. Rename Layer 1 on the Timeline as shapes. Draw three shapes on the Stage: a circle, a square, and a triangle by using the Oval (circle), Rectangle (square), and PolyStar tools from the Tools panel (Figure 6.9).

The easiest way to create a triangle (or any multisided nonrectangular shape) is to click the Rectangle tool in the Tools panel and select the PolyStar tool from the pop-up menu. Click the Options button in the Property inspector to open the Tool Settings dialog box, and specify how many sides you want the polygon to have.

Press the Shift key while you drag each shape tool to create a perfect circle and a square with equal sides.

3. Optionally, add some depth to each shape by using the drawing tools. You might use the Line or Brush tools and the Paint Bucket to draw and fill each shape. Or, you can duplicate the existing shape and paste the shape on a lower layer and give the new shape a darker color than the original. When you finish, your shapes might look similar to the following figure.

4. Select one of the shapes on the Stage using the Selection or Lasso tool. Click and drag around one shape using either tool to select all of the drawing, as shown in the following figure.

If you want to use some existing shapes for this project, open the following FLA file from the CD-ROM: 06/start/shapes.fla. This file also contains a background that you might want to add to your file (on a new layer at the bottom of the Timeline). If you add this background or your own, create a new layer on the Timeline, and click and drag it so it is the bottommost layer. Lock it after you have added the graphics. You can copy and paste any graphics from this file, or rename the file itself and save it on your hard drive. There is a symbol in the Library that you will use toward the end of this chapter for a mouse pointer graphic.

After making the selection, press F8 to convert the drawing into a symbol. Name the shape and select Movie Clip as its behavior. Repeat this step for all three shapes.

5. Select each movie clip instance on the Stage, and give them instance names (select the movie clip and assign an Instance name in the Property inspector). Name your symbols as follows:

circle movie clip: circle_mc

square movie clip: square_mc

triangle movie clip: triangle_mc

6. Click Insert Layer on the Timeline to create a new layer, and rename the layer actions. Select frame 1 of the actions layer, and type the following code into the Script pane:

var circleInitX:Number = circle_mc._x;
var circleInitY:Number = circle_mc._y;
var squareInitX:Number = square_mc._x;
var squareInitY:Number = square_mc._y;
var triangleInitX:Number = triangle_mc._x;
var triangleInitY:Number = triangle_mc._y;

This code declares a bunch of variables. It is responsible for saving the current X and Y coordinates for the three shapes into variables (such as circleInitX). Flash stores the current X coordinate of circle_mc into a numeric variable named circleInitX. In an upcoming exercise, you use these values to reset the position of the shapes after they've been moved around the Stage.

7. Save (File > Save) the changes you made to shapegame.fla.

You have used the _mc suffix several times already in this chapter: but why? Using suffixes helps you remember what type of instance each item on the Stage is when you read, edit, or debug your ActionScript. This also makes sure that you can take advantage of code hinting and completion (discussed previously in this chapter).

So far, you have created three drawings and converted each of them into a movie clip symbol. Then, you wrote ActionScript that takes the current coordinates of those instances and saves them in a variable. In the following exercises, you use new objects in the ActionScript language to add elements of interactivity to the project.