Mastering the Tao of Personal Computing

If you have to make a very effects-intensive Adobe Flex application, you’re definitely going to face a lot of performance issues, which need optimization. One way to optimize is to use as less as possible UIComponent components. So instead of UIComponent you start using Sprite and Bitmap components where possible.

But you should be aware that Adobe Flex effects are designed to be used with UIComponent components, so replacing with Sprite and Bitmap will cause problems, which beside the obvious run-time errors, can be really difficult to debug and correct.

Let’s observe a typical issue with Flex CompositeEffect effects, such as Parallel and Sequence effects. I want to animate simultaneously some sprites - the sprites should move horizontally and fade slightly. But as you’ll see in the sample application, only the bottom sprite is animated, the rest two are just jumping to their end positions:

This is completely unexpected behavior and you will get no run-time error whatsoever. We should dig deep to see what’s going on?

Well, at least we see what’s happening. Only the bottom sprite is animated, so it looks like the Parallel is not getting its children effects targets correctly. Let’s see the CompositeEffect.getChildrenTargets() method. The following excerpts are getting my attention:

var resultsArray:Array = [];
var results:Object = {};
//…
results[childTargets[j].toString()] = childTargets[j];
//…
for (var p:String in results)
{
    resultsArray.push(results[p]);
}
return resultsArray;

The results object is an Object instead of a Dictionary, therefore only String can be used to index the child effect targets. But the sprite.toString() method will return always the same string [objects Sprite], and the results object will index only one of the sprites and eventually the resultsArray will end up containing only the last sprite.

To avoid that and to index all sprites with different strings, we can use FlexSprite instead of a simple Sprite. Actually the FlexSprite adds only a unique name to the Sprite and also overrides the toString() method with the use of the NameUtil:

override public function toString():String
{
    return NameUtil.displayObjectToString(this);
}

This implementation will return the string indicating the location of this object within the hierarchy of DisplayObjects in the Application.

This is the same sample application, but Sprite is now replaced with FlexSprite:

Now it functions as intended!
FlexBitmap overrides Bitmap in exactly the same way, and you should always use FlexBitmap instead of Bitmap in such situations.

This post is tagged Adobe Flex, Bitmap, CompositeEffect, flex, FlexBitmap, FlexSprite, Sprite