Three-phase blur effect : Blur Effect « Effects « Flex

1. Flex
2. Effects
3. Blur Effect

Three-phase blur effect

    
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle">
  <mx:Script>
    
        import mx.effects.easing.Bounce;
      
  </mx:Script>
  <mx:transitions>
    <mx:Transition>
      <mx:Parallel targets="{[loginPanel,registerLink,loginButton,confirm]}">
        <mx:Resize duration="500" easingFunction="Bounce.easeOut" />
        <mx:Sequence target="{confirm}">
          <mx:Blur duration="200" blurYFrom="1.0" blurYTo="10.0" />
          <mx:Blur duration="200" blurYFrom="10.0" blurYTo="20.0" />
          <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1" />
        </mx:Sequence>
      </mx:Parallel>
    </mx:Transition>
  </mx:transitions>
  <mx:states>
    <mx:State name="Register">
      <mx:AddChild relativeTo="{loginForm}" position="lastChild">
        <mx:FormItem id="confirm" label="Confirm:">
          <mx:TextInput />
        </mx:FormItem>
      </mx:AddChild>
      <mx:RemoveChild target="{registerLink}" />
      <mx:AddChild relativeTo="{spacer1}" position="before">
        <mx:LinkButton label="Return to Login" click="currentState=''" />
      </mx:AddChild>
    </mx:State>
  </mx:states>
  <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Form id="loginForm">
      <mx:FormItem label="Username:">
        <mx:TextInput />
      </mx:FormItem>
      <mx:FormItem label="Password:">
        <mx:TextInput />
      </mx:FormItem>
    </mx:Form>
    <mx:ControlBar>
      <mx:LinkButton id="registerLink" label="Need to Register?" click="currentState='Register'" />
      <mx:Spacer width="100%" id="spacer1" />
      <mx:Button label="Login" id="loginButton" />
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

   
    
    
    
  

Related examples in the same category

1.	Graphics BlurFilter
2.	Define a BlurFilter and the animation on that filter.
3.	Using a Blur effect on a button
4.	Apply Blur effect
5.	Blur Demo
6.	Blur a control
7.	Resize as blur