Part 2: Getting rid of the hand cursor

As you probably have figured out by now, when you make a button in Flash, and you put your mouse over it, the cursor changes into a hand. This can be useful in certain circumstances, as the user can easily identify a clickable area.

However, in our case, the hand is just plain annoying. For one thing, users already know a scroller can be clicked, so there's no need to put visual emphasis on that point; in fact, it's just plain distracting. Secondly, the hand cursor is, in my opinion, a bit less precise. Finally, we want to emulate an everyday OS scroller here, and OS scrollers don't show the hand cursor.

So we need to get rid of the hand cursor. Unfortunately, there's no hidden setting in Flash that'll allow us to disable the hand cursor on a button. So we need to, as the PR people say, think outside the box. If there's no button, there's no hand cursor, right?

So we'll use a movie clip instead of a button for our up and down arrows. Go into containerMC, and delete the up and down buttons from the movie clip, as well as from the library. Don't be afraid, trust me on this one.

Now create a new movie clip and name it "upMC". Your movie clip should have two frames: the first one is the button in its normal (up) state, the second frame, the button in its hit (down) state. You can add your own graphics for the up and down states. Click on the first frame, go into the frame actions panel, and add a stop() action so that the movie clip doesn't constantly cycle between up and down.

For the graphics, I simply took a screenshot of a scroller (press the PrintScrn button on your keyboard, it's on the right of the F12 key), and pasted it (ctrl+V) into Fireworks. I then isolated the buttons and made separate images of them, and then imported them into Flash. Of course, as I mentionned earlier, you may use your own graphics if you want.

You can follow these steps again in order to create another movie clip named "downMC", which, you guessed it, will be the down arrow.

Now, go into containerMC, and place an instance of both upMC and downMC in it. Name your clips "up" and "down" in the instance properties. Your movieclip should look something like this:

It's now time to update containerMC's actionscript (once again, old stuff is greyed out):

onClipEvent (load) {
    this.loadVariables("text.txt");
    scrolling = 0;
    frameCounter = 1;
    speedFactor = 3;
    refreshRate = 12;
    refreshCounter = 0;
    refreshlastMaxscroll = 0;
    loaded = false;
}
onClipEvent (enterFrame) {
    if (loaded) {
        if (refreshCounter%refreshRate == 0 && daTextBox.maxscroll != refreshLastMaxScroll) {
            refreshLastMaxScroll = daTextBox.maxscroll;
            refreshCounter = 0;
        }
        refreshCounter++;
    }
    if (frameCounter%speedFactor == 0) {
        if (scrolling == "up" && daTextBox.scroll>1) {
            daTextBox.scroll--;
        } else if (scrolling == "down" && daTextBox.scroll<daTextBox.maxscroll) {
            daTextBox.scroll++;
        }
        frameCounter = 0;
    }
    frameCounter++;
}
onClipEvent (mouseDown) {
    if (up.hitTest(_root._xmouse, _root._ymouse)) {
        scrolling = "up";
        frameCounter = speedFactor;
        up.gotoAndStop(2);
    }
    if (down.hitTest(_root._xmouse, _root._ymouse)) {
        scrolling = "down";
        frameCounter = speedFactor;
        down.gotoAndStop(2);
    }
    updateAfterEvent();
}
onClipEvent (mouseUp) {
    scrolling = 0;
    up.gotoAndStop(1);
    down.gotoAndStop(1);
    updateAfterEvent();
}
onClipEvent (data) {
    loaded = true;
}

Too... much... Actionscript... Yes, I know. Don't worry, it's not as complicated as it seems.

The changes lie in the addition of two new clip events, mouseDown and mouseUp. These events are fired respectively when the the mouse is clicked and depressed.

Now I know what you're thinking: isn't onClipEvent(mouseDown) the same as on(press)? Well, no. For one thing, onClipEvent(mouseDown) only works in clips, whilst on(press) works in buttons. Secondly, the mouseDown clipEvent is an impersonal event, while on(press) is a personal event.

What this means is that if you click outside of a button, its on(press) action won't be fired, while with onClipEvent(mouseDown), even if you click a 1000 pixels off the clip, the event will still be fired.

This gives onClipEvent(mouseDown) a great advantage: with a single script, you can control the click actions of several clips. The same goes for onClipEvent(mouseUp).

Getting back to the code, you'll see the second new line is:

if(up.hitTest(_root._xmouse,_root._ymouse)){

The hitTest function checks to see if certain coordinates touch a caller clip, and returns true or false. In our case, the caller clip is the "up" movie clip, and the checked coordinate is actually the mouse position in relation to the main timeline, (_root._xmouse, _root._ymouse). So the line can literally be read as: «If the mouse coordinates touch the "up" movie clip, do the following». Essentially, the combination of mouseDown and hitTest() give us the same functionnality as on(press).

You'll recognize the two following lines from the last tutorial; they are literally copied from the ex-button's actions, and unsurprisingly, they serve the exact same purpose as they did before. That is, the scrolling variable is set to up so that the onClipEvent(enterFrame) can know that it must scroll up, and the frameCounter is set to speedFactor so that we can have instant feedback (this being related to the use of % to skip a few frames in the scrolling, remember?). The third line tells our up movie clip to go to its second frame, so that it can show its down state.

The second "if" is basically the same as the first, only for the down button. The mouseDown clip event closes with the updateAfterEvent() function. Normally, the screen is refreshed after every frame; using the updateAfterEvent() function, the screen is refreshed instantly after the mouse is clicked. What this gives us is instant gratification. To see what I mean, temporarily change your movie's framerate to 2 fps, and test the movie with and without the updateAfterEvent() line. Makes a big difference, doesn't it?

Next, we have the onClipEvent(mouseUp) action, which is fired every time the mouse is depressed. What we do here is that we first reset the scrolling variable, then we place the two buttons back in their up state. Once again, we use the updateAfterEvent() action to instantly refresh the screen.

As you can see, we basically took our previous button scripts and concentrated them in a single area, the containerMC actions. Since the clips are not buttons, the hand cursor does not appear when you mouse over them.

Now before you send me an e-mail stating that it's pretty stupid to spend a half hour doing something so insignificant, please understand that using this technique yields several other advantages. Since the script is all in one place, this makes updating it extremely easy. Also, in some circumstances, using the above technique can save you tons of code.

Say for instance that you have a hundred buttons on the stage, and you want it so that when user clicks the buttons, a caption appears with the number of the button. That would be 6 lines of code per button, for a grand total of 600 lines of code! With decentralized mouseUp and mouseDown actions, you could realistically reduce that number to 15.

On with the third and final part of our tutorial, adding the scrollbar.