The Heart of the System - Page 8

You've now arrived at the heart of the gesture-driven scrolling list component. This is where all the code will go that actually moves the movie clips around. For starters, add this code at the very bottom of the Actions panel:

if (LIST_ORIENTATION == "horizontal" && gMouseDeltaX != 0) {
} else if (LIST_ORIENTATION == "vertical" && gMouseDeltaY != 0) {

}

Figure 5.8
The code for the horizontal setting is the same as for the vertical, except the axes are different.

This if statement really does all the work for the scrolling list component. First it checks what orientation was specified, and then checks whether the global mouse delta variables are anything other than 0. The code that actually moves the clips around is contained within this if statement. Therefore, you can deduce that when the global mouse delta is 0 (in other words, the mouse cursor is not within the activation area bounds or the diminishing code has reached 0), the code that lies between these if statements will never get called. Although the two sections of this if statement are testing for different things, the code is identical for both—except that one deals with the x-axis (the horizontal one) and the other the y. You will address the x-axis version, and then replicate it for the y when you are through. Now, in the first if statement you just added, enter this code:

 gOriginX = gOriginX – Math.pow(gMouseDeltaX * SCROLL_SPEED, 3) / gConstX;

As you recall, gOriginX (and its y-axis sibling, gOriginY) act as reference points for you to use to calculate the new positions of the movie clips on the Stage. Here, you do the work of setting gOriginX. First, the global mouse delta (gMouseDeltaX) is multiplied by the SCROLL_SPEED constant you defined in frame 1. You then take this number and cube it, which should result in a very large number. Remember those really big math constants you defined in frame 1? Now you finally get to use them by dividing them into the resulting cubed number. So why, exactly, are you cubing a number and so on? Well, the gOriginX variable defines the feel of the scrolling list with speed, friction, and acceleration. If you were to use straight multiplication here, you would most likely end up with a steady acceleration that would get you the result similar to a linear equation. Instead you effectively create a larger "slow" area in the middle of the scrolling list, which will give the end user much more control over the scrolling list.

Immediately following the code you just added, enter this code:

 var clipOffsetX = 0;
 for (var i = 0; i < gClipArray.length; i++) {

 }

clipOffsetX will be used to calculate the proper distance from the gOriginX position (or reference point) to the new clip position. Next you begin the for loop that will go through each of the objects in the gClipArray variable.

Now add the following:

 if (gOriginX < -gTotalWidth) {
  gOriginX = gOriginX % gTotalWidth;
 } else if (gOriginX > gTotalWidth) {
  gOriginX = gOriginX % gTotalWidth;
 }

 if (!LOOPING) {
 if (gOriginX > 1) {
  gOriginX = 1;
 } else if (gOriginX < MOVIE_WIDTH - gTotalWidth + 1 + CLIP_SPACING) {
  gOriginX = MOVIE_WIDTH - gTotalWidth + 1 + CLIP_SPACING;
  }
 }

Because the gOriginX variable is a reference point for your movie clips in the scrolling list, you need to continuously add to it or subtract from it. This number can become quite large and unruly and will start to create more work for you when you need to offset that big value. The solution here is to limit its movements to the collective width of the movie clips. Here you test to see whether the gOriginX variable is larger or smaller than the total width of all the movie clips in the list. If it is, you just reposition the origin to the remainder of the origin and the total width of the movie clips.

Next the code handles the LOOPING constant. If the developer has selected the scrolling list not to loop, you check the position of gOriginX to see whether it goes past the edges of the screen. If it does, you limit it to that edge.

Now add the code that will do the actual calculation for the position of each of the movie clip elements (still inside the for loop):

 var newX = gOriginX + clipOffsetX;
 if (newX + gClipArray[i]._width < 0) {
  newX = gTotalWidth + newX;
 } else if (newX > MOVIE_WIDTH) {
  newX = newX - gTotalWidth;
 }
 gClipArray[i]._x = newX + getClipOffset(gClipArray[i], "x");
 clipOffsetX += gClipArray[i]._width + CLIP_SPACING;

First you define a new variable named newX, which will hold the new position for the current movie clip (gClipArray[i]) in the array. Then you test that new position to see whether it falls below or above the edges of the main movie. If it does, you add or subtract the total width of all the clips from the new value, essentially putting the movie clip at the very front or the very end of the list.

Next you set the x position of the current clip in the array (gClipArray[i]) to newX and calculate the offset for movie clips with different registration points. After that, you update the clipOffsetX variable to include this clip's width and spacing (CLIP_SPACING). And that's it! The code to handle the vertical situation is nearly identical to this except it handles the y-axis. Add that to the second part of the if statement, where LIST_ORIENTATION is "vertical":

 gOriginY = gOriginY - pow(gMouseDeltaY * SCROLL_SPEED, 3) / gConstY;

 var clipOffsetY = 0;
 for (var i = 0; i < gClipArray.length; i++) {

 if (gOriginY < -gTotalHeight) {
  gOriginY = gOriginY % gTotalHeight;
 } else if (gOriginY > gTotalHeight) {
  gOriginY = gOriginY % gTotalHeight;
 }

 if (!LOOPING) {
  if (gOriginY > 1) {
  gOriginY = 1;
 } else if (gOriginY < MOVIE_HEIGHT - gTotalHeight + 1 + CLIP_SPACING) {
  gOriginY = MOVIE_HEIGHT – gTotalHeight + 1 + CLIP_SPACING;
 }
 }

 var newY = gOriginY + clipOffsetY;
  if (newY + gClipArray[i]._height < 0) {
  newY = gTotalHeight + newY;
  } else if (newY > MOVIE_HEIGHT) {
  newY = newY - gTotalHeight;
  }

 gClipArray[i]._y = newY + getClipOffset(gClipArray[i], "y");
 clipOffsetY += gClipArray[i]._height + CLIP_SPACING;
}

The Over State - Page 7
Skip Intro: Flash Usability and Interface Design
Test Your Work - Page 9