<?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"
               viewSourceURL="srcview/index.html"
               currentState="State1">
    
    <!-- Define a class name for each embedded asset, so that it can be referred to by name -->
    <fx:Script>
        <![CDATA[
            import flash.media.*; 
            
            [Embed(source="assets/audio/growl_pop.mp3")]
            [Bindable]public var growl_pop_Class:Class;
            
            [Embed("assets/audio/testNarration_01.mp3")]
            [Bindable]public var testNarration_01_Class:Class;
            
            [Embed("assets/audio/testNarration_02.mp3")]
            [Bindable]public var testNarration_02_Class:Class;
            
            [Embed("assets/audio/testNarration_03.mp3")]
            [Bindable]public var testNarration_03_Class:Class;
        ]]>
    </fx:Script>
    
    <fx:Declarations>
    </fx:Declarations>
    
    <!-- Define application states -->
    <s:states>
        <s:State name="State1"/>
        <s:State name="State2"/>
        <s:State name="State3"/>
    </s:states>    
    
    <!-- Define transitions between application states -->
    <s:transitions> 
        <s:Transition fromState="*" toState="State1"> 
            <s:Parallel targets="{[this]}"> 
                <mx:SoundEffect useDuration="false" source="{testNarration_01_Class}"/>
                <s:Rotate targets="{[ctlCurrentStateIs]}" angleBy="360" autoCenterTransform="true"/>
            </s:Parallel> 
        </s:Transition> 
        
        <s:Transition fromState="*" toState="State2"> 
            <s:Sequence targets="{[this]}"> 
                <mx:SoundEffect useDuration="false" source="{testNarration_02_Class}"/>
                <mx:SoundEffect useDuration="false" source="{growl_pop_Class}"/>
            </s:Sequence> 
        </s:Transition> 
        
        <s:Transition fromState="*" toState="State3"> 
            <s:Sequence targets="{[this]}"> 
                <mx:SoundEffect useDuration="false" source="{testNarration_03_Class}"/>
            </s:Sequence> 
        </s:Transition> 
        
    </s:transitions>
    
    <!-- Define controls -->
    <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 id="ctlCurrentStateIs" x="69" y="24" text="Current State:" textAlign="right"/>
</s:Application>