Flash Drawing Board (MX)

[jhaertel]

Hi,

first of all: great Forum! great Site!

I came across the Flash MX Drawing Board Tutorial (http://www.kirupa.com/developer/actionscript/drawingboard.htm) and want to integrate it into a "Tactic Board" Application for a Team-Handball Website (I'll post links as soon i got further).

The Users could use the draw feature to create custom arrows etc.

Now my question:

Is there a practical way to "smoothen" the drawn lines? Like you can do inside Flash to get rid of those ugly "zig-zag" drawings.

I hope i made myself clear enough ... if not ask.

THANKS!

[Voetsjoeba]

Draw slower ?

[jhaertel]

ok ... i didn't make myself clear then ...


I want to smoothen lines drawn BY OTHER users inside the Flash application. So I don't have any controll over the input speed :)

[Voetsjoeba]

Yeah I know ... to make it smoother, you could avoid using the handlers such as mouseMove or enterFrame, but use setInterval for example, which can execute a lot faster than onEnterFrame (up to 1ms), which should make your line more smooth. However, it will use a LOT more resources.

[jhaertel]

well thanks again ... but that wont be a solution.

I don't need the line to be smoothed "live" during input ... but rather I'd like to smooth the drawn line afterwards (onRelease).

but don't bother too much with complicated solutions ... i was hoping there might be an integrated function or something for this ... but don't seem to.

[pom]

Why is this thread in the BOK? :h:

[Prophet]

ok ... i didn't make myself clear then ...


I want to smoothen lines drawn BY OTHER users inside the Flash application. So I don't have any controll over the input speed :)
I FINALLY FOUND THIS THREAD!! lol

i knew id read it somewer before... anyway, ive answered your question here: http://www.kirupaforum.com/forums/showthread.php?t=65244

:D

Prophet.

[theflash]

I want the same thing... smooth drawing using flash... But I think it is really difficult with the flash...

The solution provided is really a good work ... but I think for realtime drawing purpose this solution does not work...

I am down with hunting for the realtime solution... May I think there can be a tricky algorithm other than standard freehand drawing which uses lineTo everytime....We need some Maths I think ....

[Skinny_T]

I thought upping the frame rate would do it.

[Dutchy]

If you want to use a faster framerate or faster drawing without straight lines you have to use an interval.

Made a fast example..

Dutchy

[theflash]

Well flashplayer has the limitation in terms of drawing very fast....

In flash player we will not be able to achieve same performance as any C/C++ program... like if you have used a software like openCanvas... they have a very good drawing tools....

Now for the smoothing part you need a good algorithm using bezier curve ... so that you can redraw smooth line when stroke is finished...

Application goes slow in any case... I have used setInterval to min time... also I have used onEnterFrame with max frame rate ... and mouseMove too....
but when my screen is filled with strokes it goes way slow ..drawing only triangles instead of circles....

One option to that is use low or medium quality for the movie.....

[diegovolpe]

Well flashplayer has the limitation in terms of drawing very fast....

In flash player we will not be able to achieve same performance as any C/C++ program... like if you have used a software like openCanvas... they have a very good drawing tools....

Now for the smoothing part you need a good algorithm using bezier curve ... so that you can redraw smooth line when stroke is finished...

Application goes slow in any case... I have used setInterval to min time... also I have used onEnterFrame with max frame rate ... and mouseMove too....
but when my screen is filled with strokes it goes way slow ..drawing only triangles instead of circles....

One option to that is use low or medium quality for the movie.....

U can use curveTo instead of lineTo.

[Skinny_T]

I tried that...couldn't get it to do it :(

[roxyroolz]

Any help on this... does anyone know an algorithm which might help to smoothen the curves drawn AFTER the mouse is done... there was an idea floated on another forum, where there is some post processing done, after the mouse is taken up..Can anyone please help me with this?

[diegovolpe]

Take a look at my sample:



Stage.align = "TL"
Stage.scaleMode = "noScale"
var pts:Array;
var holder:MovieClip = _root;
var isEditing:Boolean = false;
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function(){
pts = new Array();
isEditing = true;
pts.push([holder._xmouse,holder._ymouse])
holder.lineStyle(1,0xFFCC00)
holder.moveTo(holder._xmouse, holder._ymouse)
}
mouseListener.onMouseUp = function(){
isEditing = false;
smooth()
}
mouseListener.onMouseMove = function(){
if(!isEditing) return;
pts.push([holder._xmouse,holder._ymouse])
smooth()
}
function smooth(){
if(!pts) return

var i = pts.length-1;

if(i < 1) return;

var ptx = pts[i][0]
var pty = pts[i][1]

var ancx = pts[i-1][0]
var ancy = pts[i-1][1]

ptx += ancx
pty += ancy
holder.curveTo(ancx,ancy,ptx/2, pty/2);
}
Mouse.addListener(mouseListener)


hope it's useful.
Ps.: I also developed a "Point Reduction Algorithm" using interval and mouse activity, but it's a little bit complex.

Cheers

[danulf]

man! That's really smooth diego! :D cool!

[roxyroolz]

diego! That was awesome!!!!!! It is so smooth, wow :D Thank you ever so much! :D

[pete_zahut]

Take a look at my sample:



Stage.align = "TL"
Stage.scaleMode = "noScale"
var pts:Array;
var holder:MovieClip = _root;
var isEditing:Boolean = false;
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function(){
pts = new Array();
isEditing = true;
pts.push([holder._xmouse,holder._ymouse])
holder.lineStyle(1,0xFFCC00)
holder.moveTo(holder._xmouse, holder._ymouse)
}
mouseListener.onMouseUp = function(){
isEditing = false;
smooth()
}
mouseListener.onMouseMove = function(){
if(!isEditing) return;
pts.push([holder._xmouse,holder._ymouse])
smooth()
}
function smooth(){
if(!pts) return

var i = pts.length-1;

if(i < 1) return;

var ptx = pts[i][0]
var pty = pts[i][1]

var ancx = pts[i-1][0]
var ancy = pts[i-1][1]

ptx += ancx
pty += ancy
holder.curveTo(ancx,ancy,ptx/2, pty/2);
}
Mouse.addListener(mouseListener)


hope it's useful.
Ps.: I also developed a "Point Reduction Algorithm" using interval and mouse activity, but it's a little bit complex.

Cheers


Do I just have to copy-paste this code in the first frame?

I can't make it work? I've put a trace in the onMouseDown but nothing happens....

Ty, Pete

[TheCanadian]

That will work only in Flash 7 or 8, remove the strict data types and it will work in 6.

[pete_zahut]

I'm using Flash8 :worried:

[TheCanadian]

Then just paste the code in a frame of your movie.

[hybrid101]

it works fine for me! smoothness!

[pete_zahut]

:cantlook:

Seems to work now.... :trout:

Don't know what I did wrong :huh:



And yes, it is smooooooooooooooth ! :drool:

[diegovolpe]

:cantlook:

Seems to work now.... :trout:

Don't know what I did wrong :huh:



And yes, it is smooooooooooooooth ! :drool:

Maybe you were using actionscript 1.0, (File > Publish Settings > Flash > Actionscript version).

[pete_zahut]

Yet another question :diss: ....


I want to make that drawing thing only happen in a certain square, so I tried making it like this:

http://cmdstud.khlim.be/~jcornelissen/Thesis/scr.jpg


And in the code I adjusted this:
var holder:MovieClip = _root.mc_draw;



But that won't work :trout:

I don't understand why? I made a mask, I've put the holder only on the mc_draw movieclip... Is there something I'm forgetting?

:pirate3:

[diegovolpe]

Yet another question :diss: ....
I don't understand why? I made a mask, I've put the holder only on the mc_draw movieclip... Is there something I'm forgetting?

:pirate3:
It was suposed to work. I'm not sure if your mask is correct... it seems that your masked layer is empty (there's only actionscript code and no movieclips)

