Wednesday, May 24, 2006

SmartBitmap -- Caching when you only need it!

Flash 8 introduced one of the greatest features ever, atleast in my opinion, the BitmapData object along with cacheAsBitmap. Using cacheAsBitmap can greatly increase your performance or it can make it much worse. When you use cacheAsBitmap Flash first, renders the vector, then it converts it into a bitmap. It only does this when you're changing a visual property of the movieclip. These properties include the following:

  • _alpha

  • _xscale

  • _yscale

  • _rotation


I still don't know why they (Adobe/Macromedia) didn't include automatic dynamic caching for movieclips. It'd make caching as a bitmap so much more advantagious and general purpose than it is now.

Well, I tackled that problem, with a nifty little class-- SmartBitmap.

A SmartBitmap will only cache when the properties listed above haven't changed for a set period of time (defined when the SmartBitmap is created).
Download:
SmartBitmap.as
Dependencies
Interval.as

FLA Example:
SmartBitmapSource.fla

SWF Example:
SmartBitmapExample.swf
Once the checkbox is unchecked all particles created afterwards are uncached, previous particles are unaffected.


Code Example:


The SmartBitmap class has six arguments:

  • $delay: The time (in milliseconds) to check the above listed properties of change (225 is reccomended).

  • $scope: The MovieClip you wish to attach the SmartBitmap into.

  • $link: The library linkage name of the movieclip that you wish to attach to $scope.

  • $new: The new instance name of the movieclip within $scope.

  • $depth: The depth of the movieclip to be created.

  • $initObj: The object you wish to pass to attachMovie containing predefined properties.




var nDot:SmartBitmap = new SmartBitmap($checkDelay:Number, $scope:MovieClip, $linkage:String, $newName:String, $depth:Number, $initObj:Object);



Once you create a SmartBitmap object like so.


var nDot:SmartBitmap = new SmartBitmap(225, this, "dot", "d"+d, d, {_x:s._xmouse, _y:s._ymouse});


You reference properties directly via the object.


nDot._x += 12;
nDot._alpha -= 14;

nDot.onEnterFrame = function(){
if(random(10) == 0){
this._alpha--;
}
}



I hope someone puts this to good use, if you do comment!

Monday, May 22, 2006

Grid Positioning-- out with the old, in with the new.

When ever I've had to position items in a grid I've always gone about it the same way every time, by using a lot of vars.

var xPos:Number, yPos:Number;
var yStart:Number = 10;
var xStart:Number = 10;
var xMove:Number = 62.5;
var yMove:Number = 70;
var xMax:Number = Stage.width-xMove;
var yMax:Number = Stage.height-yMove;
for(var i:Number = 0; i < pictureArray.length; i++){

var pData:Object = {};
pData.mc = scope.attachMovie("frame", "p"+i, scope.getNextHighestDepth());
pData.goal = new Point( xPos, yPos );
pData.picInfo = pictureArray[i].attributes;

_global.setTimeout(Delegate.create(this, add, pData), i*375);

xPos += xMove;

if(xPos > xMax){

yPos += yMove;
xPos = xStart;
}
}


Very flexible, sure, but somewhat confusing to those not too farmiliar with actionscript or too many lines for those too lazy to write it. So I wrote a easy to use GridPosition class. The code above shrinks down to a much more managable size.

//ONE LINE
var position:GridPosition = new GridPosition( new Rectangle(10, 10, Stage.width-55,
Stage.height-55), new Point(62.5, 70), "h", true);

var pictureArray:Array = galleryData.firstChild.childNodes;
for(var i:Number = 0; i < pictureArray.length; i++){

var pData:Object = {};
//ONE LINE
pData.mc = scope.attachMovie("frame", "p"+i, scope.getNextHighestDepth(),
{_x:random(100)+475, _y:random(100)+400});
pData.goal = new Point( position.x, position.y );
pData.picInfo = pictureArray[i].attributes;

_global.setTimeout(Delegate.create(this, add, pData), i*375);

position.update();
}

The GridPosition class has four parameters.

  • $area: A rectangle defining the area of where the movie clips will be placed.

  • $move: A point defining the x and y move per update.

  • $type: A string that's value is either "v" or "h" defines a horizontal or vertical orientation.

  • $overflow: A boolean that if true allows for overflow.


Download:
GridPosition.as

Example SWF:
gridSample.html

Example FLA:
GallerySample.zip

Suggestions and comments more than welcome.