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.