flash interactivity_practice

To put into practice the notion of global events we’re going to create a drawing application whereby the user can draw on the screen using the mouse. The first step in creating this type of application is to make use of the drawing features offered by the graphics property of all flash.display.DisplayObject objects.

Note that the drawing API is no longer directly available via the MovieClip class, but instead via the graphics property of all DisplayObjects

In a new Flash CS3 document we’re going to familiarise ourselves with the drawing API. Contrary to the API available in ActionScript 1 and 2 (which appear limited), the ActionScript 3 version has been greatly improved.

To allow us to draw we’re going to create a basic DisplayObject, and for this we need to look at the flash.display.sprite class:

// create container for the vectorial strokes
var myDrawing:Shape = new Shape();
// add to the display list
addChild ( myDrawing );

We’re going to reproduce the same mechanism that allows us to start drawing from the moment the mouse is clicked. The first event to listen to is the MouseEvent.MOUSE_DOWN event, to detect the first click and to move the origin to this position:

// create container for the vectorial strokes
var myDrawing:Shape = new Shape();
// add to the display list
addChild ( myDrawing );
// register for the MouseEvent.MOUSE_DOWN event of the stage
stage.addEventListener ( MouseEvent.MOUSE_DOWN, mouseClick );
 
function mouseClick ( pEvt:MouseEvent ):void
{
// mouse position
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
}

With each mouse click we get the mouse position and move the origin using the moveTo method:

// create container for the vectorial strokes
var myDrawing:Shape = new Shape();
// add to the display list
addChild ( myDrawing );
// register for the MouseEvent.MOUSE_DOWN event of the stage
stage.addEventListener ( MouseEvent.MOUSE_DOWN, mouseClick );
 
function mouseClick ( pEvt:MouseEvent ):void
{
// mouse position
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// the origin is move to start drawing at this position
myDrawing.graphics.moveTo ( positionX, positionY );
}

For the moment nothing actually drawn when we click the mouse as all we’ve done is move the origin in our theoretical example but we don’t yet tell it to draw anything. So to draw something we repeated call the lineTo method while the mouse is moving. So we need another new event. The first thing to add is the listening of the MouseEvent.MOUSE_MOVE event which allows us to execute a function while the mouse is being moved:

// create container for the vectorial strokes
var myDrawing:Shape = new Shape();
// add to the display list
addChild ( myDrawing );
// register for the MouseEvent.MOUSE_DOWN event of the stage
stage.addEventListener ( MouseEvent.MOUSE_DOWN, mouseClick );
 
function mouseClick ( pEvt:MouseEvent ):void
{
// mouse position
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// the origin is move to start drawing at this position
myDrawing.graphics.moveTo ( positionX, positionY );
// while the mouse is being moved we listen to the event
pEvt.currentTarget.addEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
}
 
function mouseMove ( pEvt:MouseEvent ):void
{
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// the origin is move to start drawing at this position
myDrawing.graphics.lineTo ( positionX, positionY );
}

If we test the previous code, no lines appear because we haven’t defined a style for the line using the lineStyle method of the Graphics class:

// initialisation of the line style
myDrawing.graphics.lineStyle ( 1, 0x990000, 1 );

To stop drawing when the user releases the mouse we need to stop listening to the MouseEvent.MOUSE_MOVE when the MouseEvent.MOUSE_UP event is trigerred.

// register for the MouseEvent.MOUSE_UP event of the stage
stage.addEventListener ( MouseEvent.MOUSE_UP, mouseRelease );
 
function mouseRelease ( pEvt:MouseEvent ):void
{
// unsubscribe from the MouseEvent.MOUSE_MOVE event
pEvt.currentTarget.removeEventListener ( MouseEvent.MOUSE_MOVE, mouseMove );
}

Everything works well, but looking closer the display is not very fluid. If we increase the frame rate of the animation to approximately 60 frames per second we see that it become more fluid. Nevertheless there is a much better method, more optimised for refreshing the display. We’re going to integrate this into our application.

Worth remembering

• The Stage object allows us to listen globally to mouse events.