Construction - Page 4

You've got a pretty clear objective here: to create a component that will control other clips on the Stage and enable the end users to control the movement of those clips with their mouse. This clip will not itself be visible to the user of the scrolling list, but will remain behind the scenes.

The gesture-driven component will be a movie clip made up of three frames. The first frame will handle initializing variables and defining functions for the clip. The second frame will contain the code that actually does the work—keeping the different elements in the list aligned properly, getting the mouse position, and making calculations to move the list elements on the screen. The third frame will be your loop frame; it will just tell the clip to loop back to the second frame.

Setting Up the Movie

To start building your scrolling list component in Flash, make a new movie and set its frame rate to 20 fps. Make a new layer and call it scrolling list. Then create a shape on the Stage (it can be anything at this point), select it, and turn it into a movie clip called ScrollingList. Double click the clip you just created (to edit it) and add a new layer. Name this new layer actions. This is where you will be adding your ActionScript. Add two more frames to the movie clip, making it a total of three frames long. Make each of these frames a keyframe. The quickest way to do this is to select all three frames in the actions layer of the timeline and convert them to key frames (Modify>Frames> Convert to Keyframes). Now you're ready to start adding the code.

Figure 5.5
Select your three frames and convert them to keyframes (Modify>Frames>Convert to Keyframes).

Hiding the Clip

Select the first frame in the actions layer and open the Actions panel. Here you will hide the movie clip and define some constants that you will replace with component parameters later. Enter this code:

this._visible = false;

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

Remember, take the extra time to give your variables sensible names so that you and others going through your code can understand what's happening. The MOVIE_WIDTH and MOVIE_HEIGHT variables hold the width and height of your movie. If these values do not match your current movie's dimensions, change them now. CLIP_BASE_NAME holds the base name for the clips you'll be scrolling in the list. You will make some clips later to test the code. TOTAL_CLIPS is the number of clips that you will control in the list. This will be used in conjunction with the CLIP_BASE_NAME constant to actually find the movie clips on the Stage. The LIST_ORIENTATION constant will control whether your scrolling list moves from side to side or up and down. SCROLL_SPEED will hold a number that you will use to determine the speed at which the list should scroll. The LOOPING constant will hold whether the list loops around to the beginning when you reach one end of the list, or whether it stops at one end, forcing the user to scroll in the opposite direction to get to the other side. Both the SMOOTH and FRICTION constants will be used later to help add a nice little touch to the list: having it decelerate slowly when the user moves her mouse away from the list.

Public Functions

When planning your code, especially if other developers are going to use it, you should think in terms of "public or private" when organizing functions and variables. Suppose, for example, that you have a balloon movie clip that contains all the ActionScript logic necessary to float around the screen like a real balloon does. All the calculations for gravity and weight and even the size of the balloon are functions and variables that don't need any help from the outside to work properly. These could be considered private functions and variables. However, you may want to have another movie clip onscreen pop the balloon. In this case, you can provide a public pop() function that can safely be accessed by other code in the main movie.

The advantage to working in this manner is that you would need to explain to the other developers only about how to use the public functions to do what they want. This keeps you from having to explain to everyone using your cool balloon clip how the material_tension variable is handled or how your code might deal with a gGravity variable with a null value. You just provide those developers with a good public set of variables and functions so that they don't need to learn all the intricacies of your code if they don't want to.

For the scrolling list component, you may sometimes need to pause the scrolling or perhaps even reinitialize the list. Add the following public functions in the Actions panel:

function enableScrolling() {
 gScrollingEnabled = true;
}

function disableScrolling() {
 gScrollingEnabled = false;
}

function resetList() {
 gotoAndPlay(1);
}

These are very simple functions that change the value of a variable, gScrollingEnabled, to either true or false. The resetList function takes care of sending the playback head back to the first frame of the component, which will rebuild the list.

Handling the Offset

Instead of enforcing that the movie clip's registration point be in the center, for this module you will use programming. Add this code to your ActionScript panel:

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

The getClipOffset function takes a movie clip object and the axis of the offset you want it to return. It then finds the offset of the movie clip object by calculating the difference between the y position of the clip and the coordinate of the clip's left edge returned by Flash's getBounds() function.

Implementation - Page 3
Skip Intro: Flash Usability and Interface Design
Creating a Clip Array - Page 5