Simple Flash Paint Program

This is a simple Flash based paint program that shows how fully functional applications can be put together quickly and deployed to the web for easy access – this example is coded using ActionScript 2.0. This is the great thing about Flash, the immediate availability of content. Once it has been created, all you have to do is embed the Flash file into a web page – and that’s it! No installation needed to be done by the user, they can use the application straight away.

Here below, we have a paint application that can be used to create a drawing by using the mouse. Different colours are available, and the line thickness and opacity can be controlled. The user can also clear the picture and start again!

Try it now! Click on the canvas and drag the mouse around. Select different colours and line properties. Enjoy!

The core code needed to render the canvas area is shown below:

function onMouseDown():Void
{
	var xm:Number = _xmouse;
	var ym:Number = _ymouse;
	if( xm >= rb){ xm = rb; }
	if( xm <= lb){ xm = lb+1; }	
	if( ym >= bb){ ym = bb; }	
	if( ym <= tb){ ym = tb+1; }	
	canvas_mc.lineStyle(thickness, cl, opacity);
	canvas_mc.moveTo( xm, ym);
	onMouseMove = draw;
}

function draw():Void
{
	var xm:Number = _xmouse;
	var ym:Number = _ymouse;
	if( xm >= rb){ xm = rb; }
	if( xm <= lb){ xm = lb+1; }	
	if( ym >= bb){ ym = bb; }	
	if( ym <= tb){ ym = tb+1; }	
	canvas_mc.lineTo( xm, ym);
}

Without going into too much detail about all the variables used in the event handler 'onMouseDown', and function 'draw', the code works by rendering the canvas area with a new line when the user clicks (and moves) the mouse over the canvas area.

When the mouse button is depressed then the code inside the 'onMouseDown' event is executed. Some information about the current location of the mouse and the line properties are stored, and then the line is only drawn if the mouse is moved, whilst clicked over the canvas area. Simple really! :)

This entry was posted in Flash, Graphics and tagged , , , , , , , , . Bookmark the permalink.

10 Responses to Simple Flash Paint Program

  1. Allison says:

    This isn’t enough information to create the application, what else is needed? Where does the code go? How do you set up the buttons and bars to alter the weight, color and opacity of the colors?

  2. David says:

    This example is only really a teaser of what can be bolted together with Flash very quickly. It wasn’t meant as a ‘How to create a Flash Paint Program’ tutorial.

    Maybe I can do something like this if there is sufficient demand. Currently we are looking at C#, WPF, Silverlight etc. so perhaps something similar in Silverlight could be arranged. :)

    Any thoughts, do share!

    David

  3. Michael says:

    Any chance of seeing the full code for this to have a play about with?

  4. Nate says:

    Worse tutorial ever my friend…would be nice to have a TON more info on how to do this……..

  5. David says:

    Ummm, see my comment from a few months ago. It is not meant to be a tutorial as such, more of a demo of the sort of thing we have been developing!!

  6. Pingback: links for 2009-09-10 | On9 Systems

  7. Robin Åhlgren says:

    Hello David!
    We are a group of 4 Hyper Island students and we are making a project where we are making a mash up with kids -> education -> expression -> interactive whiteboard and a IR-glove.
    There’s gonna be an exhibition held in Stockholm and maybe one in London. We are now in a hurry and we really need a simple paint game for the kids and what you have created here would be perfect! So we are wondering if you’ve got the whole file to send? It would be so nice of you! We will of course have your name written as a sponsor on both exhibitions.

    Thanks!
    //Robin Åhlgren and the Wii-Zards
    http://thewii-zards.blogspot.com/

  8. nhotz says:

    please show us the tutorial.

  9. Simon says:

    Yes, please provide a tutorial. Pls, Pls, Pls, grovel, grover, grovel

  10. Giorgio says:

    Hi

    I would like to found a tutorial to make the same, identic Flash Paint below…so simple…white and nothing more. I’m not founding anything,

    can you HeLp me please to found something useful to create it?

    Thanks a lot for your time

    Best Regards,

    Giorgio

Leave a Reply

Your email address will not be published.