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
- EnterFrame starts
- move cursor towards left of 1 pixelSize
- set the rectangle width to (image width - current cursor x)
- for every pixel in height:
- move the rectangle down of 1 pixel
- get the color at the specified coordinate ( cursor x, y )
- 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 } } |
6. Download file source
Download files used in this tutorial here.
