Replacing cursor causes problems.

[SillyMidOn]

Hi,
I've adapted Senocular's paint programme from his tutorial, in which the user can draw on the screen with the mouse.

barebones Code:
//drawing board = an mc prepositioned on stage.

var canvas:Shape = new Shape();
canvas.x = drawingBoard.x;
canvas.y = drawingBoard.y;
addChild(canvas);
function startDrawing(event:MouseEvent):void {
canvas.graphics.lineStyle(5, 0x000000);
canvas.graphics.moveTo(canvas.mouseX, canvas.mouseY);
drawingBoard.addEventListener(MouseEvent.MOUSE_MOV E, whileDrawing);
}

function whileDrawing(event:MouseEvent):void {
canvas.graphics.lineTo(canvas.mouseX, canvas.mouseY);
}

function stopDrawing(event:MouseEvent):void {
drawingBoard.removeEventListener(MouseEvent.MOUSE_ MOVE, whileDrawing);
}

drawingBoard.addEventListener(MouseEvent.MOUSE_DOW N, startDrawing);
drawingBoard.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
drawingBoard.addEventListener(MouseEvent.ROLL_OUT, stopDrawing);


This works fine. But when I replace the cursor I run into trouble:

code:
var spray_mc:spray=new spray();
spray_mc.x = 300
spray_mc.y = 300
addChild(spray_mc);

spray_mc.addEventListener(MouseEvent.CLICK, ragClick);
spray_mc.buttonMode = true;
function ragClick(event:MouseEvent):void{
addEventListener(Event.ENTER_FRAME,onragframe);
function onragframe (event:Event):void{

spray_mc.x = mouseX;
spray_mc.y = mouseY;
Mouse.hide();
}
event.updateAfterEvent();
}

The drawing becomes intermittent and patchy.
I think it's something to do with layers: when I put spray_mc into a frame with an instance name (rather than calling it dynamically), and put it's layer behind "drawing board" the drawing function works, although, obviously, the replacement cursor can't be seen!

Can anyone tell me what's going on, and suggest a solution?

Thanks for looking ...

[soulwire]

Perhaps some of the events for your spray btn are interfering with the events on the canvas. have you tried it without buttonmode and with no listeners other than the enterFrame one to position it? (which you could use startDrag for couldnt you?)

I doubt its layers, as all lines are being drawn to the canvas graphics so an other children of the main stage should have no affect on them in this respect.

[SillyMidOn]

Thanks for suggestion, but er, no joy ...



Code:
spray_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown)

function mouseDown(event:MouseEvent):void {
spray_mc.startDrag();
}
spray_mc.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

function mouseReleased(event:MouseEvent):void {
spray_mc.stopDrag();

}


This produces no drawing whatsoever!!!

If it's not a layer thing, how do you explain the fact that it works when I put replacement cursor underneath "drawing board" on the timeline?

[soulwire]

Can you upload your source?

I didnt think it is layer related as you have your stage, onto which you add the canvas and onto this you draw. What you add to the stage will be a sibling of the canvas, not a child of the canvas, so its drawing methods shouldnt be interupted like this.

Im sure there is a simple solution. If I could mess around with your fla it would be easier.

Sorry for the false start!

[SillyMidOn]

Thanks for your time.

[SillyMidOn]

further to what I said before, I notice that if you move the replacement very slowly you get a better result, though still not useable.

Does this suggest anything?

[soulwire]

var canvas:Shape = new Shape();
canvas.x = drawingBoard.x;
canvas.y = drawingBoard.y;
addChild (canvas);

function startDrawing (event:MouseEvent):void
{
canvas.graphics.lineStyle (5, 0x000000);
canvas.graphics.moveTo (canvas.mouseX, canvas.mouseY);
drawingBoard.addEventListener (MouseEvent.MOUSE_MOVE, whileDrawing);
}

function whileDrawing (event:MouseEvent):void
{
canvas.graphics.lineTo (canvas.mouseX, canvas.mouseY);
}

function stopDrawing (event:MouseEvent):void
{
drawingBoard.removeEventListener (MouseEvent.MOUSE_MOVE, whileDrawing);
}

drawingBoard.addEventListener (MouseEvent.MOUSE_DOWN, startDrawing);
drawingBoard.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
drawingBoard.addEventListener (MouseEvent.ROLL_OUT, stopDrawing);


var spray_mc:spray=new spray();
spray_mc.x = 20;
spray_mc.y = 20;
drawingBoard.addChild (spray_mc);


