Learn Flash Programming – Make a Drawing Program

Flash Programming Tutorial

In this tutorial we will create an Adobe Flash drawing program using Actionscript 3.0. It was to be a real paint program, but it is very simple and a good project a beginner can start on.

It will consist of a canvas where the user will be able to draw. There is also a color palette and line thickness settings. To optimally follow this tutorial, you should have a basic knowledge of Flash (MovieClips, Buttons, instance names, etc…) and a bit of Actionscript 3.0 Flash Programming would not hurt.

But, even if you are a beginner, follow the tutorial step by step, and just copy and paste the code. You will learn how to create a color palette and brush sizes, and then give them names that can be used in the actionscript code when the program is running. Before long, you will learn how to program Flash apps in no time.

 

Download the app for Flash player here:

flash_paint.zip

Watch the Video:

 

Step 1)

Set up the scene roughly with this layout. Two layers, 1 and 2.

 

On the top left there is a “New Image” button. This should be a button symbol.

Click it, then In the Properties tab, give it the name btnNewImage.

 

 

Below that there is a text field with the text “Brush Size” and next to that there are 2 arrow buttons. Give the up button instance the name btnSizeUp and the down button instance btnSizeDown.

 

 

Next to these arrows there is a Dynamic textfield. Give it the name txtBrushSize. You should also embed its font.

 

 

On the middle left there is the color palette. Each color should be represented with a unique Button instance. I actually only created one symbol and just added tint filters to change the color:

The example image shows the tint effect for the black color button. The names go as follows (From top to the right and then downwards):

btnBlack

btnGreen

btnRed

btnYellow

btnLightBlue

btnDarkBlue

 

The Canvas instance in the middle will be assigned the name mcCanvas.

 

Step 2)

In Step 2 we will set up the basic code. To see where the code is put, press F9 to bring up the Actions window. It starts on Layer 2 : Frame 1.

 


import flash.events.MouseEvent;

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

var drawingMode:Boolean = false;

var image:Shape = new Shape();

updateLineStyle();

var currentThickness:uint = 1;

const MAX_THICKNESS:uint = 5;

var currentColor:Number = 0x000000;

addChild(image);

function mouseDownHandler(event:MouseEvent):void

{

     if (mcCanvas.hitTestPoint(mouseX, mouseY, true))

     {

           drawingMode = true;

           image.graphics.moveTo(mouseX, mouseY);

     }

}

function mouseUpHandler(event:MouseEvent):void

{

     drawingMode = false;

}

function mouseMoveHandler(event:MouseEvent):void

{

     if (drawingMode)

     {

           if (mcCanvas.hitTestPoint(mouseX, mouseY, true))

           {

                image.graphics.lineTo(mouseX, mouseY);

           }

     }

}

btnNewImage.addEventListener(MouseEvent.CLICK, newImageClick);

function newImageClick(event:MouseEvent):void

{

     image.graphics.clear();

     updateLineStyle();

}

function updateLineStyle():void

{

     image.graphics.lineStyle(currentThickness, currentColor);

}

So we start by importing the MouseEvent class. Then we add event listeners for clicking, releasing the mouse and moving the mouse.

This variable will indicate whether or not the user is currently drawing.

var drawingMode:Boolean = false;

This Shape instance will contain the image the user is drawing.

var image:Shape = new Shape();

This function updates the line style in terms of thickness and color. Its full body is located a bit below.

updateLineStyle();

var currentThickness:uint = 1;

The current line thickness and the thickness limit.

const MAX_THICKNESS:uint = 5;

The line color variable. Represented in a Hex color code.

var currentColor:Number = 0x000000;

Adding the image Shape on the stage so that the user will be able to see it.

addChild(image);

In the mouseDownHandler function we check whether the user has placed the cursor inside the canvas, which is done with the hitTestPoint function.

image.graphics represents the procedural graphics of the shape.

image.graphics.moveTo(mouseX, mouseY); moves the new procedural drawing starting point to the location of the cursor.

Similarly, image.graphics.lineTo(mouseX, mouseY); draws a line from where the current drawing position is to the new location of the cursor. This happens when the cursor moves(mouseMoveHandler).

The newImageClick handler clears the current graphics (image.graphics.clear();).

The updateLineStyle function sets the style of the drawing using the values of the currentThickness and currentColor variables.

image.graphics.lineStyle(currentThickness, currentColor);

 

Step 3)

In Step 3 we will add the color and thickness settings.


btnBlack.addEventListener(MouseEvent.CLICK, blackClick);

function blackClick(event:MouseEvent):void

{

     currentColor = 0x000000;

     updateLineStyle();

}

 

btnGreen.addEventListener(MouseEvent.CLICK, greenClick);

function greenClick(event:MouseEvent):void

{

     currentColor = 0x009933;

     updateLineStyle();

}

 

btnYellow.addEventListener(MouseEvent.CLICK, yellowClick);

function yellowClick(event:MouseEvent):void

{

     currentColor = 0xFFFF66;

     updateLineStyle();

}

 

btnRed.addEventListener(MouseEvent.CLICK, redClick);

function redClick(event:MouseEvent):void

{

     currentColor = 0xFF0000;

     updateLineStyle();

}

 

btnLightBlue.addEventListener(MouseEvent.CLICK, lightBlueClick);

function lightBlueClick(event:MouseEvent):void

{

     currentColor = 0x00CCFF;

     updateLineStyle();

}

 

btnDarkBlue.addEventListener(MouseEvent.CLICK, darkBlueClick);

function darkBlueClick(event:MouseEvent):void

{

     currentColor = 0x0033CC;

     updateLineStyle();

}

 

When the user clicks on one of the colors, the currentColor variable needs to change.

This is very simple and is done like this (in the above code):

btnBlack.addEventListener(MouseEvent.CLICK, blackClick);

function blackClick(event:MouseEvent):void

{

currentColor = 0x000000;

updateLineStyle();

}

0x000000 represents black. The hex codes for the other colors are of course different.

 

Step 4: Brush Thickness

We need to make the arrows next to the Brush Size textField change the variable currentThickness. We also need to change the dynamic text field next to it.


btnSizeUp.addEventListener(MouseEvent.CLICK, sizeUpClick);

function sizeUpClick(event:MouseEvent):void

{

     currentThickness = Math.min(MAX_THICKNESS, currentThickness + 1);

     updateLineStyle();

     txtBrushSize.text = String(currentThickness);

}

 

btnSizeDown.addEventListener(MouseEvent.CLICK, sizeDownClick);

function sizeDownClick(event:MouseEvent):void

{

     currentThickness = Math.max(1, currentThickness - 1);

     updateLineStyle();

     txtBrushSize.text = String(currentThickness);

}

Step 5)

Now we are Ready to draw. This is a simple paint program to illustrate basic Actionscript programming, not a functional paint program 😉

I hope you liked this tutorial and have learned the basics of how to program in Flash. Expand on the project. Create a bucket fill, or more colors and brushes.

 

More Flash Tutorials:

Share, Tweet, or give a thumbs up: