<?xml version='1.0' encoding='UTF-8'?>
<s:Application 
    xmlns:fc="http://ns.adobe.com/flashcatalyst/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:lib="assets.graphics.Diatonic.*" 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:flm="http://ns.adobe.com/flame/2008" 
    xmlns:d="http://ns.adobe.com/fxg/2008/dt" 
    xmlns:ai="http://ns.adobe.com/ai/2009" 
    xmlns:ATE="http://ns.adobe.com/ate/2009" 
    xmlns:j="JIMS_Sonoflash.*"
    height="228" width="383" 
    backgroundColor="#ffffff" 
    preloaderBaseColor="#ffffff"
    creationComplete="appCreationCompleteHandler(event)" viewSourceURL="srcview/index.html">
    
    <s:states>
        <s:State name="Start" fc:color="0xcc0000"/>
        <s:State name="Do"/>
        <s:State name="Re"/>
        <s:State name="Mi"/>
        <s:State name="Fa"/>
        <s:State name="So"/>
        <s:State name="La"/>
        <s:State name="Ti"/>
        <s:State name="Do2" fc:color="0x0081cc"/>
    </s:states>
    
    <fx:DesignLayer d:id="2" ai:objID="778ce400" d:userLabel="Layer1">
        <s:Group ai:objID="64a87530" d:userLabel="TiDo2" x="111" y="36" includeIn="Do2" id="TiDo2">
            <s:Group d:id="3" flm:knockout="false" ai:objID="738eff70" d:userLabel="m2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="738f0060" x="0" y="0">
                    <s:Line ai:objID="738f0150" x="8.5" xFrom="205" y="6.5" yFrom="33">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0xFF0000" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 0 4.8 C 4.293 3.956 9.734 2.209 13.288 0 L 9.735 6.382 L 11.085 13.56 C 8.413 10.34 3.805 6.96 0 4.8 Z" ai:objID="77893610" winding="nonZero" x="0.129" y="0.145">
                        <s:fill>
                            <s:SolidColor color="0xFF0000"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>
            <s:Group ai:objID="650c6860" x="12" y="2">
                <s:Rect alpha="0.66" height="11" ai:objID="650c6950" width="21" x="0" y="0">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="4" kerning="on" lineHeight="120%" ai:objID="778d4260" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="m2">
                    <s:content><s:p d:id="5" whiteSpaceCollapse="collapse"><s:span d:id="6">m2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <s:Group ai:objID="738368f0" d:userLabel="LaTi" x="270" y="74" includeIn="Do2,Ti" id="LaTi">
            <s:Group d:id="7" flm:knockout="false" ai:objID="738369e0" d:userLabel="M2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="73836ad0" x="0" y="0">
                    <s:Line ai:objID="73836c50" x="1.5" xTo="40" y="8.5">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0x0000FF" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 12.82 7.133 C 8.56 8.713 3.275 11.41 0 14.266 L 2.58 7.133 L 0 0 C 3.275 2.855 8.56 5.553 12.82 7.133 Z" ai:objID="7785c410" winding="nonZero" x="37.903" y="0.867">
                        <s:fill>
                            <s:SolidColor color="0x0000FF"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>
            <s:Group ai:objID="7789ffe0" x="19" y="2">
                <s:Rect alpha="0.66" height="11" ai:objID="778a00d0" width="21" x="0" y="0">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="8" kerning="on" lineHeight="120%" ai:objID="778a05d0" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="M2">
                    <s:content><s:p d:id="9" whiteSpaceCollapse="collapse"><s:span d:id="10">M2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <s:Group ai:objID="64ac4960" d:userLabel="SoLa" x="164" y="76" includeIn="Do2,La,Ti" id="SoLa">
            <s:Group d:id="11" flm:knockout="false" ai:objID="64ac4a50" d:userLabel="M2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="64ac4b70" x="0" y="0">
                    <s:Line ai:objID="64ac4cf0" x="1.5" xTo="40" y="7.5">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0x0000FF" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 12.82 7.133 C 8.56 8.713 3.275 11.41 0 14.266 L 2.58 7.133 L 0 0 C 3.275 2.855 8.56 5.553 12.82 7.133 Z" ai:objID="7786e590" winding="nonZero" x="37.903" y="0.238">
                        <s:fill>
                            <s:SolidColor color="0x0000FF"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>
            <s:Group ai:objID="778c0490" x="19" y="2">
                <s:Rect alpha="0.66" height="11" ai:objID="778c05e0" width="21" x="0" y="0">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="12" kerning="on" lineHeight="120%" ai:objID="778c0840" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="M2">
                    <s:content><s:p d:id="13" whiteSpaceCollapse="collapse"><s:span d:id="14">M2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <s:Group ai:objID="75d165c0" d:userLabel="FaSo" x="59" y="76" includeIn="Do2,La,So,Ti" id="FaSo">
            <s:Group d:id="15" flm:knockout="false" ai:objID="75d166b0" d:userLabel="M2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="75d167d0" x="0" y="0">
                    <s:Line ai:objID="75d16950" x="1.5" xTo="40" y="8.5">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0x0000FF" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 12.82 7.133 C 8.56 8.713 3.275 11.41 0 14.266 L 2.58 7.133 L 0 0 C 3.275 2.855 8.56 5.553 12.82 7.133 Z" ai:objID="75d16ad0" winding="nonZero" x="37.903" y="0.918">
                        <s:fill>
                            <s:SolidColor color="0x0000FF"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>
            <s:Group ai:objID="75d17140" x="19" y="2">
                <s:Rect alpha="0.66" height="10" ai:objID="75d17290" width="21" x="0" y="1">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="16" kerning="on" lineHeight="120%" ai:objID="4fed7160" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="M2">
                    <s:content><s:p d:id="17" whiteSpaceCollapse="collapse"><s:span d:id="18">M2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <s:Group ai:objID="75d73950" d:userLabel="MiFa" x="57" y="91" includeIn="Do2,Fa,La,So,Ti" id="MiFa">
            <s:Group d:id="19" flm:knockout="false" ai:objID="75d73a40" d:userLabel="m2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="75d73b60" x="0" y="0">
                    <s:Line ai:objID="75d73ce0" x="8.5" xFrom="205" y="6.5" yFrom="33">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0xFF0000" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 0 4.8 C 4.293 3.956 9.734 2.209 13.288 0 L 9.735 6.382 L 11.085 13.56 C 8.413 10.34 3.805 6.96 0 4.8 Z" ai:objID="75d74180" winding="nonZero" x="0.212" y="0.381">
                        <s:fill>
                            <s:SolidColor color="0xFF0000"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>
            <s:Group ai:objID="778a0de0" x="12" y="2">
                <s:Rect alpha="0.66" height="11" ai:objID="778a0ed0" width="21" x="0" y="0">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="20" kerning="on" lineHeight="120%" ai:objID="778a11a0" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="m2">
                    <s:content><s:p d:id="21" whiteSpaceCollapse="collapse"><s:span d:id="22">m2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <s:Group ai:objID="778a1510" d:userLabel="ReMi" x="218" y="130" includeIn="Do2,Fa,La,Mi,So,Ti" id="ReMi">
            <s:Group d:id="23" flm:knockout="false" ai:objID="778a1600" d:userLabel="M2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="778a1720" x="0" y="0">
                    <s:Line ai:objID="778a18a0" x="1.5" xTo="40" y="7.5">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0x0000FF" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 12.82 7.133 C 8.56 8.713 3.275 11.41 0 14.266 L 2.58 7.133 L 0 0 C 3.275 2.855 8.56 5.553 12.82 7.133 Z" ai:objID="778a1a20" winding="nonZero" x="37.426" y="0.309">
                        <s:fill>
                            <s:SolidColor color="0x0000FF"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>
            <s:Group ai:objID="778a2090" x="19" y="2">
                <s:Rect alpha="0.66" height="11" ai:objID="778a21e0" width="21" x="0" y="0">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="24" kerning="on" lineHeight="120%" ai:objID="778a2420" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="M2">
                    <s:content><s:p d:id="25" whiteSpaceCollapse="collapse"><s:span d:id="26">M2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <s:Group ai:objID="778a2770" d:userLabel="DoRe" x="111" y="130" includeIn="Do2,Fa,La,Mi,Re,So,Ti" id="DoRe">
            <s:Group d:id="27" flm:knockout="false" ai:objID="778a2860" d:userLabel="M2" x="0" y="0">
                <s:Group flm:knockout="true" ai:objID="7388a050" x="0" y="0">
                    <s:Line ai:objID="77852b50" x="1.5" xTo="40" y="7.5">
                        <s:stroke>
                            <s:SolidColorStroke caps="none" color="0x0000FF" joints="miter" miterLimit="4" scaleMode="normal" weight="3"/>
                        </s:stroke>
                    </s:Line>
                    <s:Path data="M 12.82 7.132 C 8.56 8.713 3.275 11.41 0 14.265 L 2.58 7.132 L 0 0 C 3.275 2.855 8.56 5.552 12.82 7.132 Z" ai:objID="77852c50" winding="nonZero" x="37.676" y="0.537">
                        <s:fill>
                            <s:SolidColor color="0x0000FF"/>
                        </s:fill>
                    </s:Path>
                </s:Group>
            </s:Group>            
            <s:Group ai:objID="7789d4b0" x="19" y="2">
                <s:Rect alpha="0.66" height="11" ai:objID="7789d600" width="21" x="0" y="0">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                </s:Rect>
                <s:RichText color="0x4D4D4D" fontFamily="Helvetica" fontSize="15" d:id="28" kerning="on" lineHeight="120%" ai:objID="7789d840" textAlign="center" whiteSpaceCollapse="preserve" x="0" y="0" d:userLabel="M2">
                    <s:content><s:p d:id="29" whiteSpaceCollapse="collapse"><s:span d:id="30">M2</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
        
        <!-- Buttons -->
        
        <s:Group ai:objID="7789db90" d:userLabel="Notes" x="3" y="3">
            <s:Group ai:objID="7789dc80" x="53" y="0">
                <s:Ellipse id="DoButton" height="54" ai:objID="7789ddd0" width="54" x="2" y="2">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="31" kerning="on" lineHeight="120%" ai:objID="7789e380" textAlign="center" whiteSpaceCollapse="preserve" x="6" y="14" d:userLabel="Do">
                    <s:content><s:p d:id="32" whiteSpaceCollapse="collapse"><s:span d:id="33">Do</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="7789e8f0" x="318" y="52">
                <s:Ellipse height="54" ai:objID="7789ea10" width="54" x="2" y="2" id="TiButton">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="34" kerning="on" lineHeight="120%" ai:objID="7789ecc0" textAlign="center" whiteSpaceCollapse="preserve" x="15" y="14" d:userLabel="Ti">
                    <s:content><s:p d:id="35" whiteSpaceCollapse="collapse"><s:span d:id="36">Ti</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="7789eef0" x="212" y="52">
                <s:Ellipse height="54" ai:objID="7789efe0" width="54" x="2" y="2" id="LaButton">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="37" kerning="on" lineHeight="120%" ai:objID="7789f290" textAlign="center" whiteSpaceCollapse="preserve" x="9" y="14" d:userLabel="La">
                    <s:content><s:p d:id="38" whiteSpaceCollapse="collapse"><s:span d:id="39">La</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="7789f4a0" x="106" y="52">
                <s:Ellipse height="54" ai:objID="7789f5c0" width="54" x="2" y="2" id="SoButton">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="40" kerning="on" lineHeight="120%" ai:objID="7789f850" textAlign="center" whiteSpaceCollapse="preserve" x="7" y="14" d:userLabel="So">
                    <s:content><s:p d:id="41" whiteSpaceCollapse="collapse"><s:span d:id="42">So</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="7782da30" x="0" y="52">
                <s:Ellipse height="54" ai:objID="7782db20" width="54" x="2" y="2" id="FaButton">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="43" kerning="on" lineHeight="120%" ai:objID="7782dd30" textAlign="center" whiteSpaceCollapse="preserve" x="8" y="14" d:userLabel="Fa">
                    <s:content><s:p d:id="44" whiteSpaceCollapse="collapse"><s:span d:id="45">Fa</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="75df2ae0" x="266" y="106">
                <s:Ellipse height="54" ai:objID="75df2c00" width="53" x="2" y="2" id="MiButton">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="49" kerning="on" lineHeight="120%" ai:objID="75df2e90" textAlign="center" whiteSpaceCollapse="preserve" x="9" y="14" d:userLabel="Mi">
                    <s:content><s:p d:id="50" whiteSpaceCollapse="collapse"><s:span d:id="51">Mi</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="7782fbd0" x="159" y="106">
                <s:Ellipse height="54" ai:objID="7782fcc0" width="54" x="2" y="2" id="ReButton">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="46" kerning="on" lineHeight="120%" ai:objID="64a4e420" textAlign="center" whiteSpaceCollapse="preserve" x="6" y="14" d:userLabel="Re">
                    <s:content><s:p d:id="47" whiteSpaceCollapse="collapse"><s:span d:id="48">Re</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
            
            <s:Group ai:objID="75df30b0" x="53" y="106">
                <s:Ellipse id="Do2Button" height="54" ai:objID="75df31d0" width="54" x="2" y="2">
                    <s:fill>
                        <s:SolidColor color="0xFFFFFF"/>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="4" scaleMode="normal" weight="4"/>
                    </s:stroke>
                </s:Ellipse>
                <s:RichText color="0x000000" fontFamily="Helvetica" fontSize="36" d:id="52" kerning="on" lineHeight="120%" ai:objID="75df3460" textAlign="center" whiteSpaceCollapse="preserve" x="6" y="14" d:userLabel="Do">
                    <s:content><s:p d:id="53" whiteSpaceCollapse="collapse"><s:span d:id="54">Do</s:span></s:p></s:content>
                </s:RichText>
            </s:Group>
        </s:Group>
    </fx:DesignLayer>
    
    <s:Button id="ctlButton" label="Start" x="157" y="197" click="toggleAnimation()"/>
    
    <fx:Declarations>
        <s:GlowFilter id="glow" blurX="20" blurY="20" color="0x80ffff"/>
    </fx:Declarations>
    
    <s:transitions>
        <s:Transition fromState="Start" toState="Do" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(0)}" duration="1000"/>
                
                <s:AnimateFilter target="{Do2Button}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="Do" toState="Re" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(200)}" duration="1000"/>
                
                <s:AnimateFilter target="{ReButton}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{DoRe}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="Re" toState="Mi" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(400)}" duration="1000"/>
                
                <s:AnimateFilter target="{MiButton}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{ReMi}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="Mi" toState="Fa" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(500)}" duration="1000"/>
                
                <s:AnimateFilter target="{FaButton}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{MiFa}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="Fa" toState="So" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(700)}" duration="1000"/>
                
                <s:AnimateFilter target="{SoButton}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{FaSo}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="So" toState="La" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(900)}" duration="1000"/>
                
                <s:AnimateFilter target="{LaButton}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{SoLa}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="La" toState="Ti" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(1100)}" duration="1000"/>
                
                <s:AnimateFilter target="{TiButton}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{LaTi}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="Ti" toState="Do2" autoReverse="true">
            <s:Parallel>
                <j:PingEffect target="{this}" frequency="{centsToHz(1200)}" duration="1000"/>
                
                <s:AnimateFilter target="{Do2Button}"
                                 bitmapFilter="{glow}" 
                                 duration="500" 
                                 repeatCount="0"
                                 repeatBehavior="reverse">
                    <s:SimpleMotionPath property="alpha" valueFrom="0.5" valueTo="1"/>
                </s:AnimateFilter> 
                
                <s:Parallel target="{TiDo2}">
                    <s:Fade duration="0"/>
                </s:Parallel>
            </s:Parallel>
        </s:Transition>
    </s:transitions>
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.states.State;
            
            //--------------------------------------------------------------------------
            //
            //  Constants
            //
            //--------------------------------------------------------------------------
            
            public const BASE_FREQUENCY:Number     =  440;    // 440Hz = A above middle C
            public const CENTS_PER_OCTAVE:Number = 1200;
            
            //--------------------------------------------------------------------------
            //
            //  Properties
            //
            //--------------------------------------------------------------------------
            
            //----------------------------------
            //  noteTimer
            //----------------------------------
            
            public var noteTimer:Timer = null;
            
            //----------------------------------
            //  count
            //----------------------------------
            
            public var count:int = 0;    // incremented on each call to timerHandler()
            
            //--------------------------------------------------------------------------
            //
            //  Methods
            //
            //--------------------------------------------------------------------------
            
            //----------------------------------
            //  centsToHz
            //----------------------------------
            
            public function centsToHz(c:Number):Number {
                return (BASE_FREQUENCY * Math.pow(2, (c/CENTS_PER_OCTAVE))); 
            }
            
            //----------------------------------
            //  appCreationCompleteHandler
            //----------------------------------
            
            protected function appCreationCompleteHandler(event:FlexEvent):void {
                this.noteTimer = new Timer(1000, 0);
                if (this.noteTimer == null) return;
                
                var s:Array = this.states;
                if (s == null) return;
                
                var stateCount:uint = s.length;
                
                // cycle through all available states
                var timerHandler:Function = function timerHandler(e:TimerEvent):void {
                    var newStateIndex:uint = ++count % stateCount;    // 'count' is global
                    var newStateName:String = (s[newStateIndex] as State).name;
                    
                    setCurrentState(newStateName, true); // true == "play transition"
                }
                
                // set to final state (should never be called, but...good defense)
                var completeHandler:Function = function completeHandler(e:TimerEvent):void {
                    var finalStateIndex:uint = s.length - 1;
                    var finalStateName:String = s[finalStateIndex];
                    
                    setCurrentState(finalStateName, true); // true == "play transition"
                }
                
                this.noteTimer.addEventListener(TimerEvent.TIMER, timerHandler);
                this.noteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, completeHandler);
                
                // Don't start the timer until the user clicks the "Start" button;
                // its click function is toggleAnimation().
            }                
            
            //----------------------------------
            //  toggleAnimation
            //----------------------------------
            
            public function toggleAnimation():void {
                if ( (this.noteTimer == null) || (ctlButton == null) ) {
                    return;
                } else if (this.noteTimer.running) {
                    noteTimer.stop();
                    ctlButton.label = "Start";
                    this.setCurrentState("", false); // default state, no transition
                } else {
                    this.count = 0;
                    this.setCurrentState("", false); // default state, no transition
                    ctlButton.label = "Stop";
                    this.noteTimer.start();
                }
            }
            
        ]]>
    </fx:Script>
</s:Application>