Go 0.4.8jg1 + HydroTween rev30 + Guide + Source Code
Posted: May 13, 2008 at 9:39 pmThe 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:0x0000FF, 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:0x0000FF, 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:0x0000FF, 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:0x0000FF, 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:0x00FF00}, 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"] = 0x0000FF; 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
The Discussion
see what everyone is saying
Donovan, this is really awesome work! Serious kudos.
You are the MAN. Thank you!
Hell yeah! GO just got new dimension. And it's syntax friendly too.
Great work Donovan!
Thanks guys! Let me know how it goes, and let me know if you have any ideas:)
I've just got the mail from Moses. Thank you, thank you.
Post has been updated with rev31 updates.
The one thing holding me back from diving into AS3 has been the lack of a Fuse equivalent. Looks like you've provided it! Thanks, and now I look forward to long nights at my Mac learning new stuff.
Great work/
I've also been holding off on AS3 for a nice fuse equivalent. This looks pretty sweet.
Great work! I have a question. Does this support triggers to start the next action before the current action is complete?
Thanks very much for this !
P.s. Which music am i hearing when testing the volume tween?
Abiogenesis" by Carbon Based Lifeforms on the World of Sleepers album. Great CD!
http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=203743554&s=143441
Hey great work!
Just one question – how would you send parameters through to a tween complete handler? eg. if you were tweening multiple mc's and wanted to know which mc had just called the handler?
I'm probably being dim.
I have yet to add params for arguments.. but the easiest way to do this for passing args to any function call is using a nested closure.
HydroTween.go(targ, {x:10}, 1, 0, Linear.easeNone, function():void{onComplete(arg1, arg2);});
It's a sneaky trick that works for all sorts of stuff:)
Updated the source with the rev32 0.4.9 Code!
[...] hydrotik | flash development / design / photographyflash development and creative playground of Donovan Adams Go 0.4.8jg1 + HydroTween rev30 + Guide + Source Code [...]
Great, great work. From my perspective, this is the most robust — and yet simplest — animation class out there. Congratulations.
Don't know if this helps anyway, but I've figured out a way to add listeners to a simple tween:
function single (e:MouseEvent):void {
var tween:IPlayable = HydroTween.go(fusebox, {x:400}, 2, 0, Elastic.easeOut);
tween.addEventListener(GoEvent.COMPLETE, test);
}
function test(e:GoEvent):void {
trace("finished");
}
Obviously, in this case you can achieve the same functionality using a callback, but I love the greater flexibility of listeners.
Thanks man!
You can do it this way, but this is the same as using:
HydroTween.go(fusebox, {x:400}, 2, 0, Elastic.easeOut, test);
The function argument is applied to the tween in the same way as you are adding the listener. It's just happening internally. But this good for people to know as there is a definite need for breaking stuff out if you want to use the pause() resume() and other higher level functions of Go.
But thanks for pointing that out! I will include it in the documentation that I need to get together.
Hi Donovan,
I just added a method to easily call a function after a delay.
why don't you add this:
public static function call(delay:Number = 0, func : Function = null) : IPlayable
{
return HydroTween.go(new Object, {}, 0, delay, null, func);
}
Greetings,
I am using this sequence but it not seems to have 180 seconds. What i am missing?
var seq1:SequenceCA = HydroTween.sequence(
{target:tapa6, x:443, seconds:180, easing:Quadratic.easeInOut},
{target:tapa6, x:443, seconds:180, easing:Quadratic.easeInOut},
{target:tapa6, alpha:0, seconds:180, easing:Quadratic.easeInOut},
{target:tapa6, x:-400, seconds:180, easing:Quadratic.easeInOut},
{target:tapa6, x:-400, seconds:180, easing:Quadratic.easeInOut},
{target:tapa6, alpha:1, seconds:180, easing:Quadratic.easeInOut},
{target:tapa6, x:443, seconds:180, easing:Quadratic.easeInOut}
);
Both work, but seconds seems to round to an int. I need to update the info on this page, but you should use duration int he meantime.
I also suggest you download the latest version if you are using rev30.
Nice work! I was able to add my favorite property "fade" into the class in no time and actually created a quick and dirty shortcuts class just like the fuse shortcuts.
Hello
I have added a properties "frame"
— HydroTween.as.org Tue Jul 8 11:03:54 2008
+++ HydroTween.as Tue Jul 8 11:25:04 2008
@@ -233,6 +233,7 @@
_propertyList["height"] = {prop:"height", read:genericRead, write:genericWrite};
_propertyList["rotation"] = {prop:"rotation", read:genericRead, write:genericWrite};
_propertyList["alpha"] = {prop:"alpha", read:genericRead, write:genericWrite};
+ _propertyList["frame"] = {prop:"frame", read:frameRead, write:frameWrite};
// BevelFilter —————————————————————————-
_propertyList["Bevel_angle"] = {prop:"angle", definition: BevelFilter, read:filterRead, write:filterWrite};
_propertyList["Bevel_blurX"] = {prop:"blurX", definition: BevelFilter, read:filterRead, write:filterWrite};
@@ -675,6 +676,21 @@
+ //frame ———————————————————————————
+ protected static function frameRead(targ : Object, key : String) : Number
+ {
+ return MovieClip( targ ).currentFrame;
+ }
+
+ protected static function frameWrite(targ : Object, key : String, val : Number, val2 : Number = 0) : void
+ {
+ var mc : MovieClip = MovieClip( targ );
+ var frames : Number = Math.round( val ) % mc.totalFrames;
+ MovieClip( targ ).gotoAndStop( ( frames < 1 ) ? mc.totalFrames + frames : frames );
+ }
+
+
+
HydroTween, best tween engine ever. Thx for the big work. However it it would be handy, if this works without sequence or callback:
HydroTween.go(sprite, {x:100}, 1, 0, Cubic.easeInOut);
HydroTween.go(sprite, {x:0}, 1, 1, Cubic.easeInOut);
Check out the latest for HydroSequence where you can easily do this. HydroTween doesn't let you run a Tween on the same object at once. What you are looking to do is Sequencing, so check it out!
frame prop has been added. Also addProperty has been added so you can set up your own simple props.
Hello Donovan,
This is really the best. I downloaded the source and sample files but how come it doesn't work on my end?
Check the download on the google code site, make sure you are using the latest versions. Also let me know what version you are using. Haven't had any problems with people using the download, so it might be something simple and easily fixed.
[...] new kid on the scripted tween library scene looks a lot like the old one, but is leaner and faster. Hydrotik somehow released HydroTween a little while ago and I'm just now starting to use it in [...]
hi. how about making life easier and applying some regexps. I'm talking explicitly about QueueLoaderLite lines:404-412
YOu are performng a match against file types (jpg, JPG) what if the fielname is: jPg???
try this:
var image_pattern=/(\.jpg|\.png|\.gif)\z/i
var swf_pattern=/\.swf\z/i
if (currItem.utl.match(image_pattern))!=null)_currType = FILE_IMAGE;
if (currItem.utl.match(swf_pattern))!=null)_currType = FILE_SWF;
the case is not an issue (/i)
filetypes can be any (\.extension)
and make sure it's at the end! (\z)
cause, your check will also say FILE_IMAGE for: a.jpg.swf
fun script nonetheless!
drop me a line!
I think this comment is in the wrong spot:)
Regardless I made this change and commited it to the SVN. QueueLoader and QueueLoaderLite now support RaVeR cAsE
I am finally delving into HydroTween and AS3. Thanks for all your hard work. I am having an issue, though. Doing a color tween, I find that the colors are muted, as though some black was being mixed in. Here's simple code I've been playing with:
//box is a movie clip placed on stage
box.addEventListener(MouseEvent.ROLL_OVER, rolyPoly);
box.addEventListener(MouseEvent.ROLL_OUT, skateAway);
//for some reason, the colors are darker – almost as if HydroTween is mixing in some black!!
function rolyPoly(color:String):void{
HydroTween.go(box, {color:0×99CC66}, .5, 0, Cubic.easeInOut)
}
function skateAway(color:String):void{
HydroTween.go(box, {color:0xFFFFFF}, .5, 0, Cubic.easeInOut)
}
//…but the color doesn't go to white!!
–update: WEIRDNESS!!!!
I figured out what the "problem" is: when I draw a shape on stage, I have to break it apart(Command+B) then make it a symbol. If I don't break it and then make it a symbol, I get the color skew. Very strange.
Be sure to update to the latest version of HT. Sounds like this is unrelated to HT, but some significant enhancements have been made:)
Do you have a repository of the code?
SVN links are right above the swf example.
[...] tweening engine that looked promising is HydroTween that is AS3 compatible and supports [...]
is there a method to stop/remove a sequence or a tween for an object or all tweens?