Graffiti - ActionScript 3 Bitmap Drawing Library

Graffiti Library Overview >>

Tutorial: Getting Started with version 2.5

In this tutorial I'll go through setting up the Graffiti library within a Flash CS4 project.

Setting Up

Start by downloading the Graffiti Library and extract the contents of the zip file.

Browse to the 'source' directory and copy the 'com' folder and all it's contents to your project directory.

Create a new Flash CS4 (ActionScript 3) document and save it to your project directory.

If your FLA document and the 'com' folder are NOT in the same directory, you will need to add the location of the 'com' folder to the classpath.

Import Classes

You need to import a few classes before we can use the Graffiti Library.

import com.nocircleno.graffiti.GraffitiCanvas;
import com.nocircleno.graffiti.tools.BrushTool;
import com.nocircleno.graffiti.tools.BrushType;
import com.nocircleno.graffiti.tools.LineTool;
import com.nocircleno.graffiti.tools.LineType;
import com.nocircleno.graffiti.tools.ShapeTool;
import com.nocircleno.graffiti.tools.ShapeType;

Creating a Canvas

The GraffitiCanvas Class is the main component of the Graffiti Library. The GraffitiCanvas Class extends the Sprite Class so it can be added anywhere in the Display List.

There are 5 optional parameters we can set when creating a new instance of the GraffitiCanvas Class.

• Canvas Width -- default is 100 px
• Canvas Height -- default is 100 px
• Number of History Levels to keep -- default is 0
• A DisplayObject to lay over the canvas.
• A DisplayObject to lay under the canvas.

// create a canvas with a width and height that matches the stage dimensions
var canvas:GraffitiCanvas = new GraffitiCanvas(stage.stageWidth, stage.stageHeight);
addChild(canvas);

When we create a new instance of the GraffitiCanvas, a Brush instance is created and assigned as the active tool automatically.

Creating and Assigning Tools

Now that you have a canvas you may want to change the default Brush that is assigned. With the 1.1 release you can create additional Brushes, Lines, Rectangle, Square, Oval and Circle tools.

Creating a Brush

There are 6 optional parameters we can set when creating a new instance of the Brush Class.

• Brush Size -- default is 4
• Brush Color -- default is Black
• Brush Alpha -- default is 1 (fully opaque)
• Brush Blur -- default is 0 (no blur)
• Brush Type -- the BrushType Class defines the constant values for all brush types.
• Tool Mode -- the ToolMode Class defines the constant values for all Tool Modes. Use this to switch between drawing and easer functionality.

// create a diamond brush of size 8 and color red
var diamondBrush:BrushTool = new BrushTool(8, 0xFF0000, 1, 0, BrushType.DIAMOND);

Assign Tool to Canvas

We can use the activeTool property of the GraffitiCanvas Class to assign a Brush, Line or Shape instance.

// Set canvas active tool to use the diamond brush we just created.
canvas.activeTool = diamondBrush;

Creating a Line

There are 5 optional parameters we can set when creating a new instance of the Line Class.

• Line Width -- default is 4
• Line Color -- default is Black
• Line Alpha -- default is 1 (fully opaque)
• Line Type -- the LineType Class defines the constant values for all line types.
• Tool Mode -- the ToolMode Class defines the constant values for all Tool Modes. Use this to switch between drawing and easer functionality.

// create a dotted line of size 4 and grey
var dottedLine:Line = new Line(4, 0xBBBBBB, 1, LineType.DOTTED);

// Set canvas active tool to use the dotted line we just created.
canvas.activeTool = dottedLine;

Creating a Shape

There are 7 optional parameters we can set when creating a new instance of the Shape Class.

• Stroke Width -- default is 1
• Stroke Color -- default is Black. You can pass -1 for no Stroke.
• Fill Color -- default is White. You can pass -1 for no Fill.
• Stroke Alpha -- default is 1 (fully opaque)
• Fill Alpha -- default is 1 (fully opaque)
• Shape Type -- the ShapeType Class defines the constant values for all shape types.
• Tool Mode -- the ToolMode Class defines the constant values for all Tool Modes. Use this to switch between drawing and easer functionality.

// create a rectangle shape tool with grey stroke and a red fill.
var rectangleShape:ShapeTool = new ShapeTool(2, 0xBBBBBB, 0xFF0000, 1, 1, ShapeType.RECTANGLE);

// Set canvas active tool to use the rectangle shape tool we just created.
canvas.activeTool = rectangleShape;

Changing Tool Settings

You can change the properties for an instance of the Brush, Line or Shape Classes after they are created.

// create a dotted line of size 4 and grey
var dottedLine:LineTool = new LineTool(4, 0xBBBBBB, 1, LineType.DOTTED);

// Set canvas active tool to use the dotted line we just created.
canvas.activeTool = dottedLine;

// change dottedLine properties
dottedLine.lineWidth = 8;
dottedLine.color = 0xFF0000;

If you change a property of a Tool that is currently assigned to the Canvas then the Canvas is automatically updated.

Where to go from here...

As an ActionScript developer, you must create a UI to control tool setup and application. Use the Flash CS3 components to get started setting up a UI to let a user switch Tools and change properties like color and size.

In a later tutorial I'll go over some more advanced features and techniques.