HydroTween + HydroSequence rev37
Posted: July 19, 2008 at 8:30 pmUPDATE: rev39, synced up with the 0.5.0 updates. Matrix tweening and some bug fixes. Fixed callback error from previous updates
Fuse style functionality has been moved from HydroTween to a separate class called HydroSequence! This decision was made to offer an easier and more flexible way to control sequences by having clearer access to SequenceCA super methods. Also makes it easier to enhance the functionality of the sequencing parser. Here is the new syntax:
var seq1:HydroSequence = new HydroSequence( {target:fusebox, x:320, duration:1, easing:Quadratic.easeInOut}, {target:fusebox, Blur_blurX:8, Blur_blurY:8, duration:1, easing:Quadratic.easeInOut}, {target:fusebox, color:0x0000FF, duration:1, easing:Quadratic.easeInOut}, {target:fusebox, Blur_blurX:0, Blur_blurY:0, duration:.8, easing:Quadratic.easeInOut}, {target:fusebox, x:400, duration:.5, easing:Quadratic.easeInOut} ); seq1.addItem([{target:fusebox, rotation:270, duration:3, easing:Quadratic.easeInOut}, {func:trace, args:["HELLO WORLD"]}]); seq1.start();
Grouped Array targets are supported and the ability to add sequence objects with the addItem() method as well as using the constructor to create sequences.
In other news, I added a frame property to HydroTween which has been added to the demo swf here:
Also check out the GO Playground
Some extra advanced features from SequenceCA and beyond:
Duration Advance:
var goItem : HydroSequence = new HydroSequence( [ { target:target, x:400, y:40, Blur_blurX:32, Blur_blurY:32, DropShadow_distance:16, DropShadow_alpha:16, rotation:180, start_alpha:.5, alpha:1, scaleX:5, scaleY:5, color:0x0000FF, useRelative:true, duration:1, // Note Duration is 1. When this finsishes, it waits for the other group item. easing:Quintic.easeIn }, { target:target2, x:300, Blur_blurX:0, Blur_blurY:0, scaleX:1, scaleY:1, color:HydroTween.RESET, duration:1, // Note Duration is one, but... repeater:new LinearGoRepeater(2), // Repeater creates a 1 second tween * 2. easing:Quintic.easeInOut } ]); // Here we add an advance property and instantiate an OnDurationComplete Object to tell // the sequence to skip ahead after 1 second instead of waiting for the full duration of // the sequence Object/item goItem.addItem({target:[target,target2], advance:new OnDurationComplete(1), alpha:0, duration:6}); goItem.addItem({target:[target,target2], alpha:1, duration:1}); // Another grouped sequence Object/item with a function call goItem.addItem([{target:[target,target2], x:10, duration:1},{func:trace, args:["Start x tween"]}]); goItem.addItem({func:trace, args:["Sequence Complete"]}); goItem.start();
HydroTween + HydroSequence Source and Example
HydroTween + HydroSequence Source Only
The Discussion
see what everyone is saying
Just dropping by to tell you that you are awesome. Thank you for helping to fill the painful hole left in many as3 developers' lives by a conspicuous lack of Fuse 2 equivalent for as3.
[...] to kick things off, here's a comparison of Tweener, TweenLite, ZigoEngine (Fuse), Twease, HydroTween, and Adobe's built-in Tween class: (select a tweening engine and click the [...]
Indeed, this is truly great. Only thing I miss is the string shortcuts for relative value tweening (I know you can use "useRelative" but that applies to all values).
e.g. {target:box_mc, alpha:0.5, x:"10″}
This has been added. Should make it's way to the next update in a matter of days.
image tweening part seems doesn't work in example as well as in code, I've tried Tint tweening
great work, respect
color also works very strange,
as long as you use 0xff000, 0×00ff00 … it tweens to that color, but if I try for example 0×8f62ac it does not tween to that color
I suppose color property should work just like flash.geom.ColorTransform ?
I removed tinting as it isn't truly functional and there's a bug. Will add that back in as soon as I get a chance to fixe and finish that.
color vals bug has been fixed in rev 42. HydroTween actually uses ColorMatrix to tween to a hex value. Give it a shot. It's possible color space settings might give slightly different results, but I'm getting exact values when comparing in Photoshop.
Rev 42 is located on the SVN as well as the download link:
http://code.google.com/p/goplayground/
Let me know how that works for you.
[...] HydroTween + HydroSequence (based on GoASAP)http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] HydroTween + HydroSequence (based on GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] hydrotik [...]
Great work here Donovan, thanks so much for sharing it with us!! I was looking at your example files and it seems you're usually importing all the org.goasap classes to your doc class for implementation. They don't need to be because you're extending them from yours, they're automatically inherited. If they don't have goasap, your classes wouldn't compile anyway.
So for the doc class, simply:
import com.hydrotik.go.HydroTween;
import com.hydrotik.go.HydroSequence;
import fl.motion.easing.*;
import flash.display.MovieClip;
[...] HydroTween + HydroSequence (based on GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] las librerias que cortan el bacalao són: Tweener, TweenLite, TweenMax, ZigoEngine (Fuse), Twease, HydroTween, gTween, [...]
[...] HydroTween + HydroSequence (基于 GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] HydroTween + HydroSequence (based on GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] HydroTween + HydroSequence (based on GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] HydroTween + HydroSequence (based on GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]
[...] HydroTween + HydroSequence (based on GoASAP) http://blog.hydrotik.com/2008/07/19/hydrotween-hydrosequence-rev32/ [...]