[pete_zahut]

Yes, on that frame is your smooth AS...

I just don't understand why this doesn't work:
var holder:MovieClip = _root.mc_draw;


:pa:

[pete_zahut]

Made it work!!! :crazy:

http://cmdstud.khlim.be/~jcornelissen/Thesis/scr2.jpg


var holder:MovieClip = _root.mc_draw.mc_draw_square;


So that mc_draw_square is underneauth the mask, and is a MC within the mc_draw movieclip :ko:



Now it's time to get some sleep, and more questions will come up tomorrow ;)



:snooze:

[roxyroolz]

Hello!

Thanks so much diego! I wanted to know how might one go about saving these points/movieclips to a sharedObject... so that one can retrieve the same when one comes back to the guestbook... do i make any sense?

luv
°R°

[pisalayan]

Made it work!!! :crazy:

http://cmdstud.khlim.be/~jcornelissen/Thesis/scr2.jpg



ActionScript Code:


var holder:MovieClip = _root.mc_draw.mc_draw_square;








So that mc_draw_square is underneauth the mask, and is a MC within the mc_draw movieclip :ko:



Now it's time to get some sleep, and more questions will come up tomorrow ;)



:snooze:


PLEASE CAN U POST THIS .FLA? BECAUSE I CAN NOT MAKE IT WORK ;(
THX
PETER

[pete_zahut]

PLEASE CAN U POST THIS .FLA? BECAUSE I CAN NOT MAKE IT WORK ;(
THX
PETER

In your private message I saw that you're also from Belgium. :cool:

I'm quite bussy at the moment, so maybe tommorow I'll mail you with the explanation (in dutch) ;)

[pisalayan]

:ub:
In your private message I saw that you're also from Belgium. :cool:

I'm quite bussy at the moment, so maybe tommorow I'll mail you with the explanation (in dutch) ;)


