<?xml version="1.0" encoding="utf-8"?>
<!---
TransitionEffectSample
-->
<s:Application
    xmlns:fx = "http://ns.adobe.com/mxml/2009"
    xmlns:mx = "library://ns.adobe.com/flex/mx"
    xmlns:s  = "library://ns.adobe.com/flex/spark"
 viewSourceURL="srcview/index.html">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s  "library://ns.adobe.com/flex/spark";
        s|ButtonBar { font-size : 20; }
        s|Panel     { font-size : 20; }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;
            import spark.effects.easing.Power;
            import spark.events.IndexChangeEvent;

            [Embed("assets/images/hokkaido.jpg")]
            private static const IMAGE_1:Class;

            [Embed("assets/images/kyoto.jpg")]
            private static const IMAGE_2:Class;

            [Embed("assets/images/kumamoto.jpg")]
            private static const IMAGE_3:Class;

            private static const ASSET_IMAGE_1:BitmapAsset = new IMAGE_1();
            private static const ASSET_IMAGE_2:BitmapAsset = new IMAGE_2();
            private static const ASSET_IMAGE_3:BitmapAsset = new IMAGE_3();
            /** ButtonBar's caretChange  */
            protected function buttonBarChangeHandler(event:IndexChangeEvent):void {
                if(event.newIndex == event.oldIndex) {
                    return;
                }
                switch(event.newIndex) {
                    case 0: currentState = "first";  break;
                    case 1: currentState = "second"; break;
                    case 2: currentState = "third";  break;
                }
            }

        ]]>
    </fx:Script>

    <s:states>
        <s:State name="first" />
        <s:State name="second" />
        <s:State name="third" />
    </s:states>

    <s:transitions>
        <s:Transition fromState="*" toState="*">
<!--
            <s:Wipe
                target    = "{image}"
                duration  = "1000"
                direction = "down"
                easer     = "{new Power()}"
             />
-->
            <s:CrossFade
                target   = "{image}"
                duration = "1000"
                easer    = "{new Power()}"
             />
        </s:Transition>
    </s:transitions>

    <s:ButtonBar
        width         = "640"
        height        = "50"
        selectedIndex = "0"
        caretChange   = "buttonBarChangeHandler(event)"
    >
        <s:dataProvider>
            <s:ArrayCollection>
                <fx:Object label="image 1" />
                <fx:Object label="image 2" />
                <fx:Object label="image 3" />
            </s:ArrayCollection>
        </s:dataProvider>
    </s:ButtonBar>

    <s:Panel width="640" height="480" title="Photo Viewer">
        <s:BitmapImage
            id               = "image"
            width            = "500"
            height           = "375"
            smooth           = "true"
            verticalCenter   = "0"
            horizontalCenter = "0"
            source.first     = "{ASSET_IMAGE_1}"
            source.second    = "{ASSET_IMAGE_2}"
            source.third     = "{ASSET_IMAGE_3}"
         />
    </s:Panel>

</s:Application>