4 Replies Latest reply on Aug 21, 2010 2:58 PM by Flex harUI

    Improving responsiveness in component-heavy app

    Danielle Church Level 1



      I'm fairly new to Flex development, so this may be an obvious question that I'm missing somewhere.  I'm building an application that has several graphics layers; on one layer, I have simple Sprite components that use vector drawing, and on a higher layer I have a large number of SkinnableComponents that use fairly complex skins.  I need to be able to have the Sprite components interact smoothly with mouse movement, so I'm calling invalidateDisplayList() during every mouseMove event and doing the actual redraw during updateDisplayList(), since I understand that will keep it from trying to perform the redraw with each and every movement.  For the most part it works; dragging the mouse around makes the Sprites animate smoothly.  However, when I try and do the same for Sprites that are behind a great deal of components on the front layer, it gets slow and the animation lags severely behind the mouse movement, to the extent that I can wave my mouse around for half a second or so and then watch the animation slowly retracing my path over the next 5.


      I'm a little bit surprised-- jerkiness I'd understand, but this type of lag is what I'd expect if I hadn't decoupled the movement from the draw using the invalidate/update pair.  Is that less reliable than I'd thought?  Is there a different way I should be queueing up redraws when I move the mouse?


      Also, given that it only gets slow in those areas, I imagine that Flex must be busy redrawing all of those SkinnableComponents that I put in front, even though I can guarantee that while I'm animating the Sprites, they aren't changing display at all.  Is there any way to instruct Flex not to bother doing the whole redraw for the elements that aren't changing?  This is the kind of problem where, if I were developing a desktop application, I'd take a raster snapshot of the elements that won't be moving so that I could just composite (a) the background behind the moving elements, (b) the moving elements themselves, and (c) the foreground in front of the moving elements, in just three steps rather than having to re-render the entire scene.  I can't imagine there's any way to actually do that kind of trick in Flex, but is there some way I can get similar performance out of it?




        • 1. Re: Improving responsiveness in component-heavy app
          supersonicecho Level 2

          When updateDisplayList is called by a container, it calls the updateDisplayList method for all of its children also.  Perhaps you could put the elements that need to animate in a separate container from your heavy skinnable components and call the invalidateDisplayList on that container alone, instead of the entire application.




                    heavy skin

                    heavy skin


                    animating stuff

                    animating stuff


          Instead of using app.invalidateDisplayList(), try ContainerB.invalidateDisplayList

          • 2. Re: Improving responsiveness in component-heavy app
            Danielle Church Level 1

            Well, the animating elements are in a different container from the skinned ones-- I'm actually calling invalidateDisplayList on each of the animating elements individually, which is usually some but not all of the ones in the container.  Would it be more efficient just to make a single call to invalidateDisplayList() for that whole container, even if only some of its children are actually updated, rather than making four or five calls to invalidateDisplayList() on the Sprites?

            • 3. Re: Improving responsiveness in component-heavy app
              supersonicecho Level 2

              No, I don't believe it wouldn't be more efficient to call the updateDisplayList method on a container rather than individual child componenets. 


              Maybe I am mistaken, but I thought that the lowest level FLEX componenet that participates in the flex lifecycle (commitProperties(), measure(), updateDisplayList(), etc.) was the UIComponent and not a low level flash sprite.  I am surprised that the sprites respond to the invalidation methods at all.  Are you wrapping the sprites in a Flex component?

              • 4. Re: Improving responsiveness in component-heavy app
                Flex harUI Adobe Employee

                Try cacheAsBitmap on the background of the animation