Category: GO

0

Digital Darwinism


It's been a very very very long time since my last post. A great number of things have changed both in my work and my life. Many for the better, and some bittersweet. I've learned a great deal since then, and I'm excited to get caught up with sharing my thoughts and experiences. Some of the exciting things I have been doing include Android and mobile development. I've also been experimenting with Appcelerator's Titanium Studio as well as returning to a great deal of Javascript and Web Standards development. Lately my Flash development has been centered around video and 3D based work. The sadness of very little Actionscript in my life has been replaced with a more objective business minded viewpoint of what it takes to function in the current digital landscape. The right tool for the job – given the right context and experience – has become my new mantra.

Stay tuned… Much more to come.

01

HydroTween is now OpenTween and on Github!


GitHub

I've decided to take a step back in the hopes of taking two steps forward. HydroTween is now deprecated for the most part as I've stripped it down and done some rebuilding in the form of OpenTween. The hope is by having the project on gitgub, the project will attract some extra help and involvement. Some other reasons for rebuilding are the modularity of the properties and the goal of having easy to add/configurable properties and property groups. Performance inprovements are another important reason. Also the fact that the code is using an MIT license means that it can be added to whatever project you want as long as the license boiler plate is intact. It's even set up so you can create your own "private label" tweening engine for your development projects. I.E. I have MyOwnTween which extends OpenTween and allows you to reorder your params, settings, etc.

I have yet to implement the image process tweening properties or give this a thorough testing so it's still in the infant stages, but I'm excited about where this is going and giving the project a fresh restart. Check out Git if you haven't already and give me a shout if you want to get involved!

OpenTween on Github

01

YouWillKnowTheTruth.Com – The Final Cylon


Who is the Final Cylon? You Will Know The Truth Revealed the Fifth Cylon

I'm excited about the launch of www.youwillknowthetruth.com. Keep checking the site as clues will be released frequently leading up to the moment of truth!

Final 5th Cylon Clue


9

11 Must Have Flash Resources and 11 Must Have Utilities For 2009


Here's my list of 11 shweet resources and utilities for Flash Developers for the upcoming year. Some of these will look familiar to you from 2008 and possibly even earlier, but their significance and continued development will see them into 2009 and beyond. With the release of CS4, expect to see upgrades and revitalization of a number of projects as new features of the latest version of Flash are incorporated.

Resources:

1. Papervision 3D + VectorVision
Now that Papervision has taken hold of the Flash community, what next? I decided to add it to this list, as I believe 2009 to be the year of PV3D optimization and streamlining. With the new features of CS4, along with GPU processing being utilized for rendering outside of full-screen mode, the upcoming year will see those chugging experiments running smoother with significant FPS gains. In Flash 10, the Graphics.drawTriangles method gives us the ability to draw triangles using UV and UVW coordinates natively which will strip a lot of code out of the engine. This will help enable the team to squeeze every ounce of efficiency out of Papervision which is the key to Papervision evolving and making it a lasting tool. All that being said, expect to see more pushing of the envelope and more amazing experiments. Along with Papervision, I'm excited to see the evolution of Vectorvision, the vector based add-on to the Papervision library. Creating font class files that can then be used to create 3D display objects, gives us another color in the artists palette. I'm hoping to see more drawing capabilities added very soon.

UPDATE: Vectorvision's Mark Barcinski is now a member of the Papervision team. Vectorvision code will get folded into the library making things a bit more convenient with updates. Also Tim Knip has released a triangulation lib which makes it easy to convert a Vectorvision object to DisplayObject3D. This provides shading, texturing, and quadrant engine functionality. This will also lead the way for extrusion!

2. Ribbit
One of the coolest things to come out of 2008 is Ribbit. So cool, that I have also added it to my 2009 list. The creative possibilities with Ribbit are endless. Imagine plugging your Flash application into a phone jack. Keep an eye out for Ribbit's Killer App Contest which will generate a great deal of ideas. I see a significant increase in viral development using Ribbit in 2009, as well as incorporated into social networking, digital artistic pieces, and more.

3. Go + HydroTween
This is 1 of 2 of my shameless plugs, but try and think of this in terms of the big picture. Forgetting Hydrotween, Go is more then a foundation for a Tweening engine. It's the pulse for anything that has a beginning, an end, or any level of frequency. Go made a modest dent in the development community in 2008, but I feel the best is yet to come. I'm hopeful that physics, more creative Tweening utilities, and even more 3D control and deforming modifiers will find their way to goplayground in 2009.

