« Beyond Styling: Applying Filters on Flex Components | Main | Continuous Integration in Flex »

May 11, 2006

Time-based Flex 2 UI: If time were a color, what color is it now?

I read an interesting comment on a blog post recently discussing the possibility of a doing mathematical operations on colors in the UI, and not one to shy away from a fun challenge, I cooked up the following example of a time-based user interface in flex, as shown in the below example.

There are two things going on here. First, the background color is chosen from a pre-defined set of colors based on the day of the week. Come back tomorrow, and the background color will be different.

But, the more fun part is the second piece, which is something I've mused about in the past before... "if time were expressed as a color, what color would it be right now". So, follow me on this. The time is expressed as such: Hour is represented by a percentage of red, where 24 equals a full value (so, x / 24 converted to a hex value). Same goes for minutes (Green), and seconds (blue). All put together, a full time with hours, minutes, and seconds, becomes the RGB value. So, 12:00:00 a.m. is black and 23:59:59 is white, 12:30:30 is grey, and so forth.

View the Example (Flash 9 Player Required)

Download the Source Code

timeBasedUI.jpg

Posted by Peter Baird at May 11, 2006 9:01 PM

Comments

That is inspired. Better than any advent calendar ever. Was it subconscious to make Sunday red (ala U2) and Monday blue?

Posted by: clark slater at May 12, 2006 12:15 AM

Hi, nice idea but surely just moving through hue as the time progresses from 0 hour to 24( or 12 might be easier) would actually let you recognise the time at a glance? Would make a cool watch if all it had as a display was a coloured band. Joc

Posted by: Joc at May 12, 2006 3:32 AM

Nope, the day colors were completely subconscious, but good call (if days were colors, what colors should they be.... hmmm). Also if note that I didn't mention in the post is that this is also a good example of performance of setStyle in actionscript 3. We're firing at least two setStyle function every second, and when the hour changes, we're firing 4 setStyle functions. More possibilities you could imagine, in so far as performance allows, an item that "throbs"... the highight or color gets lighter and darker on frame entry... although we're probably pushing the limits of setStyle now. ;-)

Posted by: Peter Baird at May 12, 2006 7:40 AM

Post a comment




Remember Me?

(you may use HTML tags for style)

Powered by Movable Type