Skip to main content
F
Filemon88
Participant
June 9, 2017
Answered

Canvas Element and masks

  • June 9, 2017
  • 1 reply
  • 985 views

Hello

Recently I came across problem as I was trying to create animated mask and apply it to a jpeg that was inside movieclip

since I didn't want to make animation on timeline. I decided that I wil use createjs for creating the mask and GSAP to animate it. as seen below

var maskSize = 20;
var maskCont = new createjs.Container();
 for (var posY = 0; posY < 250; posY +=maskSize) {
        for (var posX = 0; posX < 300; posX +=maskSize) {
            var tile = new createjs.Shape(new createjs.Graphics().beginFill("#000000").drawRect(-1*maskSize/2,-1*maskSize/2,maskSize,maskSize));
            tile.x = posX + maskSize/2;
            tile.y = posY + maskSize/2;
            maskCont.addChild(tile);
        }
    }
for (var i = 0; i < maskCont.children.length; i++) {
        var maskSquare = maskCont.children;
        var targetx = Math.floor(Math.random()*100 - 50);
        var targety = Math.floor(Math.random()*80 - 30);
        var j = maskCont.children.length - i;
        mainTl.to(maskSquare, .5, {scaleX:0, scaleY:0, x:"+="+targetx, y:"+="+targety},((j*.002)+1.2) );
}

Can anyone tell me is it possible to apply the container with animation, maskCont to a movieclip on a stage, if not directly, is there somekind of workaround ?

Thanks for help in advance

    This topic has been closed for replies.
    Correct answer ClayUUID

    Okay, first... why are you dragging GSAP into this? CreateJS already has a perfectly good tween library built right in.

    Second, you apply a mask to a movieclip like this: this.myMovieClip.mask = this.myMaskSymbol;

    Third, the mask must be a single shape symbol. You can't use a container full of individual shapes. That won't work.

    Fourth (this was a fun discovery), if you're creating a complex mask shape in code, for some reason you can't use drawRect. You have to go bare metal with moveTo/Lineto/closePath.

    Umm... fifth?... if you want to animate a complex mask shape like this, AFAIK the only way to do it is to redraw the mask from scratch every time it needs to change. So a tween library probably won't be of much use anyway. You'd have to do whatever animation you want to do within the drawing code itself.

    Here's an example based loosely on your code:

    function drawMask(shape, per) {

        var posX, posY;

        var maskStep = 20;

        var maskSize = maskStep * per;

        shape.graphics.clear();

        for (posY = 0; posY < 250; posY += maskStep) {

            for (posX = 0; posX < 300; posX += maskStep) {

                shape.graphics.moveTo(posX, posY).lineTo(posX + maskSize, posY).lineTo(posX + maskSize, posY + maskSize).lineTo(posX, posY + maskSize).closePath();

            }

        }

    }

    function animateMask() {

        percent += 0.05;

        if (percent >= 1) {

            percent = 1;

            createjs.Ticker.removeEventListener("tick", animateMask);

        }

        drawMask(tiles, percent);

    }

    var percent = 0;

    var tiles = new createjs.Shape();

    drawMask(tiles, percent);

    this.myThingIWantToBeMasked.mask = tiles;

    createjs.Ticker.addEventListener("tick", animateMask);

    1 reply

    C
    ClayUUIDCorrect answer
    Legend
    June 9, 2017

    Okay, first... why are you dragging GSAP into this? CreateJS already has a perfectly good tween library built right in.

    Second, you apply a mask to a movieclip like this: this.myMovieClip.mask = this.myMaskSymbol;

    Third, the mask must be a single shape symbol. You can't use a container full of individual shapes. That won't work.

    Fourth (this was a fun discovery), if you're creating a complex mask shape in code, for some reason you can't use drawRect. You have to go bare metal with moveTo/Lineto/closePath.

    Umm... fifth?... if you want to animate a complex mask shape like this, AFAIK the only way to do it is to redraw the mask from scratch every time it needs to change. So a tween library probably won't be of much use anyway. You'd have to do whatever animation you want to do within the drawing code itself.

    Here's an example based loosely on your code:

    function drawMask(shape, per) {

        var posX, posY;

        var maskStep = 20;

        var maskSize = maskStep * per;

        shape.graphics.clear();

        for (posY = 0; posY < 250; posY += maskStep) {

            for (posX = 0; posX < 300; posX += maskStep) {

                shape.graphics.moveTo(posX, posY).lineTo(posX + maskSize, posY).lineTo(posX + maskSize, posY + maskSize).lineTo(posX, posY + maskSize).closePath();

            }

        }

    }

    function animateMask() {

        percent += 0.05;

        if (percent >= 1) {

            percent = 1;

            createjs.Ticker.removeEventListener("tick", animateMask);

        }

        drawMask(tiles, percent);

    }

    var percent = 0;

    var tiles = new createjs.Shape();

    drawMask(tiles, percent);

    this.myThingIWantToBeMasked.mask = tiles;

    createjs.Ticker.addEventListener("tick", animateMask);

    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