4. Unity3D
It's very easy to get set in your ways when dealing with a ubiquitous platform such as Flash. With an over 90% penetration rate, one silently cringes when thinking of integrating another web platform on top of the Flash environment. That all gets thrown out the window after experiencing the pure awesomeness of the Unity3D plug-in. Well, O.K. The concerns are still there, but this is definitely something to keep an eye out for. As communication between Unity and Flash flourishes, this wil become standard for more robust 3D games and applications. I wouldn't be surprised if we see some sort of relationship between Adobe and Unity.

5. F.D.T.
It's easy to become an evangelist for FDT. The Powerflasher team is doing a great job of listening to the Flash community effectively which is great because I am one of those people that is quick to point out its occasional hiccups. 3.1 Standalone was a and the foundation for further updates. Soon we will see MXML support in early 2009 as well as the Obfuscator which the team is working on with Nicolas Cannasse (HaXe). FDT is looking to bridge the gap between the design process and the development process as well as enhance the management. With the work that is being done to provide MXML support, the FDT engine is no longer tied to a specific coding language. What this means is that special projects such as as UML functionality, or an FDT configuration specifically for designers, can be undertaken without modifying the core.

6. Adobe Flash CS4
Hard to go down the list without mentioning the recent release of Flash CS4. The addition of the new Vector class will help to speed iteration processes by providing strict/strong typing of an array. In many cases, casting an object's type in a parameter will speed complex calculations. Following that concept, by defining an array's type at the onset, the iteration focuses on accessing its contents instead of what it contains. You can find a good example of this at Alex Bustin's Blog. Also in recent news from Adobe, Alchemy (which allows you to compile C and C++ code into AS using llvm-gcc) will open the doors for many Actionscript developers. For ultimate cool factor, look out for the NES emulator running ROMS ported to AS3! (FlaCC – at the bottom) Also Catalyst (formerly known as Thermo), should hopefully make the relationship between designer and developer easier when it comes to wire-framing out concepts.

7. Red5
When it comes to a server solution for Flash deployment, there are pretty much two options. One is the Flash Media Server which starts at around $5000 and the other is the free and open source Red5. It features streaming of FLV and MP3, recording of client FLV streams, remoting, and shared objects just to name a few. An admin tool has been added in 0.6.3 as well as stream listeners. For 2009, the Red5 team is introducing Server-Side AS3. This will allow you to write code on the server without knowing Java extending the flexibility and accessibility of Red5 for developers. Whole applications can be developed on the server for things such as Social Networking, media manipulation, and so much more. Red5 is poised to hit the 1.0 version mark pretty soon which will help in making it even more competitive with Flash Media Server as stable platform.

8. AMFPHP
This overlaps with Red5 a tad, but I added it because it is something that I find quick and easy to use on a per project basis. Fairly straightforward as it provides communication between a PHP server and Flash applications. Another standard addition to this is Danny Patterson's AS3 Lightweight Remoting Framework.

9. Spring Actionscript/Prana
Prana is an Inversion of Control container for AS3. This topic very easily requires its own post, but in simplest terms, Prana lets you configure your Application's components using an external XML file and initializing them at runtime. For large scale projects this is important as it lets you define your framework and allow for changes and management of dependent classes. The best place to get an overview of how this works is here. You can also find an example of an AS3 only version. Because Prana uses a Spring complient XML structure, it's being made into a Spring Extension and being renamed "Spring Actionscript". Adding it to a family of other IoC frameworks on other platforms.

10. PopForge
Pop Forge has already gained a great deal of notoriety this year with Andre and Joa's exploit of the ByteArray hack. With the ability to write Byte level code directly to the Sound object in Flash 10, expect to see this library trimed down even further with more effects and added forms of sound manipulation. I'm looking forward to seeing signs of formant filtering as well as additive and spectral synthesis. How about routing L.F.O. control to other things like the Graphics class? Or better yet, routing graphical output to the envelope of a sound? Maybe some cross pollination of PixelBender with PopForge? Which of course brings me to my next item in the list…

11. Pixel Bender
Pixel Bender is Adobe's new kernal language used to manipulate pixels in new and creative ways. Pixel Bender runs on multiple Adobe products which opens up the ability to write uber-cool filters for static and motion graphics. Pixel Bender focuses heavily on the GPU to perform its tasks, making it much more efficient and capable of complex operations. Photoshop, Flash, and After Effects will all benefit from the experimental work being done with this tool and a number of innovative examples have already surfaced. Escher's Droste Effect is one such effect that "spiralizes" a circular pattern and even works with a video source. Another is the ability to do Ray Tracing and shading. I expect to see more of this trickle into Papervision and Bitmap processing libraries in the not so distant future.

