We’ll have so much to write about Tweener on the next few days that I figure I’ll split it into a few different posts and go slowly.
This specific post is to say that we’ve finally published a more readable list of the available transitions on Tweener, in the form of a cheat sheet. See it here (it’s part of the documentation website being built for Tweener) or just click the image below.
It allows you to customize the list somewhat, and directly print it if needed. It’s also based on the original cheat sheet by Nate Chatellier, only slightly more vandalized.
You can also download them in PDF and SWF forms, and the source code (currently in AS3 only) can be found at the examples folder of our subversion repository (quick direct link here).
The list is also useful for anyone using other tweening engines, as long as they’re based on the original easing equations by Robert Penner. And as always, the old MC Tween “Animation types” page has a more descriptive list if anyone is interested.
Very nice Zeh! Much improved 🙂
Only thought is that the text “The linear transition (seen to this right)…” should probably read, “The linear transition (seen on the left)…”
Great work as always. Thanks.
Ahh… beautiful.
Your live cheat sheet together with Penners demo certainly explains it all in an artistic way 😉
TOCA RAUL!!!
Nice work. I wonder if you had a chance to check out the brightness, contrast, saturation additions to tweener by WS-Blog? http://www.websector.de/blog/2007/08/28/tweener-as3-extension-for-color-properties-_brightness-_contrast-and-_saturation/
It would be cool to have these added into the main tweener library. There is a colormatrix dependency. I have also added these and can implement them if needed and update the docs. Not sure if brightness, contrast, saturation have been added to the source code trunk or not. Willing to implement if needed.
Ryan:
We’ve been adding a lot of new (optional) special properties for Tweener, but _hue/_saturation/etc isn’t there yet; the problem is, solution is not so simple. The reason is because while extending the color matrix (which *is* added) is easy, you can’t stack several different color modifications in an extensible way; in that sense, a _hue tweening would kill a _saturation change. Tweener needs a way to see whether it should overwrite color matrixes or create a new one — a way to determine which index a new filter should have (currently, when tweening a filter, it grabs the first filter of that class it finds on the filter array; with color, it’ll need an additional parameter that specifies which should be the filter index to be used/created).
So the next version to be released will resolve many things, but it won’t have these new color shortcuts added. It’s pretty much the very next thing on the list though and should follow.
Thanks Zeh. If there is any way I can help out let me now. I see what you are saying about killing the other tweens. If you queued them they could be just chained by delaying their start time to the total in the queue if they are first in first out. But where two items are added that should be applied at the same time, or one overpower the other, yes than can get tricky merging or destroying special tweens if they aren’t added in at the same addTween. I have the additions in my version and will play around with this. It sounds like some sort of Timeline might be needed. I will be interested to see what you come up with, as it is usually simple to use from MCTween to Tweener.
thanks for the animation tools. but i have an issue and i dont know where else to put it. this is my first venture into tweener so i decided to install the help files packaged in the mxp on the google site.
http://code.google.com/p/tweener/downloads/detail?name=tweener_highlight_1_24_47.mxp&can=2&q=
unfortunately, my help is now completely not working. i dont want to blame the mxp file, but it stopped working right after i installed it. i uninstalled the extension and still my help does not work. any help here?
im using a mac here if that matters. thank you
That only makes syntax highlight work. The help is separated HTML found on the subversion server or online at http://hosted.zeh.com.br/tweener/docs/en-us/ (will be updated in the future)
These are superb, thankyou.
I was just wondering, has anyone come across a method of combining transitional styles into one tween, for example;
“easeInExpoOutElastic” – Whilst the syntax is pretty ugly, you can see how much more realistic the tweens would become… Nothing in reality would ever use “easeInOutBounce” (doesn’t make physical sense), but “easeInQuadOutBounce” would be extremely realistic…
Any thoughts?
Am I living in a fantasy world, asking for the moon on a stick? Or is this a reasonable thing to wish for?
DcTurner: no you’re not. This is actually more or less obvious. If you think about it, there are just “in” and “out” functions, using different equations. “EaseInOutExpo” is just a combination of “inexpo” and “outexpo”, so it makes total sense to have “inexpo” then “outelastic”.
One of the features planned for tweener since a very long time ago was the ability to use arrays of transitions instead of a single transition. That way that kind of stuff would be a no-brainer. Specifying the ‘range’ of each equation for a proper transition from one value to the other is another advanced topic, but on most cases 0.5 – 0.5 would do (that is, “switches” from one equation to the other halfway through the transition).
It’ll still take time for Tweener to do that though. This is planned for the future, but I’m rewriting large parts of it, internally. It’s a better design, but it breaks everything (syntax doesn’t change though).
In the meantime, you can do it yourself. You can have a custom transition function that receives the value and splits it between two functions. It would look something like this
import caurina.transitions.Tweener;
import caurina.transitions.Equations;
var easeInExpoOutElastic:Function = function (t:Number, b:Number, c:Number, d:Number, p_params:Object = null):Number {
if (t < d/2) {
// First half
return Equations.easeInExpo(t*2, b, c/2, d, p_params);
} else {
// Second half
return Equations.easeOutElastic((t*2)-d, b+c/2, c/2, d, p_params);
}
}
Tweener.addTween(myobj, {x:100, time:1, transition:easeInExpoOutElastic});
It’s quite custom, but you can even register that with registerTransition and use it seamlessly later.
You guys have done an excellent job with this document.
About customizing the equations, I’ve been using for sometime some variations of the original easing equations. Basically I “chain” two of the functions to allow a tween to go towards a value and return to its origin.
After discovering about Tweener I have slightly adapted my code (so it doesn’t use fl.motion.easing) and be API independent.
You can check the equations at:
http://blog.invassive.com/category/easingaround/
I have also included a modified version of your cheatsheet to show the comparison with the original ones.
Keep up the good work!