spray_mc.addEventListener (MouseEvent.CLICK, ragClick);
spray_mc.buttonMode = true;
function ragClick (event:MouseEvent):void
{
addEventListener (Event.ENTER_FRAME,onragframe);
function onragframe (event:Event):void
{
spray_mc.x = drawingBoard.mouseX;
spray_mc.y = drawingBoard.mouseY;
Mouse.hide ();
}
event.updateAfterEvent ();
}

You were on to something ;) It was simply that the mouse_out event on the drawingboard was being triggered when the spray intersected with the mouse (which happens as enterframe updates too slow)

One way to solve this is to either use hittest or a dummy button which resides above all content. But the slightly modified code above will achieve the same thing by adding the spray as a child of drawingboard so that the listeners dont get tangled up, so to speak.

[soulwire]

further to what I said before, I notice that if you move the replacement very slowly you get a better result, though still not useable.

Does this suggest anything?

Yes, this is because the enterFrame has time to move the spray before the mouse overlaps, wheras quick movement may cause the lsitener to be triggered.

I guess! ;)

[SillyMidOn]

hey, thanks ... does the job perfectly!!

Almost ... if you change colour of spray_mc you'll notice that it appears BEHIND the line that it's drawing, which is a little too surreal for me! Any ideas?

Just for educational purposes, your dummy button proposition: could you explain what you mean a bit more. I'm fairly simple ...


thanks again for sorting this out.

And where the hell is the shires? Sounds like an old folks home!

[soulwire]

Hi,

So here is an example using a 'hotArea' sprite, which sits on top and acts as a dummy button to handle the drawing, which is implemented on the canvas. Your spray sits in between, so will apear on top of the graphics and below the hotArea so that its functionality doesnt impare that of the hotArea:


var canvas:Shape = new Shape();
var hotArea:Sprite = new Sprite();

hotArea.graphics.beginFill (0x990000,0);
hotArea.graphics.drawRect (-(drawingBoard.width/2),-(drawingBoard.height/2),drawingBoard.width,drawingBoard.height);
hotArea.graphics.endFill ();

canvas.x = hotArea.x = drawingBoard.x;
canvas.y = hotArea.y = drawingBoard.y;

function startDrawing (event:MouseEvent):void
{
canvas.graphics.lineStyle (5, 0x000000);
canvas.graphics.moveTo (hotArea.mouseX, hotArea.mouseY);
hotArea.addEventListener (MouseEvent.MOUSE_MOVE, whileDrawing);
}

function whileDrawing (event:MouseEvent):void
{
canvas.graphics.lineTo (hotArea.mouseX, hotArea.mouseY);
}

function stopDrawing (event:MouseEvent):void
{
hotArea.removeEventListener (MouseEvent.MOUSE_MOVE, whileDrawing);
}

hotArea.addEventListener (MouseEvent.MOUSE_DOWN, startDrawing);
hotArea.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
hotArea.addEventListener (MouseEvent.ROLL_OUT, stopDrawing);


var spray_mc:spray=new spray();
spray_mc.x = 20;
spray_mc.y = 20;

addChild (canvas);
addChild (spray_mc);
addChild (hotArea);

spray_mc.addEventListener (MouseEvent.CLICK, ragClick);
spray_mc.buttonMode = true;
function ragClick (event:MouseEvent):void
{
addEventListener (Event.ENTER_FRAME,onragframe);
function onragframe (event:Event):void
{
spray_mc.x = mouseX;
spray_mc.y = mouseY;
Mouse.hide ();
}
event.updateAfterEvent ();
}

The Shire is Oxfordshire, England, which is where Tolkein was when he wrote Lord of the Rings, so we residents all claim that the idyllic shire in the book and films is a reference to the beautiful countryside in the Oxfordshire Cotswolds! :)

[SillyMidOn]

PERFECT!
Thanks Gandalf!

One thing: could you explain this line? i don't understand what it means at all!

(-(drawingBoard.width/2),-(drawingBoard.height/2),drawingBoard.width,drawingBoard.height);

[soulwire]

PERFECT!
Thanks Gandalf!


Lol, no problem ;)


PERFECT!
(-(drawingBoard.width/2),-(drawingBoard.height/2),drawingBoard.width,drawingBoard.height);


This is just drawing the invisible hotArea. Normally the code wouldnt be so verbose, but as your drawingBoard mc has its registration point in the center, we'd need to either move the hotArea up by half its height and left by half its width (to be in line with the drawingBoard) or just draw the shape inside it differently.

Does that make sense? Its a little sloppy I know - you could cut down the code by making a more elegant looking variable for the drawingBoard width and height.

[SillyMidOn]

yeah, I realized what it was doing eventually!


Thanks again. And I'm already trying the variable ...

[soulwire]

yeah, I realized what it was doing eventually!


Thanks again. And I'm already trying the variable ...

Nice one ;) Good luck!