Update to Egg Timer
On one of my projects at work I ended up using two Egg Timers but in different states. Since it would be easier to know if the correct Egg Timer was in the correct state, I added a couple of new parameters to the Egg Timer.
<fx:Declarations> <fx:uint id="backgroundColor">0xFFFFFF</fx:uint> <fx:uint id="faceColor">0xFF0000</fx:uint> <fx:uint id="bezelColor">0xcccccc</fx:uint> </fx:Declarations>
Then I replaced the static colors with these defined variables to make it work.
timerBackground = new Sprite(); timerBackground.graphics.lineStyle(3, bezelColor); timerBackground.graphics.drawCircle(0,0,timerSize); timerBackground.graphics.endFill(); timerBackground.filters = [bevelfilter, glowFilter]; backGroundCircle = new Sprite(); backGroundCircle.graphics.beginFill(faceColor); backGroundCircle.graphics.drawCircle(0,0,timerSize); backGroundCircle.graphics.endFill(); backGroundCircle.filters = [dropShadow];
After those simple changes, the Egg Timer parameters can easily be added when placing the component.
<components:EggTimer id="eggTimer5" backgroundColor="0xCCFFFF" bezelColor="0x6600FF" />
Fairly simple. Since the color parameters are already set as uint, there is no for any further conversion to make the color. I also added a style sheet to the example to help with the color coding for the site.
New sprite Egg Timer
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.
[kml_flashembed publishmethod="dynamic" fversion="10.0.0" movie="../demo/Flex/EggTimer/SpriteTimer.swf" width="600" height="300" targetclass="flashmovie"]
