Accessibility

Table of Contents

  1. Introduction
  2. Architecting Flex Applications That Perform Well
  3. A Note About Flash Players
  4. Using Layouts, Hierarchy, and Containment Properly
  5. Examples of Common Container Redundancies to Avoid
  6. Using Deferred Instantiation to Improve Perceived Performance
  7. Handling Large Data Sets
  8. Playing Complex Effects Smoothly
  9. Achieving Great Performance with Runtime Styles
  10. Using Dynamically Repeating Controls for Better Performance
  11. Improving a Repeater Object's Performance
  12. Improving Performance of Charting Components
  13. Performance Tuning and Profiling Your Own Flex Application
  14. Using Runtime Shared Libraries (RSLs)
  15. Feedback and Support

Flex Application Performance: Tips and Techniques for Improving Client Application Performance

Playing Complex Effects Smoothly

You may notice that transition effects seem choppy, especially when your effect has a short duration applied to a large view. What defines choppy? For example, a Fade effect that fades in a few distinct alpha stages, instead of a smooth and seamless fade. Or a Zoom effect that zooms in a few distinct sizes, instead of a gradual and smooth Zoom. There are a few ways to tweak your transition effects to play in a smoother fashion. Try the following suggestions and see which work best to improve effects in your application:

  • Increase the duration of your effect with the duration property. Doing this spreads the distinct, choppy stages over a longer period of time, which lets the human eye fill in the difference for a smoother effect. It really makes a difference.

  • The less there is for Flash Player to redraw during an animation, the smoother the effect plays. To do this, make parts of the target view invisible when the effect starts, play the effect, and then make those parts visible when the effect has completed. The populating of controls happens so quickly that the human eye does not notice any sort of delay or sudden appearance of the controls. Coding this is simple: You hook into the effectStart and effectEnd events to control what is visible before and after the effect.

    See the following Flex SWF:

    To view this content, you need the latest version of the Macromedia Flash Player.
    Download the free Macromedia Flash Player now.

    Get Macromedia Flash Player

    The panel has a populated DataGrid control with a fast Fade effect applied to it, and a duration of 250 milliseconds. As you toggle the panel's visibility, see how the Fade plays in an abrupt fashion? Adding the following code to the <mx:Panel> tag lessens the number of objects Flash Player must redraw during an animation:

    effectStart="myDataGrid.visible=false" effectEnd="myDataGrid.visible=true"

    Now Flash Player does not draw the DataGrid control, but concentrates on redrawing the empty Panel container.

    See the following Flex SWF, which uses this technique:

    • To view this content, you need the latest version of the Macromedia Flash Player.
    Download the free Macromedia Flash Player now.

    Get Macromedia Flash Player

    See the difference? The effect is smoother and better-looking. Because the duration is so fast, there is no noticeable disappearing and appearing of the DataGrid. Only use this technique if the effect duration is relatively short (500 ms or less), and only on a showEffect or hideEffect. In other situations, hiding pieces of the object will not appear seamless.

    The Resize effect, a native effect in Flex, has some of this functionality already built in. You can use the hideChildren property to specify an array of panels whose children should be hidden while the effect plays. This property only works with Panels and help your Resize effects to play smoother. Before the Resize animation plays, Flex iterates through the hideChildren array and hides the children of each of the specified panels. Note: You cannot use the hideChildren property with an effect declared in MXML (such as in the <mx:Resize> tag). The effect must be triggered in ActionScript to use of the hideChildren functionality.

  • Avoid bitmap-based backgrounds. Oftentimes designers give their views background images that are solid colors with gradients, slight patterns, and so forth. To ease what Flash Player redraws, try switching your background image to a solid background color. Or, if you want a slight gradient instead of a solid color, use a background image that is a SWF or SVG file. These are easier for Flash Player to redraw than standard JPG or PNG files.

Sometimes animations play in a choppy fashion because background processing occurs and interferes with the animation. You may notice this when you have an effect attached to a handler that populates controls from a web-service result, or when you have an effect accompanying the creation of a large view. The set of tags are a subclass of the Effect class (Fade, Move, Resize, WipeLeft, and so on) have a public property, suspendBackgroundProcessing. When it is true, it blocks all background processing like measurement and layout while the effect plays. The default is false. Macromedia suggests that you set this property to true for a smooth playing of effects. However, you must realize that when you switch on suspendBackgroundProcessing, your effect cannot be interrupted while playing. Because of this, there are a few cases where you should avoid using suspendBackgroundProcessing="true". One common use of effects is to play an effect while the application waits for a web-service result to return. After the web-service result returns, the result handler tries to interrupt and stop the effect. If suspendBackgroundProcessing is set to true, the result handler cannot interrupt the effect, and the effect plays continuously, hanging the application. Avoid using suspendBackgroundProcessing in these cases.

Page 8 of 12
Previous Page
Next Page