Flash Painting Program

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 03/30/2007
Views: 153,980

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 : Library Informational Website Phillips Public Library

Library Informational Website
New site for a recently digitized library in Maine.

Print & Graphic Design : DVD Design Alaska Folk Festival

DVD Design
Continuous

Web Development : Interactive Trail Map Directory Maine Trail Finder

Interactive Trail Map Directory
Discovering trails in Maine just got a lot easier!

Testimonials

"The website www.MaineTrailFinder.com recently received top honors in a national competition. CCGIS worked with the Portland-based company, Pixel Hive Design, and its principal, Maxwell Langdon, to program and implement the Maine Trail Finder Website. "This award would not have been possible without Pixel Hive Design's skill and creativity, not to mention Maxwell's own personal interest in the value this website has for Maine," Engle said."

- Franklin Journal - Friday, April 1, 2011
View More Testimonials

More Tutorials!