4 Replies Latest reply on Dec 4, 2009 8:48 AM by allanjard

    spark.effects.Fade and effectEnd (Gumbo)

    allanjard

      Hello all,

       

      I'm sure this is going to be a really daft question and I'll slap my head when someone points me in the right direction, but I can't seem to figure it out... Basically I'm trying to use the spark.effects.Fade class on a sprite that I have - that works no problem at all (it's surprisingly verbose though in AS3). But what I can't seem to do is add a handler for when the effect ends (effectEnd).

       

      The documentation ( http://help.adobe.com/en_US/Flex/4.0/langref/spark/effects/Fade.html - which is largely MXML orientated from what I can see) suggests that effectEnd is inherited from mx.effects.Effect - could this be where the issue is coming in. Do I need to cast the Fade object?

       

      This is the code that I'm using at the moment:

       

      ------------

      var fadeAni:spark.effects.Fade = new spark.effects.Fade( );

      fadeAni.target = _tip;

      fadeAni.alphaFrom = 1;

      fadeAni.alphaTo = 0;

      fadeAni.duration = 500;

      fadeAni.effectEnd =function ( e:Event ) {

          removeChild( _tip );

          _tip = null;

      }

      fadeAni.play();

      ------------

       

      And with that mxmlc says:

       

      ------------

      $ mxmlc app.mxml

      Loading configuration file /usr/local/flex_sdk_4.0.0.10485/frameworks/flex-config.xml

      /Users/allan/Desktop/Flex/flex_test/components/ToolTip.as(130): col: 13 Error: Access of possibly undefined property effectEnd through a reference with static type spark.effects:Fade.

       

      fadeAni.effectEnd =function ( e:Event ){

      ------------

       

      Many thanks,

      Allan

       

        • 1. Re: spark.effects.Fade and effectEnd (Gumbo)
          allanjard Level 1

          Hello again all,

           

          I'm partly going to answer my own question here... Using the following appears to do the trick

           

          -------------

          fadeAni.addEventListener("effectEnd", function ( e:Event ):void {

             removeChild( _tip );

             _tip = null;

          });

          -------------

          However, I don't understand why the example in my first post doesn't work. Would someone perhaps be kind enough to explain?
          Thanks,
          Allan

           

          • 2. Re: spark.effects.Fade and effectEnd (Gumbo)
            David_F57 Level 5

            Hi,

             

            Yes you need to add the event listener, its probably better to have the function on its own as I am sure you get warnings when you do it the way you are currently doing it. Even though you don't need to the there is an EffectEvent. 

             

            private function setEffect(): void

            {

            var fadeAni:spark.effects.Fade = new spark.effects.Fade( );

            fadeAni.target = img;

            fadeAni.alphaFrom = 1;

            fadeAni.alphaTo = 0;

            fadeAni.duration = 500;

            fadeAni.addEventListener(EffectEvent.EFFECT_END,effectEnd);

            fadeAni.play();

             

            }

             

            private function effectEnd(e:EffectEvent): void

            {

            removeChild(img);

            img=null;

            }

            David

            • 3. Re: spark.effects.Fade and effectEnd (Gumbo)
              Chet Haase Level 3

              This is all correct, but here's a couple of tips for de-verbosifying effects:

               

              - You don't need an "alphaFrom" if the sprite already has the alpha value you want - it will pick up the current value as the value it starts from.

              - You don't need a 'duration' if you're animating for 500 ms - that's the default

              - Fade works with the state values when used in a transition. So, for example, if an object exists in one state and is removed in the next state, then a transition with a Fade (no arguments declared) on the target will automatically fade it out. Examples on this here:

              http://graphics-geek.blogspot.com/2009/08/video-fade-effect-in-flex-4.html

              (yes, this is an mxml solution, or at least a solution that involves states, as opposed to the dynamic approach in the Allan's original example, but it seemed worth mentioning, because effects are tuned to be particularly simple when used in transitions).

               

              Chet.

              • 4. Re: spark.effects.Fade and effectEnd (Gumbo)
                allanjard Level 1

                Hi guys,

                 

                Thanks very much for the replies.

                 

                @David: I have indeed broken the function out from being an anonymous function to being a "proper method". I needed the ability to be able to remove the event handler as well...

                 

                @Chet: Thanks for clarifying those points. I watched your video (and many of the others - very instructive!) while trying to find an answer for this. My brain isn't quite wired to translate AS3 to MXML yet, and states in Flex 4 is one of the next things I wanted to look at - currently trying to pin down my understanding of just the AS3 language!

                 

                Regards,

                Allan