AS3 How-Tos and Tips > How to Display 'Please wait' Message on Mouse Click

Flash Player is becoming faster and faster. Yet, often you want to display a 'Please wait...' message or an hour glass after the user clicks a button. Namely, when executing a click takes a while. Displaying a message is not as easy as it might seem because the Flash Player will not update the screen while a block of code is executing. Thus, putting the code that makes 'Please wait' message visible or invisible within a MOUSE_CLICK handler will not work. In this How-To we give a solution to the problem and discuss code excution and screen updates.

Download

Download the well-commented source file corresponding to the movie above, waitshow.fla.

What We Want To Accomplish

In the applet above we are drawing and redrawing a curve as the user clicks the Draw button, btnDraw. For reasons explained below, it takes a little while for the curve to render after each click. As the curve is rendering, we would like to display a message to the user 'Please wait...'. We created a MovieClip on the Stage that contains the message, called in the script 'wait'. We want the message to be visible during rendering, and invisible otherwise. Sounds simple enough. The first idea is to use the code as presented in the next section.

The Code That Will Not Work

The function defined in the script that draws the curve and takes a while to execute is called 'drawCurve'. We try the following code:

btnDraw.addEventListener(MouseEvent.CLICK,btnDrawClick);

 

function btnDrawClick(e:MouseEvent):void {

wait.visible=true;

drawCurve();

wait.visible=false;

}

Our message never shows. Why? The Flash Player will not update the screen while a block of code is being executed. 'wait.visible' will be set to true, but without updating the screen 'wait' will not show. The screen will be updated after the block within 'btnDrawClick' function finished executing; that is, when the curve is on screen and wait.visible=false.

The Code That Does Work

The idea is to use MOUSE_DOWN and MOUSE_UP events instead of MOUSE_CLICK. This way we have two separate blocks of code, a screen update will happen and show our message.

Below is the code. The listener is added to 'stage' in case the user presses the mouse over the Draw button but then moves the mouse away without releasing the button. (We imitate the AS2 onReleaseOutside event.)

btnDraw.addEventListener(MouseEvent.MOUSE_DOWN,btnDrawDown);

 

function btnDrawDown(e:MouseEvent):void {

curve.graphics.clear();

wait.visible=true;

stage.addEventListener(MouseEvent.MOUSE_UP,btnDrawUpOrOutUp);

}

 

function btnDrawUpOrOutUp(e:MouseEvent): void {

wait.visible=false;

stage.removeEventListener(MouseEvent.MOUSE_UP,btnDrawUpOrOutUp);

}

 

btnDraw.addEventListener(MouseEvent.MOUSE_UP,btnDrawUp);

 

function btnDrawUp(e:MouseEvent):void {

drawCurve();

wait.visible=false;

}

Other Interesting Aspects of the Code

The snippets in the previous section are, of course, only portions of the code in waitshow.fla. You can see the rest by downloading the file from the link above.

The function 'drawCurve' is interesting. At first, the function draws our parametric curve by joining 5,000 points on the curve by lineal elements. Despite a large number of points the code executes quickly and our message barely flashes. So within 'drawCurve' we add some irrelevant but lengthy calculations. The calculations follow the code that renders the curve so the curve should appear before the calculations end. Not so. The screen will not be updated until 'drawCurve' together with the irrelevant calculations finishes executing. (It is the amount of those calculations that the arrow buttons control. We added this functionality to accomodate faster and slower machines.)

Antoher aspects of the code that you may find interesting is pastel colors generated randomly. The standard way of choosing a random color is: Math.random()*0xFFFFFF. That may produce very dark colors or colors that are too vibrant. Our code shows how to randomly generate light pastels. We will elaborate on that topic in another How-To.

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.