Agustus 2011

Home / Archives for Agustus 2011

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:

Baca Selengkapnya ....

Android: helper class for asynchronous images downloading with caching

Posted by Unknown Sabtu, 13 Agustus 2011 0 komentar

It's a common task in the Android development to display some images from the web into the ImageView widgets. Curiously enough, Android SDK doesn't have API for such a common thing, something like:

imageView.downloadFromURL(SOME_URL_HERE);

Moreover we want to have next features also:

perform data loading process in a separate thread to make User Interface responsive (while image data is loading)

caching support, to retrieve data immediately for already downloaded images

Of course, we can write some kind of helper class for this common task: private AsyncTask subclass to perform data loading process in an asynchronous manner, some HashMap or LinkedHashMap based class for cache implementation, etc.

But there is one more way to get all required features of image downloader helper class and don’t spend extra efforts for its implementation! :)

At the official Android Developers site there are a lot of different samples. And one of them is extremely useful in our case. Look at the XML Adapters sample:

http://developer.android.com/resources/samples/XmlAdapters/index.html

It has sample Activity to retrieve an RSS photo feed and displays the images and their titles. So in order to retrieve RSS photos guys form Android development team wrote ImageDownloader class. And this class exactly fits all our requirements!

Here you can grab the source code of ImageDownloader class:

http://developer.android.com/resources/samples/XmlAdapters/src/com/example/android/xmladapters/ImageDownloader.html