Flex - Fade Effect



The Fade effect animates the alpha property of a component. If played on an object having visible property as false, and set to animate alpha from zero to a nonzero value, it will set object visible to true as a side-effect of fading it in.

Class declaration

Following is the declaration for spark.effects.Fade class:

public class Fade
   extends Animate

Public properties

S.N.Property & Description
1alphaFrom : Number
Initial value of the alpha property, between 0.0 and 1.0, where 0.0 means transparent and 1.0 means fully opaque.
2alphaTo : Number
Final value of the alpha property, between 0.0 and 1.0, where 0.0 means transparent and 1.0 means fully opaque.

Public methods

S.N.Method & Description
1Fade(target:Object = null)

Methods inherited

This class inherits methods from the following classes:

  • spark.effects.Animate

  • mx.effects.Effect

  • flash.events.EventDispatcher

  • Object

Flex Fade Effect Example

Let us follow the following steps to check usage of Fade Effect in a Flex application by creating a test application:

1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   width="100%" height="100%" minWidth="500" minHeight="500"
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
         protected function btnFadeIn_clickHandler
            (event:MouseEvent):void {
         protected function btnFadeOut_clickHandler
            (event:MouseEvent):void {
      <s:Fade id="fadeIn" duration="2000" target="{imageFlex}" 
         alphaFrom="0" alphaTo="1"/>
      <s:Fade id="fadeOut" duration="2000" target="{imageFlex}" 
         alphaFrom="1" alphaTo="0"/>		   
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Effects Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="fadePanel" title="Using Fade Effect" 
            width="500" height="300" includeInLayout="true" visible="true">
               <s:VerticalLayout  gap="10" verticalAlign="middle" 
            <s:Image id="imageFlex" 
               source="http://www.tutorialspoint.com/images/flex-mini.png" />
               <s:Button id="btnFadeOut" label="Fade Out" 
               <s:Button id="btnFadeIn" label="Fade In" 

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex Fade Effect