Go 0.4.4 + HydroTween + Guide + Source Code
The 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:
{
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(
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:0×00FF00,
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
February 28th, 2008 at 6:59 am
brilliant!!!
this is simply AWSOME; i'll call you don donovan from now on
cheers!
henrik
February 28th, 2008 at 1:00 pm
I noticed compilation warning on line 455,line 628 and line 649 of HydroTween.as var 'prop' has no type declaration the fix is "for (var prop:String in propsTo) {"
February 28th, 2008 at 5:25 pm
I fixed in the source and will update the download and the SVN this evening. Strange that FDT didn't catch that.
February 28th, 2008 at 9:23 pm
Updated the example.
March 3rd, 2008 at 12:18 pm
Hey Donovan,
Thanks so much for working on the new GO tween system! Greatly appreciated.
Quick question,
I love how you put a percentage option with the tinting property. However, when I use it on a MC of a solid color rectangle for a MOUSE_OVER event, the first MOUSE_OVER tints fine and the first MOUSE_OUT tweens it back to the original tint fine as well. BUT, when I MOUSE_OVER a 2nd time, it tints to a entirely different COLOR.
And this was with the percentage set to 1. when the percentages were set to less than 1 I had even more problems.
is there a way to establish a variable of the original tint/color state of an object to tint to?
Thanks again for all your hard work and contribution to the AS3 community!
guitarman
March 4th, 2008 at 9:02 am
Just what the doctor ordered…must have been some work that went into this…many thnx dj.
March 4th, 2008 at 10:06 am
I updated the SVN with new code to fix some of the tinting issues. I haven't posted it here as I feel like tinting needs to be converted to using the ColorMatrixFilter which is next on my list. I've changed the syntax a bit as well and it's possible I'll need to revisit that after the tinting is working with the CMF.
In the meantime:
http://code.google.com/p/goplayground/source/checkout
I will post shortly when CMF tinting is done and the bugs worked out.
March 4th, 2008 at 10:07 am
thanks chd! the work continues:) enjoy
March 23rd, 2008 at 8:19 am
Useful stuff - i've started using this over tweenlite as i was getting some weird problems with that, and this works well. I have found a problem though, when just tweening x & y for a sprite the sprite kept going white and it's because of the following lines in start()
if(!isNaN(_start_color)){
colorWrite(_target, _start_color);
}
If you fail to specifiy a start_color in the tween it forces it to white because _start_color is set to -1 and should probably be set to NaN on line 212
private var _start_color:Number = NaN;
This class is really useful, currently using it in my first flash game (only been programming as3 for about 3 weeks now) Thanks again!
April 6th, 2008 at 2:31 pm
[...] HydroTween SWF Size Addition: ~12KB Author: Donovan Adams Download: Here Version Used: [...]
May 9th, 2008 at 2:39 pm
Obagi Blue Peel…
I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you….
May 9th, 2008 at 2:55 pm
Thanks so much. New post coming soon on the new version of HydroTween
January 18th, 2009 at 10:03 am
Great stuff. I'm going to use it in my next project! Thanks.
Well and the best of all is the Carbon Based Lifeforms sample there. You made my day :]