Search code examples
flashadobeanimate-cc

Is it possible to assign masks in an Adobe Animate CC HTML5/Canvas project via Javascript?

I've done some digging and can't find any clear documentation on this. When the user clicks the stage, I would like to pull an instance of Symbol A from the library and place it on the stage, then pull an instance of Symbol B and assign it as a mask.

I am sure Symbol B is a "valid" mask, as it simply contains a shape.

In the old days, this would be as simple as:

symbolAInstance.mask = symbolBInstance;

Any way to accomplish this using JS/CreateJS?

Thanks!

Solution

  • MovieClips can not be used directly as masks in CreateJS, only Shapes/Graphics. http://createjs.com/docs/easeljs/classes/DisplayObject.html#property_mask

    If you want to use something more complex like a Bitmap or MovieClip, it is possible, but it takes a few steps, and has limitations.

    1. Cache the MovieClip you want to use as a mask
    2. Create an AlphaMaskFilter on the "masked" clip pointing to the mask clip's cacheCanvas (the bitmap generated by the cache)
    3. Cache the "masked" clip to apply the filter.

    The documentation for the AlphaMaskFilters has a simple example. http://createjs.com/docs/easeljs/classes/AlphaMaskFilter.html

    One of the main limitations is that if you change the mask or masked clips (play timeline, change size, etc), then you will have to re-cache whatever changes. So if the mask changes, both the mask and masked clip need to be re-cached. Doing this to animate a mask is very expensive, and should be avoided if possible.

    Hope that helps.