Blur a control : Blur Effect « Effects « Flex

1. Flex
2. Effects
3. Blur Effect

Blur a control

         

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
    <mx:Script>
        
        import mx.effects.easing.Bounce;
      
    </mx:Script>
    <mx:states>
        <mx:State name="bookDetails" basedOn="">
            <mx:AddChild relativeTo="{bookForm}" position="lastChild" creationPolicy="all">
                <mx:FormItem id="isbn" label="new Label" />
            </mx:AddChild>
            <mx:SetProperty target="{title}" name="text" value="New Details" />
            <mx:RemoveChild target="{bookLink}" />
        </mx:State>
    </mx:states>
    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Parallel targets="{[book, bookLink, title, isbn]}">
                <mx:Sequence target="{isbn}">
                    <mx:Blur duration="2000" blurYFrom="0.0" blurYTo="20.0" />
                    <mx:Blur duration="2000" blurYFrom="20.0" blurYTo="0.0" />
                </mx:Sequence>                
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <mx:Panel title="XML Book" id="book" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:Form id="bookForm">
            <mx:FormItem label="Label 1" fontWeight="bold" /> 
            <mx:FormItem label="Label 2" fontStyle="italic" />
        </mx:Form>
        <mx:ControlBar>
            <mx:LinkButton label="Click" id="bookLink" click="currentState = 'bookDetails' " />
            <mx:Spacer width="100%" id="spacer1" />
            <mx:Label text="Title" id="title" />
        </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.	Three-phase blur effect
5.	Apply Blur effect
6.	Blur Demo
7.	Resize as blur