flash interactivity_display_updates

It was in the Flash 5 player that the updateAfterEvent function was introduced. This function permitted to update the display of the player independently of the animation framerate. As soon as the updateAfterEvent function is called the player redraws all the vectors. In summary, the function updates the display between two key frames.

This function is only useful for functions which have nothing to do with the framerate of the animation. This is why that in ActionScript 3 only the MouseEvent, KeyboardEvent and TimerEvent have an updateAfterEvent method.

In order to optimise the display of strokes in our drawing application we force a refresh of the display within the mouseMove function:

function mouseMove ( pEvt:MouseEvent ):void
{
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// the cursor is moved to this position
// to start drawing from this position
myDrawing.graphics.lineTo ( positionX, positionY );
// force le rendu
pEvt.updateAfterEvent();
}

Here’s the final code of our drawing application:

// create container for vectorial strokes
var myDrawing:Shape = new Shape();
// add to the display list
addChild ( myDrawing );
// initialise the style properties
myDrawing.graphics.lineStyle ( 1, 0x990000, 1 );
// register for the MouseEvent.MOUSE_DOWN event of the stage
stage.addEventListener ( MouseEvent.MOUSE_DOWN, mouseClick );
// register for the MouseEvent.MOUSE_UP event of the stage
stage.addEventListener ( MouseEvent.MOUSE_UP, mouseRelease );
 
function mouseClick ( pEvt:MouseEvent ):void
{
// mouse position
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// the cursor is moved to this position
// to start drawing from this position
myDrawing.graphics.moveTo ( positionX, positionY );
// as soon as the mouse is moved we start to listen to it
pEvt.currentTarget.addEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
}
 
function mouseMove ( pEvt:MouseEvent ):void
{
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// the cursor is moved to this position
// to start drawing from this position
myDrawing.graphics.lineTo ( positionX, positionY );
// force the display update
pEvt.updateAfterEvent();
}
 
function mouseRelease ( pEvt:MouseEvent ):void
{
// unsubscribe from the MouseEvent.MOUSE_MOVE event
pEvt.currentTarget.removeEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
}

Without increasing the animation framerate we improve the display of the strokes. In preserving a reduced framerate, our application uses fewer resources without impacting performance.

Thanks to the frameRate property of the Stage class we can reduce the animations framerate. We specify:

stage.frameRate = 2;

With a reduced framerate of 2 frames per second our strokes remain fluid. Let’s take a look at another notion linked to interactivity, keyboard management.

Worth remembering

• Thanks to the updateAfterEvent method the display can be forced to update between 2 key frames.