Dat zou geweldig zijn !!! ik heb dat tekenbordje dringend nodig voor een project waar ik mee bezig ben. Ik krijg het maar niet aan de praat zoals ik het wil. alles gekopied en gepast, maar mijn pendiktes werken nu niet meer....al de rest is voor mekaar?

Peter

[pete_zahut]

Hi (again),

I'm still working on a good drawing board, but what's a drawing board without a "ctrl-z" / undo option.
Does anybody know how to make such a thing? How can you keep track of everything your user does?
This guy ( http://www.flashpaint.com/ ) somehow records the users actions, anybody know how?

Thx, Pete Zahut

[pete_zahut]

no-one-knows?


I guess it's to difficult to make with Flash? In Java, I think, you could use vectors but Flash...?

[jnbeck]

This is my first version of the code, but it's a start. I'm using diego's excellent code as a base. Just added an array to track the history of what is drawn. For me, This is all I need, because I'm exporting the drawing to XML as a whole.

On the keyboard:
C - clears the stage
D - Redraws the figure from History
A - Clears the history Array


Stage.align = "TL";
Stage.scaleMode = "noScale";
var pts:Array;
var history:Array;
history = new Array();
var holder:MovieClip = _root;
var isEditing:Boolean = false;
var mouseListener:Object = new Object();
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.getCode() == 67) { // "C"
_root.clear();
} else if (Key.getCode() == 68) { // "D"
drawArray();
} else if (Key.getCode() == 65) { // "A"
trace("history cleared");
history = new Array();
}
};
mouseListener.onMouseDown = function() {
pts = new Array();
isEditing = true;
pts.push([holder._xmouse, holder._ymouse]);
history.push(["m",holder._xmouse, holder._ymouse]);
holder.lineStyle(1, 0xFFCC00);
holder.moveTo(holder._xmouse, holder._ymouse);
};
mouseListener.onMouseUp = function() {
isEditing = false;
smooth();
};
mouseListener.onMouseMove = function() {
if (!isEditing) {
return;
}
pts.push([holder._xmouse, holder._ymouse]);
smooth();
};
function smooth() {
if (!pts) {
return;
}
var i = pts.length-1;
if (i<1) {
return;
}
var ptx = pts[i][0];
var pty = pts[i][1];
var ancx = pts[i-1][0];
var ancy = pts[i-1][1];
ptx += ancx;
pty += ancy;
holder.curveTo(ancx, ancy, ptx/2, pty/2);
history.push(["c",ancx,ancy,ptx/2,pty/2]);
}
function drawArray() {
holder.lineStyle(1, 0xFFCC00);
for(i=0; i<history.length; i++){
if((history[i][0] == "m")){
holder.moveTo(history[i][1], history[i][2]);
} else if(history[i][0] == "c"){
holder.curveTo(history[i][1], history[i][2], history[i][3], history[i][4]);
}
}
}
Mouse.addListener(mouseListener);
Key.addListener(keyListener);

[theflash]

UNDO is not that hard... you need to create a proper data structure for recording events///

[guruu]

Just two questions

1) Is it possible to have the same effect as mouse trail?
2) Is it possible to make the line fading out while i'm moving mouse?

I've found some mouse trail effect that drow line but no one makes smooth corners like this script.
maybe it's a stupid question but not for me.

TIA

[theflash]

usually when drawing each lineTo can be created as a separate moviclip which can be faded with time... that will create a trail effect...

[guruu]

Thanks for the answer but I think is too much complicate for my knowledge of actionscript it's only e few months that I'm "playing" with flash.

[theflash]

Do u know how drawing is made? we join pair of points with lines using lineTo on mouse-move event.

So first you get on board by getting familier with that code.

Let me know when you are ready to go from there..

[guruu]

