Flash Painting Program

Category: Adobe Flash Tutorials
Added: 03/30/2007
Views: 172,134
Category: Adobe Flash Tutorials
Added: 03/30/2007
Views: 172,134
Create a simple painting program in Adobe Flash. This tutorial will create the Flash object below: (Click and drag to paint)
Here is a canvas texture to paint on. For the tutorial, right click and download the image provided below:
Open Adobe Flash and Modify the Document Properties.
Modify > Document
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'
Giving the MovieClip a Linkage Identifier allows us to reference the MovieClip with Actionscript. You will see in next step.
Leave the MovieClip instance currently on Stage.
Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions
Enter the following code:
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.
Enter the following code:
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.
Enter the following code:
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.
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.
Enter the following code:
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.
Create a button, name the instance 'clear_btn' and enter the following code in Frame 1 of the Main Timeline:
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...
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.
Tourism Website & Interactive Map
Why should you visit the Maine Androscoggin County?
Poster 18" x 36"
The Arnold Expedition's Route from the Kennebec River to Lac-Mégantic in 1775
"The Internet is very important to my work, I travel the world to bring my music to people and the computer keeps them in touch with my manager and booking agent. I have found many of my long lost friends and past band members this way. The clubs can find me too."
- Eddie Kirkland, Blues Musician, Geogia, USA