DeanLogic

At work I upgraded to Flex 4.5 and started updating one of my projects.  I started running into errors with my components that used Degrafa.  Apparently the Degrafa group has stopped working on updates and code in Flex 4 has broken the arc and wedge drawing utilities.  This causes a problem with my Egg Timer component, because it relies on the wedge or arc for the display.  I decided to use the new functions of Flex to create the timer.  Unfortunately, Flex still doesn’t have it’s own wedge or arc drawing utilities.  It does have a curveTo method as part of the Graphics function, but you still have to figure out what point you want to curve to what point.  I initially thought I could just use the Shape function to draw a triangle and an ellipse, join the two together and create a wedge.  However, that was proving to be too much of a pain to do.  Then I found Lee Brimelow’s Action Script Wedge Class (Google Project Code Link).  This made things simple, except for the part where the starting point is at 90° instead of 0.  For me, this wasn’t a big issue, because all I had to do was rotate the Sprite back 90 degrees to put it at the 0 position.  A poster provided other code to fix the issue, but since it was fairly simple to fix, I didn’t bother using the other code.

var timerArc:Sprite = new Sprite();
timerArc.graphics.beginFill(0x000000);
timerArc.graphics.endFill();
timerArc.rotation = -90;
drawWedge(timerArc, 0, 0, timerSize, 360, 0);

Another little quirk with Flex 4 is the Declarations tag. Not completely familiar with everything new in Flex 4, I’m trying my best to try out new features. I figured adding the time defaults to the declarations would help things out.

<fx:Declarations>
<fx:Number id="oneMinute">60</fx:Number>
</fx:Declarations>

Well, not really.  After I had everything working with the wedges and the look of the timer, the Timer function was never reaching the TIMER_COMPLETE function.  After searching the web and trying to figure out why the Timer didn’t work the correct way anymore, I gave up using the Declarations area and moved the variables to the script tag area.  That fixed the issue.

// minutes in seconds
private var oneMinute:Number = 60;
private var twoMinute:Number = 120;
private var fiveMinute:Number = 300;
// timers with delay of 1 second, repeat of minute value
private var oneMinuteTimer:Timer = new Timer(1000, oneMinute);
private var twoMinuteTimer:Timer = new Timer(1000, twoMinute);
private var fiveMinuteTimer:Timer = new Timer(1000, fiveMinute);

To change the size of the timer, just use scaleX and scaleY on the component.  The default size is 50 x 50, which is a good general size, but I can see that there might be a need to make it larger or smaller.

Later I will probably add the multi-color option that shows green when things are still good, yellow when it is close to expiring and then red in the last 5 seconds.  I will also try working skins to see how I can use them with the Sprites.

After creating the simple Egg Timer application, I made some changes to make it a little more flexible. The original Egg Timer was just a 1 or 2 minute timer that just showed the time elapsing. The new Countdown Timer does the same, but also adds 15 second and 10 second markers to the timer and allows for selection of different time periods.

I also made changes to a simple clock counter that I created. The original clock counter would count up from a specific time. I made a change to set it to count down or up. Adding the clock gives a better visual of how much time is left on the timer.

Things that I want to do are, add a sound alert when the timer is finished and possibly when the time hits the Yellow and Red markers. I would also like to add some sort of dial or knob to control the amount of time to count down. There should also be a control to determine the Yellow and Red time markers.