For almost 3 decades, Flash animators have struggled their way through shape-driven animations using the built-in “Shape Tweens.” But in 2012, two developers here at Intersect decided enough is enough: a new approach must be created to improve the capabilities of Flash. This is their story.
It started with a common request we get: do the impossible. At Intersect, being told to attempt some crazy concepts is just something we’ve become accustomed to. Plus, we just enjoy the challenge of pulling off the “impossible”. With this project, the concept was actually not beyond reason, but the constraints set by traffickers and the media plan weighed heavily on the possibility of success. The unit was to be a typical 40k banner served through MediaMind, with some not so typical (for 40k) shape morphing, 3D rotations, and particle effects. This combination of characteristics stacked up against the limited size of the banner. The MediaMind API in its simplest form adds 6k. Since the media specs required a Flash Player 9 build, 3D capabilities were not native and required the addition of 3rd-Party APIs to achieve the 3D rotations. Particle systems require heavy coding. But worst of all, the creative required the use of shape tweens for morphing animations.
The banner started the same as any other unit would. We went through the motions of creating what the client asked for and optimized it with all tricks we had up our sleeves. The result was a hefty 70k SWF that looked good, but clearly not ready for delivery. We knew that we needed a new approach, and it wasn’t gonna be simple.
The biggest obstacle was those massive shape tweens. They were contributing a majority of the file size. Our best option was to not use them at all, which meant creating a code-driven approach to animating shapes and a more efficient structure for storing that animation data. It was a pretty big undertaking, but we accomplished it and in three parts.
The Animation Platform
In order to begin creating a new type of animation, we needed an interface that would help us create them. We immediately got to work on a desktop application, and after a couple days (and nights) of heavy coding, we had a functional prototype that could draw and animate shapes on a vertex level, independent of framerate. We then polished up the interface and added tools for object instancing, shape rotation, and keyframe easing. Lastly, we added a background guide that synced the snap shots of the original banner animation within our new environment so we could match the old shape tweens with our new system.
The Data
With the tool ready to build the animation, we set out to create a way to get the animation from the development environment to the final Flash banner. We chose to store all the whole animation as JSON. Initially our JSON data was just too big to fit in our banner. So we decided that the only way to get file size down was to simplifying all our JSON into multidimensional Arrays rather than Objects. The structure resulted in 6-arrays-deep of values. To further optimize the data, we rounded values to even numbers and removed any redundant information. Finally, when completed, the data was added directly into an FLA so we could take advantage Flash’s SWF compression.
The Renderer
At Intersect, we’re huge fans of Greensock’s TweenLite and TweenNano. So it only made sense that our animation renderer would make use of it’s awesome features. The only problem was that one of Greensock’s classes, TimeLineLite, was just a bit too heavy for our 40k banner. So we gutted the features we didn’t need and made our own, very limited, TimeLineNano. Then we parsed our heavily optimized animation data, and turned that into timeline tweens that would play alongside all the other animations that took place in the banner.
So after a long battle with K-size, we packed up our animation data, our tiny 3d API, our particle system and the rest of the assets. We finally ran the banner and there it was, a unit that was 70k just days earlier in a petite package of 40k.
To showcase just how crazy default Flash shape tweens look, we made 2 similar animations of a rounded square widening and rotating. So here are 2 GIFs. On the top is how our animation system handles the animation. On the bottom is how Flash handles that same animation.
In June of 2006 a code angel dropped a little piece of heaven called Action Script 3.0 down to earth, bringing end users around the world a smoother, faster, more feature-filled Flash experience, while at the same time providing developers with more stable, cleaner, faster, easier to debug development. Action Script 2.0 was useful for its time, but now that 99.9% of all computers have Flash Player 9 or higher, and that sites like YouTube have already been requiring Flash 10 for some time, I think the moment has come to let the old timer go and stamp the RIP2.0 marker above its resting place.
The ideas of relying on naming conventions and building an application directly off of logical data structure are concepts not new to CakePHP. Its developers are making a clear effort to mimic the workflow popularized by 