Creating an Animated Globe
Okay, you've gotta be asking yourself, why with so many spinning globes available on the 'net should I take the time to learn how to create one myself? EASY! With an animation you create yourself you're in total control. You choose the colors, the size, the shading (if any), etc... You could even paste your logo over the globe or have some text spinning around the world (if you've got the time and the inclination to undertake such a project).
You may also be wondering why I've chosen a higher-end animation to start with. Well... that's a bit more tricky. I've said before, in a tutorial that I'm not all that fond of "cheesy" animations and I was having a hard time coming up with an idea for a good tutorial. I really believe, though, that if you follow through with this you'll accomplish something pretty cool.
For this tutorial you'll need either Paint Shop Pro, Photoshop or some other image editing software and some GIF animation software. I'll be using Gamani.com's GIF Movie Gear. You can get a demo from their website at
Gamani.com.
You'll also need a flat picture of the world. I'll be using this one:
World Map
If you can't get your hands on one you can borrow this one.
You may notice that the world is actually repeated twice. This is so there won't be any seams in the image as we animate it.
Well, I think you've got everything you need to start so let's get at it.
You may recall, if you read the previous tutorials, that an animation is merely a collection of frames that make up the movie or animation. That said, what needs to be done here, to put a spin on the globe, is create a series of globes from the map image.
Paint Shop Pro Specifics (Photoshop below)
In Paint Shop Pro you need to create the water part of the globe first. To do so:
Create a new 120x120 pixel image.
Select the Shapes tool and set the Shape to Circle and the Style to Fill.
Place the cursor at 10,10 and draw a 100xx100 circle (see figure 3.1).
figure 3.1 - the Oceans
NOTE: You can use the info displayed at the lower-left corner of the main window to help you place the cursor and to size the shape.
You'll need 11 (eleven) of these and they need to be exactly the same. One way to do this is to select the first one you've created (Selections, Select All) and paste the selection 10 times into new images (Edit, Copy -- done once then Edit, Paste , As New Image -- 10 times). These 11 blue circles are the oceans for each frame.
Select the Selection tool, set the Selection Type to Square and the Feather value to 0.
Position the cursor in the top-left corner and drag a 100x100 square selection.
Choose Edit, Copy then Edit, Paste, As New Selection (see figure 3.2).
figure 3.2 - first portion of map
You need the new image because you'll want to deform the portion of the map image into a circular shape.
Set the background color to white.
Choose Image, Enlarge Canvas and set both the Width and Height values to 120. Place a check mark in the Center box.
Choose Image, Deformations, Circle. This will warp the map image a little so that it's more circular or spherical.
Choose Edit, Copy.
Make one of the blue circles the active image by clicking on its title bar.
Choose Edit, Paste, As Transparent Selection (see figure 3.3).
figure 3.3 - first frame of globe
To create the next frame(s) make a 100x100 square selection starting 20 pixels to the right (i.e. for the second frame start at 0,20 for the third start at 0,40, etc...).
Make sure that you enlarge the canvas from 100x100 to 120x120 and that you run the Circle deformation filter on each portion of the map.
Once you've got all the frames (all 11 of them) you can save each one as a GIF. I suggest numbering them w01.gif, w02.gif, w03.gif ... w11.gif.
You PSP users can skip over the Photoshop part that comes next and move on to the animating portion...
Photoshop Specifics
Don't tell the Paint Shop Pro users, but the process is a little easier with Photoshop. Instead of creating separate images you can create one, multi-layered image.
Start off with the same double map as above.
Create a new 130x130 RGB image.
Select the Marquee tool and use the Options tab to set the Shape to Rectangular and the Style to Constrained Aspect Ratio.
Make a selection in the map image starting at 0,0. This will be a 100x100 pixel square selection using the map file provided above.
Choose Edit, Copy.
Make the 130x130 image active by clicking on its title bar and choose Edit, Paste.
Make the Map image active by clicking on its title bar. Move the selection 20 pixels hitting Shift-Right Arrow twice.
Choose Edit Copy.
Make the 130x130 image active and choose Edit Paste.
Continue moving the selection to the right and pasting it into the 130x130 image until you have 11 layers (plus the background.
Make the first layer active.
Set the Marquee tool's Shape to Elliptical and draw a round selection in the layer starting at the upper-left corner.
With the selection active choose Filter, Distort, Spherize. In the Spherize dialog box set the Amount to 100 and the Mode to Normal.
You should have a layer that resembles figure 3.4.
figure 3.4 - first frame of map
Activate the second layer and press CTRL-F to repeat the Spherize filter. Repeat this for all of the layers.
NOTE: If you notice small pieces of the map outside of the selected area simply choose Select, Invert and press the delete key to get rid of the bits.
Add a layer above the background layer.
Draw a 120 pixel circular selection in it starting at 5,5.
Set the foreground color to a deep blue and press ALT-Backspace to fill the selection with the blue color.
You may notice that the Photoshop image is green instead of black. This was easily accomplished in Photoshop. Set the foreground color to green. On each map layer set the Preserve Transparency on and press ALT-Backspace. This will turn the map image green.
Now that you have each of the map layers and the ocean (blue circle) it's time to save the file.
Because Gamani.com's GIF Movie Gear can open Photoshop files using the layers as frames I simply saved the file as a .psd (native Photoshop) file.
Animation Specifics
Now that you have all of the frames it's time to animate them.
Fire up GIF Movie Gear (or whichever animation program you're using).
In GIF Movie Gear choose File, Open.
In the Open dialog box, move to the folder that you saved the frame files in, whether you saved a collection of GIF files from Paint Shop Pro (or another image editor) or you saved a Photoshop .psd file.
If you saved your images as separate GIF files use the mouse to select the last file (w11.gif), hold down the SHIFT key and select the first frame file. This will automatically select all of the frames and put them in the proper order.
If you saved the file from Photoshop, you can simply open the layered Photoshop file.
Click Open to add all of the frames to the animation file.
You will, by default, see your animation previewed in the Preview Animation window.
After viewing the animation click the Stop button in the Preview Animation window.
Choose Animation, Optimize.
Select Shrink Palettes (Global and Local).
Turn on all of the options under Frame Reduction.
Click OK to optimize the animation. Choose Animation, Reduce Colors and set the number of colors (you can go quite low for this animation) and select No for Dither to Palette. Click OK.
Click Save As and give the file a name.
That's it! You've put your own spin on the World.
Animated Globe