Highlighted

Masked Custom Cursor?

Community Beginner ,
Feb 08, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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;

Views

898

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Masked Custom Cursor?

Community Beginner ,
Feb 08, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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;

Views

899

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 08, 2018 0
Adobe Community Professional ,
Feb 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 1
New Here ,
Feb 08, 2018

Copy link to clipboard

Copied

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:

test.PNG 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 0
Adobe Community Professional ,
Feb 08, 2018

Copy link to clipboard

Copied

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;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 1
New Here ,
Feb 08, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 0
New Here ,
Sep 18, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2019 0
New Here ,
Sep 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2019 0