How to achieve this effect with AS3

Question

Hi Guys,

A client has asked for a spinning wheel as part of their navigation. The user is faced with the edge of the wheel with the various navigation items on there, and they spin it with a click/drag of their mouse. Whatever it stops on is what page they are presented with. The only example of this I could find to help illustrate what I want is on this website.

I have no idea where to even begin with this effect. Is there anyone who could offer some assistance. I don't need code as I'm quite good with ActionScript 3, I just need a discussion about the way to do it as I'm stuck here.

Cheers,

Dan

Answer 1

I don't think it's that difficult:

• calculate the velocity as a diff of two mouse positions
• don't use real 3D just smart masking, narrower on the top and bottom
• use some smart transparent overlays to generate those shadows and highlights, they don't move at all
• transform the height of the thumbnail according to cosine function - it's 100% in the middle and 0% on the top and bottom.

Otherwise you may try Papervision3D but I strongly recommend not to, it would overcomplicate your project.

good luck

Daniel

Answer 2

I decompiled the swf. He's using Alternativa 3D but you could just as easily use Away3D or Papervision. Personally I prefer Away. Just make a 3D ring and texture the edge.