Source code for Bitmap Scratch Off Effect

Jul 27, 2006

I have had a few requests for the source code to my Bitmap Scratch Off Effect so here it is. You can download the source files here, just supply your own image. Feel free to use the effect where ever you wish, just note where you found it.

/**
* Creates an image that is revealed by scraping off the top layer
* @author 	Derrick Grigg
* @url		http://dgrigg.innovasium.com
* @version 	1.0
*/

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.geom.ColorTransform;
import mx.utils.Delegate;
import mx.controls.Button;

class com.dgrigg.views.BitmapScratch extends MovieClip {
	private var image_bmp: BitmapData;
	private var image_mc: MovieClip;
	private var scratch_mc: MovieClip;
	private var scraper_mc: MovieClip;
	private var start_btn: Button;
	private var brushHeight:Number = 34;	
	private var path: String;
	private var xPos: Number;
	private var onMouseMove: Function;
	
	public function BitmapScratch(){

	}
	
	public function init(value:String):Void{
		path = value;
		Mouse.addListener(this);
		image_mc = createEmptyMovieClip('image_mc', 1);
		scraper_mc = attachMovie('scraper', 'scraper_mc', 10, {_x:_root._xmouse, _y:_root._ymouse, _visible: false});
		
		onEnterFrame = function(){
			//setup event listeners
			start_btn.addEventListener('click', Delegate.create(this, handleStart));
			delete onEnterFrame;
		}
	}
	
	function handleStart(event:Object):Void {
		event.target.visible = false;
		onMouseMove = handleMouseMove;
		
		var mcl = new MovieClipLoader();
		mcl.onLoadInit = Delegate.create(this, setupImage)
		mcl.onLoadComplete = Delegate.create(this, hideImage)
		mcl.loadClip(path, image_mc);
	}
	
	private function handleMouseMove(Void):Void{
		var x = _xmouse;
		var y = _ymouse;
		
		scraper_mc._x = x;
		scraper_mc._y = y;
		
		//determine how fast the mouse moved from the previous spot
		//this value is used for the rectange width on the colour transform
		//and in calculating the colour transform offset
		var speed = Math.abs(xPos - x);
		if (speed == 0){
			speed = 2;
		}

		xPos = x;
		
		var c = image_bmp.getPixel32(x, y);
		var ct = new ColorTransform()
	
		ct.alphaOffset = speed * -2;
		image_bmp.colorTransform(new Rectangle(x-speed,y-16, speed, brushHeight), ct);
	}

	private function hideImage(target:MovieClip):Void{
		xPos = _xmouse;
		target._visible = false;
		scraper_mc._x = _xmouse;
		scraper_mc._y = _ymouse;
		scraper_mc._visible = true;
		Mouse.hide();
		
	}
	
	private function setupImage(target:MovieClip):Void{
		//create the text that displays over the image
		var text_mc = createEmptyMovieClip('text_mc', 4);
		var text_txt = text_mc.createTextField('text_txt',10, (_width/2) - (300/2), (_height/2) - (150/2), 300, 150);
		text_txt.wordWrap = true;
		text_txt.selectable = false;
		text_txt.text = 'Scrape off the top layer by moving the mouse back and forth. Faster scraping removes the top layer faster.';	
		
		var tf = new TextFormat();
		tf.size = 20;
		tf.font = '_sans';
		tf.align = 'center';
		text_txt.setTextFormat(tf);		
	
		var matrix = new Matrix();
		matrix.scale(1, 1);

		var w = target._width;
		var h = target._height;
		image_bmp = new BitmapData(w,h, true, 0xFFCCCCCC);
		image_bmp.draw(text_mc,matrix);
		
		text_mc.removeMovieClip();//remove the text clip now that's part of the bitmap
			
		scratch_mc = createEmptyMovieClip('scratch_mc', 2);
		scratch_mc.attachBitmap(image_bmp, 1);
		
		target._visible = true;
	}
}