<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" 
               minWidth="1024" minHeight="768"  
               width="288" height="84"
               currentState="State1" viewSourceURL="srcview/index.html">
    
    <fx:Declarations>
        <s:ArrayCollection id="acSounds">
            <mx:SoundEffect id="testNarration_01" useDuration="false" source="@Embed(source='assets/audio/testNarration_01.mp3')"/>
            <mx:SoundEffect id="testNarration_02" useDuration="false" source="@Embed(source='assets/audio/testNarration_02.mp3')"/>
            <mx:SoundEffect id="testNarration_03" useDuration="false" source="@Embed(source='assets/audio/testNarration_03.mp3')"/>
        </s:ArrayCollection>
    </fx:Declarations>
    
    <s:states>
        <s:State name="State1" enterState="{acSounds[ctlButtonBar.selectedIndex].play([this]);}"/>
        <s:State name="State2" enterState="{acSounds[ctlButtonBar.selectedIndex].play([this]);}"/>
        <s:State name="State3" enterState="{acSounds[ctlButtonBar.selectedIndex].play([this]);}"/>
    </s:states>
    
    <s:ButtonBar id="ctlButtonBar" height="20" selectedIndex="0" change="{this.currentState=alDataProvider.source[ctlButtonBar.selectedIndex]}" width="267" x="10" y="56">
        <s:ArrayList id="alDataProvider" source="['State1', 'State2', 'State3']" />
    </s:ButtonBar>
    
    <s:Label id="ctlLabel" text="{this.currentState}" x="147.5" y="24" textAlign="left"/>
    <s:Label x="69" y="24" text="Current State:" textAlign="right"/>
</s:Application>