Gumbo (Flex 4) plays generated sounds in Style

<!-- Player Container -->
<Group id="playerContainer"  horizontalCenter="0" verticalCenter="0" >
<!-- the background -->
   <Rect id="playerBackground" radiusX="7" radiusY="7" width="380" height="120">
   <fill>
        <LinearGradient rotation="90">
                <GradientEntry color="0x606060" alpha="1" ratio="0" /> 
                <GradientEntry color="0x303030" alpha="1" ratio="1" /> 
      </LinearGradient>
       </fill>
   </Rect>
 
    <Group id="descriptionTextBox" left="120" top="10">
       <Rect radiusX="7" radiusY="7" width="250" height="100">
 
        <fill>
            <LinearGradient rotation="90">
                <GradientEntry color="0xffffff" alpha="1" ratio="0" /> 
                <GradientEntry color="0xc0c0c0" alpha="1" ratio="1" /> 
            </LinearGradient>
 
        </fill>
       </Rect>
            <TextGraphic color="0x606060" 
                fontSize="10"
                id="descriptionText" 
                paddingLeft="10" 
                paddingRight="10" 
                width="260" 
                fontFamily="Verdana" 
                whiteSpaceCollapse="collapse">
                <content>
                    <p fontWeight="bold" fontSize="12" >A silly flash 10 music example</p>
                    <p marginTop="4">Testing flash 10 sound features and the new skinning architecture in Gumbo.</p>
                    <p marginTop="4">Plays dynamically generated sounds based on an absurdly simple sequencer</p>
                    <p marginTop="4">UI done in Flex 4 beta 1 (Gumbo)</p>
 
                </content>
            </TextGraphic>
    </Group>
    <Group id="playButton" left="10" top="10">
        <Button width="100" selected="false" buttonMode="true" height="100" skinZZ="com.hulstkamp.lab.gumbo.skins.buttons.StandbyButtonSkin" click="togglePlay(event)" />
    </Group>
 
    <!-- Mute Buttons for voices, included in on-mode, only -->
     <Group id="mixerButtons" left="10" top="120" alpha="0" >
        <Button id="drumsBtn" styleName="bassButton" label="Bass" selected="true" buttonMode="true" left="0"  width="60" height="60"  click="toggleInstrument(event)"  />							        <Button id="bassBtn" styleName="drumsButton" label="Glass" selected="true" buttonMode="true" left="70" width="60" height="60" click="toggleInstrument(event)" />
        <Button id="hookBtn" styleName="hookButton" label="Hook" selected="true" buttonMode="true" left="140" width="60" height="60" click="toggleInstrument(event)"  />
     </Group>
</Group>

<?xml version="1.0" encoding="utf-8"?>
<!--
	To get a more generic skin, this class uses some styles (colors and icon) applied to the hostComponent.
	I'm not sure if styles could be applied to skins directly (sdk 4.0.0.3130). So, this might not be best practice.
-->
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
	<Metadata>
    	[HostComponent("flex.component.Button")]
    </Metadata> 
 
    <states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
    </states>
 
    <content>
	<Group>
		<!-- get width and height via hostComponent -->
        <Rect radiusX="7" radiusY="7" width="{hostComponent.width}" height="{hostComponent.height}">
		       	<fill>
		       		<LinearGradient rotation="90">
		       		<!-- get Styles via the hostComponent. Haven't found a way to apply styles to skins directly -->
		       		<!-- if you want binding grap those and make them bindable -->
		       			<GradientEntry color="{hostComponent.getStyle('gradientColors')[0]}" color.over="{hostComponent.getStyle('gradientColorsOver')[0]}" alpha="1" ratio="0" /> 
		       			<GradientEntry color="{hostComponent.getStyle('gradientColors')[1]}" color.over="{hostComponent.getStyle('gradientColorsOver')[1]}" alpha="1" ratio="1" /> 
		       		</LinearGradient>
		       	</fill>
		</Rect>
		<TextBox id="labelText" 
			text="{hostComponent.label}"
			fontFamily="Verdana" 
			fontSize="10"
			top="10"
			color="{hostComponent.getStyle('color')}"
			horizontalCenter="0"
			>
		</TextBox>
		<!-- get the icon via style and show below label -->
		<BitmapGraphic 
			blendMode="screen"
			width="50"
			height="50"
			scaleX=".5"
			scaleY=".5"
			alpha="1"
			source="{hostComponent.getStyle('icon')}" 
			horizontalCenter="0"
			bottom="12"
			/>
	</Group>
    </content>
</Skin>