The startup I work for needs to be able to scroll in its Flex based app. To make things fun, there are many elements to scroll at the same time, and it’s a key feature so it has to be very smooth. Flex thoughtfully includes the Move effect, which on paper does the trick, but in my case is way too choppy. So the larger question is how to optimize an animation.

In Flex a lot of thought has been put into making getting started easy for the newbie developer, but it seems not so much on advanced subjects such as this. Luckily Flex is open source, but still digging through low level Flex code isn’t much fun. So I looked around and found a few articles, so here are the links:

http://www.insideria.com/2008/07/flex-ria-performance-considera-3.html

Optimizing Flex Applications from dcoletta

and a few things that are about flash lite but also apply to a flash/flex app.

http://www.adobe.com/devnet/devices/articles/optimization_tips.html

http://www.adobe.com/devnet/devices/articles/optimizing_anim.html

On the more precise subject of scrolling, I really didn’t find much available resources. So before I get started adding my own ideas, a little rant to Adobe, that might be heard one day: Flex is open source. Cool! You even have a community around it. Even better! Now please put some thought into helping push the limits of the framework, and maybe try to cut out the Flex bloat that has started to develop.

So, now a few ideas about what I’m doing. The scrolling in my app is still not a smooth as I want it, so I’ll have to keep working on it and update the article.

– cut the Move Effect. For each object you want to move, a MoveInstance is created. Instead have a timer with an optimistic interval like 10ms, and call getTimer to know how long it has really been since when you started the animation.  With this info you can now calculate the new positions of your objects.

– visible = false. Any part of the object you are trying to move that is visible has it’s new position calculated.

– cut as much as possible out of updateDisplayList. This is called all the time during an animation, so use constants to position your objects as much as possible.

More to come…

Ariel

Pin It