Drawing simulation

[Felipe Bastos]

I`m workin on a cd-rom project about art analysis, paintings, artists, bla bla.
It is for a teacher that will use it in his classes.
I need to learn how to simulate a blackboard, that he could click and paint on some parts of the paintings.
Does anyone know a tutorial about that?

:thumb:

[lostinbeta]

You mean like this

http://www.kirupa.com/developer/actionscript/drawingboard.htm

??

:-\

[ahmed]

or this..?

http://www.umbc.edu/interactive/fla/colorme.swf
http://www.umbc.edu/interactive/fla/colorme.fla

^^ senocular's.. :)

[Felipe Bastos]

perfect! :)
I didnt look for it at Kirupa!
Thanks

[lostinbeta]

Originally posted by Felipe Bastos
perfect! :)
I didnt look for it at Kirupa!
Thanks


:!: :!: :!:

You didn't look for it at Kirupa!!!

:!: :!: :!:


::stares gazingly down at my footer

:P hehehe

[Felipe Bastos]

Thanks also to ahmed!
This will be also usefull!
:):):)

[Felipe Bastos]

How can I set limits?
top 20
bottom 400
left 0
right 420

[ahmed]

here's how i did a while back:

this.onEnterFrame = function() {
if (_xmouse>271) {
lineTo(271, _ymouse);
} else if (_xmouse<30) {
lineTo(30, _ymouse);
} else if (_ymouse<45) {
lineTo(_xmouse, 45);
} else if (_ymouse>225) {
lineTo(_xmouse, 225);
} else {
lineTo(_xmouse, _ymouse);
}

}; :)
there might be a better way though.. im not really sure

[Felipe Bastos]

You are pretty fast!
zooooooooooooooooooooom
Thanks :thumb:

[ahmed]

;)

[lostinbeta]

You could also try setMask if you wanted to...

Add this after _root.createEmptyMovieClip("line", 1);

_root.createEmptyMovieClip("mask", 2);
mask.beginFill(0x000000, 100);
mask.moveTo(20, 0);
mask.lineTo(20, 420);
mask.lineTo(400, 420);
mask.lineTo(400, 0);
line.setMask(mask);


I didn't test it, but yeah...lol.

[Felipe Bastos]

Hey ahmed!
Would u mind sharing your knowlogy and tell me how to use cookies like u do with ......... your thing to draw, I forgot the name of this thing!??
:)

[ahmed]

hey lost, i think you're way's way better (doesn't have to go through 4 if's) .. :)

and.. here's a tutorial on shared objects: flash mx cookies (http://www.kirupa.com/developer/mx/sharedobjects.htm) :)

[Felipe Bastos]

Thanks again ahmed
My boss will love this!

[lostinbeta]

ahmed: I honestly don't know which method is better, yours has to go through 4 if statements, but mine still draws content outside of the border, which still uses up resources.

So hmmm.

[Felipe Bastos]

The mask did not work!
:(

[ahmed]

Originally posted by lostinbeta
ahmed: I honestly don't know which method is better, yours has to go through 4 if statements, but mine still draws content outside of the border, which still uses up resources.

So hmmm.
hmmmm..



Originally posted by Felipe Bastos
The mask did not work!
:( it does work, but you will have to draw within a movieclip called 'line'
createEmptyMovieClip("line", ++depth)
createEmptyMovieClip("mask", ++depth)
mask.beginFill(0x000000, 100);
mask.moveTo(20, 0);
mask.lineTo(20, 420);
mask.lineTo(400, 420);
mask.lineTo(400, 0);
line.setMask(mask);
line.lineStyle(0)
line.onMouseDown = function() {
this.moveTo(_xmouse, _ymouse)
this.onEnterFrame = function() {
this.lineTo(_xmouse, _ymouse)
}
}
line.onMouseUp = function() {
delete this.onEnterFrame
} or something like that :)

[Felipe Bastos]

A black background is created and it does not work as a mask!

[lostinbeta]

It worked for me....

I did this...

// 1. SETTING THINGS
_root.createEmptyMovieClip("line",1);
_root.createEmptyMovieClip("mask", 2);
mask.beginFill(0x000000, 100);
mask.moveTo(20, 0);
mask.lineTo(20, 420);
mask.lineTo(400, 420);
mask.lineTo(400, 0);
line.setMask(mask);
// 2. EVENTS IN _ROOT:
_root.onMouseDown = function(){
line.moveTo(_xmouse,_ymouse);
line.lineStyle(2,0x000000,100);
this.onMouseMove = function(){
line.lineTo(_xmouse,_ymouse);
updateAfterEvent();
}
}
_root.onMouseUp = function(){
this.onMouseMove = null;
}


ahmeds method created 2 clips on the same level, you can't do that, the new one overwrites the old one.

[ahmed]

im sure it works, just tried it :)

http://24.141.60.208/draw_thingie.fla

[Felipe Bastos]

I got it!
The depth of the mask should be line`s +1.
But I cant understand the code to create the mask.

