06.05Create your own Drawing Pad - part 1
Lets create a little drawing tool, where we’ll be able to draw, pick colours from a colour palette and print and save our drawings! Firstly lets open a new file, and set the FPS to 30. Now lets draw a pencil as our custom cursor, just to make it look nicer, and give it the instance name of “pencil”. Now lets add some drawing code!
Mouse.hide(); //hide the mouse this.createEmptyMovieClip("drawing", 1); //create the empty movie clip we'll be drawing into drawing.lineStyle(5, 0x000000, 100); //set the thickness, colour and alpha of the lnie var isDrawing:Boolean = false; //this variable will state if we're drawing or not pencil.swapDepths(2); //make sure the pencil is not covered by the drawing function onEnterFrame() { pencil._x = _xmouse; pencil._y = _ymouse; //make the pencil's x and y position the same as the mouse if (isDrawing) { //if the drawing variable is true drawing.lineTo(_xmouse, _ymouse); //draw to the mouse } } function onMouseDown() { drawing.moveTo(_xmouse, _ymouse); //move the drawing to the mouse isDrawing = true; //draw when the mouse is down } function onMouseUp() { isDrawing = false; //stop drawing when the mouse is up }
Now as you can probably see we draw when the mouse is down, and we stop drawing when the mouse is released. Then whenever the mouse is pushed down (after being up) we move the drawing to the mouse, otherwise all the lines would join together. Simple enough. Now we’ll make different brush sizes!
Lets make a slider to change the brush size. Firstly we need to draw this slider and give it the instance name of “slider”. Underneath draw a bar for the slider to slide along, and call it “slider_bar”. Alright, now on the frame change your code to this:
Mouse.hide(); //hide the mouse this.createEmptyMovieClip("drawing", 1); //create the empty movie clip we'll be drawing into var brush_size:Number = 5; //our variable for the brush size drawing.lineStyle(brush_size, 0x000000, 100); //set the thickness, colour and alpha of the line slider._x = slider_bar._x+brush_size; //put the slider abr in the right position var isDrawing:Boolean = false; //this variable will state if we're drawing or not pencil.swapDepths(2); //make sure the pencil is not covered by the drawing function onEnterFrame() { pencil._x = _xmouse; pencil._y = _ymouse; //make the pencil's x and y position the same as the mouse if (isDrawing) { //if the drawing variable is true drawing.lineTo(_xmouse, _ymouse); //draw to the mouse } if (slider.hitTest(_xmouse, _ymouse, true)) { //when rolled over slider.gotoAndStop(2); } else { slider.gotoAndStop(1); } } function onMouseDown() { drawing.moveTo(_xmouse, _ymouse); //move the drawing to the mouse isDrawing = true; //draw when the mouse is down } function onMouseUp() { isDrawing = false; //stop drawing when the mouse is up slider.stopDrag(); brush_size = slider._x-slider_bar._x; //how far the slider is down the slider bar drawing.lineStyle(brush_size, 0x000000, 100); //reset the line style } slider.onPress = function() { this.startDrag(false, slider_bar._x, this._y, slider_bar._x+slider_bar._width, this._y); //only drag on the x axis within slider_bar };
Now what have we changed here? We’ve created a variable called “brush_size” used to change the brush size. Then we’ll use the slider_bar’s x position to move the slider where it should be. Then we added a roll over effect for the slider, because we can’t make it a button. Now whenever we release the mouse (stop moving the volume slider) we get how far the slider has moved across the slider bar, and then change the line style. Our final function is to drag the slider. Those are the boundaries we use, so as we don’t want it moving up and down we use its own y position; and we don’t want it leaving the slider bar either. One problem now though is that we’re still drawing even when we’re moving the slider. Therefore we need to create ourselves a canvas!
Lets draw a large movie clip where we’ll be drawing, and give it the instance name of “canvas”. Now we only need to add a small amount of Actionscript:
Mouse.hide(); //hide the mouse this.createEmptyMovieClip("drawing", 1); //create the empty movie clip we'll be drawing into var brush_size:Number = 5; //our variable for the brush size drawing.lineStyle(brush_size, 0x000000, 100); //set the thickness, colour and alpha of the line slider._x = slider_bar._x+brush_size; //put the slider abr in the right position var isDrawing:Boolean = false; //this variable will state if we're drawing or not pencil.swapDepths(2); //make sure the pencil is not covered by the drawing function onEnterFrame() { pencil._x = _xmouse; pencil._y = _ymouse; //make the pencil's x and y position the same as the mouse if (isDrawing && canvas.hitTest(_xmouse, _ymouse, true)) { //if the drawing variable is true and mouse is over canvas drawing.lineTo(_xmouse, _ymouse); //draw to the mouse } if (slider.hitTest(_xmouse, _ymouse, true)) { //when rolled over slider.gotoAndStop(2); } else { slider.gotoAndStop(1); } } function onMouseDown() { if (canvas.hitTest(_xmouse, _ymouse, true)) { //if mouse is over canvas drawing.moveTo(_xmouse, _ymouse); //move the drawing to the mouse isDrawing = true; //draw when the mouse is down } } function onMouseUp() { isDrawing = false; //stop drawing when the mouse is up slider.stopDrag(); brush_size = slider._x-slider_bar._x; //how far the slider is down the slider bar drawing.lineStyle(brush_size, 0x000000, 100); //reset the line style } slider.onPress = function() { this.startDrag(false, slider_bar._x, this._y, slider_bar._x+slider_bar._width, this._y); //only drag on the x axis within slider_bar };
As you can probably see the only things that have changed are checking whether the mouse is over the canvas. We check when we’re drawing and when the mouse is pressed. Now for the colour palette! This involves dabbling our feet into some BitmapData!
Now we need an image to use as a colour palette. You can use the one I use, though of course you can use your own.
Now import that into the library and give it the linkage identifier as “spectrum”. Firstly we want to create a movie clip to hold the image, with the instance name of “bitmap_holder”. Make a frame around it (if you want to) but don’t actually put the image in! We’re going to attach it using Actionscript. Next we want to make two squares with the instance name of “browsing_colour” and “selected_colour”. Now replace your current code with this:
import flash.display.BitmapData; //import the bitmap data class, so we can use it ^.^ var bitmapData:BitmapData = BitmapData.loadBitmap("spectrum"); //our bitmap data variable containing our bitmap bitmap_holder.attachBitmap(bitmapData, 2); //attach the bitmap data into the movie clip var browsingC = new Color(browsing_colour); //create a variable to hold the colour information for our movie clip var selectedC = new Color(selected_colour); //the same for the other MC var current_colour:String = ""; //the variable to contain the selected colour Mouse.hide(); //hide the mouse this.createEmptyMovieClip("drawing", 1); //create the empty movie clip we'll be drawing into var brush_size:Number = 5; //our variable for the brush size drawing.lineStyle(brush_size, 0x000000, 100); //set the thickness, colour and alpha of the line slider._x = slider_bar._x+brush_size; //put the slider abr in the right position var isDrawing:Boolean = false; //this variable will state if we're drawing or not pencil.swapDepths(2); //make sure the pencil is not covered by the drawing function onEnterFrame() { pencil._x = _xmouse; pencil._y = _ymouse; //make the pencil's x and y position the same as the mouse if (isDrawing && canvas.hitTest(_xmouse, _ymouse, true)) { //if the drawing variable is true and mouse is over canvas drawing.lineTo(_xmouse, _ymouse); //draw to the mouse } if (slider.hitTest(_xmouse, _ymouse, true)) { //when rolled over slider.gotoAndStop(2); } else { slider.gotoAndStop(1); } if (bitmap_holder.hitTest(_xmouse, _ymouse, true)) { //if mouse is over bitmap browsingC.setRGB("0x"+bitmapData.getPixel(_xmouse-bitmap_holder._x, _ymouse-bitmap_holder._y).toString(16)); //set the colour variable of the browsing colour to the colour of the spectrum } else { browsingC.setRGB("0x000000"); //set the browsing movie clip to black (default) } } function onMouseDown() { if (canvas.hitTest(_xmouse, _ymouse, true)) { //if mouse is over canvas drawing.moveTo(_xmouse, _ymouse); //move the drawing to the mouse isDrawing = true; //draw when the mouse is down } else if (bitmap_holder.hitTest(_xmouse, _ymouse, true)) { selectedC.setRGB("0x"+bitmapData.getPixel(_xmouse-bitmap_holder._x, _ymouse-bitmap_holder._y).toString(16)); //again, setting the colour variable for when the colour has been selected current_colour = ("0x"+bitmapData.getPixel(_xmouse-bitmap_holder._x, _ymouse-bitmap_holder._y).toString(16)); //our colour variable so ew know what colour to draw our line } } function onMouseUp() { isDrawing = false; //stop drawing when the mouse is up slider.stopDrag(); brush_size = slider._x-slider_bar._x; //how far the slider is down the slider bar drawing.lineStyle(brush_size, current_colour, 100); //reset the line style } slider.onPress = function() { this.startDrag(false, slider_bar._x, this._y, slider_bar._x+slider_bar._width, this._y); //only drag on the x axis within slider_bar };
Now if you don’t understand the Bitmap data class, I suggest you do some research into it. After we imported it we loaded our bitmap from our library, and then attached the bitmap into our movie clip called “bitmap_holder”. Then we make two colour variables, to change the colour of our blocks at the bottom, so we can see what colour we’ve chosen and selected. We also have a variable so we know what colour to make the actual drawing. Now when we’re hovering over the bitmap holder movie clip we set our browsing movie clip to be the colour of the bitmap underneath it. How? Because of the brilliant bitmap data class. Using getPixel and a coordinate on any bitmap data will give you the colour of it. Very useful. Then we just do the same thing for the selected colour and the variable (when the mouse is down).
For the second part we’ll add a save function, both to edit and as jpegs, and print it!
how can i clear the draw pad??
September 12th, 2008 at 1:01 pm
To clear it use
drawing.clear();
However you’ll need to set the linestyle again.
September 12th, 2008 at 1:11 pm
I want clear the pad with a “clear” button…how can i make it ?
September 12th, 2008 at 3:33 pm
Add that code I posted on a button. Isn’t too tricky.
September 12th, 2008 at 3:40 pm
It doesn´t work…maybe because i have flash 8 ?
September 12th, 2008 at 4:00 pm
No, that shouldn’t be a problem. Make a button with an instance name of clear_bttn, and add this code to the frame:
clear_bttn.onRelease = function() {
drawing.clear();
drawing.lineStyle(brush_size, current_colour, 100);
}
September 12th, 2008 at 5:20 pm
It is for my personal photo editing. if can help me by sending some more tutorials to me i would be very thank full to sir
October 5th, 2008 at 2:23 am
I love this. This is really what I was looking for. I do have a question. I would like to have 2 brushing going at the same time about 20px a part. what way it makes 2 lines. when you draw. How would I be able to go about this?
October 15th, 2008 at 7:51 pm
On the step where you put in the canvas, the scripting for that has an error:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 29: ‘)’ expected
if (isDrawing && canvas.hitTest(_xmouse, _ymouse, true)) {
Total ActionScript Errors: 1 Reported Errors: 1
I don’t get it… There’s just as many opening (’s as ending )’s.
October 25th, 2008 at 4:37 pm
Fixed!
October 26th, 2008 at 8:36 am
Any ideas how i can take a drawing tool like this and create a dynamic mask with it to create an effect of a finger clearing away frost on a window, so where they draw on the picture is clear, and the rest of the screen is “frosted”?
Any thoughts on how to make this work would be great.
October 30th, 2008 at 6:54 am
Mindless Games - this is an awesome tutorial. Nice work! Thanks for putting such useful information out there on the internet.
November 12th, 2008 at 12:56 pm
Wondering when you might be doing Part 2 for this tutorial, regarding the save, jpeg, and print functions? This is the best tutorial I’ve found…part 2 will be very helpful.
Cheers!
November 18th, 2008 at 2:25 pm
you just made me VEEEERRRRRYYYYY happy lol I have to make a flash site and needed a game on it…I made it so that you can draw hair on Andy Warhol! xD I’m gonna look sooo smart haha thanks much for the great tutorial!!!!
November 19th, 2008 at 4:56 pm
is there a way to clear the pad and then continue to draw afterwards? When I test the movie and click the clear button, I am no longer able to draw anything…
November 19th, 2008 at 5:04 pm
Would just like to than you for this tutorial and I am looking forwards to the second part.
I am studying Web Design and this tutorial has help me no end with one of my projects..
Cheers Mate…
November 20th, 2008 at 5:26 am
A very good tutorial. Good to understand. When comes the second part?
December 4th, 2008 at 3:25 am
Very good,
Can’t wait for part 2…
December 30th, 2008 at 2:02 pm
Wow, Magnifique! it scares me to look at the script in detail though
Would it be easy to add a rubber or is this for the second part?
Anyways, best wishes and best of thanks
January 25th, 2009 at 3:55 pm
Thanks for the tutorial. Saved me the time of researching and writing from scratch.
A small enhancement I added to this is the addition of one line of code, such that just pressing the button down leaves a mark on the canvas. The way it’s written now, you must move the mouse in order to draw.
:
:
function onMouseDown() {
if (canvas.hitTest(_xmouse, _ymouse, true)) {
//if mouse is over canvas
drawing.moveTo(_xmouse, _ymouse);
// THE NEW LINE HERE
drawing.lineTo(_xmouse + .3, _ymouse + .3);
:
:
:
And to mikey in the comment above mine, the easiest way to erase or add a rubber would be to draw with the same color as the background, which would give the appearance of erasing.
February 12th, 2009 at 5:18 am
Hi there,
I can’t get the pencil instance to move with the mouse cursor, it just sits there. Any suggestions?
February 12th, 2009 at 5:52 pm
How do I attach this to a website I have made in actionscript 3.
April 8th, 2009 at 9:08 am
or can someone just convert that whole last actionscipt to as3 plaese
April 8th, 2009 at 9:55 am
So is there going to be a second one?
April 22nd, 2009 at 1:14 am
very nice
May 25th, 2009 at 8:52 pm
I went ahead and and made three different movie clips for: “bitmap_holder,” “browsing_colour,” and “selected_colour,” and copied the code and what happens is that when I open the movie, the “browsing colour” is automatically showing black, and the selected colour is white. When running over the “bitmap_holder,” it doesn’t show it changing colours in the “browsing_colour” square. Then, when I click to select a colour the “selected_colour” box automatically would pick black. I don’t what’s going on.
Here’s the file:
http://www.fileden.com/getfile.php?file_path=http://www.fileden.com/files/2007/6/4/1143867/DrawingPad_Instruto.fla
Thank you for your help.
June 25th, 2009 at 3:01 am