AnimationEngine and Creating Icons in Photoshop...?

[Scott Rossi]

Recently, John Patten wrote:

> I've been experimenting with Animation Engine, and have been creating some
> icons that work as levers, odd shaped dials, etc. etc.
>
> Using some of the nice functions that Malte has created and his excellent
> examples I can set the icon ID of button to give the illusion of these icons
> turning. 
> 
> However, the hard part seems creating the 360 icon representations for the
> animations and such. I have access to Adobe CS3 (PS, Fireworks, Illus, etc.)
> but I'm no expert in any of these apps, especially when it comest to
> automating processes.
> 
> In PhotoShop I can create Actions however, doing something like...create
> layer, rotate 1 degree, copy layer, repeat, repeat, 360 times, does not seem
> to be in my range of expertise :-)
> 
> Malte, or any of the other graphic experts (Scott R., Richard G.),  Do you
> have any sites or tips you can point me to for automating the creation of
> images for animations and icons?

Well since you asked, I'll offer a response for what it's worth...

First, I would never create 360 images for dial rotation -- that's way too
many images, and even without knowing exactly what you're doing, I doubt
you'd be able to see much difference in anything finer than say 60 to 120
increments.

Unless your "composite" image employs some special shading that needs to
stay oriented at a specific angle, you might be able to use one image and
set its angle as needed.   Even if your situation does require the use of
multiple images, there's got to be a more efficient option than using 360
separate images.

On a dial, for example, you might make only one graphic tick mark rotate,
while keeping the base image static.  And if you used a circular tick mark,
you can simply set its position radially around the dial and don't even have
to mess with rotation at all.  Or you could create a series of graphic tick
marks positioned radially around a base image, and set the
opacity/blendLevel/backColor of the "active" tick based on the implied
rotation of the dial (think of the OS X timer icon that consists of a series
of 12 radial tick marks that "spin" and yet don't really spin -- motion is
implied by changing the opacity/color of the tick marks).

Hopefully the above illustrates that there are many ways to create dials and
levers.  If you have a specific control you're trying to create, post it
somewhere and we could take a look.

Hope this helps.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX Design