Archive for the ‘AS3’ Category

A review of popular tweening library (UPDATED)

Tuesday, April 15th, 2008

The goal of next version of my (your) animation engine KitchenSync, is to be arguably the best and most complete library for animation and sequencing out there. To do this, I’ve spent the last couple of months analyzing the top existing tween libraries trying to pinpoint their strengths and weaknesses. With lots of help from the Draw Logic Blog, I think I’ve identified the contenders and put together a decent list of what (in my opinion) are their highest and lowest points. The next step will be to create a product backlog for KitchenSync based on matching these features and fixing the problems. I know there are other tween engines but these seemed to be the most prolific ones at the time. The tween engines analyzed were:

  • Tweener
  • TweenLite (and flavours)
  • Boostworthy Animation System
  • FuseKit
  • Go
  • and KitchenSync 1.1

Note: After some helpful feedback from readers (THANK YOU!) I added TweenLite to the list of libraries I reviewed. I should add here that these are fairly superficial observations about how things work and don’t go into incredible detail. If I steal any features, I’ll look closer ;-D

Keep the comments coming!

Tween Engine Comparisons (updated)

Reader Question: Why isn’t event bubbling working

Tuesday, March 18th, 2008

A reader sent me this question. Thanks in advance to Michael:

i’m dispatching an event from a sprite after it fades in completely
dispatchEvent(new Event(Main.ENTER_SCREEN_COMPLETE));

i’m trying to listen for to this event but for some reason it doesn’t get picked up when the capturing parameter is set to false.. that is for bubbling and the target phase.

This works
container.addEventListener(Main.ENTER_SCREEN_COMPLETE, screenTweenComplete, true, 0, true);

This does NOT work
container.addEventListener(Main.ENTER_SCREEN_COMPLETE, screenTweenComplete, false, 0, true);

Where container, is an ancestor to everything on the screen. Essentially its the the stage.

Any clues why this is happening?

Answer after the jump.
(more…)

KitchenSync News: v1.1 released

Friday, February 22nd, 2008


Woo! KitchenSync v1.1 is out! It now supports timecode, default values, new easing functions and juping to a specific time in a tween. Go check it out!

Changes in 1.1:

  • ADDED jumpToTime() method to Tween (this may be moved to AbstractSynchronizedAction in a later release)
  • ADDED getTimestampFromFrames() and getTimestampFromMilliseconds() to TimestampUtil
  • ADDED Timecode to TimeStringParser. Now “:ss”, “mm:ss;ff”, and “dd:hh:mm:ss;ff” are supported.
  • ADDED ActionDefaults class for storing default initialization values.
  • ADDED easeOutIn() to most of the easing functions (buggy. seems to overshoot target in some cases)
  • ADDED version check in Synchronizer.initialize()
  • CHANGED type of Numbers within Timestamp to int.
  • REFACTORED all actions to contain super() in the constructor.
  • REMOVED errors that are thrown when pause() and start() are called at the wrong times.

KitchenSync News: Patch released v1.0.1, source files for Flash CS3, more docs

Friday, February 8th, 2008

kitchenSync

Hey KS Fans,

KitchenSync version 1.0.1 was released last week. This version is just a patch that fixes a few minor issues. Here’s the change log for this version.


===== v1.0.1 (2008.02.04) ======
Fixed Cubic.easeOut bug.
Made getters for Tween's toValue and fromValue.
Added source code to main download.
Added metadata for events.
Updated docs and added summaries to all wiki pages.

I received some feedback from people who were having trouble setting up KitchenSync for use with Flash CS3. I didn’t know this before but you cannot use .swc files compiled with the Flex SDK in a .fla file (WTF, Adobe!) Also, some people were confused by having to use SVN to get the source. To help solve these problems, I’ve added the latest source code as its own download.

I’ve also written EVEN MORE documentation including help for downloading and setting up the source code.

Finally, if you’re using KS, drop me a line or post to the mailing list. I’d love to hear any feedback you may have!

The State pattern in Flex - combining view states with logical states

Wednesday, January 23rd, 2008

If you’ve used Flex, you’ve no doubt (er, hopefully) been using View States (AKA <mx:State>) to change the look of your RIA as it progresses through different situations of use. While this is immeasurably useful, it does not necessarily qualify as an implementation of the State Design Pattern which allows you to change not only how a component looks but how it functions as well.
(for more on design patterns, read my favorite book Head first design patterns).
(more…)

Introducing KitchenSync - an open-source animation library for AS3

Tuesday, January 22nd, 2008


After about 6 months in development, I’m very proud to announce the release of KitchenSync, a multi-purpose tool written in ActionScript 3.0 for doing tween based animations and timing of functions and much more. The project is open-source under the GNU LGPL and hosted at Google Code. Please take a moment to check it out and feel free to write to me with questions, comments or suggestions for improvement!

KitchenSync is more than an animation library

KitchenSync is more than an animation library. Tweens are a major part of KitchenSync but that is not the end. It also allows you to sequence sounds, functions, and event dispatches among other actions. The framework is open-ended allowing you to come up with new ways to work with the virtual timeline.

KitchenSync was designed with developers in mind

