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.