Controlling a one-frame movieclip with actionscript

On the previous pages, we looked at three examples of using playhead commands to control variously-structured movieclip timelines. In the first example, we used gotoAndStop commands to jump to a keyframe in a movieclip that defined its state (on or off). In the second example, we turned the two keyframes of example1 into two sequences, and used gotoAndPlay to play through each sequence (and stop at the end). The last example contained a movieclip with a continuous loop (bee tweened along a guided motion path) that was controlled by the playhead commands play and stop.

On this page, we'll look at doing the same thing with actionscript, which can provide a greater range of possibilities and control than building keyframes and sequences on a timeline. We'll start with our previous example 1 (on/off lightbulb) and look at how we can achieve the same control with actionscript.

Open lightbulb3.fla (available via link at right) and you'll see a layer with on & off controls and a lightbulb layer with a jpg in it. If you convert the jpg to a movieclip and name it lightbulb_mc, you can control its visibility with this code (in frame 1 of the main movie):

on_mc.onRelease = function() {
   lightbulb_mc._visible = true;
};

off_mc.onRelease = function() {
   lightbulb_mc._visible = false;
};

As we did previously, we're defining a function and assigning that function to the onRelease event property of on_mc, and another function to the onRelease event property of off_mc. Each function contains one statement, which assigns a value to the _visible property of lightbulb_mc. As you can see, _visible is a Boolean property, that is, it takes one of two values: true or false.

If you want a bit more refinement (lightbulb still showing but very faded), you'll need to use another property of movieclips, _alpha, which is a Number property and can take any value between 0 and 100. And to make the lit up part of the bulb disappear completely in the off state, you could add a layer above the lightbulb layer, using the paintbrush tool to draw a dark smudge over the center of the lightbulb, converting that to a movieclip named smudge_mc, and applying this code in frame 1 (instead of the code above):

on_mc.onRelease = function() {
   smudge_mc._visible = false;
   lightbulb_mc._alpha = 100;
};

off_mc.onRelease = function() {
   smudge_mc._visible = true;
   lightbulb_mc._alpha = 40;
};

Notice that neither of those statements affects the state of the lightbulb when the movie starts up; they only define what should be done when one of the controls is clicked. To show the lightbulb in its off state when the movie starts, you could add this line above the others (or below; it doesn't matter which):

lightbulb_mc._alpha = 40;

Question: What statement would you put instead of the one above to show the lightbulb in its fully on state when the movie starts? (no, it's not just lightbulb_mc._alpha = 100, since the _alpha of lightbulb_mc is already at alpha=100 by default).

The intro to classes page has more information about properties of movieclips in particular, and about properties and methods of classes in general.

Using named functions

In all the examples we've looked at so far, we've created anonymous functions and assigned them to event properties. A better coding method is to define the function first and give it a name by which it can later be accessed. Doing that to the code above would produce the following:

lightbulb_mc._alpha = 40;

function turnOn() {
   smudge_mc._visible = false;
   lightbulb_mc._alpha = 100;
}

function turnOff() {
   smudge_mc._visible = true;
   lightbulb_mc._alpha = 40;
}

on_mc.onRelease = turnOn;
off_mc.onRelease = turnOff;

Giving the function a name allows it to be assigned to multiple objects, and also gives us more control over the state of the controls, allowing us to disable one (should we ever want to) with this statement

on_mc.onRelease = null;

on_mc.onRelease = turnOn;

Coded motion/transitions using the Tween class

We've seen how to produce a transition by creating a tweened sequence on the timeline. Another way to achieve the same thing with actionscript is by using the Tween class, which allows you to program a change to any property of a movieclip, from a specific beginning value to a specific ending value, over a specific duration. You could make the lightbulb fade up when it's turned on, for example, with this code in frame 1 of the movie:

import mx.transitions.Tween;
import mx.transitions.easing.*;

// FUNCTIONS

// define what should be done when the on button is clicked
function turnOn() {
   new Tween(smudge_mc, "_alpha", Regular.easeIn, 100, 0, 1, true);
   new Tween(lightbulb_mc, "_alpha", Regular.easeIn, 40, 100, 1, true);
}

// MOVIE SETUP

// start movie with lightbulb off:
lightbulb_mc._alpha = 40;  

// define what should happen when on_mc is clicked:
on_mc.onRelease = turnOn;       

Several things are different in that code than what we've used previously. First, there are two import statements at the beginning -- those are necessary to include on any frame where you'll refer to the Tween class (which is not, for some reason, built into MX 2004 or Flash 8, but is available in both by importing). Another change is the addition of comments to explain each section of code.

The other change is the use of the Tween class. In each of the two statements in our event handler function (a function assigned to an event property), we use the tween class to produce a transition which will be applied to a specific property of a specific movieclip. A generic form of the tween class, which you can cut/paste/modify when needed, is:

// to tween over a period of time:
new Tween(movieclip, "property", easing-type, start-value, stop-value, #seconds, true);
   
// to tween over a number of frames:
new Tween(movieclip, "property", easing-type, start-value, stop-value, #frames, false);

So the tween that we applied to smudge_mc changes its alpha from 100 to 0 over 1 second, and the tween being applied to lightbulb_mc (at the same time) changes its alpha from 40 to 100 over 1 second. You can probably figure out how to copy the on_mc function code and change it to work in reverse for off_mc.

In the sample shown above, I also added an if statement to check and see if the lightbulb was turned on before it can be turned off. Because my lightbulb movieclip is only one frame, I can't check for the playhead being in a particular frame as I did before. Instead, I'll read the the _alpha property to see if it's turned off (and assume that any value of alpha below 50 means turned off):

function turnOn() {
   if (lightbulb_mc._alpha < 50) {
      new Tween(smudge_mc, "_alpha", Regular.easeIn, 100, 0, .7, true);
      new Tween(lightbulb_mc, "_alpha", Regular.easeIn, 40, 100, .7, true);
   }   
}

(I did the same check in turnOff, checking for alpha > 90 there).

A description of the various tween and easing types may be found here, as well as None.easeNone if no easing is desired. (The others are: Bounce, Back, Elastic, Regular, Strong, or None used in combination with either easeIn, easeOut, or easeInOut).

Note that while we used the Tween class to affect the _alpha property of movieclips on this page, it can also be used to affect the _xscale and _yscale properties (to grow or shrink an object) and the _x and _y properties (to move an object on the stage), along with _rotation, _width, and _height.

The Tween class is used to produce motion on all of the Easing Slider pages at the site, on the Tween Sequence page, and for the easing in the two-level menu example.

Exercise:
Set up a scene with several controllable objects that are one-frame movieclips and as many controls as you need to control those objects in various ways. Putting all of your code in frame 1, using comments and sections as in the last example (a function definition section and a movie setup section), make the controls control your objects with the use of movieclip properties and/or the Tween class.