Use BlitMask’s Wrap Feature for Easy Bitmap Scrolling and Looping.

by carl schooff on October 18, 2011 · View Comments

in GreenSock Tweening Platform Tips

This movie requires Flash Player 9

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

This movie requires Flash Player 9

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

Post to Twitter Post to Facebook

  • http://twitter.com/MerrickBrewer Merrick Brewer

    He’s back!!!

    Excellent tutorial Herr Snörkl. I’d looked a while ago when Blitmask got released, but never really investigated it. This has cleared a lot of stuff up for me, so I guess I won’t be going back to regular mask’s any time soon.

    Jack’s made another superb addition to the Greensock library with this Blitmask business. I just need to find an excuse to use it now!

    Thanks Carl, more please!!!!!!!!!

  • http://www.facebook.com/people/Ogy-Ego/668868267 Ogy Ego

    Mega goodness and welcome back! :)

  • http://www.snorkl.tv/ carl schooff

    Thanks Ogy, great to be back!

  • http://www.snorkl.tv/ carl schooff

    Thanks Merrick, good to know you are still out there and didn’t abandon me for some fancy HTML5 guy:) 

    I’m gonna try my best to keep the flow going.

    -carl

  • http://www.haungo.net HaunGO

    Fantastico!

  • http://twitter.com/MerrickBrewer Merrick Brewer

    Abandon you sir! And have my head turned by some web developer? Never sir!!

  • BitstreamDreamer

    Perfect timing, Carl!! I was just foolin’ around with some scrolling mambo jambo, as you came up with the BlitMask. Very nice, just what I needed!! ;-)

  • http://www.facebook.com/profile.php?id=1488625085 Христо Панайотов

    Hi Carl;

    I’m making a a sophisticated scroller that have to scroll about 50 bitmaps simutaniously. I experimented with  and without BlitMask, and actually the snapshop taken by the BlitMask doubles the memory this apps need. For example if every bitmap takes 1 MB of memory, without Blitmask the app consumes about 60 MB of memory which jumps to over 110 with blitMask. I’m not sure which is the best wat to make this scroller work

  • Jack

    Yes, it is perfectly normal for BlitMask to use more memory – that’s because it needs to take a bitmap capture of the target in its current state so that it can blit quickly. But remember, more memory does NOT mean worse performance. If your goal is to minimize RAM usage, then don’t use BlitMask. If your goal is to maximize scrolling performance, you will probably get much better results with BlitMask. Feel free to do some tests of your own to verify that.

    If you have any other questions or concerns, please use the dedicated forums at http://forums.greensock.com. Carl and I are both pretty active there.

  • Stephan Wison

    Hey great tutorial. I have a question for anyone here. I’m just starting out and i love actionscript and greensock. Where should i start?

  • Hfhfhf

    This is not normal, it’s wrongly coded…

  • FlashCoder70

    As because Flash is poorly coded this is one of techniques which is actually used for like 3-4 years…

  • http://twitter.com/MerrickBrewer Merrick Brewer

    Click on the mega list at the top of the page, and start with the first entry!! Keep plugging away at these tutorials (they really are some of the best explained ones on the tinterwebs). 

  • Romu

    Thanks, very nice. Exactly what I was looking for for a nice score system!

  • Marek 1311

    how i make 5 strips ? :P

  • Fengxu

    Heoll! The blitmask 5 Version  has one bug.When my flash run one ring.The current picture’s of left or right has one blank,No picture!

  • Davidyel

    Dude… You do not explain how to set the offset which maybe is quite basic and easy but some poeple don’t know it.. Would be very helpful if u do that thanks.

  • Davidyel

    ok sorry for my previous comment YOU ROCK!! you helped me so much thank you!

  • Anonymous

    Hey, thanks for this and your other tuts.  I’ve been away from Flash for a couple years and in that time Tweener was discontinued and I found the GreenStock engine.  Your tuts have been very helpful in getting me started.  A question on this tut:
    In the single digit example, why do we need to convert ‘newNumber’ to a String in:
    TweenMax.to(strip1, 4, {y:String(newNumber), onComplete:showBtn});
    Thanks again.

  • http://www.snorkl.tv/ carl schooff

    hi pixeldroid,

    when the target value is a string it refers to a relative value instead of an absolute value. since the spinner constantly wraps in the same direction this was very convenient. we always want the y value to increase

    so instead of saying:

    Tween to a value of 400

    putting the value in strings means:

    Tween to 400px from the current location

    this allows the y to always increase.

    hope that helps

    -carl

  • Anonymous

    I’m doing something similar and my solution was to move it back to its starting position at the end of each ‘scroll’.  This is great!
    Thanks for the answer.

  • Dharmesh

    how i change the number at run time 
    i mean number is 1-10 and now run time i want to set 2 as 11 so how i do that in your code 
    i am try lots thing but not get any idea

  • Anonymous

    Can you change your graphic so it has numbers that run from 2 to 11?

  • Qlql

    nice, but just one question

    as I do to insert larger objects there?
    muchas gracias!

  • popsicle

    Great tutorial! I have been trying to get a clean motion like this for a while.  However, I compared my AS to yours and unfortunately I keep getting the error 5007: An ActionScript file must have at least one externally visible definition.

    I appreciate any and all help, thanks!

  • http://www.snorkl.tv/ carl schooff

    Hi
    Are you sure you are using an AS3 fla with AS3
    Version of greensock?

  • SM

    Hi
    Excellent  tutorial. Thanks..!!
    However, I am wondering how should I detect when I hit a jackpot, say when I get 7s as a a middle number in all 3 reels?
    Any suggestions will be very helpful. Thank you.

  • noobGuest

    Hey Carl, super cool tutorial. Thanks a lot for taking the time…
    I was wondering if you could point me in the right direction here.
    Is there a way to get the name or  instance name of the mc it tweens to?
    I’m playing with the 3 strips version and was wondering if there’s a way to get the name of the mc the tween ends on each strip.
    uber noob here when it comes to AS

  • http://www.facebook.com/dot.abadie Dot Abadie

    Thanks so much for taking the time to make this tutorial … it was extremely helpful! I’m a newbie (a retired teacher) and am trying to get a slot machine set up with only 3 strips. I want to use graphics instead of numbers, though. With each spin, I need to be able to have a single outcome as opposed to a random one. My slot machine is for illustrative purposes only. How can I tweak this to fit my needs?

  • http://www.facebook.com/dot.abadie Dot Abadie

    Thanks so much for taking the time to make this tutorial … it was extremely helpful! I’m a newbie (a retired teacher) and am trying to get a slot machine set up with only 3 strips. I want to use graphics instead of numbers, though. With each spin, I need to be able to have a single outcome as opposed to a random one. My slot machine is for illustrative purposes only. How can I tweak this to fit my needs?

  • Sk

    Hi,
    I am making a simple ad-game, is it legal to use Blitmask?

blog comments powered by Disqus

Previous post:

Next post: