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

In this section we are going to add the interactive part of our scrollbar and scroller so that the user can actually drag the scroller around. This section will make use of the .startDrag() and stopDrag() methods. It will also use simple variables to make our scrollbar clickable. Here is the outline of this section:

  1. Make our scroller get dragged when the user presses on it.
  2. Make our scroller stop being dragged when the user releases the mouse button.
  3. Make our scroller move to the position at which the user clicks on the scrollbar.

You should note that the description above provides for two features, first, the user can drag the scroller around, and second, the user can click at any point on the scrollbar to move the scroller instantly to that point.

Dragging the Scroller

To make our scroller drag-able we simply use the .startDrag() method. This can be used in the format below:

startDrag(target, lockCenter, top, left, right, bottom)

We are not going to discuss how this method works in detail as that goes beyond the scope of this tutorial, you can review Adobe's ActionScript reference for more detail. The basic idea is that you have to specify the boundaries of the box in which our object will be dragged around. In our case, we want the scroller to be dragged along the scrollbar and nowhere else. So we state that we do not want any top or bottom area and that we want it to start from the left tip of the scrollbar (point zero) to the right tip of the scroller (which is equal to the width of the scrollbar). We can specify these details in scroller() function 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._y);
}


}

You can test your movie now to see that your scroller can be dragged around when you press on it (and it does not stop when you release the button that is okay now), but the thing to notice is that if you go all the way to the right you scroller will still go beyond the scroller. This happens because our boundary does not take into consideration the shape of the dragged object and limits only the registration point (or the center) of the object from going outside our boundary. The registration point of our object is on its top left corner, and that does not really go beyond the boundaries. What we have to do is deduct the width our scroller from our right boundary position by simply subtracting it from our current value for the right position 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);
}

}

Test your movie again, your scroller should not go beyond the boundries of the scrollbar now! But we need to stop it from getting dragged around when the user releases the mouse button. This should be dead easy to do, just use the .stopDrag method on the .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();
}
;

}

We are done working with the scroller. Now to work the scrollbar feature.

Making Our Scrollbar Clickable

The second method of navigation in our gallery is by clicking on a position on the scrollbar to instantly move the scroller there and consequently move the gallery. This part is not too hard. We simply need to know the point at which the scrollbar was clicked and then move our scroller to that point.

To know the position at which the mouse was clicked we are going to make use of the _xmouse property of movie clips, this property retrieves the distance between the mouse and the registration point of a movie clip. In our case, the registration of our scrollbar is at its left tip, meaning that the _xmouse property should be equal to the position of the mouse on the scrollbar whenever it is on it.

_xmouse

Luckily, this is the same distance at which the scroller has to be when clicked, I mean, it is the position of the mouse on the scrollbar. We can simply set our scroller_mc._x property as the scrollbar_mc._xmouse property when the user clicks on the scrollbar by modifying the scrollbar() function this way:

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;
}

}

Test your movie now and you should see that whenever you click on your scrollbar, you scroller will instantly jump to that point. However, you might also note that if you click on the absolute right tip of your scrollbar, you scroller will AGAIN go beyound the boundries of the scrollbar. This is once more related to the fact that the shape of the scroller is not taken in consideration. The maximum distance at which our scroller can move is the width of the scrollbar MINUS the scroller width. We are going to use a conditional to check if the _x position of the scroller ever exceeds that amount, it should be put back to this maximum point.

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;
}

}
}

Cool. Test your movie again and press on the right tip of your scrollbar to see that the bug does not happen this time!

Our scroller is now functional in the sense that it moves around, but it obviously does not do anything yet. The last main page of our tutorial will deal with this fundamental part.

Summary of this Page

  1. Made it possible to drag the scroller around.
  2. Made it possible to move the scroller around by clicking on the scrollbar.

In the next section of our tutorial we will make our gallery move in accordance with the position of the scroller on the scrollbar.

Next Page