I often talk about the important role visualization plays in my work. I personally don’t really understand things until I can see them. One example of this that I showed at FitC this year was the SparkTable tool I use to visualize and compare easing equations. It’s very simple, but I’ve found it very useful when trying to choose between two similar eases, such as a quintic versus exponential ease. It’s also very handy when developing custom easing equations.
Simply queue up a bunch of easing equations to test, then sit back and watch the results.
import fl.motion.easing.*; queue(Sine.easeOut,0x660000); queue(Quadratic.easeOut,0x990000); queue(Cubic.easeOut,0xCC0000);
Here’s what it looks like in action (scaled to 50% to fit on this page).
I like that you can either view the graph to see a static representation of the output values, or you can simply focus on the white box at top or bottom to see what it looks like in motion.
It also demonstrates an interesting rendering bug in the Flash Player. Watch the white line carefully where it joins the top box while it animates, it will appear to separate with the box one frame ahead of the line (this is much easier to see if you download SparkTable and run it at full size). The line and the boxes are all a single clip though, animating together – something is going screwy with the rendering engine. Watch carefully as the first tween runs, and you will see the point of separation move down the line with the graph. Interesting. Perhaps related to multi-core support? Let me know if you don’t see this issue, and what platform / Flash player version / CPU you are using.
You can download the SparkTable fla here.