4 Replies Latest reply on May 19, 2011 9:32 PM by Shongrunden

    Flash Symbol w/ filters + spark parents + Fade effect bug

    Brian Vaughn

      I've come across an interesting bug which I've narrowed down to a combination of:

      Flash symbols containing 1 or more Filters (defined in the Flash IDE)...

      Parented within certain Spark components (ex. symbol in Group that's in another Group)...

      Modified by an effect like spark.effects.Fade


      What you see when you combine those elements above is a 1-frame, fully-opaque flicker after the Fade has completed (if fading out) or before it begins (if fading in). This flicker is noticeable and obviously not an intended part of the animation.


      Here's a small test project that reproduces what I'm talking about. If you change the VGroup component to a VBox the flicker stops happening (at least for me). The same is true if you remove the middle DataGroup component. (The bug may not stop altogether but it does occur less frequently in that case.)



      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     import mx.collections.ArrayCollection;
                <s:Sequence id="sequence">
                     <s:Fade target="{ vbox }" alphaTo="0" />
                     <s:Fade target="{ canvas }" alphaTo="1" />
                     <s:Fade target="{ canvas }" alphaTo="0" />
                     <s:Fade target="{ vbox }" alphaTo="1" />
           <!-- If you replace the VGroup with a VBox, this bug does not show itself. -->
           <s:VGroup id="vbox" horizontalAlign="center" horizontalCenter="0" verticalCenter="0">
           <!--<mx:VBox id="vbox" horizontalAlign="center" horizontalCenter="0" verticalCenter="0">-->
                <!-- Changing this DataGroup to a regular Group lowers the frequency of the bug, but it still occurs. -->
                <s:DataGroup id="dataGroup" dataProvider="{ new ArrayCollection( [ BasicSymbol, SymbolWithGlow, SymbolWithBevel ] ) }">
                          <s:HorizontalLayout verticalAlign="middle" />
                               <local:DataGroupItemRenderer />
                <s:Button label="Play" click="sequence.play()" />
           <mx:Canvas id="canvas" width="200" height="200" horizontalCenter="0" verticalCenter="0" backgroundColor="0xCC6600" mouseEnabled="false" alpha="0" />


      DataGroupItemRenderer MXML

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer autoDrawBackground="false" width="70" height="70"
                     override public function set data( value:Object ):void {
                          super.data = value;
           <mx:Image source="{ data }" />


      In addition to the below MXML, I am also happy to provide the FLA that I've created the symbols in as well as a video demonstrating the glitch. (I will try to attach the video as a follow-up comment.)