Flash Painting Program

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 03/30/2007
Views: 155,049

Flash Painting Program

Tutorial Goal

Create a simple painting program in Adobe Flash. This tutorial will create the Flash object below: (Click and drag to paint)

Recommended Resources

Here is a canvas texture to paint on. For the tutorial, right click and download the image provided below:

Canvas Texture

Step 1 : Document Setup

Open Adobe Flash and Modify the Document Properties.
Modify > Document

Document Settings

Step 2 : Import and Create Background Object

Import the supplied canvas.jpg onto the Stage.
File > Import > Import to Stage...

Convert the image on Stage to a MovieClip with a Linkage Identifier.
Modify > Convert to Symbol
Name: canvas_mc
Check: 'Export for ActionScript'

Convert to Symbol

Giving the MovieClip a Linkage Identifier allows us to reference the MovieClip with Actionscript. You will see in next step.

Step 3 : Attaching a MovieClip with ActionScript

Leave the MovieClip instance currently on Stage.

Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions

Enter the following code:

Actionscript Code 0

Line 1: Attaches an instance of the Canvas to the stage at level 2.
Line 2: Makes the new canvas 50% transparent. This will make the 'paint' appear as if it were on canvas.

Step 4 : Create a MovieClip to contain the painting.

Enter the following code:

Actionscript Code 1

Line 4: Creates an empty MovieClip below the transparent canvas.
The painting happens between the canvas on stage and the attached transparent canvas to create the desired effect.

Tutorial Diagram 0
Flash Den

Step 5 : Creating the Paint Brush Listener for the Mouse.

Enter the following code:

Actionscript Code 2

Line 6: Create an Object to attach our brush functions.
Line 7: Define a onMouseDown method for the brush object. This method is activated whenever the mouse button is pressed down. aka. User wants to start painting.
Line 8: Define a Boolean variable to track when the user is painting.
Line 9: Move the brush to the mouse position.
Line 10: Draw a 1 pixel line to the right. We do this so that dots can be painted. Without this line the paint will not show up if a user simply clicks.
Line 11: End the method definition.

Actionscript Code 3

Line 12: Define a onMouseMove method for the brush object. This method is activated whenever the mouse is moving.
Line 13: If the mouse button is down then isPainting will be true. Line 14: If true, then we draw a line to the current mouse position. If false, then do nothing.
Line 15-16: End the If statement and onMouseMove method.

Actionscript Code 4
Line 17: Define a onMouseUp method for the brush object. This method is activated whenever the mouse button is released. aka. User wants to stop painting.
Line 18: Set the isPainting variable to false. Now the onMouseMove method stops drawing a line to the Mouse position. When the user presses down on the Mouse the isPainting variable toggles back to true.
Line 19: End the onMouseUp method.
Line 20: Attach theBrush Object to the Mouse as a Listener. Basically, this lets Flash know to listen to what the Mouse is doing and execute the methods we defined.

Step 6 : Define the Paint attributes and randomize for effect.

Enter the following code:

Actionscript Code 5

Line 22: Attach an onEnterFrame function to our painting MovieClip. This will execute every frame or 30 times a second.
Line 23: Generate a random number between 2 & 12. This will be the width of our paint line for that frame in time.
Line 24: Set the style of our painting line.
1st parameter, ranWidth : is the width of the line.
2nd parameter, 0x0066CC : is the RBG color of the line.
3rd parameter, 100 : is the alpha (transparency) of the line.
Line 25: End the onEnterFrame function.

Step 7 : Adding the Clear painting button.

Create a button, name the instance 'clear_btn' and enter the following code in Frame 1 of the Main Timeline:

Actionscript Code 6

Concluding Statements

Save and test out your simple painting program. From here you can begin to add features, such as more colors, different canvas options, brush sizes, etc. Maybe I should make this into a series of tutorials...

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Flash Painting Program" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Database Analysis & Management School Marketing System

Database Analysis & Management
Target Specific School Demographics

Print & Graphic Design : Menu & Marketing Cherries Cafe

Menu & Marketing
Internet Night Cafe

Web Development : Marketing Site & 3D eBay Template Sabertron Toys Site and eBay Templates

Marketing Site & 3D eBay Template
eBay Powerseller's Website & Advanced Listing Tools


"We were looking for a company that could work with us and develop our ideas into an attractive, informative, and easy-to-use web page for our constituents. The web page is now complete, and I have to say that Pixel Hive Design did an outstanding job in accomplishing the task. Based on our initial ideas, they provided a set of designs for our review and revised them multiple times, each time improving the outcome. The company showed great flexibility and patience to make sure that we were happy and satisfied with the final product."

- Professor and Chair, Electrical and Computer Engineering Department, University of Maine
View More Testimonials

More Tutorials!