View Full Version : Animated 3D Compass

10 Nov 2010, 2:57 AM
hi all

We need to generate a static compass with a moving needle. the compass is in 3d. will i have any luck letting one of my coders do that in html5 and should he use the animator for such a task. i don't want to sound ignorant at all i just don't know enough to make the correct decision.

thanks for help

design sketch of compass: http://img.skitch.com/20101110-jc8c5mr7xytpwn1uqm53c7t5np.preview.jpg

11 Nov 2010, 6:54 AM
Moving the needle around like this is a 3D animation that is currently only supported on iphone/iPad (and really, not that well). You can create this animation in Animator, but it won't preview correctly in the stage. If you're ok with both those things then you can do this by:

Creating a base object image with just the compass as you show it (no needle)
Creating a container to hold the image of a needle with no perspective (aka it should be a photo graph of it taken from directly above.
Rotate the needle in X until it matches the angle of the compass in your image
Add an animation that rotates the needle in Z to show it spinning.

11 Nov 2010, 12:16 PM
With that, the 3d animation is not anti-aliased, thus will look chunky and blocky, much like the SNES Mode-7:


Actual in -work example:

16 Nov 2010, 5:55 AM
I made "quick and dirty" 3d compass using just Sencha Animator. I removed pointer/indicator in Photoshop and made new undistorted one. It took me 10 mins. so it isn't perfect, but gives you idea.
Sorry for crapy host.