<?xml version="1.0" encoding="utf-8"?>
  <mx:VBox 
          xmlns:mx="http://www.adobe.com/2006/mxml" 
          xmlns:sides="view.sides.*" 
          creationComplete="onCreationComplete();">        
          
          <!-- Using a distortion effect using a custom state change. 
          Listen to the distortion effect's EffectEvent.EFFECT_END event, 
          and apply your state change afterwards. In this example the state change 
          is a removeChild, addChild method call on the VBox container. -->
          
          <mx:Script>
                  <![CDATA[
                          import view.sides.Registration;
                          import mx.events.EffectEvent;
                          import com.adobe.ac.mxeffects.Flip;
                          import com.adobe.ac.mxeffects.DistortionConstants;
                          
                          private var registration : Registration;
                          
                          private function onCreationComplete()  : void
                          {
                                  registration = new Registration();
                                  registration.title = "Registration";
                                  registration.addEventListener( Event.CHANGE, onStartBack );
                          }
                          
                          private function flipToRegistration() : void
                          {
                                  var e : Flip = new Flip( login );
                                  e.siblings = [ registration ];
                                  e.direction = DistortionConstants.RIGHT;
                                  e.duration = 1000;
                                  e.addEventListener( EffectEvent.EFFECT_END, onEndLoginEffect );
                                  e.play();
                          }
                          
                          private function onEndLoginEffect( event : EffectEvent ) : void
                          {
                                  removeChild( login );
                                  addChild( registration );
                          }
                          
                          private function onStartBack( event : Event ) : void
                          {
                                  flipToLogin();
                          }
                          
                          private function flipToLogin() : void
                          {
                                  var e : Flip = new Flip( registration );
                                  e.siblings = [ login ];
                                  e.direction = DistortionConstants.LEFT;
                                  e.duration = 1000;
                                  e.addEventListener( EffectEvent.EFFECT_END, onEndRegistrationEffect );
                                  e.play();
                          }
                          
                          private function onEndRegistrationEffect( event : EffectEvent ) : void
                          {
                                  removeChild( registration );
                                  addChild( login );
                          }
                  ]]>
          </mx:Script>
                          
          <sides:Login id="login" title="Login" change="flipToRegistration();"/>
  
  </mx:VBox>