a No Circle No! Project

Graffiti ActionScript 3 Bitmap Drawing Library

Graffiti 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 from Github.

Extracted File

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

Class Directory

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

New Flash CS4 ActionScript 3 document.

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.

// 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.
// 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.
// 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;

Creating a Shape

There are 7 optional parameters we can set when creating a new instance of the Shape Class.
// 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.