scratch effect using Flash and Actionscript

Read this tutorial to get the scratch effect going. I have modified my version to draw a square instead of a circle and check when the user is “almost” done scratching the card.

To check to see if the user is almost done scratching the card I use a 2D array to represent a grid on the background image. The 2D array size or Grid size is the same as your image size, the first dimension being x or width and second dimension being y or height. By default all the values in the array are set to undefined in Actionscript. Therefore, everytime we draw a square we set the value at those indices in the array to be true. For example, a user clicks at (20,20) and we draw a square from (10,10) (10,30) (30,10) (30,30). We will set the value for all the indexes from x = 10 to 30 and y = 10 to 30 to true in our 2D array.

When a user lifts the mouse button we check to see his/her progress. Doing this is just iterating through the 2D array and checking to see which pixels have been set to true. You can check to see if all the pixels are cleared or just the ones around the middle or even have a percentage of the total pixels set to true.

Here’s the source code:

this.createEmptyMovieClip(‘mask_mc’,0);

bg_mc.setMask(mask_mc);

var contor:Number=0;

var imageHeight:Number = 300;    //Image Height

var imageWidth:Number = 400;    //Image Width

var totalPixels:Number = imageHeight * imageWidth;    //Total number of pixels in this image

var almostDonePixelCount:Number = 0.8 * totalPixels;    //Number of pixels that have to be scratched to consider entire picture to be scratched. 80% of all pixels have to be scratched now.

var pixelArray:Array = create2DArray(imageWidth, imageHeight);        // 2D array to represent the image grid. For my image x is 400 and y is 300

// function create2DArray creates a 2D array with x = width and y = height

function create2DArray(width:Number, height:Number):Array

{

var array:Array = Array();

for(var index:Number = 0; index < width; ++index)

array.push(Array(height));

return array;

}

// function drawSquare draws a square on mask_mc MovieClip of sides length 2*r and having center to mouse coordinates.

function drawSquare(mask_mc:MovieClip):Void

{

var r:Number = 20;    // this controls how far off the clicked point we start drawing a square

var xcenter:Number = _xmouse;    // x co-ordinates of user click

var ycenter:Number = _ymouse;    // y co-ordinates of user click

//Draw the square

mask_mc.moveTo(xcenter-r, ycenter-r);

mask_mc.beginFill(0×000000, 100);

mask_mc.lineTo(xcenter-r, ycenter-r);

mask_mc.lineTo(xcenter+r, ycenter-r);

mask_mc.lineTo(xcenter+r, ycenter+r);

mask_mc.lineTo(xcenter-r, ycenter+r);

mask_mc.endFill();

//Loop to set pixels within the square to true

for(var xIndex:Number = xcenter-r; xIndex <= xcenter + r; xIndex++)

{

for(var yIndex:Number = ycenter-r; yIndex <= ycenter + r; yIndex++)

{

pixelArray[xIndex][yIndex] = true;

}

}

}

// function allScratched checks if the user has scratched off most of the upper layer which is set in almostDonePixelCount

function scratchDone():Boolean

{

var pixelsScratched:Number = 0;

for(var xIndex:Number = 0; xIndex < imageWidth; xIndex++)

{

for(var yIndex:Number = 0; yIndex < imageHeight; yIndex++)

{

if(pixelArray[xIndex][yIndex] == true)

{

pixelsScratched++;

}

}

}

return pixelsScratched > almostDonePixelCount;

}

// contor variable is used to hold if the mouse is pressed (contor is 1) or not (contor is 0)

this.onMouseDown=function()

{

contor=1;

}

// if the mouse is hold and moved then we draw a square on the mask_mc

this.onMouseMove=this.onEnterFrame=function()

{

if (contor==1)

{

drawSquare(mask_mc);

}

}

// check to see if the upper layer has been scratched

this.onMouseUp=function()

{

contor=0;

if(scratchDone())

{

trace(“Scratch Done”);

}

}

Flexible Rails Iteration 6 issues

I came across some roadblocks while reading the Flexible Rails book.

Here’s a few of them, I’ll update if I come across more of them.

- On a POST Rails will return a HTTP Status code of “201 Created”. Flex treats this as an error code and will therefore throw an error even though the method call executed fine. To prevent this change the following line in your rails controller:

format.xml { render  ml = > @task, :status = > :created }

to

format.xml { render  ml = > @task, :status = >  k }

So you are forcing rails to send a “200 OK” status code.

- IE caches HTTPService calls, so when you call a HTTPService the second time IE wont even fire the request to your rails server. It works fine in Firefox but you need to clear the IE cache and reload your flex application.