hydrotik | flash development / design / photography

Go 0.4.8jg1 + HydroTween rev30 + Guide + Source Code

The latest rev is 31. 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!

// 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.

This movie requires Flash Player 9

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

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 rev31 Source and Example

Tuesday, May 13th, 2008

Flashbelt 08, GO, Source Code, AS3, Flash 9 Comments

QueueLoaderLite

Updated the code

I’ve stripped down some of the heavier features for an alternate “lite” version for those wishing a bare bones QueueLoader with low file size. QueueLoader will continue to thrive and there are some enhancements to the regular version that will be made shortly.

The lite version is focused exclusively on image and swf asset loading. Application Domain/Loader Context is still there so you can load other items within a swf and have access to its class references in the library. I will add another guide page on the Google page shortly. I’m including all the listening function in the example below just so you can see it in action, but any/all of them can be removed. More examples and documentation on this version to come, but in the meantime… Basic usage:

import com.hydrotik.utils.QueueLoaderLite;
import com.hydrotik.utils.QueueLoaderLiteEvent;

var qlLoader:QueueLoaderLite = new QueueLoaderLite();

var imageContainer:Sprite = new Sprite();
addChild(imageContainer);
imageContainer.name = “image”;

qlLoader.addItem(“../flashassets/images/slideshow/1.jpg”, imageContainer, {title:“image”});

