Asset production for Sprite3D.

Getting a suitable animation

A search on Google for a free to use GIF animation with enough frames to fill the 360 frames required by Sandy's Sprite3D, revealed that not many animators makes that amount of images. In fact I found none. Instead I settled for an MPEG movie form Nasa's Visible Earth project. You can find it at their site as "rotate_320.mpg".

A frame from the original MPEG video

I imported the MPEG file to the Stage in Flash MX 2004, and selected to embed the video. On the Encoding page of the import wizard, I opened the advanced section, and cropped the movie to only contain the planet.

Click for full size

You can also set the frame rate and some other properties of the imported video. I experimented a bit with the frame rate settings, in an effort to get the required 360 frames. Selecting "Same as source" or 30 fps gave me a time line of 240 frames, while a setting of 10 fps gave 96 frames and one of 24 fps produced 192 frames on the time line.
The highest number of frames I was able to receive, was that 240 frames, so I had to settle with that.

I adjusted the Stage to fit the the now nearly square video.

Masking

To get a sharp edge of the earth, I created a mask in a layer above the video,
by using the drawing tools and cutting a hole in a graphic to fit the size of the planet image.

Exporting the images

Now I had an FLV encoded video on stage, but I wanted separate images.
From Flash MX you can choose to export all frames as separate images in different formats.

I selected the PNG format to retain as much of the colors as possible and with an alpha channel.
The images could be ready to import to the example fla for the Sprite3D example, but at around 75kB each, they are too big to handle.
I also want to make the area around the globe transparent.

Reducing the image size

Many image handling applications can batch process images to reduce the size, change colors, set transparency and so on.
I have the Jasc Animation Shop ( now Corel ), and it is really good at this.

Here is how you do it in Animation Shop

• Create a new empty animation
   
• Import all images in one shot to the animation, which gives you one frame per image
   
• Select to make the background transparent for all images
   
• Select to reduce the size of the animation, effectively resizing all images
   
• In the Optimization Wizard you can select to lower the image quality to reduce the weight of the animation. Reducing the palette from 255 to 127 colors made the animation reduced the total size from 1.17 MB to 897 kB, a minor improvement in my case.
   
• You can export to some different file format, GIF animation obviously one of them, but you can also select all frames and "Save Frames As" a series of PNG files, which I did.
  On exporting select to optimize the animation. All frames are exported as a series of numbered images.

The images are now reduced to around 12 kB and with the originally black background transparent.

Creating the MovieClip for the Sandy Sprite3D skin

In flash MX you create a new empty MovieClip and import the series of images from Animation Shop to the Stage. You only have to select the first file in the seres. Flash will realize that it is part of a series of numbered images, and offer to import all of them.
Just say yes and all images are imported and placed each in its own frame on the time line.

This is the MovieClip you will use for the Sprite3D MovieSkin. If you got only 240 frames, as I did, you have to fix that.
I didn't want to do any more work on that problem for my simple demo, so I just copied the first 120 frames to the end of the MovieClip's time line.

Now the clip lies ready to use in the library.
Just don't forget to give it an id, so you can access it from ActionScript!

There are certainly better ways of creating 360 images, and a full range of images from every angle would be nice ;)

That was the long story.
Thanks for listening, and now back to business!