Skip to main content
R
ryanm88870464
Participant
February 8, 2018
Answered

Masked Custom Cursor?

  • February 8, 2018
  • 1 reply
  • 2258 views

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?

This topic has been closed for replies.
Correct answer ClayUUID

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;

1 reply

C
ClayUUID
Legend
February 8, 2018

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

D
dafeed00
Participant
February 8, 2018

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?

C
ClayUUIDCorrect answer
Legend
February 8, 2018

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;

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices