Often times in your Flash movies and applications, you need buttons that do a bit more than receive single mouse clicks. A constant feedback button is one that continuously runs code while the button is depressed. You see this functionality in standard interface slider bars (you should see such a slider bar in this very browser window), although the technique can be applied to many circumstances where you need to know when a button is down and remains down.

In this tuturial, we will create a button that does just that. While it is held down a movieclip will constantly rotate on our stage, stopping when the button is released. The button itself (though I call it a button) will actually be a movieclip instance acting like a button, as was covered in the previous tutorial MovieClip buttons.

1. Open a new movie and create three layers, "button", "spinner" and "code". With the "button" layer selected, draw a small sphere on the stage. Convert this sphere into a movieclip (F8) named "sphereButton".
2. In symbol editing mode for the movieclip, name the layer with the graphic "graphics" and create two new layers with the names "code" and "labels".
3. Create additional keyframes on frames 11 and 21. In the "labels" layer, label the keyframes as follows:
   • 1 : "_Up"
   • 11 : "_Over"
   • 21 : "_Down"

   These frames indicate individual states of the button. Once we assign button event handlers to the movieclip, it will automatically send the movieclip playhead to the proper frame (for the standard button states of UP, DOWN, and ROLLOVER).

4. Change the sphere graphic's color on each of the states to reflect that state's function. I made the rollover state a different, lighter color and the down state an inverted version of the same gradient.
5. Finally, place a stop() action in the first frame of the code layer. This is necessary when the movieclip first loads to stop its playhead from advancing.
6. Now exit symbol editing mode and return to the main timeline. Name the instance of our sphereButton "sphereButton" so that we may refer to it in our code.
7. On the "spinner" layer, simply draw a rectangle and convert in into a movieclip symbol (F8) named "spinner". Name the instance "spinner" in the property palette as well (make sure you actually name the instance, which is done in addition to naming the symbol itself).

   With our graphics all prepared, we can start with the code that will make things happen!

8. Select frame 1 of the "code" layer on the main timeline and open your Actionscript editor (F9). Type the following:
   
   
   
   

   sphereButton.onPress = function() {

   this.onEnterFrame = function() {

   spinner._rotation += 25;

   }

   }

   
   

   Would you believe that these lines do most of the work? They might look a bit odd to you if you have yet to use Flash MX's new method of dynamically assigning handlers, so let's break it down to look at it more closely. First, we are assigning a new anonymous function to be called whenever the button is pressed. Note that by simply assigning anything to the onPress handler, we have effectively turned our movieclip into a button and it will automatically recognize its _UP, _DOWN and _OVER states. Pretty handy!

   And what happens in this function that we've assigned? Well, we assign another function for the movieclip's enterFrame event call. We are creating this loop function only when the button is clicked, saving needless processing. In Flash 5, this wasn't possible and you constantly had to loop even when you didn't need the code to run. This act of "polling" for information was (is) extremely inefficient.

   Now, in this enterFrame we simply rotate the spinner movieclip by 25 degrees. As this function is called each frame, the rotation appears to be animated. Of course, we want the rotation to stop once the button is released, so let's take care of that next.

9. Add this additional code to our code window:
   
   
   
   

   sphereButton.onRelease = sphereButton.onReleaseOutside = sphereButton.onDragOut = function() {

   delete this.onEnterFrame;

   }

   
   

   Short and sweet. Whenever the button is released, no matter where the mouse is, the onEnterFrame function we earlier assigned is deleted. The loop is no longer called since we no longer need it. Much more efficient! Test your movie to see the result.

This was a quick little tutorial to show you how easy it is to set up a button to receive constant feedback. More importantly, though, it showed you how you can dynamically assign functions to event handlers at run time, and then remove them when they are no longer needed. No more do we need to have constantly looping, or "polling", movieclips waiting for user interaction. Instead, we can create the loops when we need the loops, leading to more efficient movies and applications. Explore and enjoy!