Anaglyph 3D Images with Flash

We all have seen these images with a gap between its red and cyan channels, they're called anaglyphs.
In this tutorial I'll show you how can you mix 2 images into a single anaglyph with AS3.

Here you can see the result:

To start download this rar file, it has both a fla file and the Main class were we'll work. The fla file consist only in 2 MovieClips: "left_mc" and "right_mc" for the left and right view of the anaglyph.

Our Main.as right now its only a simple class that extends Sprite.

{
	import flash.display.Sprite;
	/**
	 * ...
	 * @author Eder
	 */
	public class Main extends Sprite
	{

		public function Main()
		{

		}

	}

}

The first thing we'll do is make variables for our left and right movieclips:

//...
public function Main()
{
    var leftMc:MovieClip = MovieClip(getChildByName("left_mc"));
    var rightMc:MovieClip = MovieClip(getChildByName("right_mc"));
}
//...

After that we need to remove the red channel from the left picture and the green and blue channel for the right one. To achieve this first we need to make a function called "setScreenFilter" that receives a color and a MovieClip:

private function setScreenFilter(color:int, mc:MovieClip):void
{

}

What we need this function to do is to create a rectangle over our image, then fill it with the color from the parameters and add it to the MovieClip:

private function setScreenFilter(color:int, mc:MovieClip):void
{
    var rectSprite:Sprite = new Sprite();
    rectSprite.graphics.beginFill(color);
    rectSprite.graphics.drawRect(0, 0, mc.width, mc.height);
    rectSprite.graphics.endFill();

    mc.addChild(rectSprite);
}

Now for the magic trick we need to add a BlendMode to our rectangle, so it can act over the image. It is the blending mode "SCREEN":

private function setScreenFilter(color:int, mc:MovieClip):void
{
    var rectSprite:Sprite = new Sprite();
    rectSprite.graphics.beginFill(color);
    rectSprite.graphics.drawRect(0, 0, mc.width, mc.height);
    rectSprite.graphics.endFill();

    rectSprite.blendMode = BlendMode.SCREEN;

    mc.addChild(rectSprite);
}

Now that we have this function, we can go back to our constructor where we will filter our left and right images with cyan (0x00FFFF) and red (0xFF0000) :

public function Main()
{
    var leftMc:MovieClip = MovieClip(getChildByName("left_mc"));
    var rightMc:MovieClip = MovieClip(getChildByName("right_mc"));

    setScreenFilter(0x00FFFF, leftMc);
    setScreenFilter(0xFF0000, rightMc);
}

Now if we run our flash content we will only see our top image ("left_mc") without the red channel, our right picturo is just below. What we need is to mix both images with another Blend mode, this time "MULTIPLY" will do the trick:

public function Main()
{
    var leftMc:MovieClip = MovieClip(getChildByName("left_mc"));
    var rightMc:MovieClip = MovieClip(getChildByName("right_mc"));

    setScreenFilter(0x00FFFF, leftMc);
    setScreenFilter(0xFF0000, rightMc);

    leftMc.blendMode = BlendMode.MULTIPLY;
}

And now our left image mixes with the right one creating our anaglyph. Take your 3D glasses (not the ones from modern cinemas) and enjoy.

The final Main class should be like this:

package
{
	import flash.display.BlendMode;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	/**
	 * ...
	 * @author Eder
	 */
	public class Main extends Sprite
	{

		public function Main()
		{
			var leftMc:MovieClip = MovieClip(getChildByName("left_mc"));
			var rightMc:MovieClip = MovieClip(getChildByName("right_mc"));

			setScreenFilter(0x00FFFF, leftMc);
			setScreenFilter(0xFF0000, rightMc);

			leftMc.blendMode = BlendMode.MULTIPLY;
		}

		private function setScreenFilter(color:int, mc:MovieClip):void
		{
			var rectSprite:Sprite = new Sprite();

			rectSprite.graphics.beginFill(color);
			rectSprite.graphics.drawRect(0, 0, mc.width, mc.height);
			rectSprite.graphics.endFill();

			rectSprite.blendMode = BlendMode.SCREEN;

			mc.addChild(rectSprite);
		}

	}

}

Here you can download the final files in case you got stuck.

For inspiration you can check swell3d and can't miss an awesome site that makes use of this technique  here.

1 Comment

• 
  Manish 03/23/2012 at 2:43 pm

  Amazing work. It saved my time. Thanks.

  Reply