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 a movie clip to hold all of our loaded images. Having this container movie clip will make manipulating and positioning our gallery easier. The outline of this section is as follows:

  1. Create a movie clip to hold all our loaded images.
  2. Position the container movie clip in the middle of the stage.

Creating A Container Movie Clip

All the code relating to our container movie clip will be placed within a function to be defined at the bottom of our existing code. We will name this function createContainer(). We are using a function to organize our code into logical segments that can be easily debugged and updated.

function createContainer() {

}

The first task of our function is to create the movie clip container for our gallery, we will call it container_mc.

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

}

Positioning the Gallery

Our gallery will be positioned horizontally in the center of the stage and vertically in accordance to the value specified in our XML file. We are going to deal with the vertical position first because it is easier, we have already extracted the value for the gallery_y property, so we can simply assign that as the _y position of our gallery this way:

function createContainer() {
_root.myGallery_mc = _root.createEmptyMovieClip("myGallery_mc", _root.getNextHighestDepth());
_root.myGallery_mc._y = _root.gallery_y;
}

Centering our gallery horizontally is a little bit trickier, we are going to calculate the distance at which our container has to be positioned using the following simple formula:

Center Image

We can find the width of the stage and we have the width of the gallery specified in our XML file, so we can just use these to calculate z (the distance at which the object needs to be positioned to be at the center). Here is how to do it:

function createContainer() {
_root.myGallery_mc = _root.createEmptyMovieClip("myGallery_mc", _root.getNextHighestDepth());
_root.myGallery_mc._y = _root.gallery_y;
_root.myGallery_mc._x = (Stage.width-_root.gallery_width)/2;
}

Our createContainer() function is now ready, you will have to call this function from our .onLoad event handler in the earlier section of our code 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();

};

Our container is now ready, but you won't be able to see anything if you test the movie because we have not added any visual elements to it. This gallery container will hold the visual that we will later create, each of the elements that we will add will be created in a separate movie clip container within our myGallery_mc as shown in the diagram below.

Gallery Map

We will start from the top down now, we will next create the images container that will hold all of our actual images.

Summary of this Page

  1. Created the createContainer() function.
  2. Created the gallery movie clip container using the _createEmptyMovieClip method.
  3. Positioned our gallery movie clip container vertically using the gallery_y attributed we specified in our XML file.
  4. Centered our movie clip container on the stage using a simple formula.

In the next section we use the MovieClipLoader Class and a loop to load all of our images into our movie.

Next page