<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
import mx.controls.Alert;

[Bindable] private var advanced : Boolean = false;

private function onClick() : void
{

//only toggle if not playing
if( !ef_move.isPlaying )
{

advanced = !advanced;

}

}

]]>
</mx:Script>

<!-- this is the move effect I am using -->
<mx:Move
id = "ef_move"
easingFunction="Bounce.easeOut"
/>

<mx:Panel
title = "Form Example"
width = "300"
height = "350"

>

<mx:Form
width = "100%"
height = "100%"
>

<mx:FormItem>

<mx:Button
label = "Toggle Form"
click = "onClick()"
width = "140"
/>

</mx:FormItem>

<mx:FormItem
label = "First Name:"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Last Name:"
moveEffect = "ef_move"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Email:"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Address 1:"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Address 2:"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Address 3:"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Password:"
moveEffect = "ef_move"
>

<mx:TextInput displayAsPassword="true" />

</mx:FormItem>

<mx:FormItem
moveEffect = "ef_move"
>

<mx:Button
label = "Send Info!"
click = "Alert.show('I hope you like my example!');"
/>

</mx:FormItem>

</mx:Form>


</mx:Panel>

</mx:Application>