Masked Custom Cursor?

[ryanm88870464]

I'm trying to make a my custom cursor (literally just a circle) worked as a mask layer to act as a sort of peep hole or flash light type search for waldo cursor. It masks an image so as you move the cursor it reveals parts of the image. The cursor works fine, the mask works fine. When you combine them everything breaks. Im using the custom cursor from the html 5 canvas snippets within animate CC, initially it gives this error:

Uncaught TypeError: Cannot set property 'mouseEnabled' of undefined.

So i comment out the mouseEnabled line. Then i get this:

Uncaught TypeError: Cannot set property 'x' of undefined

    at lib.FindWaldo.fl_CustomMouseCursor_2 (FindWaldo.js?1518104652255:42)

    at lib.FindWaldo.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.FindWaldo.b.dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.FindWaldo.b._tick (createjs-2015.11.26.min.js:13)

    at lib.FindWaldo.b._tick (createjs-2015.11.26.min.js:13)

    at lib.FindWaldo.c._tick (createjs-2015.11.26.min.js:14)

    at lib.Stage.b._tick (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.tick (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.update (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.handleEvent (createjs-2015.11.26.min.js:13)

Which loops and continually counts up the amount of errors.

Is it possible to create a mask out of a symbol that is being used for the cursor? or is this just a limitation of Animate?

[ClayUUID]

Mask symbols don't exist anymore when published. They get flattened into shapes. There are two ways you can deal with this if you need to script the mask.

You can reference the internally generated actual mask object (easier, but will break if the internal naming conventions ever change):

Animate CC Masking in the Actions Panel?

Or you can create and apply the mask at runtime (a little more work, but guaranteed to not break):

Canvas Element and masks

[dafeed00]

Hello, so I tried what was mentioned in the Canvas Element and masks forum.

--I created three layers called mask, bg, and Actions.

--Put the background image on the layer called "bg" and converted that to a movie clip and gave it an instance name of "bgmc"

--Put the green circle on the layer called "mask", converted it to a movie clip, and gave it an instance name of "maskmc"

--Then added this code on the actions layer:

     this.bgmc.mask = this.maskmc;

When I ran it, everything loaded but the green circle was not masking the background.  No errors populated in the console panel either.  See pic below:

 

I don't see anything I did incorrectly.  Am I missing something?

[ClayUUID · Accepted solution]

dafeed00  wrote

I don't see anything I did incorrectly.  Am I missing something?

Yes, the part about how a mask must be a single shape symbol. Your maskmc object isn't a single shape symbol, it's a movieclip. You have two options here.

First, you can create the mask at runtime, like this:

var maskmc = new createjs.Shape();

maskmc.graphics.drawCircle(0, 0, 50);

maskmc.x = this.bgmc.x;

maskmc.y = this.bgmc.y;

this.bgmc.mask = maskmc;

Second, you can access the shape inside a movieclip created at author time, like this:

this.maskmc.visible = false;

this.maskmc.shape.x = this.bgmc.x;

this.maskmc.shape.y = this.bgmc.y;

this.bgmc.mask = this.maskmc.shape;

[dafeed00]

ok cool, when you said "single shape symbol", the word "symbol" in my brain meant, convert to symbol, and go from there.  I didn't know you could access a shape inside of a movie clip by with this.maskmc.shape   VERY good to know (:  With that new found knowledge I got it to work.  To get that mask to attach to the cursor this was my final code:

this.maskmc.visible = false;

this.bgmc.mask = this.maskmc.shape;

stage.canvas.style.cursor = "none";

this.addEventListener("tick", customCursor.bind(this));

function customCursor() {

this.maskmc.shape.x = stage.mouseX;

this.maskmc.shape.y = stage.mouseY;

}

Thank you again for the help!

[andia34297875]

Hello, I used the first method successfully but I'd like my mask to have a soft edge like a real beam of light--is there a way to get the mask to be a gradient from solid to transparent?

[andia34297875]

I tried making my shape a gradient:
maskmc.graphics
.beginRadialGradientFill(["#FFFFFF","#000000","#FFFFFF"], [0, .5, 1], 100, 100, 0, 100, 100, 100)
.drawCircle(100, 100, 100)

but it stayed hard edged