Dynamic Masking using Tweener

Here’s a little experiment I did inspired by the new Adidas site. I totally loved their masking technique - Here’s my take:

You need the Flash Player to view this.

DOWNLOAD SOURCE

Basically the key for the masking was to use cacheAsBitmap = true to get the alpha effect of the bitmap.

I started with the animation for each column. I needed a function that would draw as many boxes (rows) per column according to what the rectangle height was.

public function drawColumn()
{

for(var row:Number = 0; row<_rows; row++)
{
var _rectX:Number = START_X+(col*RECT_WIDTH);
var _rectY:Number = START_Y+(row*RECT_HEIGHT);
var _alpha:Number = _fade+(row*.04);
_s.graphics.beginFill(0×000, _alpha);
_s.graphics.drawRect(_rectX, _rectY, RECT_WIDTH, RECT_HEIGHT);
_s.graphics.endFill();
}
}

Basically the sprite is redrawing a certain amount of squares per column at the alpha value determined by _fade+(row*.04).

So now that I had one column drawn - all I had to do was to draw multiple columns. I did this by creating a Column class.
I used tweener to Tween a custom property called fade (which resided in the column class) - and then I did a for loop of all the columns I needed for the image (determined by the RECT_WIDTH property - basically how wide each column is).

private function alphaIn(mc)
{

var NUM_ROWS = Math.ceil(mc.height/RECT_HEIGHT);
var NUM_COLUMNS = Math.ceil(mc.width/RECT_WIDTH);
for(var i:int = 0; i<NUM_COLUMNS; i++)
{
var mCol:Column = new Column(mMask, mc, i, RECT_WIDTH, RECT_HEIGHT);
//setting the initial fade value
mCol.fade = 0;
Tweener.addTween(mCol, {fade:1, time:TWEEN_LENGTH, onUpdate:mCol.drawColumn, delay:i*COLUMN_DELAY, onComplete:finishFunction});
var finishFunction:Function = function()
{
// kill the object
mCol = null;
}
}
}

So once I had that in place - all I needed to do was the opposite for the fade out effect (which proved more difficult).

I created another function called fadeColumn that basically clears the shape within the Sprite every time Tweener updates and then draws boxes the same way as before (only opposite).

public function fadeColumn()
{
_s.graphics.clear();
for(var row:Number = 0; row<_rows; row++)
{
var _rectX:Number = START_X+(col*RECT_WIDTH);
var _rectY:Number = START_Y+(row*RECT_HEIGHT);
var _alpha:Number = _fade;
var _numberOfColsLeft = (_cols-col);
var rightColsWidth = _rectX+(_numberOfColsLeft*RECT_WIDTH);
_s.graphics.beginFill(0×000, 1);
_s.graphics.drawRect(_rectX+RECT_WIDTH, _rectY, rightColsWidth, RECT_HEIGHT);
_s.graphics.endFill();
_s.graphics.beginFill(0×000, _alpha);
_s.graphics.drawRect(_rectX, _rectY, RECT_WIDTH, RECT_HEIGHT);
_s.graphics.endFill();
}
}

And lastly the Tweener call for that:

private function alphaOut(mc)
{

I may eventually make this into more of a gallery of some sort. If you need more of a breakdown - comment or email - and I’ll post. Have fun with it and if you do something cool - let me know!

I actually do heart actionscript (most of the time).