Few days before I saw an amazing 3d effects on VidazPhoto. That made me want to master this effect. So, starting today morning I played around with flex and pixel bender and here are the results. I have created simple pixel bender kernel that uses monochromatic bitmapData to calculate amount of displacement for each pixel. All you have to do, in order to make your 2D images become 3D, is to create monochromatic map (black & white image) with the same dimensions as the original image (use lighter colors for closer objects, darker colors for distant ones). Than, based on rotation, push correct amounts of full displacement (dx, dy displacements for full white color) into shader. The displacement is linear starting on 0, 0 for black color, up to dx, dy for white color. All sources available to download.

First, here is the final application with displacement map used to fake 3D effect:

Click mouse to change images, move mouse to rotate image. Full ActionScript 3 code can be also downloaded from wonderfl. The core of this app are those few lines:

shader.data.map.input = Bitmap(mapLoader.content).bitmapData;
shader.data.dx.value = [imageContainer.rotationY];
shader.data.dy.value = [-imageContainer.rotationX];

filter = new ShaderFilter(shader);
imageLoader.filters = [filter];

simple displacement with pixel bender – SimpleDisplacer.pbk

<languageVersion : 1.0;>

kernel DisplacementMap
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Displacement by bitmap map";
>
{
	input image4 src;
	input image1 map;
	output pixel4 dst;

	parameter float dx
	<
		minValue: float(-1000.0);
		maxValue: float(1000.0);
		defaultValue: float(0.0);
		description: "The amount of displacement on x axis.";
	>;

	parameter float dy
	<
		minValue: float(-1000.0);
		maxValue: float(1000.0);
		defaultValue: float(0.0);
		description: "The amount of displacement on y axis.";
	>;

	void evaluatePixel()
	{
		float2 pos = outCoord();
		float amount = sampleLinear(map, pos);
		float2 displacedPos = float2(
			pos.x + dx * amount,
			pos.y + dy * amount);
		dst = sampleLinear(src, displacedPos);
	}
}

I have used image1 input type for monochromatic map (black and white bitmap), its enough and its superfast.

Due to great success, I have added fader parameter. Fader can be used for depth of field or, alpha transparency etc. You can download advanced pixel bender source here.

Did you know you can make anaglyphs using this technique?

See standalone versions & download on 3ddm.yoz.sk

Have you ever heard about inline images? Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. This basicaly means, you can insert base64 encoded byte code of any image directly into html file. Using inline images saves HTTP requests over externally referenced objects. Data URIs can potentially store any type of data, not just images!

This example creates snapshot of flash application (on left side) and dynamicly (using javascript) creates inline image (right side) with base64 encoded bytes in src attribute. (right side is html <img>)

Application source:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    enterFrame="enterFrame()" borderStyle="solid" borderColor="#000000"
    backgroundColor="#ffffff">
<mx:Script>
<![CDATA[
    import com.adobe.images.PNGEncoder;
    import com.dynamicflash.util.Base64;

    private function enterFrame():void
    {
        if(!container || !container.width)
            return;

        container.graphics.beginFill(Math.random() * 0xffffff, Math.random());
        container.graphics.drawCircle(
            Math.random() * container.width,
            Math.random() * container.height, Math.random() * 30);

    }

    private function makeSnapshot(source:DisplayObject):void
    {
        var script:String = 'var img = document.getElementById("img");'
            + 'if(!img)'
            + '{'
                + 'img = document.createElement("IMG");'
                + 'img.id="img";'
                + 'document.body.appendChild(img);'
            + '}'
            + 'img.src="' + getSrc(source) +'";';
        ExternalInterface.call("function(){" + script + "}");
    }

    private function getByteArray(source:DisplayObject):ByteArray
    {
        var bitmapData:BitmapData = new BitmapData(source.width, source.height);
        bitmapData.draw(source);
        var bitmap:Bitmap = new Bitmap(bitmapData);
        return PNGEncoder.encode(bitmapData);
    }

    private function getSrc(source:DisplayObject):String
    {
        var byteArray:ByteArray = getByteArray(source);
        return 'data:image/png;base64,'
            + Base64.encodeByteArray(byteArray);
    }
]]>
</mx:Script>
<mx:Container id="container" width="100%" height="100%"/>
<mx:Button label="Make Snapshot" click="makeSnapshot(this)"/>
</mx:Application>

Data URLs save HTTP requests. When combined with CSS sprites, data URLs can save numerous HTTP requests. It would be interesting to see if data URLs can be combined with USEMAPS or make a data URL CSS sprite. Data URLs are a convenient way to create self-enclosed web pages that don’t rely on external objects to render.

• Save HTTP requests, avoids adding to object overhead
• Save concurrent thread – browsers default to two simultaneous connections per hostname
• HTTPS requests are simplified and performance improved

Well, for now I have no idea how can flash benefit from data urls but if I come to something I let you know.

