Show and Hide Effect for Image

The Fade effect animates the alpha property of a component. If played manually (outside of a transition) on an object whose visible property is set to false, and told to animate alpha from zero to a nonzero value, it will set visible to true as a side-effect of fading it in. When run as part of a transition, it will respect state-specified values, but may use the visible property as well as whether the object is parented in the before/after states to determine the values to animate alpha from and to if alphaFrom and alphaTo are not specified for the effect.

Here is the code for Adobe Example:



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Fade id="myFade" duration="2000"/>
</fx:Declarations>

<s:Panel width="800" height="650" backgroundColor="#DB2DA0" contentBackgroundColor="#B66D27"
title="Show and Hide Statue of Liberty Flex Effects">

<s:Image width="800" height="600" id="statue" source="assets/statue_of_liberty-800x600.jpg"  hideEffect="{myFade}" showEffect="{myFade}" />
<s:controlBarContent>
<s:Button label="Show" click="statue.visible=true"/>
<s:Spacer width="100%"/> 
<s:Button label="Hide" click="statue.visible=false" toolTip="Please wait for 2 seconds"/>
</s:controlBarContent>
</s:Panel>

</s:Application>