My company (Socket Mobile) wanted to do a 360° feature of some of its products but we were going to have to purchase some sort of software to be able to do it. We decided to do the project in-house.

The project involved three parts: 1) We needed to take professional grade product photographs, then 2) do post production work in Photoshop. And finally, 3) use Adobe Flash to animate the scanner and create a playback control (a slider bar).

Taking Pictures

My partner, Mike Gifford, and I had basic tools:

• A digital SLR camera
• A decent lens
• 3 external lights
• A tripod

In addition, we had:

• One of those white tent-like things you use to take commercial pictures of products
• A turntable with markings every 10 degrees
• A vise that would be used to hold the product precisely in the middle, precisely upright

The “studio” was set up like this, with a camera and a tripod, focused on the scanner.

Inside the tent, the vise gripped a small bit that stuck straight up. The scanner has a small screw hole in the very bottom that accommodates a screw-in stylus tip. Here we used it to “accommodate” the bit.

I stood just outside the tent, just past the flash unit, so that I could reach in and turn the turntable. We had a mark on the surface underneath the turntable to use as the reference point. Starting at 0 degrees, we took a picture every 15 degrees. (Inevitably, as we began to turn the turntable, the scanner didn’t seem to be straight up and down at certain points. We fixed it later in Photoshop.) We took 24 pictures in all.

Post Production

In Photoshop, using Bridge, I did a few easy batch jobs. I cropped first because there were a few pictures with my hand still in them on the edge. Then I color balanced, then resized and optimized for the web.

Once all the pics were cropped and color balanced, one-by-one I removed the background.

The last post production step was to remove the bit from the images and align them all as precisely as possible.

The result was very clean professional images of our scanner:

Simple Interactive Animation

I used Flash to create a simple interactive animation. Just like a flip book, the images, when stacked and flipped through, give the impression that the object is spinning.

In Flash, I put each image in its own key frame, making sure they were all aligned in the same spot on each frame. I used the first one at the beginning and the end, to make one full revolution, 25 frames in all.

Next, I made two rollover buttons, a square and a circle, with only two states, Up and Over. In the Up state it is gray. In the Over state it is Socket orange.

I made 25 unique instances of the buttons, one for each frame.

To create the slider bar, I used a circle at each end, and squares in-between. When they are side by each, they look like a slider bar with rounded ends.

Each button is linked to a frame (in the Actionscript). When the cursor hovers over a button, it turns Socket orange and displays the corresponding frame. The result is when you slide your cursor over the bar, the scanner spins.

Click here if you’d like to see the SWF

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”rotateCHS.swf” width=”311″ height=”570″ targetclass=”flashmovie”]

Get Adobe Flash player


Leave a comment if you’d like the Actionscript 3.0.