Image effect using fillRect

In ActionScript:
we start from the right side of the image (let's say the image is 380x380 px) and using an enterFrame function move 1 pixel per frame execution to the left.
At the first enterFrame execution we will copy all the pixel vertically in the _x position 380 of the original image, and apply the fill to a rectangle of 379 of width.
This will create the distortion effect.

But let's see the as code:
import flash.display.*
import flash.geom.*

/** define the variables used **/
var img:BitmapData
var cloned:BitmapData
var mc:MovieClip
var rect:Rectangle
var row:Number
var w:Number
var h:Number
var diff:Number
var pixelSize:Number = 1

// attach a bitmapData loading an image
// from the library
img = BitmapData.loadBitmap('image');
// and clone it
cloned = img.clone();

// getting the bitmapdata width and height
w = img.width;
h = img.height;

// create a new movieclip and attach the image
// to it
mc = this.createEmptyMovieClip("holder", 1);
mc.attachBitmap(img,1);
mc._x = 5
mc._y = 5


rect = new Rectangle()
row = -1


function fill(){
row += pixelSize
if(row < w){
diff = w - row
rect.width = diff
rect.height = pixelSize
for(var c = 0; c < h; c += pixelSize){
rect.y = c
img.fillRect(rect, cloned.getPixel32(diff, c))
}
} else {
delete this.onEnterFrame
}
}


function replay(){
delete this.onEnterFrame
row = -1
pixelSize = pSize.value
this.onEnterFrame = fill
}

pizelSize will define the width and height of the region to copy. This also can define a granular effect once the size is greater than 1 pixel.

Then first load the library image "image" into a bitmapdata object and also clone it into another bitmapdata object.

create a new flash.geom.Rectangle() which will be the first argument to pass to the fillRect() method

public fillRect(rect:Rectangle, color:Number) : Void

1. EnterFrame starts
2. move cursor towards left of 1 pixelSize
3. set the rectangle width to (image width - current cursor x)
4. for every pixel in height:
5. move the rectangle down of 1 pixel
6. get the color at the specified coordinate ( cursor x, y )
7. fill the rectangle with the same pixel color

3. A little modification.. another effect type

Now, modifying a little the above code you can do another kind of effect like this (granular):

and this is the fill() method modified:

function fill(){
for(row = 0; row < h; row += pixelSize){
for(col = 0; col < w; col += pixelSize){
rect.width = pixelSize*2
rect.height = pixelSize*2
rect.y = (row) - pixelSize
rect.x = (col) - pixelSize
img.fillRect(rect, cloned.getPixel32(col, row))
}
}
pixelSize -= 1
if(pixelSize < 2){
img = BitmapData.loadBitmap('image');
mc.attachBitmap(img,1);
delete this.onEnterFrame
}
}