I had a bit of spare time before leaving for 360|Flex, so I wanted to create a Spark component example. The original TRON played on cable a few nights ago, so a TRON clock seemed in order. I wanted to illustrate integration of artist-generated assets and animation along with what I do best – programmatic drawing and animation, all inside an Actionscript (Spark) component.
The current demo is in beta form. I created the background clock skin before deciding on the Application background image, so things don’t ‘line up’ as well as if a real artist handled all the visuals from scratch.
This example shows how to set and animate the Application background as well as integrate dynamic drawing into a skinned component. Styling is used to set skin classes and other relevant properties.
There is a PM indicator and darkness/lightness of the hour indicator glow varies based on time of day.
The drawing utilities need some additional work. I wrote the Wedge class back in 2005 and updated it in 2006. That was used for the seconds display, then I hacked it to create the drawing class for C-sections (used to draw minutes). Then, I hacked it again to create an Arc class. In a subsequent release, I will refactor those classes to use Arc as a base utility (via composition) and draw the C-sections and Wedge using Arcs.
I’m a big believer in single responsibility, so the clock component displays time and that’s it. It does not control or manage timing. In the next release, I’ll show how to use the same component as a stopwatch. Also in the next version, I’ll place some formal states into the clock component and its skin and illustrate use of invalidateSkinState(). Lots on the todo list 🙂
Probably need to do some more testing and tweaking, but I wanted to get something out before leaving for 360|Flex. Full source code (and the .FLA files for the visual assets) are provided. Hope you get something out of it whether you’re a TRON fan or not.
UPDATE: V2 (dynamic drawing and static artist assets as skin parts) of this component is now available here – https://algorithmist.wordpress.com/2011/04/22/tron-clock-v2/
The Algorithmist 
I love clocks too. Here’s one I made with FXG in MXML plus some programmatic FXG.
http://saturnboy.com/2010/11/programmatic-skinning-in-flex-4-an-fxg-clock/
Two very different approaches, but I found the differences to be illuminating.
Nice example, especially the use of FXG – way to go!