Test Your Work - Page 9

Now that you've finished off the code for frame 2, take some time to relax—and make sure you've saved this movie! Now add one more line of code and then you can test the movie. Select the third keyframe in this movie clip and open the Actions panel. Add this line:

gotoAndPlay(2);

Now go back to the main movie (scene 1) and copy and paste your clips until you have about nine clips on the Stage. Remember to edit the TOTAL_CLIPS constant in frame 1 of this movie clip to reflect the proper number of clips. Now test the movie. Is everything working? Fiddle around with some of the other constants and keep testing the movie to see how it reacts.

The three listings that follow show all the code you should have in the three frames of your scrolling list component. Check to make sure you are in sync, and then you will move on to making a real component out of the scrolling list movie clip.

Listing 5.1 Frame 1 ActionScript

this._visible = false;

var CLIP_BASE_NAME = "mc_test_clip";
var TOTAL_CLIPS = 3;
var LIST_ORIENTATION = "vertical";
var MOUSE_BUFFER = 20;
var CLIP_SPACING = 10;
var SCROLL_SPEED = 1;
var LOOPING = true;
var SMOOTH = true;
var FRICTION = 5;

function getClipOffset(clipObj, axis) {
 var tempOffset = 0;
 if (axis == "x") {
 tempOffset = clipObj._x – clipObj.getBounds(_parent).xMin;
 } else if (axis == "y") {
 tempOffset = clipObj._y – clipObj.getBounds(_parent).yMin;
 }
 return tempOffset;
}
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);

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;
}

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;

var gTotalWidth = tempX;
var gTotalHeight = tempY;

var tempScaleMode = Stage.scaleMode;
Stage.scaleMode = "exactFit";
var MOVIE_WIDTH = 550;
var MOVIE_HEIGHT = 400;
Stage.scaleMode = tempScaleMode;

var gMovieCenterX = MOVIE_WIDTH / 2;
var gMovieCenterY = MOVIE_HEIGHT / 2;

var gMouseDeltaX = 0;
var gMouseDeltaY = 0;

var gOriginX = 0;
var gOriginY = 0;

var gFriction = 1 + (FRICTION / 150);

var gConstX = (Math.pow(gMovieCenterX, 3) + Math.pow(MOVIE_WIDTH, 3) + 
Math.pow(gMovieCenterX, 2) + Math.pow(MOVIE_WIDTH, 2)) / 4;
var gConstY = (Math.pow(gMovieCenterY, 3) + Math.pow(MOVIE_HEIGHT, 3) +  
Math.pow(gMovieCenterY, 2) + Math.pow(MOVIE_HEIGHT, 2)) / 4; 

The Heart of the System - Page 8
Skip Intro: Flash Usability and Interface Design
Test Your Work (Cont.) - Page 10