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 of our tutorial we will define the size of our gallery by applying a mask that we will draw using the ActionScript Drawing API. It is a pretty simple process that only requires basic knowledge of the masking tools and the Drawing API. The outline of this section is as follows:

  1. Create a function to create a container for the mask.
  2. Use the Drawing API to draw the mask in the container using the dimensions we extracted from the XML file.
  3. Apply the mask using the .setMask method.

Creating A container for The Mask

The purpose of our mask is to define the dimensions of the gallery as only that masked part will be visible to the user. We need to draw our mask in a specific movie clip before we apply it. We are going to do that through a new function that we will call masking() it will simply start off by creating a new empty movie clip named myMask_mc this way:

function masking() {
_root.myMask_mc = _root.myGallery_mc.createEmptyMovieClip("myMask_mc", _root.myGallery_mc.getNextHighestDepth());

}

Using the Drawing API to Draw the Mask

We are going to extract the gallery width and height properties that we extracted from our XML file and then use these as reference points for the mask as we create it using the Drawing API. The variables that we need are the gallery_width and gallery_height, we are going to use these two values to draw our mask as shown in the diagram below, this should be easy to understand if you have reviewed our Drawing API tutorial.

Drawing API - Mask

The diagram above can be translated into the code below:

function masking() {
_root.myMask_mc = _root.myGallery_mc.createEmptyMovieClip("myMask_mc", _root.myGallery_mc.getNextHighestDepth());

_root.myMask_mc.beginFill(0x000000,100);
_root.myMask_mc.lineTo(_root.gallery_width,0);
_root.myMask_mc.lineTo(_root.gallery_width,_root.gallery_height);
_root.myMask_mc.lineTo(0,_root.gallery_height);
_root.myMask_mc.lineTo(0,0);
_root.myMask_mc.endFill();

}

We have used the colour black to draw our mask, but it does not really matter because the mask itself will not be seen when we apply it.

Applying the Mask

Applying the mask is pretty easy, we simply use the .setMask() method to mask the _root.myImages_mc movie clip by the _root.myMask_mc this way:

function masking() {
_root.myMask_mc = _root.myGallery_mc.createEmptyMovieClip("myMask_mc", _root.myGallery_mc.getNextHighestDepth());

_root.myMask_mc.beginFill(0x000000,100);
_root.myMask_mc.lineTo(_root.gallery_width,0);
_root.myMask_mc.lineTo(_root.gallery_width,_root.gallery_height);
_root.myMask_mc.lineTo(0,_root.gallery_height);
_root.myMask_mc.lineTo(0,0);
_root.myMask_mc.endFill();

_root.myImages_mc.setMask(_root.myMask_mc);

}

We can finish this section now by calling the masking() function from our main .onLoad event along with the rest of our functions:

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

};

That should do it, you can now test your movie to see that you gallery no longer spans across the entire stage.

Summary of this Page

  1. Create a masking() function.
  2. Created a movie clip container for the mask.
  3. Used the Drawing API to draw the mask.
  4. Applied the mask using the .setMask() method.

The next section of our tutorial we will draw the scrollbar and the scroller and then use them to move the gallery around.

Next Page