Lab: Basic Scripted Animation

This week you'll have your first encounter with ActionScript. You'll learn how to write and deploy instructions for simple, linear animation within geometric constraints: the classic "ball in a box" assignment. This activity also introduces the principles of lab work in this course: given a set of concepts and/or code examples, you will work on your own to meet a design challenge. Then we'll exchange notes as a group.

Challenge

Script a Movie Clip so that it moves constantly while the movie is loaded, following a straight diagonal trajectory across the screen. When the Movie Clip encounters any limit of the screen (left, right, top, or bottom) it must reverse direction away from that limit and head back toward the center.

What You Need to Know

1. How to access the scripting window for a Movie Clip: First, single-click on the Movie Clip in the working space. Do NOT double-click! At the bottom of the screen you should see a panel marked "Properties." On the right side of this panel is a vertical row of small buttons. The second from the top in the gray space is a blue circle with an arrow pointing up and right. Click this little button to access the scripting window for the Movie Clip.

2. Handlers: Scripts ordinarily occur within event handlers. You'll need two of these. They are:

    onClipEvent(load){

    }

    onClipEvent(enterFrame){

    }

Type them into your scripting window exactly as you see above. Statements written between the { and } of the first handler will be executed once, when the main movie is loaded into the Flash player. Statements written between the { and } of the second handler will be executed 12 times per second as long as the main movie is loaded.

3. Generating random values: The following statement assigns the variable X a random value between 0 and 9:

    X = Math.floor(Math.random()*10);

Note the double sets of parentheses; be sure to type them accurately. By substituting some other variable or property for X, you can assign random values to Movie Clip properties. By changing the number 10 to some other integer, you can choose values from a different range. By changing the word "floor" to "ceil" (for ceiling), you can make the random range from 1 to the maximum value, or in the example above, from 1 to 10.

4. Movie Clip properties: Every Movie Clip, including the clip called "Ball" in your starter movie, has certain default properties. You need to know about two of them, _x and _y. note the underscore characters in the name of each property. The property _x contains the current horizontal position of the Movie Clip. The property _y contains the vertical position.

You may both read and set (or re-assign) the values of these properties. For instance, to set the horizontal position of the Ball movie to a spot 10 pixels from the left of the screen, issue the command:

    this._x = 10;

The command above will work only if it is placed in a handler within the script window of the "Ball" Movie Clip. That's because it uses "this," a special designation that refers to the Movie Clip to which the statement is assigned. (Later on we'll learn how to change the properties of Movie Clips from scripts located outside those clips.)

5. Testing property values: You can also evaluate the value of _x and _y by using an IF statement. For instance:

    if(this._x > 400) this._x=0;

The statement above returns the Movie Clip to the left screen margin (x=0) whenever it passes the right screen margin (x=400). You'll also need to know about the compound form of the IF statement:

    if(this._x > 400){
        this._x = 0;
        this._alpha = 30;
    }

The statement above does two things when the clip hits the left margin: it places the clip on the right margin and sets its opacity (_alpha) to 30 percent.

6. If your Movie Clip is moving at something more than 1 pixel per execution, it could exceed your limit case. That's why we've used the inequality operator (> or "greater than") above.

7. Controlling line slope: The slope or angle of a line is determined by the amount of change in each axis of movement, X (horizontal) and Y (vertical). By setting an amount of change for each axis individually, you can control the slope of the line along which your Movie Clip travels.

8. Testing your movie: Press CTRL-Enter. Always save before testing.

Suggested Strategy

1. Make the ball appear at a random X and Y position when the main movie is loaded. Hint: use the onClipEvent(load) handler.

2. Make the ball move either horizontally or vertically offscreen. Make it move diagonally offscreen. Hint: use the onClipEvent(enterFrame) handler.

3. Make the ball move diagonally until it hits one of the screen margins, then make it stop.

4. Make the ball reverse its motion in the appropriate axis when it reaches or passes a screen margin.

Optional Extensions

5. Select the ball's rebound angle and speed randomly when it hits a margin.

6. Using the _alpha property, make the ball's opacity snap to 100% when it reaches a screen margin, then gradually dim out to 30% as it rebounds.