mask.beginFill(0x000000, 10);
mask.moveTo(0, -14);
mask.lineTo(0, -380);
mask.lineTo(720, 0);
mask.lineTo(720, -14);
This creates a triangule and not a retangule!

[lostinbeta]

createEmptyMovieClip("line", ++depth);
createEmptyMovieClip("mask", ++depth);
mask.beginFill(0x000000, 100);
mask.moveTo(20, 0);
mask.lineTo(20, 420);
mask.lineTo(400, 420);
mask.lineTo(400, 0);
mask.lineTo(20, 0);
line.setMask(mask);
line.lineStyle(0);
line.onMouseDown = function() {
this.moveTo(_xmouse, _ymouse);
this.onEnterFrame = function() {
this.lineTo(_xmouse, _ymouse);
};
};
line.onMouseUp = function() {
delete this.onEnterFrame;
};


That should work..



Ahmed: Sorry about the same level statement, I just realized what it does... 'doh

[ahmed]

lol.. kinda tricky eh :P

[Felipe Bastos]

The mask is ok now, but when I do the first click, a line is created from x=0 and y=0 to x and y mouse positions! Kind of strange!

[Felipe Bastos]

This is the code I remixed:

// 1. SETTING THINGS
this.createEmptyMovieClip("line", 1)
this.createEmptyMovieClip("mask", 2)
mask.beginFill(0x000000, 100);
mask.moveTo(0, -14);
mask.lineTo(0, -380);
mask.lineTo(720, -380);
mask.lineTo(720, -14);
mask.lineTo(0, -14);
line.setMask(mask);
line.lineStyle(2, 0xFF0000, 80);
line.onMouseDown = function() {
line.lineTo(_xmouse,_ymouse);
line.lineStyle(2,0xFF0000,100);
this.onMouseMove = function(){
line.lineTo(_xmouse,_ymouse);
updateAfterEvent();
}
}
line.onMouseUp = function() {
this.onMouseMove = null;
}

Now I just want to solve the problem about the first click I reported in the last post.

[Felipe Bastos]

I`m kind of confusing everything.
I was testing the lineTo and moveTo onMouseDown event.
There are two ways of drawing. If I use lineTo, it creates a line from the last mouseUp event. So there will be just one continuous line. But if I use moveTo, everytime the mouse is up and down again, it will break up the line. I`m getting confused in my own explanation. Need to sleep!
Thanks very much for helping me! :thumb:

see u

[Felipe Bastos]

Here is my new question:
Is it possible to do a first click to set the x and y position and on the second click a line is drawn from the first x and y position? And on third click is sets again x and y positions........thsi way I could draw separate lines?

[Clown Staples]

this might be related .. not sure
Math.max(-200, Math.min( _xmouse , 200) );
this gives a value between -200 and +200 that is sometimes the mouse position

[Clown Staples]

onMouseDown=function(){ lineTo(_xmouse,_ymouse);};

[Felipe Bastos]

but looking at the above code, where should I put it?

[Clown Staples]

linestyle(1);
onMouseDown=function(){ this.lineTo(_xmouse,_ymouse);};

these two lines all by themselves in a movieclip give you the results you want. Is there any thing on top of that you want to add? I think the tough part will be restricting it to within certain bounds.

[Felipe Bastos]

Hey clownstaples!
This code I`ve already used in my code! :thumb:
What I`m looking for is more advanced tool for drawing straigh lines.
I`ll try to explain:
I`m trying to draw a line just in two clicks. But when I press the mouse down again, for the third time, it does not continue drawing, but iniciate a new line. So this way I could draw separate lines! Did u get it?

Thanks anyway :)

[Clown Staples]

every other click will start a line and every other click will finish one?

[lostinbeta]

Heres a rather "simplified" method...

trigger = false;
this.createEmptyMovieClip("box", ++depth);
this.createEmptyMovieClip("line", ++depth);
this.createEmptyMovieClip("dot", ++depth);
dot.lineStyle(3, 0xFF0000, 100);
dot.lineTo(.15, .45);
dot._visible = false;
line.lineStyle(.25, 0, 100);
line.onMouseDown = function() {
if (box.hitTest(_xmouse, _ymouse, true)) {
if (!trigger) {
this.moveTo(_xmouse, _ymouse);
dot._visible = true;
dot._x=_xmouse, dot._y=_ymouse;
trigger = true;
} else {
this.lineTo(_xmouse, _ymouse);
dot._visible = false;
trigger = false;
}
} else {
dot._visible = false;
trigger = false;
}
};
box.lineStyle(.25, 0x000000, 50);
box.beginFill(0xEEEEEE, 50);
box.moveTo(20, 0);
box.lineTo(20, 420);
box.lineTo(400, 420);
box.lineTo(400, 0);
box.lineTo(20, 0);
box.endFill();


