1. Home
  2. Computing & Technology
  3. Animation

Deconstructing the Paint Application II: The Brush Tool & the Flash Drawing API

By Adrien-Luc Sanders, About.com

7 of 9

Defining Brush Behavior When the Mouse is Pressed, Intro to the Drawing API

Now we get to the real meat of things: making the brush tool draw. We need to define three behaviors: when the mouse is pressed, when the mouse is dragged, and when the mouse is released. Let’s look at the mouse press behavior first:

An onClipEvent detects when the mouse button is pressed, and sets a variable called draw to a value of “true”. Then it assigns the x and y positions of the mouse cursor to variables.

Let’s look at the Flash Drawing API; it lets you draw dynamically in a published SWF. The API can draw either lines or curves, and you can connect those lines and curves to create rectangles or ovals. To break down the drawing API commands that we’ve used here:

_root.drawing.lineStyle(_root.base.bsize, _root.currentcolor, _root.base.opac) ;

Remember that empty movie clip? We’re drawing inside that clip, and using lineStyle to set the attributes. The parameters of lineStyle are the size of the line, the color, and the opacity, which can be entered either as values or as variables.

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

This moves the movie clip “drawing” to the same x and y position of the mouse using moveTo. It does exactly what it says, with its only parameters being an x and y coordinate. This is the starting point of the line.

Next an if statement checks to make sure that the brush is the active tool and the help file isn’t visible, and then does the following:

_root.drawing.lineTo (_root._xmouse-1,_root._ymouse-1) ;

lineTo draws a line from the starting point defined in moveTo to the coordinates defined by lineTo’s parameters. In this case all I’ve done is create a one-pixel line so that users can “speckle” draw even if the mouse cursor isn’t moved.

Explore Animation
About.com Special Features

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Easy ways to connect two computers for networking purposes. More >

  1. Home
  2. Computing & Technology
  3. Animation
  4. Flash Animation Tutorials
  5. Deconstructing the Paint Application II: The Brush Tool and the Flash Drawing API

©2009 About.com, a part of The New York Times Company.

All rights reserved.