The latest rev is 32. I have added the changes to this document in addition to the other updates.
Update 31d Fixed a bug from the removal of OverlapMonitor. Thanks John!
Update 32 Smoothness issue has been fixed with pulseInterval and example updated for 0.4.9. Start Values have been added for non-color/image matrix properties
Update 33 Made a couple updates and a post for the FlashBelt 2008 conference. A few more examples. I also added a DisplayObject3D target argument in the init3D() method for running a lookAt() during scene renders. Click here for the recent post.
// Color Tweening!
HydroTween.
go(mc,
{color:0xFF0000
},
2,
0, Elastic.
easeOut);
// Fuse style sequencing!
var seq1:SequenceCA = HydroTween.parseSequence(
{target:fusebox, x:320, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, Blur_blurX:8, Blur_blurY:8, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, color:0×0000FF, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, Blur_blurX:0, Blur_blurY:0, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, x:400, seconds:.5, easing:Quadratic.easeInOut},
{target:fusebox, rotation:270, seconds:.5, easing:Quadratic.easeInOut}
);
seq1.start();
After a short hiatus from the blog, and a wedding, I’ve been able to knock out some much needed changes and additions to HydroTween. I’m excited about this because now I can move onto the fun stuff and I’ve started putting together a roadmap of sorts. Go has been picking up steam and examples have been popping up which is great to see. Most people seem to think there are two types of users of Go. The ones that simply want to tween away, have something functioning, and useful right away. The other types are interested in developing their own tweening system and animation utilities either for all around use or for specialized applications. I’m excited about the 3rd group which falls in the middle. These are the people that want the first, but find themselves becoming the latter just because of the Methodology of Go. I used to be in the first group for quite some time until Go came along and then I found myself thrown intro the world of tweening. I’ve been saying this for some time now, but the beauty of Go is that you might find yourself in the middle with very little effort. Once you it that point, consider yourself an addict. This post should help with a general understanding of HydroTween. I also hope this post will open some eyes to the idea of going it along and giving their own parser a shot. That said I will start with the usage of HydroTween and it’s updates, then I will follow with my own trial and tribulations of reaching this recent version. The example below along with the source is located at the end of this post.
Click here for the Go Project Site - Go Project Site
Click here for the Go Playground Project Site - Home of Parsers/User Generated Go projects and examples.
Current Tweenable Properties:
- alpha
- 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
- brightness
- color
- contrast
- 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
- height
- hue
- pan
- rotation
- rotationX (PV3D)
- rotationY (PV3D)
- rotationZ (PV3D)
- saturation
- scaleX
- scaleY
- scaleZ (PV3D)
- text
- tint
- volume
- width
- x
- y
- z (PV3D)
What’s new in this version:
- Image/Bitmap/ColorMatrix property refactoring such as contrast, brightness, etc. Color tweening has been added as well. Worked out some bugs and streamlined.
- Fuse style sequencing.
- An autostart parameter.
- Updated reverse and cycle structure.
- Started porting over the previous textfield tweening functionality.
- Tweening of multiple targets as Arrays
- Papervision3D tweening functions
- start_ values for non image/color matrix tweening. (This will be addded soon!)
Autostart:
Autostart has been deprecated from version 30. In version 31, go calls() and sequence() methods start automatically. To setup a sequence that doesn’t start, use the parseSequence() method.
LinearGoRepeater:
The static go() method and the constructor have been updated to reflect the changes in version 0.4.8. An object has been added that provides parameters for cycling back and forth. You can either input a LinearGoRepeater instance, or you can use a generic object.
HydroTween.go(mc, tweenObj[e.target.name], seconds, 0, easing, null, null, null, {cycles:2, reverse:true, easing:easing});
Fuse style Sequence Tweening:
// This sequence will start automatically.
var seq1:SequenceCA = HydroTween.sequence(
{target:fusebox, x:320, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, Blur_blurX:8, Blur_blurY:8, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, color:0×0000FF, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, Blur_blurX:0, Blur_blurY:0, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, x:400, seconds:.5, easing:Quadratic.easeInOut},
{target:fusebox, rotation:270, seconds:.5, easing:Quadratic.easeInOut}
);
// This sequence will NOT start automatically. Allows you to create sequences and store them
var seq2:SequenceCA = HydroTween.parseSequence(
{target:fusebox, x:320, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, Blur_blurX:8, Blur_blurY:8, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, color:0×0000FF, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, Blur_blurX:0, Blur_blurY:0, seconds:5, easing:Quadratic.easeInOut},
{target:fusebox, x:400, seconds:.5, easing:Quadratic.easeInOut},
{target:fusebox, rotation:270, seconds:.5, easing:Quadratic.easeInOut}
);
seq2.start();
Tweening Examples:
F.Y.I. The flash interface/example above will copy the code to the clipboard.
General:
HydroTween.go(mc, {x:400}, 2, 0, Elastic.easeOut);
Filter:
HydroTween.go(mc, {Glow_color:0×0000FF, Glow_blurX:8, Glow_blurY:8, Glow_strength:3}, 2, 0, Elastic.easeOut);
Image/Bitmap/ColorMatrix:
// Brightness
HydroTween.go(mc, {brightness:2}, 2, 0, Elastic.easeOut);
// Contrast
HydroTween.go(mc, {contrast:2}, 2, 0, Elastic.easeOut);
// Hue
HydroTween.go(mc, {hue:45}, 2, 0, Elastic.easeOut);
// Saturation
HydroTween.go(mc, {saturation:-1}, 2, 0, Elastic.easeOut);
// Tint
HydroTween.go(mc, {tint:0×00FF00}, 2, 0, Elastic.easeOut);
// Color
HydroTween.go(mc, {color:0xFF0000}, 2, 0, Elastic.easeOut);
// Color Reset (This will tween back to it’s original value
HydroTween.go(mc, {color:-1}, 2, 0, Elastic.easeOut);
Matrix tweening (for array values such as sepia, etc) should make a return in the next update as well as a tint percentage value.
Sound:
// Volume
HydroTween.go(soundchannel, {volume:.1}, 2, 0, Elastic.easeOut);
// Contrast
HydroTween.go(soundchannel, {pan:-1}, 2, 0, Elastic.easeOut);
Sound tweening takes the SoundChannel instance as a target.
Text:
HydroTween.go(textfield, {text:100}, 2, 0, Elastic.easeOut);
This simply tweens the number from 0 to whatever param is specified and outputs to a textfield. I hope to expand on the functionality of this soon.
Using Callbacks and Updaters:
// Complete Callback
HydroTween.go(textfield, {text:100}, 2, 0, Elastic.easeOut, onCompleteHandler);
// Update Callback
HydroTween.go(textfield, {text:100}, 2, 0, Elastic.easeOut, null, onUpdateHandler);
Papervision3D Tweening:
I have added a convenient function for setting up your renderer for HydroTween. This is called once before you call any tweens and runs the renderer during any tween.
// Call once to setup a 3D tweens renderer
HydroTween.init3D(renderer, scene, camera, viewport);
// Simple Papervision3D Tween
HydroTween.go(plane, {rotationX:100, z:500}, 2, 0, Elastic.easeOut);
Also be sure to check out John Grden’s kickass Go3D parser.
Roadmap and upcoming updates:
- Text tweening to support prefix and suffix String values
- Even more modular format for adding tweenable properties
- Drawning and spline/bezier tweening/Catmull Rom/etc
- Continuing with speed enhancements
The Making of HydroTween
For those of you interested in setting up your own tweening parser, hopefully this section will offer some insight. Getting these updates was a bit of a challenge and I learned quite a bit. Because of this, I think my ultimate vision for HydroTween has changed a bit. With the flexibility Go offers, the task of how to manage tweens and properties falls in the hands of the Go practitioner. The efficiency of a tweening engine really boils down to the simplicity of it’s core and the reading and routing of updating property values. How this is achieved can explain the large number of different tweening systems out there. My hope is to eventually set up HydroTween to extend the open foundation of the Go system to it’s tweenable properties making them more modular and easy to tweek. Let’s forget about how the Go core engine works for a minute and look at the bare bones processes invloved in tweening.
- First we need some way to parse a syntax of our choosing.
- We need to keep track of where/what the end result of our tween will be.
- We need to figure out the starting value of the tween.
- We need to figure out the difference of the starting and ending value.
- We need to update the values of that difference over a period of time.
- We need to route the updated values to the tweens target based on the type of property that’s being tweened.
This is a very general idea of what’s going on here. Now some of the above has been taken out of the equation and/or made easier to accomplish. The parsing is being left up to us, along with how we store and route the updating property values. We have a place to figure out the starting point as well as where to update the data. The trick is how to do it.
I’ve found that most tweenable properties fall into a few categories:
Some are direct properties of an object, such as the x value of a Sprite.
// Normal syntax:
sprite.x = 1;
// "Tweenable" syntax:
sprite[“x”] = 1;
Some are done through object’s filters, such as BlurFilter and DropShadow.
// Normal syntax:
var gf:GlowFilter = new GlowFilter();
gf.color = 0xFF0000;
box.filters = [gf];
// "Tweenable" syntax:
box.filters = [new GlowFilter()];
var f:Array = box.filters;
f[0][“color”] = 0×0000FF;
box.filters = f;
Some are done through a transform property, or a combination of transform properties, such as volume or some color changing.
// Normal syntax:
var tf:* = targ.soundTransform;
tf.volume = val;
targ.soundTransform = tf;
// "Tweenable" syntax:
var tf:* = targ[“soundTransform”];
tf[“volume”] = val;
targ[“soundTransform”] = tf;
The above examples are straight forward, but they point out the process of parsing. We are using a String reference to the Objects property which allows us to match it up in our property list. This is where we define our syntax and essentially becomes our “key”. Every key in our parser must be unique so we can match up a respective property. In the case of blurX, we have to specify that it is either the BlurFilter, GlowFilter, etc. So Blur_blurX is added to a key/property list which matches that property with the functions needed to update the BlurFilter and target in the Objects filter Array.
Some use a combination of Filter and Matrix math such as contrast, color, hue. Some use value pairs, such as drawing. The rest I have found use either a single or double value, along with some constants such as spline animation, text, etc. You can refer to the source for the more complicated examples as they require a couple extra steps. Just to give you the general idea. With ColorMatrix we are tweening an entire array of values. What HydroTween does is depending on the property settings, an “adjustment” function is called. This changes the end values for the array, and the write function updates the entire array from point A to B. Since an Object can have multiple ColorMatrix adjustments made to it, we need to call these first before running the tween. Thanks again to Grant Skinner for letting me import and tweek his ColorMatrix class.
All of these items are easy to tween in their own right, but when you combine them all together, that’s when things get tricky. I’ve organized my functions in a read, write, and for some an adjust and path category. “Read” simply gets the objects existing state, “write” updates the objects property value, “adjust” modifies a property prior to writing it (such as ColorMatrix transformations of a ColorMatrix Array before tweening it), and “path” is a param that accesses an objects property.
My goal now is to continue to make this more efficient and modular in a way that the average user can create a read function, a write function, and register it to the property list along with any additional params it might need. It’s sorta there, but there is much work to be done:)
I’m still no tweening Jedi and this is an ongoing work in progress. Any suggestions, complaints, and contributions are welcome.
Also I will be at Flashbelt. Hit me up if you are interested in meeting up. Looking forward to Moses’ presentation!
HydroTween rev32 Source and Example