The swf above illustrates 32 BlitMasks running simultaneously. The slick performance absolutely stomps any other method available for moving so many bitmaps at the same time. Silky, smooth and totally seamless!
Remember those days of trying to do a seamless scrolling loop in Flash? You would make 2 copies of a Movie Clip and move them both across the screen only to painstakingly have to offset the whole mess to perform a seamless loop?
GreenSock’s BlitMask wrap feature ends all that. Learn how to get started with BlitMasks and enhance Flash performance with this amazing new tool.
Watch the Video
The video covers:
-Demonstrations of the files available in the downloads
-Overview of what a BlitMask is
-The horrible Movie Clip looping technique that BlitMask wrap replaces
-How to set up your first BlitMask
-How to generate a seamless scrolling loop from a single image using BlitMask’s wrap property
What is a BlitMask
A BlitMask allows you to take a virtual snapshot of any DisplayObject and store it’s pixel data in memory. In addition, the BlitMask will manage these pixels and only render the ones needed to fill a given area (usually smaller than the DisplayObject). The BlitMask takes care of all the traditional blitting legwork and combines it with a masking effect while being fine-tuned and ready for animation.
I simply can’t do justice to all the robust features of the BlitMask in a single post so please read The Official BlitMask Information Page and the BlitMask Documentation.
All the necessary meat that you need to get started is in the video and links above. After watching and reading, grab the files from the downloads section below.
Single Digit Random Spin with BlitMask Wrap
The swf below illustrates how a single strip of numbers can scroll and seamlessly loop
AS3 Code
import com.greensock.*;
import com.greensock.easing.*;
//displayObject, x, y, width, height, smoothing, autoUpdate, fillColor, wrap
var blitMask1:BlitMask = new BlitMask( strip1, strip1.x, strip1.y, strip1.width, 100, true, true, 0x000000, true);
spin_btn.addEventListener(MouseEvent.CLICK, spin);
function spin(event:MouseEvent):void {
spin_btn.visible = false;
//generate a random offset value divisible by 100
var newNumber:Number = (randomNumber(0, 9) * 100) + 1200;
//tween to the relative value of newNumber
TweenMax.to(strip1, 4, {y:String(newNumber), onComplete:showBtn});
}
function showBtn(){
spin_btn.visible = true;
}
//http://www.snorkl.tv/2011/02/use-the-proper-function-for-random-numbers-or-else/
function randomNumber(min:Number, max:Number):Number {
//good
return Math.floor(Math.random() * (1 + max - min) + min);
}
The above code might appear a bit complex with all the random relative value stuff. You can experiment with some simpler code (as demonstrated in the video) too:
function spin(event:MouseEvent):void {
spin_btn.visible = false;
TweenLite.to(strip1, 4, {y:400});
//or use the scrollY property of the BlitMask directly
//TweenLite.to(bm, 4, {scrollY:1});
//or get funky with vertical and horizontal wrapping
//TweenLite.to(strip1, 8, {x:640, y:1500});
}
Added BONUS!
BlitMask also handles filters (glow, blur, drop shadow etc) really really well. Typically Flash will only render objects with filters on whole pixel values making animation appear jerky at times. BlitMask’s smoothing routine puts an end to all that. Check it out: http://www.greensock.com/blitmask/#filters.
Download all the source files
SNORKL-tv_BlitMask_Wrap_CS4
-Scroll Single Strip
-Scroll 3 Strips
-Scroll 32 Strips
Other Articles on Blitting
http://blog.iainlobb.com/2010/11/display-list-vs-blitting-results.html
http://jessewarden.com/2005/11/blitting-double-buffering-for-tile-based-games-in-flash-flex-part-1-of-3.html
http://nextframe.wordpress.com/2008/09/05/bezier-ink-using-flashs-drawing-api-and-bitmap-blitting/
Warning
A few years ago I downloaded a blitting demo swf and violated it with a bunch of blend modes in the Flash IDE and made one of my most impressively grotesque animations to date.
Wrap up
Thanks for watching. Please dig into the demo files and all the resources I linked to. There is a world of options available with BlitMask. I hope to cover some more of the features in the future.
Best,
Carl
