<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import flash.utils.setTimeout;
            import flash.utils.setInterval;

            import mx.collections.ArrayCollection;

            [Bindable]
            private var myAC:ArrayCollection = new ArrayCollection([
                {label: 'The End Is Near'},
                {label: 'Cheeses of Nazareth'},
                {label: 'Five Iron Frenzy 2: Electric Boogaloo'},
                {label: 'All the Hype That Money Can Buy'},
                {label: 'LIVE: Proof that the Youth are Revolting'},
                {label: 'Quantity Is Job #1 EP'},
                {label: 'Our Newest Album Ever'},
                {label: 'Upbeats and Beatdowns'}
            ]);
            
            private function init():void {

            }
            
            private function triggerGlow():void {
                // play the highlight effect
                glowOn.play();
                // then after 3 seconds, play the de-highlight effect
                setTimeout(function():void {
                    glowOff.play();
                }, 3000);
            }
            
            private function triggerBlur():void {
                // play the highlight effect
                blurOn.play();
                // then after 3 seconds, play the de-highlight effect
                setTimeout(function():void {
                    blurOff.play();
                }, 3000);
            }
            
            private function triggerWipe():void {
                // play the highlight effect
                wipeOn.play();
            }
            
            private function triggerRotate():void {
                // play the highlight effect
                rotateOn.play();
                // then after 3 seconds, play the de-highlight effect
                setTimeout(function():void {
                    rotateOff.play();
                }, 3000);
            }
            
            private function triggerZoom():void {
                // play the highlight effect
                zoomOn.play();
                // then after 3 seconds, play the de-highlight effect
                setTimeout(function():void {
                    zoomOff.play();
                }, 3000);
            }
            
        ]]>
    </mx:Script>
    
    <mx:HBox top="20" left="20">
        <mx:VBox>
            <mx:Button label="Trigger Glow" click="triggerGlow()" />
            <mx:Button label="Trigger Blur" click="triggerBlur()" />
            <mx:Button label="Trigger Wipe" click="triggerWipe()" />
            <mx:Button label="Trigger Rotate" click="triggerRotate()" />
            <mx:Button label="Trigger Zoom" click="triggerZoom()" />
        </mx:VBox>
        <mx:VBox>
            <mx:ComboBox id="cb" dataProvider="{myAC}" />
        </mx:VBox>
    </mx:HBox>

    <!-- glow effect -->
    <!-- on -->
    <mx:Glow id="glowOn" duration="500" alphaFrom="0" alphaTo="1"
            blurXFrom="0.0" blurXTo="30.0" blurYFrom="0.0" blurYTo="30.0"
            strength="2" color="0xea7f1f" target="{cb}" />
    <!-- off -->
    <mx:Glow id="glowOff" duration="500" alphaFrom="1" alphaTo="0"
            blurXFrom="30.0" blurXTo="0.0" blurYFrom="30.0" blurYTo="0.0"
            strength="2" color="0xea7f1f" target="{cb}" />

    <!-- Blur -->
    <mx:Blur id="blurOn" duration="500" blurXFrom="0.0" blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0" target="{cb} "/>
    <mx:Blur id="blurOff" duration="500" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" target="{cb} "/>

    <!-- wipe -->
    <mx:WipeLeft id="wipeOn" duration="200" target="{cb}" />
    
    <!-- rotate -->
    <mx:Rotate id="rotateOn" angleFrom="0" angleTo="180" target="{cb}" />
    <mx:Rotate id="rotateOff" angleFrom="180" angleTo="0" target="{cb}" />

    <!-- zoom -->
    <mx:Zoom id="zoomOn" duration="500" zoomHeightTo="1.2" zoomWidthTo="1.2" target="{cb}" />
    <mx:Zoom id="zoomOff" duration="500" zoomHeightTo="1" zoomWidthTo="1" target="{cb}" />

</mx:Application>