thanks the flash I'm quite familier with command such as lineTo or moveTo or curveTo. my problem was (and actualy is) to find a way to create empty mc that contain the line. For example how many mcs create, or is better have a specific number of mcs, for example 15, or create infinite mcs. And than if it's better attach an actionscript to every single mc for the fading or control it via for or while loop.

anyway as soon as I have a simple script I'll ask you more specific help.
thanks

[theflash]

You know good amount on what you need to do... Let me know if you get blocked somewhere...

[viewsonic]

jnbeck, you got nice coding! Can you tell me how can I extend your code and add the buttons (for example "up" and "down") to slower and speeding up drawing from the history? That would be great! Thx!

[netrix]

that's nice jnbeck! really low consuption of resources... i was thinking about implementing some kind of eraser but i think it will get extremely complicated!

[JoeX]

hello everyone!

i had read your replies, and i make my own drwing board, to make people draw and leave ameesage and post with a drawing, transformed in JPG....

i am using your smooth script but i can not make an "UNDO" tool, (like control +Z) , plz, could anyone post a code for that?

(i speak spanish, so my english suxx)

if U want to see my work, go here:
www.polerones.com/draw (http://www.polerones.com/draw)

bye!:rabbit:

[JoeX]

that's nice jnbeck! really low consuption of resources... i was thinking about implementing some kind of eraser but i think it will get extremely complicated!

oh about the eraser, i made one, it was so easy... just simpe make it draw in white color, and high tickness!.... works, but consumes resources.... but it a good solution, without make an extrremly complicated script =)

see my work in the post above!, bye!:rabbit:

[netrix]

oh about the eraser, i made one, it was so easy... just simpe make it draw in white color, and high tickness!.... works, but consumes resources.... but it a good solution, without make an extrremly complicated script =)

see my work in the post above!, bye!:rabbit:

yeah... I though about that but I wanted a more 'clean' solution... But that script was goona be hell so i just ignored it! hehe... anyways I did what I wanted like a month ago. It was a set of drawing boards, in one a 'tutor' could draw and in the other a 'student' was able to see what the tutor's drawing. At first i used php to save and load the info, then i used Flash Media Server. btw FMS is really nice!! hehe.... happy holidays everyone!

[JoeX]

yeah... I though about that but I wanted a more 'clean' solution... But that script was goona be hell so i just ignored it! hehe... anyways I did what I wanted like a month ago. It was a set of drawing boards, in one a 'tutor' could draw and in the other a 'student' was able to see what the tutor's drawing. At first i used php to save and load the info, then i used Flash Media Server. btw FMS is really nice!! hehe.... happy holidays everyone!

oh really?, could you link your site of that proyect'??, i want to ma some thing of tahat, but i dont understand nothing about flash server..... =(

and, how U can make an "UNDO" tool?...... (using de smooth scrpit, posted in this thread), like CRTL + Z

plz, help me....

thanks a lot!

bya!

[netrix]

well the project was for a competition sponsored by morgan stanley on which university from the east coast + puerto rico participate. It was held the past month and I just used a one month subscribtion for the server, so it's not working at the moment. I actually didn't knew a thing about FMS, but i searched around and came up with some nice examples that help me do what i wanted...

if you still want the link of the proyect to see the boards let me know.

[london11]

can you post up the fla please

[london11]

can you send the fla please

[london11]

could you give us the fla please

[pete_zahut]