While Flex uses bilinear resizing method when scaling images (event for Bitmap.smoothing() method), you won’t be able to get nice results when downscaling more than 2 times. Inspired by ImageResizer class I have also created SmoothImage Class. This object extends mx.Image and uses ImageResizer.bilinearIterative() class in order to generate smoother resized results.

In following example mx.Image, SmoothImage and sk.yoz.image.SmoothImage used to demonstrate resizing original 1024x679px image.

sk.yoz.image.SmoothImage class:

package sk.yoz.image
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Point;

    import mx.controls.Image;

    import sk.yoz.math.ResizeMath;

    public class SmoothImage extends Image
    {
        protected var _resizeFunction:String = "bilinearIterative";
        protected var _iterationMultiplier:Number = 2;
        protected var resizedBitmap:Bitmap;

        public function SmoothImage()
        {
            super();
        }

        [Bindable(event="resizeFunctionChanged")]
        [Inspectable(category="Other", defaultValue="bilinearIterative",
            enumeration="bilinear,bilinearIterative")]
        public function set resizeFunction(value:String):void
        {
            if(value == resizeFunction)
                return;
            _resizeFunction = value;
            resizeBitmap();
        }

        public function get resizeFunction():String
        {
            return _resizeFunction;
        }

        [Bindable(event="iterationMultiplierChanged")]
        public function set iterationMultiplier(value:Number):void
        {
            if(value == iterationMultiplier)
                return;

            _iterationMultiplier = value;
            resizeBitmap();
        }

        public function get iterationMultiplier():Number
        {
            return _iterationMultiplier;
        }

        override protected function updateDisplayList(unscaledWidth:Number,
            unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            resizeBitmap();
        }

        protected function resizeBitmap(... rest):void
        {
            if(!width || !height || !content)
                return;

            if(resizedBitmap && resizedBitmap.parent)
                resizedBitmap.parent.removeChild(resizedBitmap);

            resizedBitmap = new Bitmap(resizedBitmapData);
            addChild(resizedBitmap);
            content.visible = false;
        }

        protected function get resizeMethod():String
        {
            return maintainAspectRatio ? ResizeMath.METHOD_LETTERBOX
                : ResizeMath.METHOD_RAW;
        }

        protected function get resizedBitmapData():BitmapData
        {
            var bitmapData:BitmapData;

            if(content is Bitmap)
            {
                bitmapData = Bitmap(content).bitmapData
            }
            else
            {
                bitmapData = new BitmapData(content.width / content.scaleX,
                    content.height / content.scaleY, true, 0);
                bitmapData.draw(content);
            }

            var dimensions:Point = ResizeMath.newDimensions(
                new Point(bitmapData.width, bitmapData.height),
                new Point(width, height), resizeMethod, true);

            return ImageResizer[resizeFunction](bitmapData, dimensions.x,
                dimensions.y, resizeMethod, true, iterationMultiplier);
        }
    }
}

Update (Jan 27, 2010): in sk.yoz.image.SmoothImage

Update (Jun 14, 2010): in sk.yoz.image.SmoothImage

9 slice scale is a nice feature, but when you try to use 9 slice in flash ide on MovieClip with bitmap, you will notice a problem. It will just not work as expected. So first thing you try is “Break Apart”, with same result. You are almost there, but due to the solution is not documented you need a small hint: After break apart (ctrl + b), select each of nine slices one by one and group (ctrl + g) individually and voilà its done. See snapshot and result images…

1. original image.png

2. symbol after break apart

3. symbol2 after break apart and individual grouping

4. result in flash cs4 ide symbol, symbol2

5. 9 slice scale in flex (maintainAspectRatio used just for purpose, no impact on 9 slice scale)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
    [Embed(source="image.png",
        scaleGridTop="5", scaleGridBottom="15",
        scaleGridLeft="5", scaleGridRight="15")]
    public static const imageClass:Class;

    [Embed(source="lib.swf", symbol="symbol")]
    public static const symbolClass:Class;

    [Embed(source="lib.swf", symbol="symbol2")]
    public static const symbol2Class:Class;
]]>
</mx:Script>
<mx:Image width="100" height="200" source="{imageClass}"
    maintainAspectRatio="false"/>
<mx:Image width="100" height="200" source="{symbolClass}"
    maintainAspectRatio="false"/>
<mx:Image width="100" height="200" source="{symbol2Class}"
    maintainAspectRatio="false"/>
</mx:Application>

6. result from flex

gSkinner released BitmapSlice9 command for Flash Pro. It makes all this happen by one click.

Lets see how to convert between Bitmap, BitmapData and ByteArray in few examples:

• DisplayObject to BitmapData
• BitmapData to Bitmap
• BitmapData to ByteArray
• URL (image) to ByteArray (asynchronous)
• URL (image) to BitmapData (asynchronous)
• ByteArray to BitmapData (asynchronous)

DisplayObject to BitmapData. FYI DisplayObject is any visible object in flash (Sprite, MovieClip, Bitmap, UIComponent, Video etc…):

