Home / source / Flex: image transformations to make realistic paper folding illusion

Flex: image transformations to make realistic paper folding illusion

Posted by Unknown Selasa, 16 Agustus 2011 0 komentar

Today I want to show you a nice image manipulation trick that you can do in Flex.
Imagine that you have image of some paper object (like envelope or flyer):

and you want to transform it a little bit to get a realistic look of the folded paper. Something like this:

I will show you how to do it! ;)

Solution...

1) Slice original image into several parts:

var imageData:BitmapData = Bitmap(image.content).bitmapData;
var slicesData:Array = [];
var sliceWidth:Number = imageData.width / numSlices;
var sliceHeight:Number = imageData.height;

for (var i:int = 0; i < numSlices; i++)
{
slicesData[i] = new BitmapData(sliceWidth, sliceHeight);
   slicesData[i].copyPixels(imageData, new Rectangle(i *
   sliceWidth, 0, sliceWidth, sliceHeight), new Point(0, 0));
}

2) Apply skew transofrmation for each even part, and apply the same scew but with the opposite direction for odd parts:
for (var i:int = 0; i < slices.length; i++)
{
var skewMatrix:Matrix = new Matrix();
if (i % 2)
skewMatrix.b = skew;
else
skewMatrix.b = -skew;
slices[i].transform.matrix = skewMatrix;
}

3) In real life there are light sources, so some parts of the object are lighter, while the other parts are darker (because of the shadow). So in order to make more realistic look we will extend step 2 with color transformations:

for (var i:int = 0; i < slices.length; i++)
{
var skewMatrix:Matrix = new Matrix();
// if even: skew and make it darker
if (i % 2)
{
skewMatrix.b = skew;
slices[i].transform.colorTransform = new ColorTransform
(shadowFactor, shadowFactor, shadowFactor, 1, 0, 0, 0, 0);
}
// if odd: skew and make it lighter
else
{
skewMatrix.b = -skew;
slices[i].transform.colorTransform = new ColorTransform
(lightFactor, lightFactor, lightFactor, 1, 0, 0, 0, 0);
}

slices[i].transform.matrix = skewMatrix;
}

4) Finally, just put all slices into one container with horizontal layout and horizontal gap = 0 and you will get a nice image of the folded paper! :)

We can get a lot of different combinations by playing with 4 main parameters: number of sliced, scew factor, light factor and shadow factor.
Source code is available here.

Additional examples:

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Flex: image transformations to make realistic paper folding illusion
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://androidillegal.blogspot.com/2011/08/flex-image-transformations-to-make.html. Terima kasih sudah singgah membaca artikel ini.