Creating an XML Scrollbar Gallery in Flash

By Blue_Chi | Flash CS3 | ActionScript 1+2 | Advanced | Page 1, 2, 3, 4, 5, 6, 7, 8, 9

Here we will create the function that will move our gallery in accordance to where our scroller is. This going to involve using a little bit of simple math. We are going to call this when the scroller is moved around or when the user clicks the scrollbar. The actual movement will be done using the Tween Class. The outline of this section as follows:

  1. Create the mover() function.
  2. Attach this function to the scroller and scrollbar.
  3. Optimize the function using a setInterval method.

Creating the mover() function

Our scroller can already be moved around. What we need to do is move our _root.myImages_mc object (our gallery) in accordance to where our scrollbar is. We need to some how relate the position of the scroller along the scrollbar to each other and then use this relative position as a reference that we pass to our gallery and move it accordingly. We are going to code this one line at a time. Start off by defining a function called mover()at the bottom of our existing code.

function mover(){

}

The animation tool that we will use to move the gallery is the Tween Class. In order to use the Tween Class we have to import it by using the import directive. You do that by simply pasting the following at the top of all of our code:

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

As you should know, in order to animate an object using the Tween Class, you must assign the starting point and the ending point for the tweened property, the _x start point of our gallery is easy to know, but the trick is in finding the ending point using the current location of our scroller. If we can find the location of the scroller along the scrollbar as a percentage, we can reverse that percentage later to find the location of the gallery over the mask viewport.

Localtion of the Scroller

The current percentage location of the scroller can be found by dividing the scroller _x property by the scrollbar width:

var scrollerLocation = _root.scroller_mc._x/_root.scrollbar_mc._width;

But if you remember we have decided not to move the scroller to the full length of the scrollbar as we subtracted it by the width of the scroller. We must now do the same here if we want to get the real percentage:

var scrollerLocation = _root.scroller_mc._x/(_root.scrollbar_mc._width-_root.scroller_mc._width);

We can multiply this value by 100 now to get an out of 100 percentage, but we do not really need to do that and all we need is this number that resembles the relationship between the scroller and the scrollbar. We can use this value now to determine what the location of the gallery should be in relation to its mask. If we got our percentage by dividing _x (scroller_mc._x) by the total (scrollbar_mc._width-scroller_mc._width), we can get _x of the gallery (myImages_mc._x) by multiplying the percentage by the total (myMask_mc._width-myImages_mc._width).

var galleryLocation = scrollerLocation*(_root.myMask_mc._width-_root.myImages_mc._width);

And that's how we found the number that our gallery needs to be at to correspond to our scroller bar position. We can now pass that to our Tween Class to move our object around this way:

function mover(){
var scrollerLocation = _root.scroller_mc._x/(_root.scrollbar_mc._width-_root.scroller_mc._width);
var galleryLocation = scrollerLocation*(_root.myMask_mc._width-_root.myImages_mc._width);

new Tween (_root.myImages_mc, "_x", Strong.easeOut, _root.myImages_mc._x, galleryLocation, 1.5, true);
}

We now need to call this method each time our scroller is moved. Go to the scroller() function and call the mover() function from within the scroller's .onRelease event handler property:

function scroller () {
_root.scroller_mc = _root.myGallery_mc.createEmptyMovieClip("scroller_mc", _root.myGallery_mc.getNextHighestDepth());
_root.scroller_mc._y = _root.bar_y;

_root.scroller_mc.beginFill(0xFF0000,100);
_root.scroller_mc.lineTo(_root.scroller_width,0);
_root.scroller_mc.lineTo(_root.scroller_width,_root.bar_thickness);
_root.scroller_mc.lineTo(0,_root.bar_thickness);
_root.scroller_mc.lineTo(0,0);
_root.scroller_mc.endFill();

_root.scroller_mc.onPress = function(){
startDrag(this, false, 0, this._y, _root.scrollbar_mc._width-this._width, this._y);
};

_root.scroller_mc.onRelease = function(){
stopDrag();
mover()
};

}

We are also going to call the function from within the scrollbar's .onPress event handler property so that the gallery moves when the scroller is pressed as well:

function scrollbar () {
_root.scrollbar_mc = _root.myGallery_mc.createEmptyMovieClip("scrollbar_mc", _root.myGallery_mc.getNextHighestDepth());
_root.scrollbar_mc._y = _root.bar_y;

_root.scrollbar_mc.beginFill(0x000000,100);
_root.scrollbar_mc.lineTo(gallery_width,0);
_root.scrollbar_mc.lineTo(gallery_width,_root.bar_thickness);
_root.scrollbar_mc.lineTo(0,_root.bar_thickness);
_root.scrollbar_mc.lineTo(0,0);
_root.scrollbar_mc.endFill();

_root.scrollbar_mc.onPress = function(){
_root.scroller_mc._x = this._xmouse;

if (_root.scroller_mc._x > (this._width-_root.scroller_mc._width)){
_root.scroller_mc._x = this._width-_root.scroller_mc._width;
}

mover()

}
}

You can test your move now to see your gallery moving around when you release your scroller and moving around immediately when you press anywhere on the scrollbar.

This looks OK, but if you noticed, our original sample at the start of the tutorial was moving the gallery as we scrolled along and did not wait for us to release the scroller for the gallery to move around. We can accomplish this by calling the mover() at certain intervals as the scroller moves using a setInterval method and then clearing this interval when the scroller is released. Go back to the scroller() function and add that this way:

function scroller () {
_root.scroller_mc = _root.myGallery_mc.createEmptyMovieClip("scroller_mc", _root.myGallery_mc.getNextHighestDepth());
_root.scroller_mc._y = _root.bar_y;

_root.scroller_mc.beginFill(0xFF0000,100);
_root.scroller_mc.lineTo(_root.scroller_width,0);
_root.scroller_mc.lineTo(_root.scroller_width,_root.bar_thickness);
_root.scroller_mc.lineTo(0,_root.bar_thickness);
_root.scroller_mc.lineTo(0,0);
_root.scroller_mc.endFill();

_root.scroller_mc.onPress = function(){
startDrag(this, false, 0, this._y, _root.scrollbar_mc._width-this._width, this._y);
moverInterval = setInterval(mover,250);
};

_root.scroller_mc.onRelease = function(){
stopDrag();
clearInterval(moverInterval);
mover()
};

}

That should do it. Test your movie now to see it moving around while the scroller is moved along the scrollbar.

Our gallery is done in essence, but we are going to polish it in the final page of this tutorial by creating a preloader for each of the images using the MovieClipLoader and a listener.

Summary of this Page

  1. Created a mover() function to move the gallery using the Tween Class.
  2. Attached this function to the scroller and scrollbar.
  3. Used the setInterval method to make the scroller move the gallery while being dragged.

In the final section of our tutorial, we teach you how to create a preloader for each of our gallery images as they load.

Next Page