import flash.display.BitmapData;
var bitmapData:BitmapData = new BitmapData(button.width, button.height, false, 0xFFFFFF);
bitmapData.draw(button);
// result: bitmapData

BitmapData to Bitmap:

import flash.display.Bitmap;
var bitmap:Bitmap = new Bitmap(bitmapData);
// result: bitmap

BitmapData to ByteArray. Requires jpeg / png or any other encoder. Read more about JPEG encoding here:

import mx.graphics.codec.JPEGEncoder;
import flash.utils.ByteArray;
var encoder:JPEGEncoder = new JPEGEncoder(90);
var byteArray:ByteArray = encoder.encode(bitmapData));
// result: byteArray

URL (image) to ByteArray. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.utils.ByteArray;

var loader:Loader = new Loader();
loader.load(new URLRequest("banner1.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var byteArray:ByteArray = loaderInfo.bytes;
    // result: byteArray
}

URL (image) to BitmapData. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.BitmapData;

var loader:Loader = new Loader();
loader.load(new URLRequest("banner1.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);
    // result: bitmapData
}

ByteArray to BitmapData. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.display.BitmapData;

var loader:Loader = new Loader();
loader.loadBytes(byteArray);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);
    // result: bitmapData
}

Synchronous JPEG ByteArray to BitmapData can be found here

Basics first. How to make your symbol from Flash library visible for Flex (see images on the bottom of the artice):

• 1. Create your symbol and linkage (library (Ctrl+L) / {your symbol} / Linkage…).
• 2. Linkage Properties, set your class name that will be used in [Embed] meta.
• 3. Export .swf file and make Assets.as.

It is very handy to use central assets class. This is how I make my assets accessible in Flex application:

package
{
    import mx.core.SpriteAsset;

    public class Assets extends Object
    {
        // change/to/your/uber/cool/path/and/filename.whatsoever
        // you can also embed graphic files (.jpeg, .png, )
        [Embed(source="../libs/assets.swf#symbol1")]
        public static const symbol1Class:Class;
        public static const symbol1SpriteAsset:SpriteAsset = new symbol1Class();

        [Embed(source="../libs/assets.swf", symbol="symbol2")]
        public static const symbol2Class:Class;

        // embedding Bitmap
        [Embed(source="../libs/image.png")]
        public static const imageClass:Class;
        public static const imageBitmap:Bitmap = new imageClass();

        public function Assets()
        {
            super();
        }
    }
}

There are two ways how to ask for your symbol from .swf library – 1. source=”…#symbol1″ or 2. source=”…” symbol=”symbol2″. Symbol name is whatever you set in Linkage Properties Class in Flash (not symbol name in library!).

Usage example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" applicationComplete="init()">
<mx:Script>
<![CDATA[
    import Assets;

    private function init():void
    {
        container1.setStyle("backgroundImage", Assets.symbol1Class);
        container2.setStyle("backgroundImage", Assets.symbol2Class);
        container3.addChild(Assets.symbol1SpriteAsset);
    }
]]>
</mx:Script>
<mx:Box id="container1" width="100" height="100"/>
<mx:Box id="container2" width="100" height="100"/>
<mx:UIComponent id="container3" width="100" height="100"/>
</mx:Application>

Embedding proccess and example result in images:

Flash linkage symbol

Flash linkage properties

Flex embedded symbols

First, you can use original adobe mx.graphics.codec.JPEGEncoder. Sadly, this encoder is the slowest. There were attemps to make it faster by otpimizing code by bytearray.org, that resulted into two times faster org.bytearray.images.JPEGEncoder. Usage is pretty simple:

import org.bytearray.JPEGEncoder;

function encode():ByteArray
{
    var bitmapData:BitmapData = new BitmapData(this.width, this.height, false);
    bitmapData.draw(this);
    var encoder:JPEGEncoder = new JPEGEncoder(80);
    return encoder.encode(bitmapData);
}

But not fast enough . Since Flash Player 10 introduced alchemy (compiled C and C++ code within flash apps), it was possible to use optimized C++ encoder to do the work. Encoding time is more than 30 times faster than the original JPEGEncoder, pretty cool huh? Code looks like this

import cmodule.jpegencoder.CLibInit;

function encode():ByteArray
{
    var bitmapData:BitmapData = new BitmapData(this.width, this.height, false);
    bitmapData.draw(this);
    var init:CLibInit = new CLibInit();
    var lib:Object = init.init();
    var byteArray:ByteArray = new ByteArray();
    var byteArrayOut:ByteArray = new ByteArray();
    byteArray = bitmapData.getPixels(bitmapData.rect);
    byteArray.position = 0;
    lib.encode(byteArray, byteArrayOut, bitmapData.width, bitmapData.height, 80);
    return byteArrayOut;
}

You can also run your encoding in asynchronous mode… Read more and see tests here:

• Alchemy – asynchronous jpeg encoding
• Speed up JPEG encoding using Alchemy
• Alchemy technology