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

We are going to create our scrollbar and scroller in this section of the tutorial, we are going to use the Drawing API again to do this. This section will involve the drawing part only, we will make these control the images in the next section. The outline of this section is as follows:

  1. Create a container for the scrollbar.
  2. Use the Drawing API to draw the scrollbar.
  3. Create a container for the scroller.
  4. Use the Drawing API to draw the scroller.

The Scrollbar

We are going to create a function to hold all the ActionScript involved with the scrollbar, we will call this function scrollbar(). The first task for this function is to create a movie clip container that we will draw the scrollbar in. This movie clip will be named scrollbar_mc:

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

}

We will now position the scrollbar using the _root.bar_y property we found out from our XML data at the start of the tutorial:

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

And then use the gallery_width and the bar_thickness variable to draw our scrollbar, we are going to use a black fill 0x000000 for it.

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();

}

That's it, call this function from our initial .onLoad event and then test your movie to see your black non-functional scrollbar.

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_y = Number(_root.gallery_height)+Number(_root.spacing);
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;
_root.scroller_width = _root.bar_thickness*2

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = _root.myImages.length;

createContainer();
callImages();
masking();
scrollbar();

};

The Scroller

We are going to repeat the same process for our scroller, start off by creating a new function called scroller() and then let it create a new empty movie clip on which we will draw our scroller, name this new movie clip scroller_mc:

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

}

Our scroller has to be right on top of our scrollbar, to do that simply set its _y property to _root.bar_y just like the scrollbar.

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

We are going to draw the scroller now using the Drawing API, the height of the scroller is going to match that of the scrollbar, but its width will not be the same as our gallery, it will be equal to the thickness property that we calculated at the start of the tutorial (twice the height of the scroller), we are going to set the colour of the scroller to red (0xFF0000):

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();


}

Simply call the scroller() function from the main .onLoad event like the rest of the functions this way:

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_y = Number(_root.gallery_height)+Number(_root.spacing);
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;
_root.scroller_width = _root.bar_thickness*2

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = _root.myImages.length;

createContainer();
callImages();
masking();
scrollbar();
scroller();

};

You can now test your movie to see your red scroller on top of the black scrollbar. We are going to make them interactive next.

Summary of this Page

  1. Created the scrollbar.
  2. Created the scroller.

In the next section of our tutorial we will make our scroller draggable.

Next Page