Optimizing Animations
Posted in Actionscript 3, Animation, Article, Experiments, Flex on December 11th, 2010 by Ian Ford – Be the first to commentI was working recently on a project that called for a certain special effect. Perhaps you’re all familiar with the classic page curl?
There’s an excellent tutorial available for free online at O’Reilly. I followed it in a misguided attempt to create my own page curl in AS3. Unfortunately, AS3 seems to have some trouble rendering complex masking effects correctly, and I was unwilling to drop the project to AS2 to accommodate one pushy art director so we needed another option.
The art director suggested we do the animation manually in InDesign and export a series of still frames that we could use in Flash. It sounded simple enough, so we produced a 50 frame sequence to use for our page curl.
Looks nice, right? Well, we can do better. How? We don’t need to use every frame! We certainly can’t expect visitors to this site to download all 50 frames, especially since there are 4 images total that will need to page flip. But how many frames should we use, and which ones?
Because the art director on this was picky, and because I have no interest in the publish->phone call->debate->repeat cycle, I decided to dump responsibility in his hands in the most explicit way possible: I wrote an app that would let him pick all the parameters for the animation.
What the application does is present every frame available to the animation in the left column. When an item in the list is selected, a preview loads in the top left frame.
The right column shows every frame currently being used in the animation. Users can drag frames from the left column to the right column and back, and a preview animation is updated and played in the top right frame. The speed of the animation can be adjusted by a multiplier of the frame rate of the anticipated swf using a numeric stepper below the animation.
Every frame is numbered and automatically sorted based on its index so that the user doesn’t accidentally produce something worthless.
As I write this I’m waiting to be told which frames to use and how long to display them. I’m not sure how long it will take to get a response, but I know in the time between now and then what I won’t be working on. :)
Try out the Animation Optimizer or Download the Project File



