Category: Source Code

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

2

QueueLoader is now on Github!


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

2

QueueLoader 3.1.8


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

01

Fluorescent Ballast and Neon Flicker + Across The Hall Movie


Across The Hall Movie
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!

0

QueueLoader 3.1.7


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!

53

QueueLoader Version 3.1 – Major Update + Usage


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 4 SDK in FLVItem.as – Also Added version numbers to all Files. Update is on the SVN.

I'm excited to announce that QueueLoader has undergone a major revision. I finally had a chance to rewrite the class and make it more "Open Source" friendly and scalable. All loadable items have been broken out into separate classes implementing an ILoadable interface as well as extending an abstract loadable item. This will also make it easier for adding special features to loadable items, as well as promote the evolution of the package. The package path has been changed, but most of the API and general ease of use has remained the same. The most significant change is how to access loading items via the event callbacks. They have been broken out to container, targ, and content. They are explained further below in the "Useful Tips" section. I'm going to do my best to include as many frequently requested examples, but first let's go over the current features of this revision:

QueueLoader Logo

Source Downloads:
QueueLoader 3.1.3 Example Files + Assets + Source + Documentation :: 28.44 MB
QueueLoader 3.1.3 Source + Documentation :: 1.16 MB

Note: Both of the downloads above include the dependent libraries Popforge (.wav) and Nochump (.zip). I am not including these libraries on the SVN. Be sure to check for updates above to changes in the core QueueLoader source. If you wish to run QueueLoader without the additional libraries; In ItemList.as comment out line 45 and 46 where the zip and wav classes are being added to the loadable item list. Also comment out lines 82 and 84 in QueueLoader where the zip and wav filetype constant id numbers are defined. Finally be sure to remove ZIPItem.as and PCMSoundItem.as from the "items" package. If you wish to add your own custom item, you would simply follow the instructions in reverse but adding a unique number to the file type constant id.

Also Note: Just to clear up an possible confusion, this is a version change and not another revision. The URL to this page might be confusing as it looks like rev31 when it's 3.1.

Mailing List:
QueueLoader Google Group

General Features:

Supported File Types:

QLManager – Global QueueLoader Management:

Useful Tips and Other Info:

  • If you are loading a ton of images, you might consider putting them all on separate frames of a SWF and using the draw frames feature. If the image collection gets updated, putting them in a Zipped folder might be easier. This will alleviate the opening and closing of HTTP connections.
  • event.container – access to the container you specify in the addItem() method.
  • event.targ – access to the Loader of an Item in the case of an Image or SWF. This is what is added to the container DisplayObject if it has been added to the addItem() arguments.
  • event.content – access to the loaded item's data or content. In the case of an Image, it would be the Bitmap. In the case of a SWF, it would be the SWF's timeline. In the case of CSS, it would be the StyleSheet. In the case of audio, it would be the Sound. Etc…
  • Keep in mind QueueLoader is a utility, and not a component. Many of the more complex usage scenarios can very easily be built on top of QueueLoader. Using QueueLoader does require some basic knowledge of Actionscript 3.0, listeners, events, as well as scope. It's also much easier to extend the functionality if you are looking to modify the features of an existing loadable item. Simply replace a file type constant and add the Item to the ItemList with a regex for the filetype. Just make sure the file suffix doesn't conflict with another suffix.
  • QueueLoaderLite has been included in the package and will undergo a rewrite soon as well making the distinction between the two clearer.

View the Class Documentation Files


Examples


Overall Monitoring/Basic Example

// Most Basic Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
var img:Sprite = new Sprite();
img.name = "image_1";
img.x = 20;
img.y = 20;
img.scaleX = img.scaleY = .075;
addChild(img);
 
_oLoader.addItem("../flashassets/images/slideshow/1.jpg", img);
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Multiple Items and Event Monitoring Example

// Multiple Items and Event Monitoring Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var imageContainer:Sprite = new Sprite();
addChild(imageContainer);
imageContainer.x = imageContainer.y = 25;
 
var _oLoader:QueueLoader = new QueueLoader();
 
var startX:int = 0;
var startY:int = 0;
 
for (var i:int = 0; i < 3; i++) {
	var img:Sprite = new Sprite();
	img.name = "image_"+i;
	img.x = startX;
	img.y = startY;
	img.scaleX = img.scaleY = .075;
	imageContainer.addChild(img);
	_oLoader.addItem("../flashassets/images/slideshow/"+(i+1).toString()+".jpg", img, {title:"Image "+i});
	if (startX > 250) {
		startX = startX + 50;
		startY = startY + 100;
	} else {
		startX = startX + 150;
	}
}
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_START, onQueueStart, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_START, onItemStart, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_PROGRESS, onItemProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_ERROR, onItemError,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
//Listener functions
function onQueueStart(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}
 
