Creating an XML Slideshow in Flash - Page 3

By Blue_Chi | Flash CS3 | ActionScript 1/2 | Advanced | Page 1, 2, 3, 4, 5, 6

We are going to create a movie clip to hold all of our loaded images. Having this container movie clip will make manipulating our slideshow easier later on. Our main container movie clip will also have a border around it to make our slideshow look nicer. The outline of this section is as follows:

  1. Create a movie clip to hold all our loaded images.
  2. Create a border around our container movie clip.
  3. 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 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 slideshow, we will call it container_mc.

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

}

Drawing A Border Around the Movie Clip Container

We will use the Drawing API to draw a border around our container using the width and height properties of our slideshow, both of which are details we extracted from our XML file. We do not have a tutorial on using the Drawing API yet on Oman3D, but the basic idea is that you select your .lineStyle and then draw a line from one point to another. Our _root.myWidth and _root.myHeight variables will be used as the targets of our lines, we are going to draw a border around the container using the .lineTo this way:

Using the Drawing API to Draw a Box

The diagram above can be translated in the following code:

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

myContainer_mc.lineStyle(5,0x000000,100);
myContainer_mc.lineTo(_root.myWidth,0);
myContainer_mc.lineTo(_root.myWidth,_root.myHeight);
myContainer_mc.lineTo(0,_root.myHeight);
myContainer_mc.lineTo(0,0);

}

Centering the Movie Clip on Stage

We are going to center our image gallery now. To do this we are going to retrieve the width and height of the stage and our slideshow container and then calculate the distance at which our container has to be position using the following simple formula:

Center Image

We can find the height of the stage and the height of the container, so we can just use these to calculate z (the distance at which the object needs to be positioned to be at the center). We are going to use a similar formula to place the movie clip horizontally. Here is our updated code:

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

myContainer_mc.lineStyle(5,0x000000,100);
myContainer_mc.lineTo(_root.myWidth,0);
myContainer_mc.lineTo(_root.myWidth,_root.myHeight);
myContainer_mc.lineTo(0,_root.myHeight);
myContainer_mc.lineTo(0,0);

myContainer_mc._x = (Stage.width-myContainer_mc._width)/2;
myContainer_mc._y = (Stage.height-myContainer_mc._height)/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:

myShowXML.onLoad = function() {

_root.myWidth = myShowXML.firstChild.attributes.width;
_root.myHeight = myShowXML.firstChild.attributes.height;
_root.mySpeed = myShowXML.firstChild.attributes.speed;

_root.myImages = myShowXML.firstChild.childNodes;
_root.myImagesNo = myImages.length;

createContainer();

};

You can test your movie now to see the border of your container centered on the stage.

Summary of this Page

  1. Created the createContainer() function.
  2. Created the movie clip container using the _createEmptyMovieClip method.
  3. Created a border around our movie clip container using the Drawing API.
  4. Centered our movie clip container on the stage.

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

Next page