qlLoader.addEventListener(QueueLoaderLiteEvent.QUEUE_START, onQueueStart, false, 0, true);
qlLoader.addEventListener(QueueLoaderLiteEvent.ITEM_START, onItemStart, false, 0, true);
qlLoader.addEventListener(QueueLoaderLiteEvent.ITEM_PROGRESS, onItemProgress, false, 0, true);
qlLoader.addEventListener(QueueLoaderLiteEvent.ITEM_COMPLETE, onItemComplete, false, 0, true);
qlLoader.addEventListener(QueueLoaderLiteEvent.ITEM_ERROR, onItemError, false, 0, true);
qlLoader.addEventListener(QueueLoaderLiteEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
qlLoader.addEventListener(QueueLoaderLiteEvent.QUEUE_COMPLETE, onQueueComplete, false, 0, true);

qlLoader.execute();

function onQueueStart(event : QueueLoaderLiteEvent):void {
trace(“** “+event.type);
}

function onItemStart(event : QueueLoaderLiteEvent):void {
trace(“>> “+event.type, “item title: “+event.title);
}

function onItemProgress(event : QueueLoaderLiteEvent):void {
trace(“\t>> “+event.type+“: “+[” percentage: “+event.percentage]);
}

function onItemComplete(event : QueueLoaderLiteEvent):void {
trace(“>> name: “+event.title + ” event:” + event.type+” - “+[“target: “+event.targ, “w: “+event.width, “h: “+event.height]+“\n“);

}

function onItemError(event : QueueLoaderLiteEvent):void {
trace(“>> name: “+event.title + ” event:” + event);
}

function onQueueProgress(event : QueueLoaderLiteEvent):void {
trace(“\t>> “+event.type+“: “+[” queuepercentage: “+event.queuepercentage]);
}

function onQueueComplete(event : QueueLoaderLiteEvent):void {
trace(“** “ + event.type);
}

And for instantiating library assets in an external swf library:

import com.hydrotik.utils.QueueLoaderLite;
import com.hydrotik.utils.QueueLoaderEventLite;

var addedDefinitions:LoaderContext = new LoaderContext();
addedDefinitions.applicationDomain = ApplicationDomain.currentDomain;

var qlLoader:QueueLoaderLite = new QueueLoaderLite(false, addedDefinitions);

var soundSWF = new MovieClip();
soundSWF.name = “externalSounds”;
addChild(soundSWF);

var soundChannel:SoundChannel = new SoundChannel();

qlLoader.addItem(prefix(“”) + “flashassets/swf/externalsounds.swf”, soundSWF});
qlLoader.addEventListener(QueueLoaderLiteEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
qlLoader.execute();

function onQueueComplete(event:QueueLoaderLiteEvent):void {
trace(“** “+event.type);
var Loop1Reference:Class = getDefinitionByName(“Loop1″) as Class;
var loop1:Sound = new Loop1Reference();
soundChannel = loop1.play();
}

QueueLoaderLite Source

Tuesday, March 11th, 2008

QueueLoader, Source Code, AS3, Flash 9 Comments

Go 0.4.4 + HydroTween + Guide + Source Code

This movie requires Flash Player 9

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, Source Code, AS3, Flash 12 Comments

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, Source Code, AS3, Flash 1 Comment

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

GO, Source Code, AS3, Flash 6 Comments

AS3 Tweening + Go + HydroTween rev 0.3.1

Here’s my latest tweening module for Go called HydroTween. Using HydroTween with the Go system is as easy as:

HydroTween.go(target, {width:760}, .8, 0, Exponential.easeInOut, onCompleteHandler);

Be sure to go to goasap.org to get the Go source.

HydroTween Source

Thursday, December 20th, 2007

GO, Source Code, AS3, Flash, General 1 Comment

AS3 + HTML Text + tags

I discovered a few things when trying to add img tags to html content on a site I have been working on. Mabye this is common knowledge, but I thought I’d share my experience since I had a hard time getting anymore info on it.

Nesting an <a href> tag around an <img> tag doesn’t work.
When you embed an image into text using the img tag the image is added to the TextField’s DisplayList. For example if you embed an image in the TextField “contentfield”, it’s the same as doing contentfield.addChild(htmlImage); Which brings me to…
The TextField has a method called getImageReference(id:String):DisplayObject; Basically this method returns the DisplayObject or image that is contained within a given TextField. This is great, but I noticed it only works when there is one image in a TextField. If someone can confirm this, that would be great.

Basically I wanted to link the embedded images in my TextField so the popup a larger version of the image. Simple enough, yet when I wrapped the img tag with an href, the outside of the image would show the hand cursor, but the image wouldn’t link. Now if the parent of the img is the TextField, then wouldn’t it make sense to have numChildren as a TextField Method? Then I could loop through the children of the text field and create buttons. I’ve made this request to Adobe, and so far they have been receptive to the idea. Hopefully this will get passed through.

I did however, come up with another way to dynamically load images into a TextField. When loading a swf into a TextField using the img tag you can set the instance name of that swf using the id attribute. I use this id attribute to pass the path to the image, as well as an image id that is passed into the popup window that loads the larger image. Here’s an example of the html source that is passed into the TextField.

I separate the two parameters using a comma which are String split in the thumb.swf. Here’s the code in the thumb.swf:

if(this.parent.name != null) var results:Array = this.parent.name.split(“,”);

var imagepath:String = (this.parent.name == null) ? “../flashassets/images/slideshow/1_sm.jpg” : results[0];
var link:String = (this.parent.name == null) ? “http://www.google.com” : results[1];

var image:Sprite = new Sprite();
image.useHandCursor = image.buttonMode = image.mouseEnabled = true;
image.addEventListener(MouseEvent.CLICK, onClick);

this.addChild(image);
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest(imagepath);
loader.load(request);
image.addChild(loader);

var border:Sprite = new Sprite();
this.addChild(border);
border.graphics.lineStyle(2, 0xCC3300, 1, true, “none”);
border.graphics.drawRect(1,1,148, 148);

function onClick(event:MouseEvent):void{
navigateToURL(new URLRequest(“javascript:window.open(’image.php?cat=slideshow&id=”+link+“‘,’atest’,'menubar=yes,resizable=no,width=710,height=730,left=50,top=50′);”), “_self”);
}

Wednesday, December 19th, 2007

Source Code, HTML, AS3, Flash 1 Comment

QueueLoader AS3 rev27

Turns out when I modify the wiki, the revision number jumps since the wiki is considered a commit. Makes sense since you can edit the wiki locally and upload to the server.

Updates:
Modified the FLV loading so it doesn’t use the Playback component source. It does simple streaming, event.file returns the NetStream Object. No more issues of having to link, import, or embed the component code.

Also included is Jesse Graupmann’s suggestion and implementation of prioritizing and bundling of sub loaders. Basically it let’s you do this:

_qLoader.addItem(“firstQueueLoaderQueueLoader”, _oLoader, { mimeType:QueueLoader.FILE_QUEUE});

Currently it requires setting the MIME type manually, but soon it will be set up so that if QueueLoader is in the path, it will recognize it as well. More enhancements and examples of this feature to come.

Click here for the current rev

Thursday, December 13th, 2007

QueueLoader, Source Code, AS3, Flash 24 Comments

Papervision3D 2.0 + Go Tweening - Flipping Banner (Part 1)

Set up PapervisionTween to automatically render:

PapervisionTween.init(renderer, scene, camera, viewport);

Calling PapervisionTween to tween a plane:

var b:PapervisionTween = new PapervisionTween(_planeArray[0], {rotationY:0}, 0, 1, Quintic.easeInOut, onFlipDone);
b.start();

I’ve also included the PapervisionTween code in the post in addition to the source files below, but let’s move on the flipping code.

Here’s the Core class that calls the Flip class:

package com.hydrotik.bannerflip3d {
/**
   * @author Donovan Adams
   * @version December 10, 2007
   * @description Papervision Page flip example
   *
   */
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;

import com.hydrotik.bannerflip3d.Flip;
import com.hydrotik.bannerflip3d.FlipEvent;
import com.hydrotik.utils.XMLLoader;
import com.hydrotik.utils.XMLLoaderEvent;

import flash.system.Capabilities;

public class Core extends Sprite {

private var _scope:MovieClip;

private var _stage:Stage;

private var _xml:XML;

private var _url:String;

private var _hit: Sprite;

private var _targ : String;

public function Core(scope:MovieClip, stage:Stage):void {
_scope = scope;
_stage = stage;
var p:String;
if (Capabilities.playerType == “External” || Capabilities.playerType == “StandAlone”) {
p = “../includes/admin/flippingbanner.xml”;
} else {
p = “/wp-content/flippingbanner2/includes/admin/flippingbanner.xml”;
}
var xml:XMLLoader = new XMLLoader(p);
xml.addEventListener(XMLLoaderEvent.COMPLETE, onXMLComplete);
xml.addEventListener(XMLLoaderEvent.ERROR, onXMLError);
}

private function onXMLError(event : XMLLoaderEvent) : void {
trace(event);
}

// –== Private Methods ==–
private function onXMLComplete(event:XMLLoaderEvent):void {
trace(“:: onXMLComplete:”);
_xml = event.xml;

var _oFlip:Flip = new Flip(_scope, _stage, this, event.xml.banner.children(), “”, new int(_xml.attribute(“seconds”)));
_oFlip.addEventListener(FlipEvent.COMPLETE, onCompleteHandler);
_oFlip.addEventListener(FlipEvent.ON_FLIP, onFlipHandler);

_hit = new Sprite();
_hit.graphics.beginFill(0×660000, 0);
_hit.graphics.drawRect(0, 0, _stage.stageWidth, _stage.stageHeight);
_scope.addChild(_hit);
_hit.addEventListener(MouseEvent.CLICK, onClickHandler);

_hit.buttonMode = true;
_hit.useHandCursor = true;
_hit.mouseEnabled = true;
}

private function onClickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest(_url), _targ);
}

private function onCompleteHandler(event:FlipEvent):void {
_url = event.link;
_targ = event.targ;
}

private function onFlipHandler(event:FlipEvent):void {
_url = event.link;
_targ = event.targ;
}

}
}

Here’s the updated Flip class using the Go tweening engine:

package com.hydrotik.bannerflip3d {
/**
   * @author Donovan Adams
   * @version December 9, 2007
   * @usage Example:<div class="codesnip-container" ></div>
   * @description
   * @history
   * @sends
   * @todo
   *
   */
import flash.display.*;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.utils.setTimeout;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.core.proto.SceneObject3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

import com.hydrotik.go.PapervisionTween;

import fl.motion.easing.*;

import org.papervision3d.core.proto.MaterialObject3D;

[Event(name=“COMPLETE”, type=“com.hydrotik.bannerflip3d.FlipEvent”)]

[Event(name=“ON_FLIP”, type=“com.hydrotik.bannerflip3d.FlipEvent”)]

public class Flip extends EventDispatcher {

public static const VERBOSE:Boolean = true;

private var _scope:Sprite;

private var _stage:Stage;

private var _oCore:*;

private var _assetPath:String;

private var _materialArray:Array;

private var _planeArray:Array;

private var _array:XMLList;

private var _count:int = 0;

private var _next:int;

private var _prev:int;

private var _loader:Sprite;

private var _seconds:int;

//New 2.0 Privates

private var renderer:BasicRenderEngine;

private var camera:Camera3D;

private var viewport:Viewport3D;

private var debug : Function;

private var scene : Scene3D;

private var white : MaterialObject3D;

private var bg : Plane;

public function Flip(scope:Sprite, stage:Stage, core:*, a:XMLList, assetPath:String = “../flashassets/”, s:int = 10):void {
debug = trace;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
_scope = scope;
_stage = stage;
_oCore = core;
_array = a;
_assetPath = assetPath;
_seconds = s;
_materialArray = [];
_planeArray = [];

scene = new Scene3D();
renderer = new BasicRenderEngine();
camera = new Camera3D();
camera.z = -100;
viewport = new Viewport3D(500,300,true);
viewport.alpha = 0;

_scope.addChild(viewport);

white = new ColorMaterial(0xFFFFFF);

setTimeout(addedToStage, 100);
}

private function addedToStage():void{
if(VERBOSE) debug(“\n\n>> Flip.addedToStage(); - args: “+[]);

_loader = new Sprite();
_loader.graphics.beginFill(0×000000);
_loader.graphics.drawRect(0, 0, 1, 4);
_scope.addChild(_loader);
_loader.x = (_stage.stageWidth/2) - 50;
_loader.y = (_stage.stageHeight/2) - 2;

for (var i:int = 0; i < _array.length(); i++) {
_materialArray[i] = new BitmapFileMaterial(_array[i].attribute(’src’));
_materialArray[i].oneSide = true;
_materialArray[i].smooth = true;
_materialArray[i].addEventListener(FileLoadEvent.LOAD_PROGRESS, onFileProgress);
_materialArray[i].addEventListener(FileLoadEvent.LOAD_COMPLETE, onFileComplete);
_planeArray[i] = new Plane( _materialArray[i], 300, 156, 6, 6);
scene.addChild(_planeArray[i]);
_planeArray[i].name = i.toString();
_planeArray[i].rotationY = -180;
}

// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
// The init function passes the rendering info so that PapervisionTween can take care of updating the renderer
PapervisionTween.init(renderer, scene, camera, viewport);
}

private function onFileProgress(event:FileLoadEvent):void {
if(VERBOSE) debug(“\t percentage: “+Math.round((event.bytesLoaded/event.bytesTotal)*100) + “%”);
var sec:Number = 100/_array.length();
_loader.width = ((_count * sec) + ((event.bytesLoaded/event.bytesTotal) * sec));
}

private function onFileComplete(event:FileLoadEvent):void {
if(VERBOSE) debug(“complete!”);
//
_count++;
if (_count == _array.length()) {
onImageQueueCompleteHandler();
}
}

private function onImageQueueCompleteHandler():void {

// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
var l:PapervisionTween = new PapervisionTween(_loader, {alpha:0}, 0, .2, Quintic.easeInOut, loaderFade);
l.start();

// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
var b:PapervisionTween = new PapervisionTween(_planeArray[0], {rotationY:0}, 0, 1, Quintic.easeInOut, onFlipDone);
b.start();

// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
var c:PapervisionTween = new PapervisionTween(camera, {z:-100}, 0, 1, Quintic.easeInOut, onFlipDone);
c.start();

_next = 0;

_count = -1;

bg = new Plane(white,5120,2560,10,10);
bg.y = -200;
bg.z = 500;
bg.pitch(0);

scene.addChild(bg);
dispatchEvent(new FlipEvent(FlipEvent.COMPLETE, _next, _array[0].attribute(‘link’), _array[0].attribute(‘target’)));

var myTimer:Timer = new Timer(_seconds * 1000);
myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
myTimer.start();
}

private function flip(id:int):void {
// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
var a:PapervisionTween = new PapervisionTween(_planeArray[_next], {rotationY:180}, 0, 1, Quintic.easeInOut, onOldFlipDone);
a.start();

// Update Data
_prev = _next;
_next = (id == _array.length() - 1) ? 0 : id + 1;
var url:String = _array[_next].attribute(‘link’);
var targ:String = _array[_next].attribute(‘target’);
trace(url, targ);
dispatchEvent(new FlipEvent(FlipEvent.ON_FLIP, _next, url, targ));

// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
var b:PapervisionTween = new PapervisionTween(_planeArray[_next], {rotationY:0}, 0, 1, Quintic.easeInOut, onFlipDone);
b.start();

// PapervisionTween is extending LinearGo. PapervisionTween is a custom extension using custom syntax, running on the Go system
var c:PapervisionTween = new PapervisionTween(camera, {z:-350}, 0, .5, Quintic.easeIn, onCameraHalf);
c.start(</

hydrotik | flash development / design / photography
flash development and creative playground of Donovan Adams

Archive for the ‘Flash’ Category

Go 0.4.8jg1 + HydroTween rev30 + Guide + Source Code

Tweening Examples:

The Making of HydroTween

QueueLoaderLite

Go 0.4.4 + HydroTween + Guide + Source Code

Go 0.4.3 + HydroTween

Go 0.4.1 + HydroTween

AS3 Tweening + Go + HydroTween rev 0.3.1

AS3 + HTML Text + tags

QueueLoader AS3 rev27

Papervision3D 2.0 + Go Tweening - Flipping Banner (Part 1)

hydrotik | flash development / design / photographyflash development and creative playground of Donovan Adams

Archive for the ‘Flash’ Category

Tweening Examples:

The Making of HydroTween

hydrotik | flash development / design / photography
flash development and creative playground of Donovan Adams