Say you need to flip an image. You don’t want a boring rotationY flip, you’d rather see it bending a little so it looks more like a paper flip. Something like this (click to flip):

 

 

How do you do that?

It is easy, thanks to AS3Dmod (created by Bartek Drodz) and its nice modifiers like Bend and Twist. Those modifiers work on 3D meshes, so you need to choose a 3D library to create your “paper” before you can twist it. AS3Dmod comes with proxies to work with 4 known 3D libraries: Papervision, Away3D, Sandy and Alternativa. I can’t say much about the last two, but Papervision and Away3D would add around 200k to your file, which might be a big cost for this simple effect. It is a better choice to use Away3DLite (if you can use Flash Player 10).

The thing is AS3Dmod does not come with a proxy to work with Away3DLite, but thanks to the nice structure of the library, we can easily write a new proxy. Here is what I came up with:

 

LibraryAway3dLite

public function LibraryAway3dLite() 
{
	var m:MeshProxy = new Away3dLiteMesh();
	var v:VertexProxy = new Away3dLiteVertex();
}

Away3dLiteVertex

private var vx:Vector3D;
 
override public function setVertex(vertex:*):void 
{
	vx = vertex as Vector3D;
	ox = vx.x;
	oy = vx.y;
	oz = vx.z;
}

Away3dLiteMesh

override public function setMesh(mesh:*):void 
{
	awm = mesh as Mesh;
 
	var lookUp : Dictionary = new Dictionary(true);
	var vs:Vector.<Number> = awm.vertices;
	var vc:int = vs.length;
	var ts:Vector.<Face> = awm.faces;
	var tc:int = ts.length;
 
	for (var i:int = 0; i < vc; i+=3) {
		var nv:Away3dLiteVertex = new Away3dLiteVertex();
		var vector:Vector3D = new Vector3D(vs[i], vs[i + 1], vs[i + 2]);
		nv.setVertex(vector);
		vertices.push(nv);
		lookUp[vector] = nv;
	}
 
	(...)
}
 
override public function postApply():void 
{
	var vs:Vector.<Number> = awm.vertices;
	var vc:int = vs.length;
 
	for (var i:int = 0; i < vc; i+=3) 
	{
		var vertex:Away3dLiteVertex = vertices[i / 3];
		vs[i] = vertex.x;
		vs[i + 1] = vertex.y;
		vs[i + 2] = vertex.z;
	}
}

Those are just the main parts of the code. You can download all the classes with the example files below. I’d like to make clear that I kept the package com.as3dmod.plugins because it seemed more logical and organized, but it is not originally a part of AS3Dmod, so you might want to add it to com.something-else.modifiers.plugins if you want to keep it pure.

I wrote an email to Bartek about this proxy, so maybe he’ll consider adding this to AS3Dmod.
That would be awesome! :-)

 

Ok, so your file lost some extra weight, but you still have to bend that image. You might want to start by creating 2 planes, 2 bitmap materials, 2 modifiers, 2 stacks, etc. I find it easier to create a cube and flatten it. I can ignore top, bottom, left and right faces and use it like a plane with some material in the front and another material in the back. I have tried both ways (planes and cube) and I couldn’t tell any difference between them, so it is up to you.

If you choose the cube version, there is one more thing to consider: Away3DLite doesn’t have a primitive called Cube. Instead, it has a simpler object called Cube6. You can only set one material for the cube, which means that if you set a bitmap material, you’ll see it wrapping around the whole cube.

 

 

Away3DLite maps your image in six equally sized areas and set each of them to one face of the cube. Once I found which one was the front and the back, it was done.

 

Away3DLite Cube6 map

 

To create the paper flip, you don’t need all those faces. So you can create an empty BitmapData 3 times wider and 2 times higher than the front face. This will be your cube material. Now you just need to draw the front and back faces in the correct position. Matrix tx and ty properties will handle that:

var faces:BitmapData;
var front:BitmapData;
var back:BitmapData;
var bmpMaterial:BitmapMaterial;
var matrix:Matrix;
 
bmpFront = new FrontFace(0, 0); // bitmap asset from the library
bmpBack = new BackFace(0, 0);  // bitmap asset from the library
 
faces= new BitmapData(front.width * 3, front.height * 2, false, 0xFFFFFFFF);
matrix = new Matrix(1, 0, 0, 1, 0, front.height);
faces.draw(front, matrix);
matrix = new Matrix(1, 0, 0, 1, back.width, 0);
faces.draw(back, matrix);
 
bmpMaterial	 = new BitmapMaterial(faces);

 

Now it’s all set for the flipping and bending effect. I first started with the Bend modifier, but it looks much better with Twist. The effect is a combination of rotationY and twist tweens. I am using GreenSock’s TweenLite.

TweenLite.to(_twist, .6, { angle:.6, ease:Quart.easeIn, onComplete:function():void
{
	TweenLite.to(_twist, .5, { angle:0, overwrite:0, ease:Quart.easeOut } );
} } );
TweenLite.to(_cube, 1.2, { rotationY:endRotationY, ease:Expo.easeInOut } );

 

You’ve seen the effect at the beginning of the post, but since I am dealing with a cube, why not add some depth? It looks nice too (click to flip):

 

FILES
Example and classes

 


10 Comments on “AS3Dmod + Away3DLite”

You can track this conversation through its atom feed.

  1. Jude says:

    Great job! And exactly what I was looking for, but I can’t download the files (I’m always redirected to this post) :(

  2. admin says:

    Hi Jude, I’m sorry about that.

    Things are a bit under construction here, I haven’t told anyone about this blog yet. I guess I underestimated Google :-)

    The files are now available for download:
    Example and classes

  3. Jude says:

    Thank you.

    Keep going on this great job, you’re already on my bookmarks ;)

  4. Roman says:

    Would it need much customization to apply this on a thumbnail gallery grid. I would like to use this wonderful effect for transitioning from the “front” of a dynamic loaded image on a container clip to the “back” where some relevated text information sits to the image.

    Would be cool to hear some suggestions on how i could realize that. I am quite new to ActionscriptScript3.

    thanks in advance!

  5. admin says:

    Hi Roman,

    For the front face, you just need to replace the bitmap in the Library by a dynamic loaded bitmap.
    As for the text, you can create a Sprite with a TextField inside, draw it into a bitmap and use this bitmap as the back face.

  6. Roman says:

    Thanks, didn´t thought it would be that easy. replacing the bitmap and creating a Sprite with a TextField…

    Just applied that and it´s working flawless, thank you.

  7. Michael says:

    Great implementation, thanks a lot.
    There is some bugs though, when I try to bend a cube that has a different number of segments on the 3 different axis. Like if you want to bend something on the y axis, then you would just set 1 segment for depth and height, to make it lighter.

  8. admin says:

    Hey Michael,

    I see what you mean.
    When you try to create a Cube6 with a different number of segments for each side, you get a horrible confusion of triangles.
    That is how Away3DLite works. I don’t know if there is a way around it.

    Solution is to keep the same number of segments for every side or switch to Away3D :-)

  9. Michael says:

    Ok cool, that’s what I thought also – too bad, would have been nice for my little book with flipping pages, but away3d works just fine :-)

  10. Tony says:

    Just found this through a link from forallthecode.co.uk.
    I’m just starting out with AS3 and Away3D, but this is very helpful for future experiments.
    This is bookmarked and will be checking back to learn from you.

    Thanks for all the hard work

    Cheers

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>