Go 0.4.4 + HydroTween + Guide + Source Code
Posted: February 27, 2008 at 4:50 pmThe example above is included in the source at the bottom of the post.
Continuing with the adventure that is Go, I have added tinting, brightness, contrast, hue, saturation, and a lineTo feature. Grant Skinner was kind enough to let me peel some code from his ColorMatrix class. Just to reiterate, I am not a tweening guru. I have an increased respect for people such as Moses, Ryan Taylor, Jack Doyle, Zeh Fernando, and anyone else crazy enough to enter the world of tweening. Tweening engines become incredibly complicated when you start dealing with how properties are organized and how to get the most speed out of the system. That being said I think it is a testament to the Go architecture that I was able to get such a universal tweening class running on Go in such a short time. I should also state that HydroTween is not a tweening engine. HydroTween sits on top of Go and simply allows you to create your own syntax and system for parsing the properties you wish to tween.
I know there is a mad race with who has the fastest tweening system and even more so since the release of TweenBencher. I'm sure the #1 spot will continue to change. This is great as it will push the most out of every system. Because of the way Go is set up, anyone can enter. I've set up HydroTween so it uses syntax similar to Zigo/Fuse with a couple tweaks. HydroTween doesn't have sequencing capabilities yet, but that will come soon along with start properties and property overlap. I put together an example above and the list below of how to use HydroTween with its current properties.
If you've played with HydroTween before, I've taken the liberty of slightly changing the property key structure by doing away with leading underscores in keeping with AS3's format. I've also grouped contrast, matrix, brightness, hue, and saturation into it's own object. Here's a simple code example of how HydroTween currently works:
HydroTween.go(mc, { x:400, y:150, scaleX:.6, scaleY:.6, image{contrast:2, saturation:50}, DropShadow_strength:1, DropShadow_distance:16, rotation:270 }, 2, 0, Elastic.easeOut, null, null, null, 2, Elastic.easeOut);
The guide above shows most of the features in HydroTween. When you tween an example, the code is pasted into system memory in case you want to
HydroTween.go(copy_tf, {alpha:1}, 2, 2, Quartic.easeInOut); HydroTween.go( target, // Target DisplayObject propsToObject, // {x:10, y:10} Contains the tweening properties and values seconds, // tweening duration in seconds delay, // tweening start delay in seconds easingFunction, // Easing function i.e. Quadratic.easeOut onCompleteHandler, // Function called when tween completes onUpdateHandler, // Function called on each update i.e. a screen rendering function extraEasingParams, // Additional arameters for the easing function loopCycles, // Number of times the Tween plays back and forth cycleEasing // Easing function for the additional cycles ); /* Filter Properties: Bevel_angle Bevel_blurX Bevel_blurY Bevel_color Bevel_distance Bevel_highlightAlpha Bevel_highlightColor Bevel_quality Bevel_shadowAlpha Bevel_shadowColor Bevel_strength Blur_blurX Blur_blurY Blur_quality DropShadow_alpha DropShadow_angle DropShadow_blurX DropShadow_blurY DropShadow_color DropShadow_distance DropShadow_quality DropShadow_strength Glow_alpha Glow_blurX Glow_blurY Glow_color Glow_quality Glow_strength */ HydroTween.go(copy_tf, { Glow_color:0x00FF00, Glow_blurX:8, Glow_blurY:8, Glow_alpha:1, Glow_strength:3 }, 2, 2, Quartic.easeInOut); /* Transform Properties: {prop:value ...} volume pan */ HydroTween.go(sound, { volume:0 }, 2, 2, Quartic.easeOut); /* Tint Properties: {tint:{prop:value ...}} color percent */ HydroTween.go(mc, { tint:{color:0xFF0000, percent:.9} }, 2, 2, Quartic.easeOut); /* Image Processing Properties: {image{prop:value ...}} matrix brightness contrast saturation hue */ HydroTween.go(mc, { image:{brightness:1, contrast:.9} }, 2, 2, Quartic.easeOut); /* Text Properties: {text{prop:value ...}} text text_prepend text_append */ HydroTween.go(textfield, { text_prepend:"VOTES: ", // String that comes before tweening number text:1000 // A number that is tweened within the string }, 2, 2, Quartic.easeOut); /* Line Properties: {lineTo{prop:value ...}} x y thickness color */ HydroTween.go(textfield, { lineTo:{ x:580, thickness:2, color:0xFF0000 } }, 2, 2, Quartic.easeOut);
HydroTween 0.4.4 Source and Example