Drop that on a frame.


made a few slight adjustments

[Clown Staples]

linestyle(1);
onMouseDown=function(){
if(drawing){
this.lineTo(_xmouse,_ymouse);
drawing=false;
}
else{
this.moveTo(_xmouse,_ymouse);
drawing=true;
}
};

[Felipe Bastos]

Thats it lostinbeta :thumb:
You are fantastic!!!
LOVE YOU

Could u take a look at my new thread? (http://www.kirupaforum.com/forums/showthread.php?s=&threadid=25543)

[lostinbeta]

I replied to your other thread, but considering what you want there I don't know how much I can help, I just don't have the time.

That is one gigantic project you are after, and from the looks of it you may be getting ahead of yourself if you don't know much about the drawing API in Flash.

[Felipe Bastos]

I would love to have some explanation about your code!
If you dont mind and have some time to spend?! :)

Thanks to clownstaples too!

[Felipe Bastos]

Ok! No problem. I apreciate.
Do you know about some book or tutorial that could help me?

[Felipe Bastos]

What does "trigger" do?

[lostinbeta]

Ok I commented my code.... lemme know if there is anything specific you need me to go more into detail with..

//declare trigger variable originally set to false
trigger = false;
//create the 3 clips used..
//box is the grey box in the background (created on level 1)
//line is the uhhh line (created on level 2)
//dot is the dot (created on level 3)
//++depth sets each one on a new level (only 1 clip can exist on a level)
this.createEmptyMovieClip("box", ++depth);
this.createEmptyMovieClip("line", ++depth);
this.createEmptyMovieClip("dot", ++depth);
//use drawing API to draw dot
//3 is line width, 0xFF0000 is hex for red, 100 is alpha
dot.lineStyle(3, 0xFF0000, 100);
dot.lineTo(.15, .45);
//set dot clip to be invisible
dot._visible = false;
//set lineStyle of line you will be drawing with
//.25 is the line width, 0 (short for black), is the color, 100 is the alpha
line.lineStyle(.25, 0, 100);
line.onMouseDown = function() {
//if when the mouse is pressed it is also over the box clip
if (box.hitTest(_xmouse, _ymouse, true)) {
//if trigger is false
if (!trigger) {
//move the line clip the current mouse position
this.moveTo(_xmouse, _ymouse);
//make the dot clip visible
dot._visible = true;
//move the dot clip to the current mouse position
dot._x=_xmouse, dot._y=_ymouse;
//set trigger to true (so this stays in original position)
trigger = true;
//else... (meaning else if trigger was true)
} else {
//draw a line to the current mouse position
this.lineTo(_xmouse, _ymouse);
//make the dot clip invisible again
dot._visible = false;
//reset the trigger back to false
trigger = false;
}
//else if the mouse is pressed when it is not over the box clip
} else {
//hide the dot clip again
dot._visible = false;
//reset trigger to false
trigger = false;
}
};
//draw box... same as before
box.lineStyle(.25, 0x000000, 50);
box.beginFill(0xEEEEEE, 50);
box.moveTo(20, 0);
box.lineTo(20, 420);
box.lineTo(400, 420);
box.lineTo(400, 0);
box.lineTo(20, 0);
box.endFill();

[Felipe Bastos]

I was taking a look at your site and remembered that I had visited it once on the beginning of this year, if I`m right :/
I love the "Pixel Explosion" experiment!

Thanks for the code comments!
Would u mind if I ask you where did you learn so much about AS?
:)

[lostinbeta]

The pixel explosion was mostly Ilyas' coding, I did modify it to do different things though.

As for where I learned so much about AS... I answered that earlier today in another thread :P

http://www.kirupaforum.com/forums/showthread.php?s=&threadid=25479

[ahmed]

sorry to post in an old topic.. but i just came up with a better way to limit the drawing between certain coordinates:
minX = 5;
minY = 5;
maxX = 250;
maxY = 250;
createEmptyMovieClip("line", ++depth);
line.lineStyle(0);
line.onMouseDown = function() {
this.moveTo(_xmouse, _ymouse);
this.onMouseMove = function() {
x = (_xmouse>maxX) ? maxX : ((_xmouse<minX) ? minX : _xmouse);
y = (_ymouse>maxY) ? maxY : ((_ymouse<minY) ? minY : _ymouse);
this.lineTo(x, y);
};
};
line.onMouseUp = function() {
delete this.onMouseMove;
};