If a tree falls in the woods and nothing is there to hear it, does it make a sound?
I'd have to say yes and no. No to the fact that sound is based solely on perception, and if nothing is there to perceive a sound, then it can't be a sound. Yes to the fact that sound is made up of tiny fluctuations in atmospheric pressure. Just because someone isn't there to perceive a sound, doesn't mean there aren't variations in pressure. This became clearer to me when I came across a Flash conundrum when creating a pulse Sprite using the ENTER_FRAME event…
If a DisplayObject isn't attached to a display list, does it have a framerate?
Of course this is true, otherwise how would the event fire. However, how do we access the framerate of the Sprite if it isn't attached to a display list or has any references to the stage? Using sprite.stage won't work, so of course we can't use sprite.stage.framerate. If the Sprite is instantiated, and an ENTER_FRAME is attached to the DisplayObject, then how does it know how fast to run?
I've created a Bitmap transition class/framework that uses a Sprite to generate a pulse for transitioning from one visual state to another using two sources. I don't want to create any references to the stage or the display list associated with the source and target Bitmaps. Some might say, well why not? I considered doing this, but my answer was A: I want to make it cleaner, encapsulated, and self contained (Hence my reason for not using HydroTween). B: Garbage Collection. The less references to anything else, the less chance of a memory leak.
It's possible the answer to this question is simple and I'm being deep, philosophical, and difficult for no reason. If you know the answer, then send it on over!
Given the current architecture of Flash, you can only have one Stage per compiled clip. So wouldn't it make sense to me to have static access to the Stage properties? I'm assuming that the Sprite in the forest (pardon the pun) is finding some way to know how fast it needs to cycle from frame to frame. If it can, then I want to be able to as well:)
So if you agree with me, click on the above link and vote for this issue to be addressed. Otherwise it's safe to say the only sound you'll hear is the chipmunk the tree is falling on.
UPDATE: 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:
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:
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();
Made some fixes and updates per the helpful people on Google code as well as Richard Willis and Romuald Quantin. Google code site have been updated as well.
Getting ready to leave for MN and I'm very excited to be a part of Moses' presentation at Flashbelt 2008! I will be providing a brief introduction to HydroTween. HydroTween is a multi-purpose tweening parser that runs on top of the Go framework. If you are familiar with ZigoEngine, Fuse, or Tweener, then using HydroTween should be a seamless transition. In this post, you will find the examples shown during the presentation. I've also put together an online version of what I will be showing. I was hoping to also include a demonstration of the Making Things controller running a tween on a servo, but my laptop isn't being cooperative. I will provide a separate post with an update on that as well as a library I am working on for controlling modules.
Back to the subject at hand, here are the 3 examples that I will be showing. The first is an example of generic tweening with most of the basic properties, filters, and image/hsb tweening. The second is a Fuse type example using navigation with multiple tweening properties running at once. The last is a Papervision3D example that is tweening a number of properties including brightness. Thanks to Andy Zupko's heroic efforts of merging the GreatWhite and Effects branches of Papervision together, we have alpha and the other none-positioning properties at our tweening disposal for 3D objects!
I also urge you to check out my previous post that has useful information and source examples, along with changes and important features that have been added. HydroTween will call you renderer for automatic updating of your Papervision scene by registering with HydroTween using the init3D() method. One important new addition is the ability to pass a DisplayObject3D target into this init method for automatic use of the lookAt() method.
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.
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.
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.
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.
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!
QueueLoaderLite has been deprecated. Regular QueueLoader 3.1.7 and later can be made into a lite version by removing loadable items!
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:
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 = newMovieClip();
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();
}
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:
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:0x00FF00,
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 numbertext: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);
_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.
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:
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.