function onItemStart(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
}
 
function onItemProgress(event:QueueLoaderEvent):void {
	trace("\t\t\t>>onItemProgress: "+event.queuepercentage);
}
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
}
 
function onItemError(event:QueueLoaderEvent):void {
	trace("\n>>"+event.message+"\n");
}
 
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Bitmap Smoothing and Cache Killing Example

// Bitmap Smoothing and Cache Killing Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
var img:Sprite = new Sprite();
img.name = "image_1";
img.x = 20;
img.y = 20;
img.scaleX = img.scaleY = 1.25;
addChild(img);
 
_oLoader.addItem("../flashassets/images/slideshow/1.jpg", img, {title:"Image 1", cacheKiller:true, smoothing:true});
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Calling a SWF's Library Class References – Application Domain Example

// Calling a SWF's Library Class References - Application Domain Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
 
var addedDefinitions:LoaderContext = new LoaderContext();
addedDefinitions.applicationDomain = ApplicationDomain.currentDomain;
 
var _oLoader:QueueLoader = new QueueLoader(false, addedDefinitions, true, "testQueue");
 
_oLoader.addItem("../flashassets/swf/externalsounds.swf", this, {title:"SWF"});
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_START, onQueueStart, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
//Listener functions
function onQueueStart(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	var loop:Sound = new (getDefinitionByName("Loop1"))();
	var soundChannel:SoundChannel = loop.play(0,999);
}

Back To Top


Queue Disposing

// Queue Disposing
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
var img:Sprite = new Sprite();
img.name = "image_1";
img.x = 20;
img.y = 20;
img.scaleX = img.scaleY = .1;
addChild(img);
 
_oLoader.addItem("../flashassets/images/slideshow/1.jpg", img, {title:"Image 1"});
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	setTimeout(callDipose, 3000);
}
 
function callDipose():void{
	_oLoader.dispose();
}

Back To Top


Manually Setting File Type/URL Variable Example

This will let you pass URL variables to a file that is to be loaded. Keep in mind that the example data.php file has no php code in it so that it will run locally. However on a php server you would have the code shown below in the data.php file. This will pass the url variable $user a value of yourname, which you should see as yourname.jpg in the XML output.

PHP:


css="test.css"
>






'; ?>

Back To Top

Actionscript:

// Manually Setting File Type/URL Variable Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
var img:Sprite = new Sprite();
img.name = "image_1";
img.x = 20;
img.y = 20;
img.scaleX = img.scaleY = .1;
addChild(img);
 
_oLoader.addItem("../includes/admin/data.php?id=1&user=yourname", null,
		{title:"XML PHP", mimeType:QueueLoader.FILE_XML}
);
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "XML PHP") {
		var output:String = XML(event.targ).child("images").child("img")[0].@src;
		trace("\n\t\tXML Node: "+output+"\n\n");
	}
}
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Drawing a SWF's Frames to BitmapData Array Example

// Drawing a SWF's Frames to BitmapData Array Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/swf/externalimages.swf", null, {title:"SWF Images", drawFrames:true});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "SWF Images") {
		var startX:int = 0; var startY:int = 65;
 
		for (var i:int = 0; i<event.bmArray.length; i++) {
			var bm:Bitmap = new Bitmap(event.bmArray[i], "auto", true);
			bm.x = startX;
			bm.y = startY;
			bm.scaleX = bm.scaleY = .75;
			addChild(bm);
			startX = startX + 85;
		}
	}
}
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Ignoring of Errors/Error Handling Example

// Ignoring of Errors/Error Handling Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader(true); //<- true arg sets ignore errors
 
var img:Sprite = new Sprite();
img.x = 20;
img.y = 20;
img.scaleX = img.scaleY = .075;
addChild(img);
 
var img2:Sprite = new Sprite();
img2.x = 120;
img2.y = 20;
img2.scaleX = img2.scaleY = .075;
addChild(img2);
 
var img3:Sprite = new Sprite();
img3.x = 220;
img3.y = 20;
img3.scaleX = img3.scaleY = .075;
addChild(img3);
 