KitchenSync was designed for developers who want a smart way to handle animation or other time-based functionality with code. Written from the ground up in ActionScript 3.0, KitchenSync relies on smart object-oriented architecture rather than complicated shorthand. It includes a number of features and shortcuts, such as the clone() method, that save effort for developers. KitchenSync makes extensive use of events and informative runtime errors and is quite flexible when it comes to extending the functionality.

KitchenSync aims to…

  • offer a well-architected, extensible framework for working with time-based animations and events.
  • take advantage of the power of ActionScript 3.0 while using OOP best practices and design patterns and without requiring the Flex framework.
  • respond to the needs of developers with a rich set of features.
  • be a full-featured library for animation and timeline based actions.

Links

No children on the stage - a confusing Flash CS3 display list issue

Tuesday, January 15th, 2008

A reader wrote to me with an interesting Flash CS3 problem that had me stumped at first (mostly because I use FlexBuilder instead of Flash). I thought I’d post the answer here so we can all benefit from it.

The Problem

Ben H. writes…

I’ve been trying to get familiar with a “best practice” on [looping through the display list]. The trouble is, when I enter the following on the first frame of a blank .fla file:

trace("Number of Children in a blank SWF:"+stage.numChildren);
trace("Child 1:" + stage.getChildAt(0));

I get this:

Number of Children in a blank SWF:1
Child 1:[object MainTimeline]

Now that may seem grand, but I’ve drawn several shapes and have a text field and named movieclip instances on stage as well – so why [does it only count one child?]

Solution after the jump.
(more…)

Pimp my ‘clipse - a list of must-have Eclipse plug-ins for Flex/Flash Development

Monday, December 17th, 2007

Eclipse Rims

FlexBuilder may have its ups and downs but it still remains my pick for best AS3/MXML editor on the market (with TextMate not far behind). Part of the beauty of FlexBuilder is that it’s built on the Eclipse SDK, one of the most versatile and powerful IDEs available, which is not only free and open source, but boasts a wealth of third party plug-ins for every kind of (mostly Java) development. This article will take a look at some must-have plug-ins for doing Flex development as well as some tips for tricking out your development process.

As with all of our entries, your feedback, suggestions, corrections and additions are all more than welcome.

(more…)

New Releases on Adobe Labs

Thursday, December 13th, 2007

Flex 3 public beta is out.

AIR public beta is out.

and while you’re at it…

Flash Lite 3

New Flash Player

and BlazeDS, whatever that is. (Hint: despite the name, this is not Flash CS3 for Gameboy)

Weak vs Strong References in AS3

Sunday, December 9th, 2007

For those of you not familiar with the concept, a weak-reference is a reference to an object that will not hold the linked object in memory when that object is garbage collected.

There are only two ways to create a weak reference in AS3. The first is with the IEventDispatcher.dispatchEvent() method which allows you to create a weak link between the dispatcher and the listener. To quote the AS3 Bible:

ActionScript 3.0 introduces the concept of weak and strong memory references. Normally, an object will be garbage collected if there are no references to the object. That is, when no objects are using a variable, it gets thrown out. Weak references allow you to reference an object but the object will still be eligible for garbage collection unless another object holds a strong reference to the object. By setting the [eventDispatch() method's] useWeakReference flag to true, you will create a weak link between the event broadcaster and the event listener. That way, if an event listener is deleted while still listening to the event broadcaster, the weak reference will allow it to be garbage collected. This helps to prevent memory leaks.

The other way is with the objects used as keys in a Dictionary object.

ActionScript, unlike many other languages, does not have a way to explicitly remove an object from memory. Instead it waits until all references to an object are removed and then auto-deletes it. Therefore, an object will continue to stay in memory if all strong references aren’t removed.

Below is an example of how strong-references hold an object in memory. If you’d like to try this out, copy the below text into a file called StrongReferencesExample.as

[ftf]
package {
import flash.display.Sprite;

public class StrongReferencesExample extends Sprite
{
public function StrongReferencesExample()
{
// create a new object called dog. Add it to the first leash object
// and make leash2 a copy of leash 1.
var leash1:Object = new Dog();
var leash2:Object = leash1;

// tracing both leashes will show that they hold a reference to the Dog
trace(leash1); // [object Dog]
trace(leash2); // [object Dog]

// deleting the dog from the first leash will not remove it from the second leash
// even though we originally set leash2 equal to leash1
leash1 = null;
trace(leash1); // null
trace(leash2); // [object Dog]

// The object (dog) will not be free until all of the references to it (leashes) are broken.
leash2 = null;
trace(leash1); // null
trace(leash2); // null
}
}
}
// Define a simple Dog class within the same file.
class Dog {}

[/ftf]

Richard Lord over at Big Room Games has an interesting article on hacking AS3 to allow you to create weak-references to objects. The hack is pretty decent but lacks a few things I’d like to see like strong typing at compile-time or a more refined ‘memory manager’ type functionality. However, I tried implementing both of these and came up empty handed. If you can think of a way to make this strong-typed, I’ll give you a candy bar.

Using the WeakReference hack could be useful if you want to make sure that an object will not stay in memory if you forget to delete all references to it. However, keeping track of your objects and practicing good memory management is a much better solution and hacks like this one should be saved for special cases where tracking use of an object becomes difficult or impractical.

Thanks to Alex for the link!