flash mx drawing : 

drawing methods in movieClips

Flash MX has a new set of movieClip methods for drawing vector graphics while the Flash application is running. These methods allow for drawing lines, curves, filled shapes, as well as clearing the movieClip of any graphics drawn at run time (but not graphics created in the authoring tool). So rather than creating all graphics in the Flash authoring tool, graphics can be created interactively, either by the application, or under direct control of the user.

When using the drawing methods, the first task is to set the visual characteristics of the lines to be drawn. This uses the lineStyle() method. This method has the following form:

movieClipToBeDrawnOn.lineStyle(thickness, color, alphaLevel);

where:

• movieClipToBeDrawnOn - the clip where the drawing will occur
• thickness - the width of the line in pixels
• color - a standard web format color description in the form 0xRRGGBB
• alphaLevel - the transparency with a value from 0 (trasparent) to 100 (opaque)

An example use of this method would be to set the line to 5 pixels wide, a color of white, and fully opaque.

mc.lineStyle(5, 0xffffff, 100);

These methods draw with an imaginary pen that has an x,y position separate from the cursor. Lines or curves are drawn from the current pen position to a new position specified in the drawing command. To set the start point for the pen, use the moveTo() method. This method has the following form:

movieClipToBeDrawnOn.moveTo(x, y);

where:

• movieClipToBeDrawnOn - the clip where the drawing will occur
• x - the x position of the pen start point
• y - the y position of the pen start point

An example use of this method would be to move the start point to the current position of the mouse:

mc.moveTo(_root._xmouse, _root._ymouse);

To draw a line from the current pen location, use the lineTo() method. It has the following form:

movieClipToBeDrawnOn.lineTo(x, y);

where:

• movieClipToBeDrawnOn - the clip where the drawing will occur
• x - the x position of the line end point
• y - the y position of the line end point

An example use of this method would be to draw a line from the current pen position to the point 200,300:

mc.lineTo(200, 300);

any movieClip, but a blank one is usually best

It is possible to use these drawing methods on any movieClip. But if you draw on an existing clip, new graphics you create will be placed behind any graphics put in the movieClip in the authoring tool. Typically, the best approach is to use a blank movieClip for drawing. This can be accomplished with the createEmptyMovieClip() method at run time. The form of this method is:

movieClipToAttachNewClipTo.createEmptyMovieClip(newInstanceName, depth);

where:

• movieClipToAttachNewClipTo - the clip that will be the parent to the newly created clip
• newInstanceName - a unique name for the new movieClip
• depth - a unique positive integer for the instance depth - the higher the number more in front the instance will be on the stage.

An example use of this method would be to create an empty clip attached to the main timeline:

_root.createEmptyMovieClip("drawing_mc", 1);

example : 

drawing in a movieClip

The following example uses a rectangle shaped movieClip (in black) acting as a button to initiate the drawing. The actual drawing is not happening in the black clip, but in a new blank clip that's in front of the black clip.

drawing.fla

create a blank movieClip and draw on it by dragging the mouse

All of the code for this example is in the black rectangle movieClip, but all the drawing occurs in a new clip called drawing_mc. Here's the code:

onClipEvent(load) {
    _root.createEmptyMovieClip ("drawing_mc", 1);
    _root.drawing_mc.drawing = false;
    _root.drawing_mc.lineStyle(5, 0xffffff, 100);
}
on (press) {
    _root.drawing_mc.moveTo(_root._xmouse, _root._ymouse);
    _root.drawing_mc.drawing = true;
}
on (release, releaseOutside, dragOut) {
    _root.drawing_mc.drawing = false;
}
onClipEvent (mouseMove) {
    if (_root.drawing_mc.drawing) { // if we are allowed to draw
        _root.drawing_mc.lineTo(_root._xmouse, _root._ymouse);
        _root.drawing_mc.moveTo(_root._xmouse, _root._ymouse);
        updateAfterEvent();
    }
}

load event: The initialization code is place in a load clip event handler, which is run only once when the movieClip is first loaded. This code first creates the new empty movieClip with a name of "drawing_mc", and a depth of 1.

_root.createEmptyMovieClip ("drawing_mc", 1);

The next line of code initializes a switch variable that determines if drawing will occur or not. This switch, arbitrarily named "drawing", is set to false, which prevents the drawing code from running. It is turned on by a mouse press, and turned off by a mouse release.

_root.drawing_mc.drawing = false;

The last line of this load event handler sets the line width to 5 pixels, color to white, and alpha to completely opaque:

_root.drawing_mc.lineStyle(5, 0xffffff, 100);

press event: Drawing is enabled when the user presses the mouse. The first line in this event handler sets the pen start position to the current position of the mouse, so the drawing appears to come from the mouse.

_root.drawing_mc.moveTo(_root._xmouse, _root._ymouse);

The next line turns the switch to on (i.e. true) so the mouseMove event handler is allowed to draw.

_root.drawing_mc.drawing = true;

release event: Drawing is disabled when the mouse is released in or out of the movieClip, or even if the mouse is held down, but dragged outside the movieClip. This is accomplished by turning the switch variable off (i.e. false).

_root.drawing_mc.drawing = false;

mouseMove event: The actual drawing occurs each time the mouse is moved, as long as the mouse button is pressed. The if statement tests the switch varible, and if its value is true, the drawing can occur.

if (_root.drawing_mc.drawing) { // if we are allowed to draw

The next line does the actual drawing, making a line from the pen start position to the current location of the mouse.

_root.drawing_mc.lineTo(_root._xmouse, _root._ymouse);

Once the line has been drawn, the next line of code resets the pen start position to the current mouse position. This prepares the pen start for the next time a line is drawn by saving the position for end of the line just drawn.

_root.drawing_mc.moveTo(_root._xmouse, _root._ymouse);

The last statement forces Flash to redraw the screen, even if it is between frames. This ensures the lines are displayed as soon as they are drawn, rather than waiting for the next frame of the movie.

updateAfterEvent();

from Flash Help

all materials on this web site © copyright 2003, Philip van Allen