Just another WordPress.com site

How To: Fake-a-roo Spinning Globe

So from time to time you may want to have some kind of globe-like thing spinning on a web page –and you don’t want to go full-on 3D (expense, plug-in, weight, budget, whatever); just something to get the job done.  One way is the circle mask.  This is an old trick and can have a tendency to look pretty cheesy unless you are careful with your tomfoolery.  

Source Map
Go out and get yourself a map of the world.  Nerd alert: your life will be easier if it’s a cylindrical map projection.  Since this is a repeating animation, you’ll need to have some overlap (add at least one-half-again the original image) so there is no skipping.  The oceans should be transparent.  I’ve also made the equator the most opaque, and increased transparency approaching the poles –this will help make the flat images bulge more when it’s time to Columbus-ize them.

Map of the world for the foreground animation.  Note that an additional half of a world has been added to the width so it can loop without jumping.

And a reversed world to use in the background animation.  Note that it is fainter so it will visually recede.

This globe is made for Silverlight, so I am using Microsoft Expression Blend to create the storyboard animation.  Using the images described above, I translate the X position of the foreground map from right to left and the background map from left to right.  The use of a reversed Earth animating in the opposite direction as the foreground Earth animation goes a long way toward the illusion of a rotating sphere with depth.  Loop this animation so it rotates forever, or for however long you need it to rotate.

Then mask (clip) the image group so that only a circle is visible at any time.  The result is a really flat looking globe animation.  Not there yet.

Animating the two maps in opposite directions within a circular mask.


Adding Depth
Let’s get this squirrely animation looking less like a disk and more like a sphere.  It’s going to take gratuitous static decoration: tons of layers of radial gradients give the illusion of depth and material.  Here they are…



Circular base with a general background color and a fuzz around the edge
(the fuzz is optional, as you’ll add more later).


Add a layer with a radial gradient who’s darker center tends near the bottom


A squished ellipse at the bottom will give the illusion of a reflection on the back
wall of what is starting to look suspiciously like a sphere.

Pile onto that another semi-transparent layer who’s darker center of radial gradient
tends near the top.  When you add the foreground reflection (in the last step) this
layer will really pop.

Now you’ve got the background gradients in place and are ready to englobalize…

Now throw in your circularly-clipped earth animation.  This animation is the sole visual
cue for rotation, and within the context of the unmoving depth decoration, goes a long
way in making this totally 2D thing look like it is spinning in space. 

But, see how the side of Africa is immediately peeling over to the foreground? Illusion busted.
If you watch the animation at this point it will still just look kind of like a deflated beach ball
flat-rolling along a track.


Maybe a happy little atmoshere lives around the edges of this globe -a 600 year old optical
illusion: atmospheric perspective!

See how there is an inner haze around the perimeter
that obscures some of the geography around the edges?  This is a double win: not only
would Leonardo De Vinci be proud of you, but you are also covering the biggest
weakness of the animation: the clip edge where the flat masked content immediately
peels from background to foreground.

The foreground reflection (semi-transparent white radial gradated ellipse near the top) is the last
element to connote a glassy sphere.  Now you’ve got the next best thing to an actual 3D globe.



Here’s a short recap video to get a sense for how it looks…



John Nelson / IDV Solutions / john.nelson@idvsolutions.com


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s