Creating a Clip Array - Page 5

Now you'll define the createClipArray function. It will use the CLIP_BASE_NAME and TOTAL_CLIPS constants to find clips on the Stage and keep them around in an array so that you can easily loop through them later. Add this code next:

function createClipArray(baseName, total) {
 var tempArray = new Array(); for 
  (var i = 0; i < total; i++) {
 if (null != _parent[baseName + i]) {
 tempArray[i] = _parent[baseName + i];
   }
  }
  return tempArray;
 }

 var gClipArray = createClipArray(CLIP_BASE_NAME, TOTAL_CLIPS);

This is one cool little function! It does some simple stuff, but makes your work much, much easier later on. The createClipArray function takes the base name and a total number of clips as parameters. It then loops through the same number of times as there are clips, checking to see whether a clip with the base name and a number at the end exists in the _parent movie. If it does exist (if it's not null), the function adds a reference to it in an array. The function then returns the newly built array to the caller of the function, the gClipArray variable. Clean, simple, and elegant.

Now make sure the createClipArray function works. By creating the array, you have created references to your movie clips. These references can be used to access and set properties of those movie clips, as follows:

arrayOfClips[0]._x = 100;

Here the x position of the clip is set, referenced by the first element of the array. This would be the same as:

_parent.mc_someClip0._x = 100;

Or:

_parent["mc_someClip0"]._x = 100;

The referencing technique provides one real advantage: If you ever want to change the path to a movie clip from _parent to, perhaps, _level233, you will only have to change it in the createClipArray function; you won't have to search through all your code for where you accessed the movie clip using the _parent methods. Neat, huh?

Organizing Your List Clips

First off, save your movie and then get ready to put that gClipArray variable to use. You are going to position all the clips on the Stage and then try to determine the scrolling list's active area based on the position of all those clips. Enter this code next in the ActionScript panel:

var gTopBounds = 0;
var gBottomBounds = 0; 
var gLeftBounds = 0;
var gRightBounds = 0;
if (gClipArray.length > 0) {
 gTopBounds = gClipArray[0].getBounds(_parent).yMin;
 gBottomBounds = gClipArray[0].getBounds(_parent).yMax; 
 gLeftBounds = gClipArray[0].getBounds(_parent).xMin;
 gRightBounds = gClipArray[0].getBounds(_parent).xMax;
}

These variables are being initialized and will soon hold the outer perimeter, or bounds, of the active area (the area that the mouse can roll over to activate the scrolling) of the scrolling list. Next you verify that the gClipArray contains something; and if it does, you set the bounds variables to the bounds of the first clip in your list.

Now add this code next:

var tempX = 1;
var tempY = 1;
for (var i = 0; i < gClipArray.length; i++) {

  if (LIST_ORIENTATION == "horizontal") {
   gClipArray[i]._x = tempX + getClipOffset(gClipArray[i], "x");
  tempX = gClipArray[i]._x – getClipOffset(gClipArray[i], "x") + 
 gClipArray[i]._width + CLIP_SPACING;
  } else {
  gClipArray[i]._y = tempY + getClipOffset(gClipArray[i], "y");
  tempY = gClipArray[i]._y – getClipOffset(gClipArray[i], "y") + 
 gClipArray[i]._height + CLIP_SPACING;
 }
 tempTop = gClipArray[i].getBounds(_parent).yMin;
 if (tempTop < gTopBounds) { gTopBounds = tempTop };

 tempBottom = gClipArray[i].getBounds(_parent).yMax;
 if (tempBottom > gBottomBounds) { 
 gBottomBounds = tempBottom 
 };

 tempLeft = gClipArray[i].getBounds(_parent).xMin;
 if (tempLeft < gLeftBounds) { gLeftBounds = tempLeft };

 tempRight = gClipArray[i].getBounds(_parent).xMax;
 if (tempRight > gRightBounds) { 
 gRightBounds = tempRight 
 };
}
gTopBounds -= MOUSE_BUFFER;
gBottomBounds += MOUSE_BUFFER;
gLeftBounds -= MOUSE_BUFFER;
gRightBounds += MOUSE_BUFFER;

This chunk of code looks like a lot but is actually pretty simple. After initializing some temporary variables, it loops through gClipArray and, depending on the list's orientation (horizontal or vertical), positions each clip, in order of its name, side by side separated by the distance in pixels specified in the CLIP_ SPACING constant. It also compensates for any clip offset that may exist. After it positions the clip, it updates the temporary variable with a new location for the next clip in the loop. Then the position of every clip is compared to the bounds' variables. The code updates them if it finds a clip that exceeds the bounds. In other words, if you have different sized clips in your list, the biggest clip is used to determine the bounds of the list. Finally, you increase the scrolling list's activation area by the amount specified in the MOUSE_BUFFER constant. This makes it possible for the user to activate the scrolling of the list without having to actually be positioned over the list.

Construction - Page 4
Skip Intro: Flash Usability and Interface Design
Initializing Your Variables - Page 6