Actionscript for Flash 5 dummies: Scrolling a text box II - Page 7

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.