fade in of added component with Actionscript

Question

Hi when I add a new component using Actionscript I want it to fade in smoothly, for example this component

    var df : DateField = new DateField();   
    df.text = DateField.dateToString(new Date(),stringFormat);
    df.formatString = stringFormat;

I tried this

    var fade : Fade = new Fade();
    df.setStyle("showEffect", fade);

but that did not work.

any ideas? =)

Thanks in advance

Sebastian

Answer 1

The showEffect is only triggered when you change the .visible property of the component - you need to trigger that somewhere to experience the awesomeness of the fade.

I threw this together real quick so you can see what I mean (also notice I used a string to define the fade rather than an object - it always seems easier that way...hope it helps!)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       layout="absolute" 
       creationComplete="init()">

    <mx:Script>
     <![CDATA[
      import mx.events.FlexEvent;
      import mx.controls.DateField;

      private function init():void{

       var df:DateField = new DateField();
       df.visible = false;
       df.setStyle("showEffect","Fade");
       this.addChild(df);
       df.addEventListener(FlexEvent.CREATION_COMPLETE,triggerFade);

      }

      private function triggerFade(event:FlexEvent):void{

       var df:DateField = event.currentTarget as DateField; 
       df.visible = true;

      }

     ]]>
    </mx:Script>
</mx:Application>

Answer 2

It should be pointed out that Adobe's tweening libraries and the sort are very slow. I would suggest GTween (still in beta, but I have not had any issues), TweenLite/Max (may have some licensing issues), or Tweener (Easy to use, but much slower than the other two), setting the alpha to 0 and then fading in to 1. It's not as easy, but these libraries provide much better performance.