More Event Properties

On previous pages, we looked at some examples of using movieclips (on, off, stop, go) to control other movieclips (lightbulb, bee), by creating functions to define what should happen when the mouse is clicked and released over the control movieclip, and then assigning that function to the its onRelease event property. By assigning a function to the onRelease property of a movieclip, we define what should happen when a user clicks the mouse while it's over that movieclip.

In the same way, functions can be assigned to the onRollOver and onRollOut properties of a control movieclip to define what should happen when the mouse rolls over that movieclip, or off it. And if some action should happen repeatedly (to produce motion or a transition, eg), then a function can be assigned to the onEnterFrame property of a movieclip, which causes all commands and statements in the function to be executed once per frame, at the frame rate of the movie.

onRollOver and onRollOut

Let's look first at the two event properties that determine what happens when the mouse goes over or off a movieclip. Open bubblefloat_start.fla available via free download link at right to follow along. On stage, you'll see two things: a start button (movieclip) and a bubble. Inside the start button (start_mc) is another movieclip with instance name circle_mc. In frame 1 of the main timeline are actions which make the bubble float across the stage (using the Tween class) when Start is clicked.

Now we'll put in some code to make the circle in the start button expand slightly when start is moused over, and shrink again on mouseout. We could do that by adding two functions and assigning them to the onRollOver and onRollOut properties of start_mc:

// a function (not an ideal one) to enlarge circle_mc 
function btnRollOver() {
   start_mc.circle_mc._xscale = 120;
   start_mc.circle_mc._yscale = 120;
}

// a function (not an ideal one) to set circle_mc back to its original size
function btnRollOut() {
   start_mc.circle_mc._xscale = 100;
   start_mc.circle_mc._yscale = 100;
}

// assign the functions to event properties
start_mc.onRollOver = btnRollOver;
start_mc.onRollOut = btnRollOut;

But what if we wanted to have several buttons on stage, all of which behave in the same way? With the code above, for 4 buttons, we'd need to have 8 different functions, each with the right code to address the particular button. There's a better way to write code that will go into an event handler function, and that is with the use of the keyword this. When used in a function, this refers to the object to which the function belongs. Because we're assigning the function btnRollOver to an event property of start_mc, when btnRollOver gets called in response to start_mc being moused over, this inside btnRollOver will refer to start_mc. So the function becomes:

// a function (applicable to any button holding a movieclip circle_mc) to enlarge circle_mc 
function btnRollOver() {
   this.circle_mc._xscale = 120;
   this.circle_mc._yscale = 120;
}

Now, if we were to add another button to the stage (by, say duplicating startbtn to create another movieclip symbol popbtn in the library, and changing the text on that button from Start to Pop, and dragging an instance of that button onto the stage) and name it pop_mc, we could apply the same function to pop_mc. That is, btnRollOver can be assigned to both start_mc and pop_mc, and whichever button is moused over, causing the function to be called, will determine what this refers to in the function. When start_mc is moused over and btnRollOver gets called, the function knows to target start_mc when it sees this, and when pop_mc is moused over and the function is called, it knows that it was pop_mc that activated it, so this refers to pop_mc. This is the code for both the functions and the event handler assignments:

// FUNCTIONS
// a function (applicable to any button holding a movieclip circle_mc) to enlarge circle_mc 
function btnRollOver() {
   this.circle_mc._xscale = 120;
   this.circle_mc._yscale = 120;
}

// a function to return mc to its original size
function btnRollOut() {
   this.circle_mc._xscale = 100;
   this.circle_mc._yscale = 100;
}

// MOVIE SETUP
// set up event handlers for on stage elements
start_mc.onRelease = floatBubble;

start_mc.onRollOver = btnRollOver;
start_mc.onRollOut = btnRollOut;

pop_mc.onRollOver = btnRollOver;
pop_mc.onRollOut = btnRollOut;

onEnterFrame

We've just looked at the application of _xscale and _yscale within an event handler to alter the size of a movieclip. If instead of applying an immediate change, we wanted the change to happen over time --say, to slide the button onto the stage on mouseover, as in the above example-- we can use the onEnterFrame event property of the MovieClip class (of movieclips, that is). We'll do it in exactly the same way: create a function that will be called whenever the event happens (if the event property is onEnterFrame, then the event will happen once per frame at the frame rate of the main movie), and assign it to the movieclip's event property.

Side note: we might've used the Tween class to do the same thing, but as we saw in class, making the buttons slide using unassigned Tweens can cause some unwanted side effects, especially with different opening and closing rates on the buttons, and a new Tween being created before an old one finished. By using the onEnterFrame property of each individual button instead, the activity on each button remains completely independent from the activity happening on other buttons, and there are no previous tweens to interfere with -- there is just one thing being done every frame, and it is controlled by whatever movieclip the onEnterFrame is attached to. One drawback though is that it's harder to apply easing with onEnterFrame functions.

To set things up for this sample, drag the Start and Pop movieclips so they're hanging off the right side of the stage (at x=472 in the example). Next we'll add a function to move "this" (whatever object the function is attached to) left 5 pixels, and assign that function to the onEnterFrame property of each button. But that assignment will be done inside the btnRollOver function because that's the only time we want the button to move -- when it's moused over (ie, when btnRollOver is called):

// a function to move a movieclip 5 pixels to the left
function moveLeft() {
   this._x = this._x - 5;
}

// a function to enlarge circle_mc and call moveLeft once per frame
function btnRollOver() {
   this.circle_mc._xscale = 120;
   this.circle_mc._yscale = 120;
   this.onEnterFrame = moveLeft;
}

You'll notice if you're actually following along and doing this that that code makes Start and Pop start moving left when they are moused over, and they just keep moving left forever, til they're off the stage and beyond... So, we need to add some code so that they only move as far left as we want (to x=400) and then stop. We'll use a shortcut way of writing the 5 pixel decrement too:

// function to move assigned movieclip left 5 pixels if the movieclip (its registration 
// point, that is) is farther right than 400 pixels from the left edge of its container
// (the stage, in this case)
// (so easy to say in Actionscript and so convoluted in English!)
function moveLeft() {
   if (this._x > 400) {
      this._x -= 5;
   }
}

Now the buttons slide to the left and stop once they're in place. To get them to slide back on mouseout and stay at the right edge:

function moveRight() {
   if (this._x < 472) {
      this._x += 5;
   }
}

(with the corresponding assignment to the onRollOut properties of start_mc and pop_mc). The sample above also has a restore button, and functions have been created and assigned to the onRelease properties of pop_mc and restore_mc to make them pop the bubble and restore it, respectively. If you look at the structure of bubble, you can see that those actions can be done with gotoAndPlay("explode") and gotoAndStop(1), respectively. Open bubblefloat_final.fla to see all the code in place.

Exercise:
Create a movie with a couple controls that move or rotate or otherwise change over time on mouseover and mouseout, and something for them to control. Put the right actionscript in frame 1 to activate the mouseovers, mouseouts, and mouse clicks.

For more examples of rollover and rollout functions, see the examples at the bottom of the event handlers page.