Flying Postcards #2 – Complex Fly Ins

In a previous post, Flying Postcards and Tweening – 3D Billboard Tutorial demonstrated the use of tweening 3D rotation properties to achieve 3D-like effect. This time I aim at creating a more complex fly-in of an image in 3D space by leveraging 2D techniques like blitting on top of a rotating postcard to achieve a complex 3D effect.

for this kind of effect, we would need to create a container sprite that will hold the bitmap. The container is setup to rotate in 2 axes to upward position, so it ends up in zero rotation for all 3 axes.

We start by creating the image and centering it in the parent, so that the container is rotated about the center point and not the top left corner. The container is then set with rotation in X and Y axes.

	var ctr:Bitmap = new Bitmap(bufBitmap);
 
	ctr.x =  - bufBitmap.width/2;
	ctr.y =  - bufBitmap.height/2;
	ctr.z = -50;
 
	dispCont.rotationX = ROT_X;
	dispCont.rotationY = ROT_Y;

After putting the tweening code, that gives us something like this:

Get Adobe Flash player

Next we create the second animation on top of the image.

The important thing to know about the second animation is that it is done on 2D space and uses blitting instead of moving display objects. Blitting is much faster than the standard display list rendering and it is potentially hardware accelerated on mobile platforms, giving better performance and smoother animation.

All the blitting code and tweening logic is done in the TileImage class. I recommend checking out the source – most of the work is done by drawTo() function that is called on every frame during the animation.

Final Result

Again, the project is written in pure AS3 + TweenLite.