Flash Image Rotator

I have been playing around with Flash CS3 and Action Script 3 (AS3). I've done a few projects with Flash using AS3, but I was still feeling a bit under-confident about it. Also, I had a lot of ideas related to the store software that I've been working on.

One of the things I've been wanting to do with flash was to create a generic "rotator" that I could integrate into a store. My friend Terry at Helen's Heart has a website with pictures of shoes. They're gorgeous, and I kept thinking "wouldn't it be cool if a web user could grab that shoe and look at it from different angles?!"

Such a thing is possible -- even easy -- in Flash. However, with all of the shoes that Helen's Heart stocks, it would be a daunting task to build a flash file for each and every single product.

Which is why I developed the flash component that you can see to the right. It's plain-vanilla looking, which I hope will allow it to fit in a variety of web sites. You can click and drag the picture to rotate it.

It's big "strength" is that it doesn't compile the graphics into the flash file. You pass it a "rootUrl" variable which provides a directory. The directory must contain a file called "rotations.xml" which lists the perspectives and files used in the rotatable view.

Instantiating the object:

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
         width="320" height="240" id="EONRotator" align="middle">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="allowFullScreen" value="false" />
   <param name="movie" value="EONRotator.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <param name="FlashVars" VALUE="rootUrl=http://www-dev.drowlord.com/castle_rotation" />
   <embed src="EONRotator.swf" 
         quality="high" bgcolor="#ffffff" 
         width="320" height="240" name="EONRotator" align="middle" 
         allowScriptAccess="sameDomain" allowFullScreen="false" 
         type="application/x-shockwave-flash" 
         pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>

And in the folder, the rotations.xml file:

<?xml version="1.0"?>
<rotator>
<product><perspective>0</perspective><imagename>castle0005.jpg</imagename></product>
<product><perspective>18</perspective><imagename>castle0006.jpg</imagename></product>
<product><perspective>36</perspective><imagename>castle0007.jpg</imagename></product>
<product><perspective>54</perspective><imagename>castle0008.jpg</imagename></product>
<product><perspective>72</perspective><imagename>castle0009.jpg</imagename></product>
<product><perspective>90</perspective><imagename>castle0010.jpg</imagename></product>
<product><perspective>108</perspective><imagename>castle0011.jpg</imagename></product>
<product><perspective>126</perspective><imagename>castle0012.jpg</imagename></product>
<product><perspective>144</perspective><imagename>castle0013.jpg</imagename></product>
<product><perspective>162</perspective><imagename>castle0014.jpg</imagename></product>
<product><perspective>180</perspective><imagename>castle0015.jpg</imagename></product>
<product><perspective>198</perspective><imagename>castle0016.jpg</imagename></product>
<product><perspective>216</perspective><imagename>castle0017.jpg</imagename></product>
<product><perspective>235</perspective><imagename>castle0018.jpg</imagename></product>
<product><perspective>252</perspective><imagename>castle0019.jpg</imagename></product>
<product><perspective>270</perspective><imagename>castle0020.jpg</imagename></product>
<product><perspective>288</perspective><imagename>castle0001.jpg</imagename></product>
<product><perspective>306</perspective><imagename>castle0002.jpg</imagename></product>
<product><perspective>324</perspective><imagename>castle0003.jpg</imagename></product>
<product><perspective>342</perspective><imagename>castle0004.jpg</imagename></product>
</rotator>

The perspective is a number from 0 to 359 (degree of rotation), and the imagename is the filename for the image that you want to use for that perspective. In this example, I've used 20 files, with an image for every 18 degrees. However, you could include 360 files if you wanted, one for every 1 degree of rotation. in-between rotations round downward to the nearest image. In this way, you could use it for a fairly choppy (but bandwidth-considerate) rotation with just a few images, or a fairly smooth (bandwidth-heavy) rotation with many images.

You can also adjust the "width" and "height" attributes to make it fit thumbnail graphics or full-size photographs.

Feel Free to steal this and use it
in your websites. However,
I would appreciate credit. If
that doesn't work for you, I would
appreciate an email letting me
know that people are benefiting
from my effort.

This second one demonstrates my idea a bit better, since it uses real photographs. I used a paper plate and a thumbtack to keep the rotation uniform, The skeleton couldn't stand on top of the thumbtack, which is why he moves so much, instead of rotating in place. The lighting isn't great, either, but it demonstrates the idea. I'm thinking about building a machine to automatically take photographs in a 360 degree arc. It would basically be a light box with a rotating platform and a webcam.