Well, I basically have the sides, which have their position defined by an easeinoutexpo equation (see Robert Penner’s equations). Based on these positions I define the correct x1 and x2 for each row of the animation. Then for the animation, I make a value go from 0 to 1, and when going from 0 to 1, I update the screen “projecting” the current area of the box to the correct rows. This is just to define the screen boundaries.

Based on the screen boundaries, I capture portions of the original image and project them to the correct position using copyRect. It has a low quality (you’ll notice it’s not pixel-perfect) because it has speed in mind, but the effect is good enough.

Of course it’s important to use some transition/tweening engine too so things will be smooth. I used my own Tweener which is still undocumented (www.osflash.org/tweener), but on that aspect, you’ll also be fine using MC Tween, Laco’s tween, the Fuse Kit, etc.

I don’t know if I’ve made myself clear, but that’s what I do.

However, you can forget most of that and do that with a DisplacementMapFilter instead. It’d probably have a much better quality even, and be much faster, although it would be a bit more complex to generate the initial grayscale displacement map (I didn’t want to go through that when I created the thing because I needed to do it fast).

Obrigado.

Apesar de que tiveram alguns detalhes no cilindro que tornaram a coisa toda muito mais difícil (o fato de que os pedaços “se esticam” ao passar por trás, é imperceptível mas era necessário pelo fato de cada pessoa ter só 6 vídeos), no geral só o que é necessário pra fazer algo nesse sentido é conhecimento da projeção de pontos 3d (xyz) pra 2d (xy). E um pouco de trigonometria. Aquilo nada mais é que um monte de pontos criados e projetados, e aí desenhados usando os comandos de desenho; as imagens são simplesmente escaladas pra caber nas laterais, e mascaradas na borda pra parecer que estão sendo curvadas. É um efeito bem simples, e como a imagem é pequena, não dá pra perceber que é “errado”.

Projeção 3d é um assunto complexo, mas tudo que você precisa aprender pra fazer algo semelhante pode ser encontrado pode ser encontrado aqui:

http://www.kirupa.com/developer/actionscript/3dindex.htm

Não usei os ensinamentos desse site pra fazer essa coisa (já que já faço esse tipo de projeção há alguns anos) então você não vai achar nenhuma tradução direta ou receita de bolo para fazer aquilo; no entanto, o que você vai encontrar aí são todas as informações necessárias pra criar coisas semelhantes. É o link que sempre recomendo para pessoas que queiram aprender projeção 3d num ambiente 2d. É um assunto bem grande, mas bastante bacana depois de compreendido.

–//–

João,

Thanks.

Although there were a few details on the cylinder that made the thing a lot more difficult (the fact that slices on the back of the cylinder “increase” in size, it’s impossible to notice but it was needed because each employee only had 6 videos), in general all that’s needed to do something like that is knowing how to project 3d points (xyz) on 2d (xy). And a bit of trigonometry. That’s nothing more than a bunch of points created and projected, then draw using the drawing API; images are simply scaled to fit the sides, and masked on the border to look like they’re being bended. It’s a pretty simple effect, and since the image is small, you can’t notice it’s “wrong”.

3d projection is a complex issue, but everything you need to learn to do something similar can be found here:

http://www.kirupa.com/developer/actionscript/3dindex.htm

I didn’t learn from this website to do the thing (I’ve been doing that kind of projection for a few years), so you won’t find a direct translation of what I did there or any easy recipe to redo it; however, what you’ll find there is all the information needed to create similar stuff. It’s the link I always recommend for people wanting to learn 3d projection on a 2d environment. It’s a pretty complex issue, but pretty cool after you “get” it.

Well, not only the ideia is fantastic, but visually it is eye candy!! Very intuitive, everything done in detail. Congratulations to the team.
I ask myself how to implement the pseudo-3D cylinder. Where can i find info on how to implement something like that?
Thanks, and keep up the good work!