Archive for February, 2008

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:

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: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

Wednesday, February 27th, 2008

Go 0.4.3 + HydroTween

Check the most recent Go Post for updates

Made some updates to HydroTween as well as embarked on a number of extras. Below is the updated special properties tween list:

“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”

“_volume”,
“_pan”
“_text”
“_tint” // _tint:{tint:0xFF0000, percent:.8}
 

Here’s a tweening syntax example:

HydroTween.go(mc,
{
        x:400,
        y:150,
        scaleX:2,
        scaleY:2,
        _tint:{tint:0xFF0000, percent:1},
        DropShadow_strength:1,
        DropShadow_distance:16,
        Blur_blurX:8,
        Blur_blurY:8,
        rotation:180,
        alpha:1
       
}, 4, 1, Bounce.easeOut, null, null, null, 2, Bounce.easeOut);

_brightness, _saturation, _hue, _contrast are next on my list. I’ve had them working in some form here and there, but the problem I need to get around is when you are tweening more then one of those properties at once. I’m no tweening guru, so this has been an educational experience. I also started and got results with a _lineTo, but want to get the _curveTo done before releasing it.

HydroTween and Go have successfully consumed my actionscript life again for the last week. I need to get back to some projects that I have procrastinated on:) I am proud to say that I’ve already used HydroTween/Go on commercial projects and current work.


HydroTween 0.4.4 Source and Example

Saturday, February 23rd, 2008

Go 0.4.1 + HydroTween

Check the most recent Go post for updates

It’s still in it’s infancy, but I’ve made some progress with HydoTween after working with Moses on some different direction with Go over the weekend. During the R&D process with him, I took a little of what we did and merged it into HydroTween. Because Go is still very new and still evolving, it’s very likely that HydroTween will evolve quickly as well. I haven’t fully tested multiple targets in an array yet, but on individual tweens I’ve been able to add a number of tweenable features. Also with the help of Grant Skinner’s ColorMatrix class, I’ve added image tweening capability.

Here’s an example of using HydroTween. Should be somehwat familiar to Fuse/Zigo users:

HydroTween.go(mc,
                {
                        x:400,
                        y:150,
                        scaleX:.6,
                        scaleY:.6,
                        _contrast:50,
                        _saturation:50,
                        DropShadow_strength:1,
                        DropShadow_distance:16,
                        rotation:360,
                        start_alpha:.5,
                        alpha:1,
                        scaleX:5,
                        scaleY:5
                       
                }, 2, 0, Elastic.easeOut, null, null, null, 2, Elastic.easeOut);

Here’s the current list of tweenable items in addition to the basic props (x,y,alpha, etc). This is still in beta so lemme know if there are problems.

“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”

“Sound_volume”,
“Sound_pan”

“_brightness”,
“_contrast”,
“_saturation”,
“_hue”

I will probably change the sound tweening keys at some point, but you get the idea:)

Next on the list are start props, or what Moses and I discussed as tween “const” variables. Items that are params but aren’t necessarily tweenable. Such as quality, filter colors in some instances, etc.

Also I’ve been out of the Papervision3D loop since xmas, but I’m looking to jump back onto that. I’ll have to see if the the guys have made progress on tweening DisplayObject3D with the new version yet.

Go has been progressing quickly as of late. I will begin to post my progress here as well as add HydroTween to the svn at some point.

Click here to go to Go, and be sure to sign up for the mailing list!


HydroTween 0.4.4 Source and Example

Thursday, February 21st, 2008