Because of high demand: right click and save as (http://www.jeroencornelissen.be/brol/draw_mx.fla)

Thought I already uploaded this to the forums.


Have fun, Pete! :be:

[jeckx2]

Take a look at my sample:



Stage.align = "TL"
Stage.scaleMode = "noScale"
var pts:Array;
var holder:MovieClip = _root;
var isEditing:Boolean = false;
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function(){
pts = new Array();
isEditing = true;
pts.push([holder._xmouse,holder._ymouse])
holder.lineStyle(1,0xFFCC00)
holder.moveTo(holder._xmouse, holder._ymouse)
}
mouseListener.onMouseUp = function(){
isEditing = false;
smooth()
}
mouseListener.onMouseMove = function(){
if(!isEditing) return;
pts.push([holder._xmouse,holder._ymouse])
smooth()
}
function smooth(){
if(!pts) return

var i = pts.length-1;

if(i < 1) return;

var ptx = pts[i][0]
var pty = pts[i][1]

var ancx = pts[i-1][0]
var ancy = pts[i-1][1]

ptx += ancx
pty += ancy
holder.curveTo(ancx,ancy,ptx/2, pty/2);
}
Mouse.addListener(mouseListener)


hope it's useful.
Ps.: I also developed a "Point Reduction Algorithm" using interval and mouse activity, but it's a little bit complex.

Cheers

nice code you built there bro it helps a lot :cowbell:

[eboy]

Because of high demand: right click and save as (http://www.jeroencornelissen.be/brol/draw_mx.fla)

Thought I already uploaded this to the forums.


Have fun, Pete! :be:



Hi- Sorry to bring this thread up. I cannot download this FLA file? Flash says it's unable to open it? Any suggestions.

[pete_zahut]

Ok, this is a prehistoric thread :)
But still have a copy of it online : link to the zip (http://www.jeroencornelissen.be/oldstuff/brol/draw.zip)

Keep in mind that this isn't best practice. Maybe if I find some time I'll redo it in AS3 :ne:

[vikrant29nov]

This is my first version of the code, but it's a start. I'm using diego's excellent code as a base. Just added an array to track the history of what is drawn. For me, This is all I need, because I'm exporting the drawing to XML as a whole.

On the keyboard:
C - clears the stage
D - Redraws the figure from History
A - Clears the history Array


Stage.align = "TL";
Stage.scaleMode = "noScale";
var pts:Array;
var history:Array;
history = new Array();
var holder:MovieClip = _root;
var isEditing:Boolean = false;
var mouseListener:Object = new Object();
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.getCode() == 67) { // "C"
_root.clear();
} else if (Key.getCode() == 68) { // "D"
drawArray();
} else if (Key.getCode() == 65) { // "A"
trace("history cleared");
history = new Array();
}
};
mouseListener.onMouseDown = function() {
pts = new Array();
isEditing = true;
pts.push([holder._xmouse, holder._ymouse]);
history.push(["m",holder._xmouse, holder._ymouse]);
holder.lineStyle(1, 0xFFCC00);
holder.moveTo(holder._xmouse, holder._ymouse);
};
mouseListener.onMouseUp = function() {
isEditing = false;
smooth();
};
mouseListener.onMouseMove = function() {
if (!isEditing) {
return;
}
pts.push([holder._xmouse, holder._ymouse]);
smooth();
};
function smooth() {
if (!pts) {
return;
}
var i = pts.length-1;
if (i<1) {
return;
}
var ptx = pts[i][0];
var pty = pts[i][1];
var ancx = pts[i-1][0];
var ancy = pts[i-1][1];
ptx += ancx;
pty += ancy;
holder.curveTo(ancx, ancy, ptx/2, pty/2);
history.push(["c",ancx,ancy,ptx/2,pty/2]);
}
function drawArray() {
holder.lineStyle(1, 0xFFCC00);
for(i=0; i<history.length; i++){
if((history[i][0] == "m")){
holder.moveTo(history[i][1], history[i][2]);
} else if(history[i][0] == "c"){
holder.curveTo(history[i][1], history[i][2], history[i][3], history[i][4]);
}
}
}
Mouse.addListener(mouseListener);
Key.addListener(keyListener);

Hey this doesn't work on any MC or any text object....

[stoopidtypos]

Hey everyone! I am using my own coding for a drawing board in my flash document:



_root.createEmptyMovieClip("myLine",0);
_root.onMouseDown = function() {
myLine.moveTo(_xmouse, _ymouse);
myLine.lineStyle(2, 0xff0000, 100);
_root.onMouseMove = function() {
myLine.lineTo(_xmouse, _ymouse);
}
}
_root.onMouseUp = function() {
_root.onMouseMove = noLine;
}


And I assigned code to a button on the frame that deletes the drawing to start over:



on(release) {
myLine.clear();
}


But, when testing, i found that i can still draw on all the subsequent frames. Can anyone help me with a code to delete the movie clip on entering the next frame? Or anything?

Thanks!

[TheCanadian]

_root.myLine.removeMovieClip();

[stoopidtypos]

thank you so much! wow!


Now, i'm having a problem defining the area of the "myLine" mc. where would i define the area i want it to be? i had defined the area under the onMouseDown function. Thanks!

[JoeX]

wow!, my last post in this thread was about 5 years ago!

in that time, i had a lot of experience, and learn a lot of AS3...

i want to post here my actual AS3 port of this drawing board

chek it out in my blog!

http://joecabezas.tumblr.com/post/9123129647/as3-drawing-board-class

b (http://joecabezas.tumblr.com/post/9123129647/as3-drawing-board-class)ye! :)

[Joddyrots]

I love drawing..