Why is Konfabulator "Pretty?"

Scott Rossi scott at tactilemedia.com
Sun Dec 4 18:48:33 EST 2005

Recently, Bill Marriott wrote:

>> As far as your clock app goes, I would look at creating the various
>> positions of the hands as antialiased bitmaps outside of Rev since, as you
>> discovered, image rotation is not as good as it should be.  The import the
>> images, and use a button to serve as a "display" for the images, but
>> setting
>> the icon of the button to appropriate image at the right time:
> The "frames" method of animating the hands did occur to me, but I wasn't yet
> up to the task of creating 180 images (60 each for hours, minutes, and
> seconds). Plus this would result is a huge distro -- like 500K or more just
> for those pictures.

Admittedly, it is more work than rotating a bitmap.  But along the lines of
a well known computer company that once encouraged people to think
different, I would suggest you "think real world".  Nobody is going to sit
in front of your cock for a solid hour to determine whether or not your
minute/hour hands move precisely 1 degree for every segment of time the
elapses.  For smooth motion, it's probably worth creating 59 frames for the
second hand, but the other hands will not require 60 frames each for real
world use (unless maybe your app is going to run at 800 x 800 resolution).
Go with a smaller number of frames for the minutes, and especially hours,
and I think you'll be able to achieve a decent appearance.

> Also, I think a really nice aspect of the K. clock is that you can set the
> color of the face and the rim to anything you like. Even sexier, the rest of
> the UI elements adapt. If you pick a "dark" background, the hands and date
> display switch to complementary tints.
> Poking through the JavaScript supplied with the K. clock, I see the author
> accomplishes this with a "colorize" command applied to the PNG image. I
> think I can colorize in Rev, but this is only possible by using a blending
> mode in combination with another object. In other words, if I have a 50%
> grey PNG of the hands, to make them green I have to put a green object
> "behind" the hands and set the appropriate blend style.
> Am I right about this, or is there a way of colorizing an object directly?

Two answers:

1) You can colorize images programmatically by script, manipulating
imageData and alphaData properties.  Ken Ray has the technical details of
image/alphaData on his site <http://www.sonsothunder.com/>.  You could
create a square solid colored image object with a "virtual" minute hand, for
example, that is created by applying alphaData transparency to the image.
So instead of updating the image itself every minute or so, you update the
image's alphaData.

2) Somewhat like what you surmise above, another way to colorize the clock
face is to separate out the "effects" of your face art (hilites, bevels,
shadows, etc) as overlay/s, in translucent PNG format.  Then in Rev, use an
oval graphic as the base of the clock face and overlay the separate effect
image/s on top of the graphic.  You can then adjust the backCcolor of the
graphic by script.  You will wind up with a clock face that can be
quickly/simply colorized to any color while keeping your effects intact.

Hope this helps.


Scott Rossi
Creative Director
Tactile Media, Multimedia & Design
E: scott at tactilemedia.com
W: http://www.tactilemedia.com

More information about the Use-livecode mailing list