Using Event Handlers & Easing to Make a Photo Slider

Use Event Handlers & Easing to Make a Photo Slider

On the event handlers page, we looked at various ways to make a control movieclip respond to mouseovers and mouse rollouts. In the bee game, we used the onRelease event of the controls to make movieclips start and stop, using the play and stop commands. Here we'll take a look at another use of the onRelease function to make a photo in a slider movieclip ease into place when the control is clicked. You can get oahumap_start.fla if you want to follow along -- it has all the jpgs and gifs used in the movie in the library and some objects like the mask and photo slider set up on stage.

Keeping the actionscript separate from the fla

When your code gets to be over about 30 lines or so, as it will be in this example, it becomes easier to keep the code in one file and the fla in another. So the first step here is to create a new Actionscript file (File, New, Actionscript file), where you'll type all your code. Save that file as oahumap_slider.as. Back in the fla, open the Actions panel, click frame 1, and type this into the Actions panel:

#include "oahumap_slider.as"

Now whenever you publish the fla, all of the code in oahumap_slider.as will be included in it, as though you had typed it where you put the #include. Notice that you cannot change the as file and cause any changes to happen at runtime; it is only for changing code that will be compiled into the final swf.

Set up the rollover/out events

To begin with, change the registration point of one of the dots on stage to a center registration point, as described here. Remember that changing one of them will cause them all to change. After making that change, go back to scene 1 (main movie) and reposition the dots to their original position. Give each one an instance name (clockwise from top): p0, p1, p2, p3, p4. Add a layer in the movie and call it actions. Put this code into the function definition section of oahumap_slider.as (it will have all the same code sections we use in any Flash movie) to make the p0 (Sunset Beach) control respond to the mouse by growing and shrinking while the mouse is over it and returning to normal size when moved off:

// define pulsating rollover function for dots: nake them grow to 130% of original size, 
// then shrink back down to 100%, then grow to 130%, etc (forever til rollout)
function makePulse() {

   // variable only used by this function, so declare inside function
   var growing:Boolean = true;

   // in every frame (at the frame rate of the movie), check to see if the clip is growing   
   this.onEnterFrame = function() {
   
      if (growing) {
	  
         // if it is, check to see if it has reached 130% of its original size
         if (this._xscale < 130) {
		 
            // if it hasn't, keep growing
            this._xscale += 10;
            this._yscale += 10;
			
         } else {
            // if it has, then indicate that it should no longer grow
            growing = false;
         }
		 
      } else {
	  
         // if the movieclip is not growing, it should be shrinking so
         // check to see if it has gone back to its original size yet
         if (this._xscale > 100) {
		 
            // if not, keep shrinking it
            this._xscale -= 10;
            this._yscale -= 10;
			
         } else {
		 
            // if it has, then stop it shrinking and start it growing again
            growing = true;
         }
      }
   };
}

// define rollout function for dots (set to original size, stop growing/shrinking)
function stopPulse() {
   this._xscale = 100;
   this._yscale = 100;
   delete this.onEnterFrame;
}

// assign function to event properties in init
function init() {
   p0.onRollOver = makePulse;
   p0.onRollOut = stopPulse;
}

init();

Go back to the fla and test the movie to see if the code works when you roll over and off the sunset beach control. Of course, you don't have to do all the pulsating with code. If you'd rather do it with a tween sequence inside a movieclip, and then put that movieclip into the _over frame of your control movieclip, or into another labelled frame that you gotoAndStop to onRollOver, you can do that instead. There is never only one way to do things in Flash, and often even no 'absolutely best' way to do things. That said, I've included the code for making a pulsating control above in case you want to see an example of it.

To assign the same functionality to all controls in the movie, change the init function to:

function init() {
   p0.onRollOver = 
   p1.onRollOver = 
   p2.onRollOver = 
   p3.onRollOver = 
   p4.onRollOver = makePulse;

   p0.onRollOut = 
   p1.onRollOut = 
   p2.onRollOut = 
   p3.onRollOut = 
   p4.onRollOut = stopPulse;
}

Test the movie and make sure all controls respond in the same way to mouseovers.

Set up the slider

