<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0">

    <mx:Move id="hideEffect"
    	xTo="-500" />
    <mx:Move id="showEffect"
    	xFrom="500" />

    <mx:Panel width="500" height="300"
    	headerColors="[#000000,#FFFFFF]">

        <mx:TabNavigator id="viewstack2"
        	selectedIndex="0"
        	historyManagementEnabled="false"
        	width="100%" height="100%">

            <mx:Form label="Shopping Cart"
            	hideEffect="{hideEffect}" showEffect="{showEffect}">
                <mx:FormItem label="Acme Widget 1.0">
                    <mx:NumericStepper value="1" />
                    <mx:Button label="Add to Cart"
                    	click="viewstack2.selectedIndex=1" />
                </mx:FormItem>
            </mx:Form>

            <mx:Form label="Enter Your Payment Information"
            	hideEffect="{hideEffect}" showEffect="{showEffect}">
                <mx:FormItem label="Name on Credit Card">
                    <mx:TextInput />
                </mx:FormItem>
                <mx:FormItem label="Credit Card Number">
                    <mx:TextInput />
                    <mx:Button label="Buy"
                    	click="viewstack2.selectedIndex=2" />
                </mx:FormItem>
            </mx:Form>

            <mx:Form label="Thank You!"
            	hideEffect="{hideEffect}" showEffect="{showEffect}">
                <mx:Text text="Thanks for your purchase!" />
            </mx:Form>

        </mx:TabNavigator>

    </mx:Panel>
</mx:Application>