Charcoal and crayon drawing effect.

[evan]

I am currently exploring how to apply a charcoal or crayon effect to a pen tool.


To revisit the code for a generic draw tool in AS 3.0:

var drawing:Boolean=false;
this.graphics.lineStyle(1,0x000000);
this.graphics.moveTo(mouseX, mouseY);

this.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp, false, 0, true);

function onDown(evt:MouseEvent):void {
drawing=true;
}
function onUp(evt:MouseEvent):void {
drawing=false;
}
function onLoop(evt:Event):void{
if(drawing){
this.graphics.lineTo(mouseX, mouseY);
}else{
this.graphics.moveTo(mouseX, mouseY);
}
}

I still haven't found code that allows a sort of "rubber stamp" that I think would give that result. -meaning -I create a vector symbol in flash that resembles the shape of the "brush" and as it gets dragged -it actually would repeat itself . So.... what I think should happen is a graphic from the library would repeat itself with MOUSE_DOWN and x/y being traced - I THINK that is the right approach to make it work, albeit I would have to set the movie for a high frame rate.

any links to as 3.0 examples of that being done?

[Medyman]

any links to as 3.0 examples of that being done?

Nope...it can't be done. At least not in the way you describe. The logic will work with other methods though.

The Drawing API is for shapes only. You can't use library items as the "brush". In AS2 you would use the attachMovieClip() method to place multiple instances of a movieclip on the stage following the mouse.

Of course, attachMovieClip() and it's cousin duplicateMovieClip() have been deprecated in AS3. The AS3 syntax is much simpler. Here is a walkthrough of duplicateMovieClip() in AS3. The same logic (and most of the code) hold true for attachMovieClip() as well.

This is a video tutorial by Lee Brimelow of gotoAndLearn() that shows the technique I'm talking about with AS 2.0. It's fairly simple. You should be able to easily port it to AS 3. Let me know if you have any troubles.

[evan]

Good, one step closer.
I have been piling through Actionscript, The Definitive Guide CH13 -Oreilly.com had a free link with the whole chapter on the subject.

NOW I am closer to getting it done,

I didn't think the graphics class would make it work. But I'll need to produce the effect by repeating a movieclip on mousedown and tracking the mouse.

[evan]

I looked at the dicussion about duplicatemovieclip being depreciated,

My first impression is this is a pretty ardous process if all I want to do is attach or display a movie clip from the library, unless he's really talking about importing whole fla files intact -then I understand why.

[evan]

I have been messing around with an as 3 version that works with the xample you showed me.

I'm still playing around any ideas?

/*
var drawing :Boolean = false;
var inc:uint = 0;
this.graphics.moveTo(mouseX,mouseY);

stage.addEventListener(MouseEvent.MOUSE_DOWN, paintMe, false, 0, true);
this.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
function paintMe(evt:MouseEvent):void{
drawing=true;
var ball:MovieClip = new Ball();
addChild(ball);
inc++;
}
function onLoop(evt:EVENT):void{
if (drawing)
{this.graphics.moveTo(mouseX,mouseY);}

}

[Medyman]

I looked at the dicussion about duplicatemovieclip being depreciated,

My first impression is this is a pretty ardous process if all I want to do is attach or display a movie clip from the library, unless he's really talking about importing whole fla files intact -then I understand why.

arduous? how so? I think it's quite simpler than AS2. For example, here is how you would attach a clip from the library (linkage id = clip)to the Stage in both AS2 and AS3:

AS2:

this.attachMovie("clip", "newClip", this.getNextHighestDepth());

AS3:

this.addChild(new clip());

[Medyman]

I have been messing around with an as 3 version that works with the xample you showed me.

I'm still playing around any ideas?

What are you doing with all those variables? Seems like you might be over complicating things. Something like this should work for what you're trying to do:

stage.addEventListener(MouseEvent.MOUSE_DOWN, paintMe);

function paintMe(e:MouseEvent):void {
	var ball:MovieClip = new Ball();
	addChild(ball);
	ball.x = mouseX;
	ball.y = mouseY;
}

That will place an instance of the Ball class (a movieclip probably in your library) at the exact spot you click on the stage.

Now, if you want that ball MC to attach to the stage as you move the mouse, change the event listener from a MOUSE_DOWN to MOUSE_MOVE.

[evan]

I only meant arduous by looking at all the material. but when I read it over again I was like
-OH, OK -slap- got it.

I did initially manage to get AS2 to migrate with just placing the ball out there, but I got crazy with trying how to get

ball.x = mouseX;
ball.y = mouseY;

in the right order -and then started guessing at all the wrong things,
It's kind of like driving and missing a turn not wanting to get directions and getting even more lost

OK ..I'll try the code now.

[evan]

I have moddified the code to confine the the drawing to a drawing pad and activate with a button, this works.

var val:Number=5
var drawing : Boolean = false;

pad.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
do_btn.addEventListener(MouseEvent.CLICK, allowDrawing, false, 0, true);

pad.addEventListener(MouseEvent.MOUSE_DOWN, drawOnpad, false, 0, true);
pad.addEventListener(MouseEvent.MOUSE_MOVE, onLoop, false, 0, true);
pad.addEventListener(MouseEvent.MOUSE_UP, stopMe, false, 0, true);
pad.addEventListener(MouseEvent.ROLL_OUT, stopMe, false, 0, true);




function allowDrawing(e:MouseEvent):void {(val=15);}

function drawOnpad(e:MouseEvent):void {if(val==15)drawing=true;}

function onLoop(e:Event):void {

if (drawing)
{
var grain:MovieClip = new Grain();
addChild(grain);
grain.x = mouseX;
grain.y = mouseY;
}
}
function stopMe(e:MouseEvent):void {
(drawing=false);
}

However the problem is it does not continue to follow the mouse it only works in spurts.

I think the MOUSE_DOWN is "fighting" with the MOUSE_MOVE any way to deal with it?

If you need me to post the swf to see let me know

-PLEASE

[Medyman]

Again, I'm not sure what those variables are for. I can guess what the drawing variable is doing, but don't know what val is for.

You're right about the MOUSE_MOVE and MOUSE_DOWN being in conflict, but maybe not for the reasons you would have thought. So this should be the timeline of what happens with this code:

1) You click on the button (or as I have in the code below, the "pad") and the drawing begins.
2) You release the button and the drawing should stop.

Pay close attention to what your mouse is on when you release. It's not the pad or the stage, it's the "grain" MC that you're dragging around. So the MOUSE_UP event should be on the grain.

See if the below works. I took out the button, but you can add it back in. You'll probably need to add the drawing variable back in if you want the button.

pad.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);

function startDrawing(e:MouseEvent):void {
	trace("START DRAWING");
	pad.addEventListener(MouseEvent.MOUSE_MOVE,Draw);
}

function Draw(e:MouseEvent):void {
	trace("DRAWING");
	var grain:MovieClip = new Grain();
	addChild(grain);
	grain.x = mouseX;
	grain.y = mouseY;
	grain.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
}
 
function stopDrawing(e:MouseEvent):void {
	trace("END DRAWING");
	pad.removeEventListener(MouseEvent.MOUSE_MOVE, Draw);
}