Hi
Trying to recreate the effects used on the landing page.

Can anyone point me to either the source files or tutorials that explain how to create these transitions?

Can they all be achieved using the Lite version?

http://away3d.com/

It’s really just an array of cubes that are animated back and forth. Whenever they are in their side-by-side position, they make up the flat surface on which the picture is displayed.

It might be a good idea to simply release the source code (we’ll consider that) but unfortunately there is little time for us to write a full tutorial on a 3.6 topic when our hands are full of 4.0 development. :S

Hey,

I’d be happy to release the source if it was tidier as in tutorial material, but unfortunately its just a bunch of classes I put up together to achieve the effect. I can explain the process though.

A bunch of cells are created in a grid with equal dimensions. The cells are stored in an array and their front and back face UVs are altered to emulate that of a plane occupying the space of the grid. The cell class simply extends cube and contains some animation effects using tweenlite to rotate backwards and then back again. These animations are typical tweenlite effects with several steps. In the middle step, the cell’s material is changed in order to flip the images. To animate, the grid sweeps the cell grid and calls each cell’s animate function with a slight delay on each, hence producing the sweep animation effect.

That’s basically it, there’s not much more to it beyond the details of the implementation of course.

Please let me know if that helps, otherwise I will try to produce a simplified version for exhibition, although I can’t guarantee when.

hi,
i’m looking for this effect too, and your instructions helped me.
However,
i don’t understand well how you crop the final image on each cube…

Can you give an example ?

thanks you

Just cut up a bitmap.
This is an old papervision way of doing it. Should give you some clues.
http://pv3d.org/2009/04/09/sliced-cube/

yes !
this is the tricks ! thanks a lot

I know this is resurrecting an old thread, but I’ve recently emulated the transition effect found on the landing page. If anyone might still be interested, I’d be happy to put together a small tutorial.

i’m very interest !