apply techniques : 

event handling, variables, if statements, movieclips

This section is designed to apply some of the techniques we've been learning in the last few weeks:

• event handling - setting the code up to execute a set of instructions when an event occurs
• variables - using named storage locations to keep track of information
• if statement - a programming structure that enables the code to make decisions
• movieclips - a system for encapsulating graphics and associated timeline in an object

We'll build up a simple application where a button turns the rotation of a movieclip on or off.

make something happen every frame

The framerate of a Flash (or Director) application provides a very convenient timing mechanism to trigger repeated actions such as animating by code. It is also useful for checking the value of a button, sensor, mouse position, or implementing any system of tracking the current state of things.

To make a movieclip animate every frame, we apply a standard event handler to the movieclip with the onClipEvent method. In this example, we rotate the movieclip by 10 degrees every frame.

enterframe.fla

Code on the movieclip: every frame, rotate the clip by 10 degrees

onClipEvent(enterFrame) {
    this._rotation += 10;
}

a system for communicating in code - one part of the code signals another part of the code

Variables can be used in code as a way for one part of the code to communicate with another part of the code. These signaling variables are often called Flags, because they are used like the flags on ships are used to communicate information to other ships (n.b. in both shipping and programming a more formal name for this signaling is the semaphore).

For example, a button can set a flag variable to be true or false. Separately, a movieclip can check the value of this flag variable every frame (using the above enterframe event). If the movieclip finds the flag to be set to "true" using an if statement, the movie clip can rotate by 10 degrees, otherwise it does nothing.

enterframe_flag

Code on the first frame of the timeline: create and initialize the flag variable

var turningFlag = false;

Code on the button: toggle the flag value between true and false

on (release) {
    if (_root.turningFlag == false) {
        _root.turningFlag = true;
    } else {
        _root.turningFlag = false;
    }
}

Code on the square movieclip: check the value of the flag, rotate if it is true

onClipEvent(enterFrame) {
    if (_root.turningFlag == true) {
        this._rotation +=10;
    }
}

using parts of the timeline in a movieclip for different states

Because movieclips enable you to encapsulate a set of graphics and an associate timeline into a single object, it's often convenient to use this capability for maintaining different states of a graphic object in different frames of its own timeline.

For example, you might put all of the associated graphics for a spaceship in one movieclip. One frame could have the normal ship graphic, another frame could have the ship plus the flame coming out of the back, and another frame could have the ship exploded. Depending on if state of the ship is stopped, moving, or exploding, the code will switch the frame of the movie clip to be displayed.

In our current example, we are using the timeline of the button (actually a movieclip) to place one frame that displays "off", and another frame to display "on" for the respective states of the button.

enterframe_flag_state.fla

The code for the first frame of the main movie and the square movieclip are the same as above.

Code for the button: toggle the flag, and change the button's visual state by switching to different frames

on (release) {
    if (_root.turningFlag == false) {
        _root.turningFlag = true;
        this.gotoAndStop("on");
    } else {
        _root.turningFlag = false;
        this.gotoAndStop("off");
    }
}

Timeline of the button: the "off" labeled frame contains the off graphics/text, the "on" frame contains the on graphics/text.

Code for frame 1: stop the movie so we don't cycle back and forth between the two frames

stop();

The simple but powerful techniques described above can be used in many different applications. A common one is for the manipulation of interface elements. In the below example, news clips are displayed in compact headline format until clicked on. They then enlarge to show the full article. If clicked again, they shrink down to the just the headline.

There are two basic states to the movieclips, the condensed one and the expanded one, which are represented in two corresponding frames in the movieclip. But an additional intermediate stated is created in this application to display the transition between one state and another. This transition state is accomplished using the enterframe event to animate the expansion or contraction of the movieclip.

interface_scale.fla

Code on the movieclip event load: initialize the scale, size flag, and scale transition flag

onClipEvent(load) {
    this._xscale = 20; // initial x scale
    this._yscale = 20; // initial y scale
    this.size = 20; // the current state
    this.clicked = false; // to indicate if the user clicked
}

Code on the movieclip event enterframe: check to see if the user clicked, if so, scale up/down by 20% every frame using "+= 20" until we reach the maximum or minimum scale (check with an if statement), then shut off the scaling by reseting the clicked flag. Switch the timeline frame as appropriate for the new state using gotoAndStop. Toggle the size flag appropriately.

onClipEvent(enterFrame) {
    if (this.clicked) { // user clicked, so start scale
        if (this.size == 20) { // scale bigger
            this.gotoAndStop("fulltext"); // change to the full text
            this._xscale += 20;
            this._yscale += 20;
            if (this._xscale >= 100) { // we're at full size, stop scaling
                this.clicked = false;
                this.size = 100;
            }
        } else if (this.size == 100) { // scale smaller
            this._xscale -= 20;
            this._yscale -= 20;
            if (this._xscale <= 20) { // we're at minimum size, stop scaling
                this.clicked = false;
                this.size = 20;
                this.gotoAndStop("headline"); // change to the headline
            }
        }
    }
}

Code on the movieclip event release: when the user clicks, set the clicked flag to true so the scaling will start.

on (release) {
    this.clicked = true;
}

Create an application where a button toggles the random motion of an object on the screen.

• The button (can be a movieclip) should toggle a variable flag to control the motion
• The moving object should move a random amount relative to its current position, only if the button is on

Additional challenges:

• Add another button to switch the range of randomness from +/- 10 pixels to +/- 20 pixels
• Add another button to cause the movieclip to change scale randomly. This should run independently of the random motion.

all materials on this web site © copyright 2003, Philip van Allen