Before writing any more code, we need to set up the slider movieclip with individual photo movieclips in it. Convert the white strip on stage to a movieclip with an upper left registration point. That's important, because we'll be sliding that clip back and forth and need to know what point we're addressing in code. Give this movieclip an instance name slider_mc. Now go in and edit slider_mc, adding a new layer and copying each photo from the library to that layer and sizing it to 215 x 143. The first picture (hawaiian flower) doesn't need to be a movieclip, but the rest do -- convert each photo to a movieclip and give it an instance name pic0, pic1, pic2, pic3, pic4 (where the number is the same as the number used for the corresponding control).

Each photo movieclip should also have an upper left registration point for the code to work correctly, and be spaced at least 10 pixels apart on the slider. (If you're working in Flash MX 2004, while editing the movieclip you may have to Edit, Select All and shift all the contents to the left to be able to access the far right end of the slider. When done editing, Edit, Select All again and set x=0 in the Properties panel. This problem has been fixed in Flash 8 -- as you add more things to the right end of the stage, Flash changes the slider to allow you to access that part of the stage.)

Set up one of the controls to send the slider to the right position

Choosing the p0 (Sunset Beach) control again, we'll write an onRelease function that will cause the slider to move from wherever it currently is to a new position which will enable pic0 (Sunset Beach picture) to show through the mask, surrounded by a 10-pixel margin. We'll use a moviewide variable SLIDERSTART (whose capital letters indicate that this is actually a constant, a variable whose value is not in fact variable throughout the movie, but is set up to provide a central place to store this information -- easy to find and change if the value has to be changed later) to indicate the x position of slider when the first picture is lined up under the mask.

Finally, we'll use two new classes that were introduced in Flash MX 2004, Tween and Easing, to actually move the slider, using an option to easeOut (decelerate) the slider and let the photo sort of glide into place.

Setting up a tween with the Tween class

The general format for applying a Tween is:

where mc is the instance name of the movieclip you want to tween, property is the property to be tweened, tweentype is any combination from the list below, startvalue is the starting value of the property and endvalue is its ending value. nsecs/nframes is the number of seconds over which the tween will last if the next parameter is set to true, or the number of frames over which it will last if the next parameter is set to false.

Tween types (from this page at macromedia.com):

Back: Extends the animation beyond the transition range at one or both ends once to resemble an overflow effect.
Bounce: Adds a bouncing effect within the transition range at one or both ends. The number of bounces relates to the durationlonger durations produce more bounces.
Elastic: Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
Regular: Adds slower movement at one or both ends. This feature enables you to add a speeding-up effect, a slowing-down effect, or both.
Strong: Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced.
None: Adds an equal movement from start to end without effects, slowing, or speeding up. This transition is also referred to as a linear transition.

The previous six easing classes each have three easing methods:

easeIn: Provides the easing effect at the beginning of the transition.
easeOut: Provides the easing effect at the end of the transition.
easeInOut: Provides the easing effect at the beginning and end of the transition.

Use of the Tween and easing classes require that their class files be imported, so we add this code to the start of frame 1:

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

var SLIDERSTART:Number = slider_mc._x;
var MARGIN:Number = 10;

(where SLIDERSTART and MARGIN are constants defining the initial position of the slider and the margin between pictures, respectively)

The other piece of information we need to find out or calculate is: what is the x position of slider_mc that will enable the Sunset Beach photo (pic0) to show through the mask? There are two ways to find that out:

We could drag slider_mc to the left until pic0 is lined up under the mask, note the number in the X box in the properties panel, use that as the final position in our tween, and then drag slider_mc back to its original place, or
We could note that the position can be mathematically calculated by taking the original x position of slider_mc (which we saved as SLIDERSTART above) and moving it left (subtracting) an amount equal to the distance to the start of pic0 within slider_mc (ie, slider_mc.pic0._x), and then back right a teeny bit to show a margin around the movieclip as well.

Since our goal is to set up some kind of tween that we can apply to all photos in the slider, it would be better to go with option 2, a mathematical calculation that can be applied to all photos. This is the code to calculate the new position of slider_mc to make pic0 within it show through the mask, and then tween slider_mc accordingly when p0 is clicked:

function slideToSunsetBeach() {
   var newpos:Number = SLIDERSTART - slider_mc.pic0._x + MARGIN;
   new Tween(slider_mc, "_x", Strong.easeOut, slider_mc._x, newpos, 2, true);
}

p0.onRelease = slideToSunsetBeach;

Of course, you can try substituting some of the other easing methods for Strong.easeOut to see their different effects. The new Tween line causes the slider to be moved from wherever it is currently (slider_mc._x) to the new position (newpos) we calculated.

Converting the onRelease code for one control to a general function

As we did we with the rollover/rollout code, we need to make this onrelease code generalized so that it can be applied to all the controls in the movie. But within the onrelease function above, we refer to the pic0 movieclip by name, so it will not be applicable to other controls in its current form. We need to find a generic way to specify the picture movieclip relative to the control that was clicked, so we can refer to it generically.

There are, generally speaking, 3 different ways we could programmatically link a button movieclip like p0 to a corresponding photo movieclip like slider_mc.pic0:

We could put some defining string into the button's name and the same thing in the controlled movieclip's name, and then refer to the _name property of the button to extract that information and use it,
We could use an array of objects to link each button with is corresponding photo, for example an array where each element has a btnname property and a photoname property, or
We could give each button a property to tell what its corresponding photo movieclip is

In this example, we'll go with the third option (as of 24 Feb 2006), since that is the most extensible if you want to add more controls and photos later. Eg, in the example we've been looking at, the control is named p0 and the picture (controlled) movieclip is named pic0. All the other control/picture pairs are named similarly. Thus, we can use the the rule mentioned in the yellow box here about the two ways to access the properties of an object (in this case, a movieclip) to specify the corresponding photo and assign that to a property of the control.

If we call that property myphoto (we can call it anything we want), this is what the slideToPhoto function will now look like:

function slideToPhoto() {
   var newpos:Number = SLIDERSTART - this.myphoto._x + MARGIN;
   new Tween(slider_mc, "_x", Strong.easeOut, slider_mc._x, newpos, 2, true);
}

That is, instead of using the hardcoded name of the movieclip, slider_mc.pic0._x to get the location to slide to, we'll use a property of the control movieclip to specify that generically, with this.myphoto._x.

So how does the myphoto property get assigned to the control? We'll put the code to do that assignment into the init function, which will also assign the event handlers for onRollOver, onRollOut, and onRelease for the controls. In order to come up with the right code, one needs to make use of the fact that a movieclip may be accessed either as

slider_mc.pic0

or as

slider_mc["pic0"]

or as

slider_mc["pic" + "0"]

or as

slider_mc["pic" + i] if i is a String variable whose value is "0". (i can actually also be a variable of type Number and Flash will automatically convert it to a String in order to append it to another String).

That is:

You can access a movieclip (either within another holder movieclip or on the main timeline) as either

movieclip holder name . movieclip name

or as

movieclip holder name [ a string representation of the movieclip name ]

where the string representation of the movieclip name can be either a single string (a bunch of characters enclosed by single or double quotes), a concatenation of strings, a variable of type String, or any concatenation of strings and variables of type String.

Strings are concatenated by putting + between them.

If the movieclip you want to access is on the main timeline and your code is also on the main timeline, you can use the keyword this in place of the movieclip holder name.

So, this is the init function which will make all the assignments for us, including setting the myphoto property::

function init() {	
   // use a loop to set up everything at once.  
   for (var i:Number=0; i < 5; i++) {
	
      // create property myphoto to point to the corresponding photo movieclip 
      this["p" + i].myphoto = slider_mc["pic"+i];
		
      // assign handler functions to each event property of the control
      this["p" + i].onRollOver = makePulse;
      this["p" + i].onRollOut = stopPulse;
      this["p" + i].onRelease = slideToPhoto;
   }
}

Don't forget to add a call to init at the end of the program. Also, as a final step in the movie shown above, I added a title and instructions. You can open oahumap_slider.fla and oahumap_slider.as (link under Files at right) to see the final file. For a nice rendition of the slider with compact code, see David Manchester's sample listed under Student Samples at right.

On the next page, we'll look at how to indicate which control was selected, and show a caption under each photo after it has slid into place.