What's this layout called? idea on achieving it?

Question

http://www.uniqlo.com/utzoom/

Anyone know what kind of layout/arrangement this is called ar? any idea how to crete such random and dynamic stuff?

Answer 1

In Flex you can use Image Manipulation to achieve the desired effect - See http://www.insideria.com/2008/03/image-manipulation-in-flex.html:

private var original:BitmapData;
private static const MAX_WIDTH:uint = 2880;
private static var MAX_HEIGHT:uint = 2880;


private function loadImage(url:String):void
{
 var request:URLRequest = new URLRequest(url);

    var imageLoader:Loader = new Loader();
 imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, image_completeHandler);
    // add other listeners here
    imageLoader.load(request)
}

private function image_completeHandler(event:Event):void
{
    var bmd:BitmapData = Bitmap(event.currentTarget.content).bitmapData;

    var originalWidth:Number = bmd.width;
    var originalHeight:Number = bmd.height;
    var newWidth:Number = originalWidth;
    var newHeight:Number = originalHeight;

    var m:Matrix = new Matrix();

    var scaleX:Number = 1;
    var scaleY:Number = 1;

    if (originalWidth > MAX_WIDTH || originalHeight > MAX_HEIGHT)
    {
        sx =  MAX_WIDTH / originalWidth;
        sy = MAX_HEIGHT / originalHeight;
        var scale:Number = Math.min(sx, sy);
        newWidth = originalWidth * scale;
        newHeight = originalHeight * scale; 
    }
    m.scale(scale, scale);
    original = new BitmapData( newWidth, , newHeight); 

    original.draw(bmd, m);

}

Rotating To use a matrix to rotate an image you either create a new Matrix with appropriate parameters

var q:Number  = 30 * Math.PI / 180 // 30 degrees in radians

var m:Matrix = new Matrix(Math.cos(q), Math.sin(q), -1 * Math.sin(q), Math.cos(q));

//or as a shortcut use the rotate method

var m:Matrix = new Matrix();

m.rotate(q) ;

When you rotate something in the Flash Player it will rotate around its registration point. This by default is the top left corner. If you want to rotate it around a different point you will need to offset it in the negative direction, do the rotation and then put it back where it was.

var m:Matrix = new Matrix();

// rotate around the center of the image

var centerX:Number = image.width / 2;

var centerY:Number = image.height /2;

m.translate(-1 * centerX, -1 * centerY);

m.rotate(q);

m.translate(centerX, centrerY);

Flipping To flip and image is a 2 step process. The first step is to multiply the current scaleX and/or scaleY by -1 and the second is to adjust the x and y position. When you flip and image the registration point does not change and its drawn in the opposite direction. To compensate you will need to change the x position by its width and its y position by its height.

var m:Matrix = new Matrix();

m.scale(-1, 0); // flip horizontal assuming that scaleX is currently 1

m.translate(image.width, 0); // move its x position by its width to put it in the upper left corner again