Description

How to create a distortion fill effect using the fillRect() BitmapData's method.

1. Now it's simple!

Indeed you already saw this kind of effect elsewhere previously. In fact also with the old flash version it was possible to do this effect, but now it's simpler!

 

2. How it works

Let's take the image and see graphically what we are going to do using ActionScript.

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