_oLoader.addItem("../flashassets/images/slideshow/1.jpg", img);
_oLoader.addItem("../flashassets/images/slideshow/12.jpg", img2);
_oLoader.addItem("../flashassets/images/slideshow/3.jpg", img3);
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_ERROR, onItemError,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemError(event:QueueLoaderEvent):void {
	trace("\n>>"+event.message+"\n");
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Stop and Resume Example

// Stop and Resume Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader(true); //<- true arg sets ignore errors
 
var img:Sprite = new Sprite();
img.x = 20;
img.y = 20;
img.scaleX = img.scaleY = .075;
addChild(img);
 
var img2:Sprite = new Sprite();
img2.x = 170;
img2.y = 20;
img2.scaleX = img2.scaleY = .075;
addChild(img2);
 
_oLoader.addItem("../flashassets/images/slideshow/1.jpg", img, {title:"Image 1"});
_oLoader.addItem("../flashassets/images/slideshow/2.jpg", img2, {title:"Image 2"});
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "Image 1") {
		_oLoader.stop();
		// Set a 4 second to pause and resume the load
		setTimeout(resumeLoad, 4000);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}
 
function resumeLoad():void{
	_oLoader.resume();
}

Back To Top


Bandwidth Detection Example

// Bandwidth Detection Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var imageContainer:Sprite = new Sprite();
addChild(imageContainer);
imageContainer.x = imageContainer.y = 25;
 
var addedDefinitions:LoaderContext = new LoaderContext();
addedDefinitions.applicationDomain = ApplicationDomain.currentDomain;
var _oLoader:QueueLoader = new QueueLoader(false, addedDefinitions, true);
 
var startX:int = 0;
var startY:int = 0;
 
for (var i:int = 0; i < 3; i++) {
	var img:Sprite = new Sprite();
	img.name = "image_"+i;
	img.x = startX;
	img.y = startY;
	img.scaleX = img.scaleY = .075;
	imageContainer.addChild(img);
	_oLoader.addItem("../flashassets/images/slideshow/"+(i+1).toString()+".jpg", img, {title:"Image "+i});
	if (startX > 250) {
		startX = startX + 50;
		startY = startY + 100;
	} else {
		startX = startX + 150;
	}
}
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.bandwidth+"KB/s");
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


CSS Example

// CSS Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../includes/admin/test.css", null, {title:"CSS"});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.fileType == QueueLoader.FILE_CSS) {
		trace("\t\tCSS: "+event.content.styleNames);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top

XML Loading/Get Item By Title Example

// XML Loading/Get Item By Title Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../includes/admin/test.xml", null, {title:"XML"});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.fileType == QueueLoader.FILE_XML) {
		trace("\t\tXML: "+event.content);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace("\n\nXML Node:\n"+XMLList(_oLoader.getItemByTitle("XML").content).queueloader.item[0]);
}

Back To Top

Sorting Example

// Sorting Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/mp3/GetDown.mp3", null, {title:"MP3"});
_oLoader.addItem("../flashassets/swf/externalsounds.swf", this, {title:"SWF"});
_oLoader.addItem("../includes/admin/test.xml", null, {title:"XML"});
_oLoader.addItem("../includes/admin/data.php?id=1&user=yourname", null,
     {title:"XML PHP", mimeType:QueueLoader.FILE_XML}
);
_oLoader.addItem("../flashassets/swf/externalimages.swf", null, {title:"SWF Images", drawFrames:true});
_oLoader.addItem("../includes/admin/test.css", null, {title:"CSS"});
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_START, onQueueStart, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueStart(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace(_oLoader.getQueuedItems());
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "MP3") {
                // This takes an array of two items (second arg)
                // from 4th position (1st arg) and inserts them
                // into the 2nd position (3rd arg)
		_oLoader.shuffle(4, 2, 2);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace(_oLoader.getLoadedItems());
}

Back To Top

Adding Items On-The-Fly Example

// Adding Items On-The-Fly Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/mp3/GetDown.mp3", null, {title:"MP3"});
_oLoader.addItem("../flashassets/swf/externalsounds.swf", this, {title:"SWF"});
 
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_START, onQueueStart, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueStart(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace(_oLoader.getQueuedItems());
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "SWF") {
		_oLoader.addItem("../includes/admin/test.xml", null, {title:"XML"});
		_oLoader.addItem("../flashassets/swf/externalimages.swf", null, {title:"SWF Images"});
		_oLoader.addItem("../includes/admin/test.css", null, {title:"CSS"});
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace(_oLoader.getLoadedItems());
}

Back To Top

QLManager Example

// QLManager Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
import com.hydrotik.queueloader.QLManager;
 
var _oLoader:QueueLoader = new QueueLoader(false, null, true, "loader1");
 
_oLoader.addItem("../flashassets/mp3/GetDown.mp3", null, {title:"MP3"});
_oLoader.addItem("../flashassets/swf/externalsounds.swf", this, {title:"SWF"});
 
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
 
 
var _oLoader2:QueueLoader = new QueueLoader(false, null, true, "loader2");
 
_oLoader2.addItem("../includes/admin/test.xml", null, {title:"XML"});
_oLoader2.addItem("../flashassets/swf/externalimages.swf", null, {title:"SWF Images"});
_oLoader2.addItem("../includes/admin/test.css", null, {title:"CSS"});
 
