Mike T. Henderson

Interactive Design & Art Direction

AS3 Drawing App

Mar 25 2008

This is a simple little drawing app class I call draw.Pencil. It allows full custom ability to define the stroke width, alpha, color, cap, scaleMode, and the ability to clear on each mouse press. Right now it only allows said parameters to be defined when the instance is created. The next version will allow for change in parameters to be made on the fly.

draw.Pencil is called as follows:

import com.mikethenderson.draw.Pencil;
var myPencil:Pencil = new Pencil({
strokeWidth:20,
strokeColor:0xff9900,
strokeAlpha:.5,
pressClear:true
});
addChild(myPencil);

Complete List of Parameters:

  1. strokeWidth:Number — pixel width of stroke (default 1)
  2. strokeColor:uint — hex number of stroke (default 0x000000)
  3. strokeAlpha:Number — number between 0 and 1 defining alpha of stroke (default 1)
  4. pressClear:Boolean — boolean defining whether or not to clear the graphics display object on mouse press (default false)
  5. pixelHinting:Boolean — A Boolean value that specifies whether to hint strokes to full pixels (Default true — Though I'm not sure how much value changing pixelHinting for something like this would add, but I added to play with anyway)
  6. scaleMode:String — A value from the LineScaleMode class that specifies which scale mode to use:
    • LineScaleMode.NONE (DEFAULT) — Never scale the line thickness.
    • LineScaleMode.NORMAL—Always scale the line thickness when the object is scaled
    • LineScaleMode.VERTICAL—Do not scale the line thickness if the object is scaled vertically only.
    • LineScaleMode.HORIZONTAL—Do not scale the line thickness if the object is scaled horizontally only.
  7. caps:String — A value from the CapsStyle class that specifies the type of caps at the end of lines.
    CapsStyle.NONE, CapsStyle.ROUND(DEFAULT), and CapsStyle.SQUARE.
package com.mikethenderson.draw {
 
import flash.display.*;
import flash.events.*;
 
public class Pencil extends Sprite { // create var for drawing mode
private var _drawing:Boolean;
private var _strokeWidth:Number;
private var _strokeColor:uint;
private var _strokeAlpha:Number;
private var _pressClear:Boolean;
private var _pixelHinting:Boolean;
private var _scaleMode:String;
private var _caps:String;// constructor
public function Pencil ( args:Object ) { init( args ); }
 
// after constructed, run it
private function init( args:Object ):void {
 
// set defualts
_strokeWidth = ( args.strokeWidth != undefined ) ? args.strokeWidth : 1;
_strokeColor = ( args.strokeColor != undefined ) ? args.strokeColor : 0x000000;
_strokeAlpha = ( args.strokeAlpha != undefined ) ? args.strokeAlpha : 1;
_pressClear = ( args.pressClear != undefined ) ? args.pressClear : false;
_pixelHinting  = ( args.pixelHinting != undefined ) ? args.pixelHinting : true;
_scaleMode  = ( args.scaleMode != undefined) ? args.scaleMode : LineScaleMode.NONE;
_caps = ( args.caps != undefined ) ? args.caps : CapsStyle.ROUND;
 
// drawing is false until user presses.
_drawing = false;
 
// add stage to the display object
addEventListener( Event.ADDED_TO_STAGE, addEventListeners );
 
}
 
private function addEventListeners(event:Event):void {
 
// add mouse listeners
stage.addEventListener( MouseEvent.MOUSE_DOWN, startDrawing );
stage.addEventListener( MouseEvent.MOUSE_MOVE, draw );
stage.addEventListener( MouseEvent.MOUSE_UP, stopDrawing );
 
}
 
public function startDrawing( event:MouseEvent ):void {
 
// if pressClear == true then clear
if ( _pressClear == true ) {
graphics.clear();
}
 
// define lineStyle
graphics.lineStyle( _strokeWidth, _strokeColor, _strokeAlpha, _pixelHinting, _scaleMode, _caps );
 
// define starting point
graphics.moveTo( mouseX, mouseY );
_drawing = true;
 
}
 
public function draw( event:MouseEvent ):void {
 
// if drawing is still true, continue
if ( _drawing ) {
graphics.lineTo( mouseX, mouseY );
}
 
}
 
public function stopDrawing( event:MouseEvent ):void {
 
// reset
_drawing = false;
 
}
 
// create function to clear at will
public function clearStage():void {
graphics.clear();
}
 
}
}
1 Posted under: Drawing API

One Response

  1. Alex says:

    Your blog is interesting!

    Keep up the good work!

Leave a Reply