CODEWITHSUNDEEP
actionscript-3flashtransitionalphatween
Papa De Beau
Papa De Beau

Reputation: 3828

as3 wipe fade alpha using tween

Is it possible to fade the alpha with a soft wipe transition using as3 tween?

I thought maybe http://www.greensock.com might have the answer but I have found nothing. I would like the image to slowly fade away from one side to the other. A soft dissolve.

I thought maybe its possible using a mask but I don't think masks accept alphas otherwise it could be done that way.

Upvotes: 1

Views: 2231

Answers (2)

Gio
Gio

Reputation: 1954

Actually masks allow alphas. It's kind of a hack. You should try writing this in code:

maskMC.cacheAsBitmap = true;
objMC.cacheAsBitmap = true;
objMC.mask = maskMC;

Where objMC is your animated MovieClip and maskMC is your Mask that contains a gradient shape with transparency. See an example here: Link

You can also achieve this effect using Greensock. Code would look like this:

TweenLite.to(objMC, 1, {"alpha":0, "x":objMC.x + 10});

When using TweenLite, you need to provide object to animate, duration of animation and an instance of an Object class (that's stuff we write between curly braces). This instance contains all the values we want to change gradually.

Upvotes: 1

BadFeelingAboutThis
BadFeelingAboutThis

Reputation: 14406

You can accomplish this by using the ALPHA blendmode.

Make a shape that has a gradient whose alpha goes from full to nothing, then make it's blend mode ALPHA, put it in the same container as your item you wish to mask.

Then set the container blendmode to LAYER

Psuedo Code:

container.blendMode = BlendMode.LAYER;  //container holds both the mask and the thing you want masked
maskObj.blendMode = BlendMode.ALPHA;

drawMaskGradients();

Here is a function I've used in the past to create said mask via code: (itemContainer is the object I'm masking) You could however do this all in the Flash IDE using design tools.

    softMaskSprite = new Sprite();

    this.blendMode  = BlendMode.LAYER;
    softMaskSprite.blendMode = BlendMode.ALPHA;
    softMaskSprite.mouseChildren = false;
    softMaskSprite.mouseEnabled = false;
    this.addChildAt(softMaskSprite,this.getChildIndex(itemContainer)+1);

    //Create Sides
    var top:Shape = new Shape();
    var matr:Matrix = new Matrix();
    matr.createGradientBox(areaWidth + (softMaskWidth * 2), softMaskWidth, 90 * (Math.PI / 180), 0, 0);

    top.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0000FF], [0,1], [0,255], matr, SpreadMethod.PAD);  
    top.graphics.drawRect(0, 0, areaWidth + (softMaskWidth * 2), softMaskWidth);
    top.graphics.endFill();

    top.x = softMaskWidth * -1;
    top.y = softMaskWidth * -1;
    softMaskSprite.addChild(top);

    //BOTTOM
    var bottom:Shape = new Shape();
    matr = new Matrix();
    matr.createGradientBox(areaWidth + (softMaskWidth * 2), softMaskWidth, 90 * (Math.PI / 180), 0, 0);

    bottom.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0000FF], [1,0], [0,255], matr, SpreadMethod.PAD);  
    bottom.graphics.drawRect(0, 0, areaWidth + (softMaskWidth * 2), softMaskWidth);
    bottom.graphics.endFill();

    bottom.y = areaHeight;
    bottom.x = softMaskWidth * -1;
    softMaskSprite.addChild(bottom);

Upvotes: 0

Related Questions