_oLoader2.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueue2Complete,false, 0, true);
 
_oLoader2.execute();
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace(_oLoader.getLoadedItems());
}
 
function onQueue2Complete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
	trace(_oLoader2.getLoadedItems());
	setTimeout(callDipose, 3000);
}
 
function callDipose():void{
	trace("QLManager Accessing Items:");
	trace("\t"+QLManager.getQueue("loader1").getItemAt(0).title);
	trace("\t"+QLManager.getQueue("loader2").getItemAt(0).title);
	QLManager.disposeAll();
	trace("QLManager Disposing:");
	trace("\t"+QLManager.getQueue("loader1"));
	trace("\t"+QLManager.getQueue("loader2"));
}

Back To Top

Zip Loading Example
Make sure you have the nochump package in your source folder.

// Zip Loading Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/zip/assets.zip", null);
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.fileType == QueueLoader.FILE_ZIP) {
		trace("\t\tZIP Array: "+event.content);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top

PCM Wav Loading Example
Make sure the Popforge library is included in your source along with the modified SoundFactory class that bypasses the swf.bin file. This modified class writes the bytes to a ByteArray instead.

//PCM Wav Loading Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var soundChannel:SoundChannel = new SoundChannel();
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/pcm/loop1.wav", null, {title:"Loop1"});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.fileType == QueueLoader.FILE_WAV) {
		soundChannel = event.content.play(0,999);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top

MP3 Loading Example
Audio Sample
Audio taken from Islands of Chill. This album is great!

//MP3 Loading Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var soundChannel:SoundChannel = new SoundChannel();
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/mp3/GetDown.mp3", null, {title:"MP3"});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.fileType == QueueLoader.FILE_MP3) {
		soundChannel = event.content.play(0);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top

Direct QL Formatted XML Loading Example
This snippet of XML can reside anywhere in your XML document. It allows for automatic passing of QueueLoader data. The prefix attribute simply adds the prefix when the movie is in external/standalone mode when publishing locally. If your paths jump directories or require absolute paths, then you can leave it as prefix="".

XML:



















Back To Top

The loadXML() method also accepts a scope variable which relates to the container attribute. I.E. scope[container]. If it's null, then the container has no parent reference and is the same as adding null to an addItem() method.

Actionscript:

//Direct QL Formatted XML Loading Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../includes/admin/test.xml", null, {title:"XML"});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "XML") {
		_oLoader.loadXML(event.content);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top

SWF Timeline Example

//SWF Timeline Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../flashassets/swf/timeline.swf", this);
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	queueprog.width = 150 * event.queuepercentage;
	queue_txt.text = "QUEUE: "+Math.round((event.queuepercentage*100)).toString() + "% COMPLETE";
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.fileType == QueueLoader.FILE_SWF) {
		event.content.fireFunction();
		event.content.gotoAndPlay(2);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top

Generic Data Loading Example

//Generic Data Loading Example
 
import com.hydrotik.queueloader.QueueLoader;
import com.hydrotik.queueloader.QueueLoaderEvent;
 
var _oLoader:QueueLoader = new QueueLoader();
 
_oLoader.addItem("../queueloader.html", null, {title:"HTML"});
 
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete,false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete,false, 0, true);
 
_oLoader.execute();
 
function onQueueProgress(event:QueueLoaderEvent):void {
	trace("\t>>onQueueProgress: "+event.queuepercentage);
}
 
function onItemComplete(event:QueueLoaderEvent):void {
	trace("\t>> "+event.type, "item title: "+event.title);
	if (event.title == "HTML") {
		trace(event.content);
	}
}
 
function onQueueComplete(event:QueueLoaderEvent):void {
	trace("** "+event.type);
}

Back To Top


Source Downloads:
QueueLoader 3.1.2 Example Files + Assets + Source + Documentation :: 28.44 MB
QueueLoader 3.1.2 Source + Documentation :: 1.16 MB

19

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

12

QueueLoader rev33


UPDATE Latest Update and Source!

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.

Thanks guys!


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

Previous Page

  • Viagra ordre
  • Cialis en ligne
  • Levitra en ligne
  • Propecia acheter
  • Viagra acheter
  • Acheter cialis
  • Ordre levitra
  • Ordre propecia
  • En ligne viagra
  • Vente cialis
  • Levitra bon marche
  • Propecia en ligne
  • Viagra online
  • Buy cialis
  • Order Levitra
  • Buy propecia
  • Buy viagra
  • Cheap cialis
  • Cheap Levitra
  • propecia online
  • Viagra prescription
  • Cialis online
  • Buy Levitra
  • Order propecia