Utilities and Helpful Approaches:

1. SWFObject 2.0
The standard for embedding anything with a swf at the end of the file path. 2.2 development has been started with plans to address OnHold/ FixedIn2.2AlphaX. Expect a number of Flash 10 enhancements to come shortly for things such as express installer, wmode, etc.

2. Unity Object
Awesome and useful example of how to communicate between a Unity3D app and Flash.

3. QueueLoader 3.1
My last shameless plug. I chose to add this because of the significant re-write of the utility and ease in which people can add their own extras. With the new structure in place, be on the lookout for more loadable items and useful preloading processes similar to the drawFrames (lets you draw the frames of an external SWF to an array of bitmaps) feature.

4. TextArea Paging
A great trick for detecting the overflow of a TextArea for spilling into another TextArea. Perfect for creating "news" style layouts and working around images.

5. FileReference Verification of File Type
Cool utility for detecting file types of uploaded assets using the FileReference class.

6. Libary Code Version Checking
Cool technique for checking the version of your code when initializing. Helps to keep track of what version of a library you are using in a project to avoid conflicts.

7. Object Pooling Class
Object Pooling is a technique for centralizing the management of instantiated objects. Having an object instantiated and ready for use can reduce bottlenecks and offers the ability to limit unique creation. This is perfect for particle engines as it's used above. If you've seen one of Seb Lee-Delisle's particle talks at a conference, then you've seen this in action with how he's recycling the particles.

8. SelectiveBitmapDraw
One other thing that gets Moses Gunesch really excited besides the mechanics of motion, is finding easy ways of compositing or capturing elements of a display hierarchy and manipulating them in fun ways. His SelectiveBitmapDraw Class lets you take a group of nested DisplayObjects and flag them for compositing into another Bitmap object. What makes this even cooler is that you can omit different items in the hierarchy. On top of that, you can use this with Papervision and apply it to DisplayObject3D items in your scene!

9. FLARToolKit
This is one of those things you need to see with a video. The FLARToolKit is used for creating "Augmented Reality" experiences. The way it works is by locking onto visual targets as reference points for creating motion and mapping points. Also check out the post of Mikkoh Haapoja's. A great video example can be found at today and tomorrow.

10. HiReS! SWF Stats
Mr. Doob has a well done dashboard for continuously outputting a running swf's performance. We've all used the frames-per-second bar, memory output meter, ms time in troubleshooting our applications. What his utility also gives you, is a visual graph of the data in real-time in a nice complete package.

11. Orchid
If you've heard of Saffron (Samuel Agesilas' Actionscript based UML utility for creating stub code in a graphical user interface), then you've heard of Orchid. Orchid is an open source UI framework that works using the concept of Signals and Slots. Saffron has long been shrouded in mystery and this is most likely the case due to the fact it was picked up by a well known software development company. Rumors that it was purchased by Microsoft popped up, then there have been ramblings of Adobe buying the code. Regardless of what the case is, having seen the interface work that Sam has done on Saffron, it's easy to get a sense of the capabilities and flexibility of the Orchid architecture.

In addition to the items above, there are a number of other interesting things worth mentioning. Animoto is a cool application that takes user submitted media, and creates a music video based on your settings and creative genius. Aviary is a group of software tools that let you edit images, generate color palettes, and visual effects. X-Ray is a fairly well known and already established debugging utility that makes tracking trace statements, errors, and resources much easier. John Grden was able to make some changes for the Flex crowd recently and I'm looking forward to seeing how this progresses even further.

So that's the list! Because there is so much exciting stuff coming in the new year, I'm considering adding a user submitted list. What do you think? Contact me and let's get another list going!

29

HydroTween + HydroSequence rev37


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:

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

2

Flashbelt 2008 + Animation to Go + HydroTween + Papervision3D


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!

Here is the link to the presentation along with the examples. – Click into the SWF, then use the forward and back arrows to navigate.

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.

Here is the link to the previous post with more information about using HydroTween.

If you'd like to go directly to the examples:
Generic HydroTween
Fuse Style Tweening
Papervision3D – Clicking on an image will bring it up.

Looking forward to seeing everyone there!

And of course, the source! I have included everything in the examples, including the presentation!


Flashbelt2008 HydroTween Source and Examples

38

Go 0.4.8jg1 + HydroTween rev30 + Guide + Source Code


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.

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

13

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

2

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

6

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

Previous Page