hydrotik | flash development | actionscript | creative » AS3

HydroTween is now OpenTween and on Github!

djdonovan — Tue, 01 Dec 2009 19:23:56 +0000

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

QueueLoader is now on Github!

djdonovan — Wed, 25 Nov 2009 17:07:42 +0000

Github is the social networking version of a version control system. The learning curve with Git can be a little tricky at first, but after installing and learning the basic commands you will be up and running. The beauty of Git lies in the way it collects and organizes changes and data. Merging from multiples sources is reliable and makes for more contributions. This will hopefully encourage more people to get involved with Open Source projects including QueueLoader! I will still be providing a standalone link either here on the site or on the deprecated Google Page, but for wiki usage and change info definitely go to Github.

QueueLoader on Github

QueueLoader 3.1.8

djdonovan — Tue, 24 Nov 2009 02:34:03 +0000

Having some problems with the vcs on Google, but the featured link is current. I'm in the process of moving QueueLoader over to github to ultimately make life easier. 3.1.8 addressed an issue with throwing an error when running the queue with no items in it as well as the QUEUE_COMPLETE event firing if you run a queue with all items generating errors and the queue's ignoreErrors argument set to true.

Download QueueLoader rev 3.1.8 Source Only

Fluorescent Ballast and Neon Flicker + Across The Hall Movie

djdonovan — Tue, 24 Nov 2009 01:03:35 +0000

Just completed a rush project for the film Across The Hall. Being that this is a noir styled film, I came up with a simple class that emulates the effect of sign letters turning on. Could work for Fluorescent lights as well as other stuff. Easiest way to use it is to link the MovieClip in your library you intend to export and point the base class path to FluorescentBallastFlicker.

Then in your code, instantiate and attach the MovieClip to your DisplayObject and the MovieClip will automatically set its alpha to 0 and will be ready to turn on.

The turnOn() method takes the arguments; seconds of turn on time, seconds of delay, and an optional callback function when the effect has finished.

_hSign.turnOn(1, 0);
_oSign.turnOn(2, .5);
_tSign.turnOn(2, 1);
_eSign.turnOn(2, 1.5);
_lSign.turnOn(2, 2);
_riverview.turnOn(2, 2.5, startSite);

Once the item is on, you can use the badBallast() method to emulate a loose connection. The lower the number the more frequent the flickering.

_hSign.badBallast(100);

Download Fluorescent Ballast and Neon Flicker Class Source Code!

QueueLoader 3.1.7

djdonovan — Wed, 07 Oct 2009 03:30:14 +0000

Announcing a long overdue update of QueueLoader last week. Fixes include finally addressing the error handling of a missing item that is first loaded. Also some optimization of the utility with interfaces.
Click here to download

The google group has been growing and hopefully it has been helpful. I set up an approval process for membership to reduce the amount of spam. I typically approve members within 12 hours.
Click here to join

Any additional suggestions or issues are welcome. Also feel free to click on our sponsors!

YouWillKnowTheTruth.Com – The Final Cylon

djdonovan — Sun, 30 Nov 2008 16:57:57 +0000

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!

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

djdonovan — Mon, 24 Nov 2008 00:44:21 +0000

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!

QueueLoader Version 3.1 – Major Update + Usage

djdonovan — Thu, 30 Oct 2008 01:14:35 +0000

UPDATE: 3.1.3: Fixed width and height prop in Image and SWF items. Added autoPlay to FLV. event.content returns the NetStream object and using event.content.seek(0) and event.content.togglePlay() will start the stream if the item is NOT set to autoPlay (false is the default). UPDATE: 3.1.2: Changed path prop to URLRequest. UPDATE: 3.1.1: Fixed an error thrown in Flex [...]

If a tree falls in the woods…

djdonovan — Mon, 25 Aug 2008 20:22:35 +0000

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!

Until then, I've decided to file a bug/feature request with Adobe.

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.

HydroTween + HydroSequence rev37

djdonovan — Sun, 20 Jul 2008 03:30:20 +0000

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