Fly fade effect : Fade Effect « Effects « Flex

Fly fade effect

     
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#eeeeee"
  mouseUp="currentState=''">
  <mx:states>
    <mx:State name="detail">
      <mx:AddChild position="lastChild">
        <mx:Image id="detailImage" x="300" y="50" source="assets/{currentImage}"/>
      </mx:AddChild>
    </mx:State>
  </mx:states>
  
  <mx:transitions>
    <mx:Transition fromState="*" toState="detail">
      <mx:Parallel target="{detailImage}">
        <mx:Move id="customMove" xFrom="0" yFrom="0" xTo="300" yTo="50"/>
        <mx:Zoom zoomHeightFrom="0" zoomWidthFrom="0" zoomHeightTo="1" zoomWidthTo="1"/>
      </mx:Parallel>
    </mx:Transition>
    
    <mx:Transition fromState="detail" toState="*">
      <mx:Sequence target="{detailImage}">
        <mx:Fade alphaFrom="1" alphaTo="0"/>
        <mx:RemoveChildAction/>
        <mx:Fade alphaTo="1"/>
      </mx:Sequence>
    </mx:Transition>
    
  </mx:transitions>
  
  <mx:Script>
    
    
      [Bindable]
      private var currentImage:String;
    
      private function showDetail(event:MouseEvent):void
      {
        customMove.xFrom = event.stageX;
        customMove.yFrom = event.stageY;
        
        currentImage = event.currentTarget.getRepeaterItem();
        currentState = "detail";
      } 
  
  </mx:Script>
  <mx:Image width="100" height="75" source="a.jpg" mouseDown="showDetail(event)"/>

  
</mx:Application>

1.	Using the AnimateProperty effect to fade a button
2.	Using the Fade effect on the button
3.	A fade effect
4.	Use Fade class to add effect to panel
5.	Apply the Fade effect to the Label control using the system font
6.	Fade effectEnd event
7.	Fade effect for Button
8.	Combine Fade and Move effect into Sequence
9.	Combine Fade, Pause and Move effect into Sequence
10.	Add Fade and Move effect into Parallel
11.	Tooltip Fade effect
12.	Fade Effects for adding item to Tile
13.	Fade Button creationCompleteEffect
14.	Using Fade effect so that ToolTips fade in when the user moves the mouse pointer over a component with a ToolTip
15.	Fade Properties
16.	Fade properties: alphaFrom, alphaTo, duration
17.	Fade Duration

Fly fade effect : Fade Effect « Effects « Flex

Related examples in the same category