<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns="http://www.degrafa.com/2007"
  xmlns:geometry="com.degrafa.geometry.*"
  layout="vertical" 
  horizontalAlign="center" 
  verticalAlign="middle"
  backgroundGradientColors="[#222222,#222222]"
  viewSourceURL="srcview/index.html" 
  creationComplete="loadTrack('assets/sample.mp3')" 
  frameRate="30">
    
  <mx:Script>
      <![CDATA[
            
    import flash.media.Sound;
    import flash.media.SoundChannel;
    import flash.media.SoundMixer;
    import flash.net.URLRequest;
    import flash.utils.ByteArray;
  
        private var _sound:Sound;
    private var _channel:SoundChannel;         
        private var _leftPeak:Number;
    private var _rightPeak:Number;                    
    private var _spectrum:ByteArray = new ByteArray();    
    private var _fps:Number = 0;
        
        private function loadTrack(trackUrl:String):void
        {
            _sound = new Sound(new URLRequest(trackUrl));
            _sound.addEventListener(Event.COMPLETE, onLoadComplete);                        
      _channel = _sound.play(0, int.MAX_VALUE);
            _channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);                                
        }            
        
        private function onLoadComplete(event:Event):void
        {
            this.addEventListener(Event.ENTER_FRAME, visualize);
        }
        
       private function onPlaybackComplete(event:Event):void 
       {
        removeEventListener(Event.ENTER_FRAME, visualize);
    }
                
        private function visualize(event:Event):void
        {
            _leftPeak = _channel.leftPeak;
      _rightPeak = _channel.rightPeak;            
            superShape.n1 = Math.abs(_leftPeak)*6;
            superShape.n2 = _rightPeak*6;
            superShape.detail = (_fps / 20 + 25) % 100;
            stroke.weight = 8 - _leftPeak*8;            
            stop1.ratio = (1 - _rightPeak);
            rotateTransform.angle = _fps % 360 * 0.3; 
            if (superShape.width > Math.min(0.8*this.height, 0.8*this.width) )
            {
                superShape.width--;
                superShape.height--;
            }
            else 
            {
                superShape.width++;
                superShape.height++;
            }
            _fps++;
        }
        
       ]]>
    </mx:Script>

    <Surface id="surface" width="100%" height="100%" verticalCenter="0" horizontalCenter="0">
        <GeometryGroup id="group">            
            <fill>
                    <RadialGradientFill id="fill">
                        <GradientStop id="stop1" alpha="1" color="#FF0000" ratio="0.1"/>
                        <GradientStop alpha="1" color="#FF9966" ratio="0.8"/>                        
                        <GradientStop id="stop2" alpha="1" color="#FFFFFF" ratio="1"/>
                    </RadialGradientFill>
            </fill>
            <stroke>
                <RadialGradientStroke id="stroke" caps="round" joints="round" weight="18" angle="360"  spreadMethod="reflect" >
                    <GradientStop alpha="1" color="#FF0000" ratio="0"/>
                    <GradientStop alpha="1" color="#FF9966" ratio="1"/>
                </RadialGradientStroke>                
            </stroke>                         
            <geometry:SuperShape2D id="superShape" stroke="{stroke}" fill="{fill}"
                detail="185" m="16" n1="0.26" n2="-0.44"    n3="-5.70" range="16" 
                x="{this.width/4}" y="40"    width="{5*this.height/6}"    height="{5*this.height/6}">
                <geometry:transform>
                    <RotateTransform id="rotateTransform" angle="0" 
                        centerX="{superShape.width/2 + this.width/4}" 
                        centerY="{superShape.height/2 + 40}" />
                </geometry:transform>
            </geometry:SuperShape2D>            
        </GeometryGroup>
    </Surface> 
</mx:Application>