AS3 animation classes

I've been looking into animation classes in actionscript 3. Animation is one of those key parts of flash that and as soon as you make the choice on what package to go with the code gets ingrained into everything you make and isn't always easy to switch. There are many options but most of it is just syntax choices, some of them have extra features but basically much of the work was already done in AS2. Here is what I've come across so far.

Tweener, the new incarnation of MCtween

This is an example of doing a tween on various objects and calling function when it is done.

Tweener.addTween(, , {alpha:0, time:1, onComplete:disappear});
function disappear() : void {
    this._visible = false;
};

If you like to put everything on one line and writing your objects short hand this system is really great. I prefer this in most cases but keep in mind that AS3 runs faster if you define everything and it is bad oop if your objects are not reusable. Besides this I love it especially the papervision demos.

If you are into writing everything out, this next package seems to do pretty much all the same things.

Animation System

The syntax for writing things out makes a lot more since in terms of code structure because everything is defined but because of this you are also limited and have to define your objects first in this way. In terms of code this is a lot cleaner but with the work that I do, the less lines of code that I have to write the happier I am. One of the coolest things in this package is the way that you can simulate a timeline. Both of these things are in beta, tweener is available now and the Animation System should be available soon.

But this is not it there are many more, the Animation Package is being ported over from actionscript 2. I haven't seen any changes from the old set up but basically it's strength is in the more complex prepackaged effects, things like delay. The other big part of this package is shape morphing with something they call the supper shape. All this is wicked cool for certain things but the internals of how it gets these things to work is a little scary to me. Personally I want a tween class to just take an object and move it to the new location. The animation package does a lot of manipulations to the objects themselves and some times makes it hard to figure out what is going on. Maybe this was just me, like I say, this is a really powerful system with lots of features.

Then there is the much hyped,

The Flash IDE "copy to actionscript" xml Animator stuff

The thing to keep in mind about all this is that it was made for people that have to use the flash timeline. When they then need to turn that timeline into code you use this stuff. If you can write code there are way better ways to do all this and it is only better if you can't get away from the time line. It is limited to what you can do on a timeline and the xml is verbose and not for reediting. Here is a sample of one object moving from one position to another.

import fl.motion.Animator;
var target_mc_xml:XML = 
    
        
            
                
            
            
                
            
        
    

    
        
            
        
    

    
;

var target_mc_animator:Animator = new Animator(target_mc_xml, target_mc);
target_mc_animator.play();

Adobe has also made the mx.effects.Tween package. It is the same thing as the old set up except but with a few add ons like arrays of properties and values.

var myTween:Tween = new Tween(_circle, [_circle.x, _circle.y], [275, 200], 1000, 31);

And externally putting the event handlers and easing functions.

myTween.easingFunction = Elastic.easeOut;
myTween.setTweenHandlers(updateTween, endTween);

So this is what we have, I dont know if any of it is blowing me away. Maybe it is that I'm just missing Fuse. Moses (the guy behind Fuse) has been back and forth about what is going to happen to Fuse but last time he came to FlashCodersNY he said he had been working on a few things and will most likely commit to completing a AS3 version (but no pressure).

So from here I think I'll have to go with Tweener. I like the way you can extended it to use any property and the way that it handles curves. But I'm having a hard time embracing these different system and will most likely change a few times in hopes for something that gives a little more.

Tweening in papervision

I have been messing with Papervision ( it is awesome ) but to my disappointment, there is no tween engine(which is understandable). Papervision is all about getting your 3d models into flash and creating your 3d world. This is huge and they need lots of praise but now that you have all these 3d things in here we need to do something with them. Most people are just doing enterframes with math equations to have things move around. This is perfect for games and things that always need to be moving but I'm more inclined to impress and then pause everything to let it soak in. To do this we need a tween class. In AS2 by far my favorite is Fuse but the AS3 version is not ready yet, so people have been using Tweener with Papervision. I have to say it has some really nice features and is written quite well. The coolest thing is bezier tweens (basicly curve to a new position). This is huge in a 3d word, giving you the ability to do things like fly throughs.

camera.x = -1200;
camera.y = 1500;
camera.z = -1650;

// Target moves on the path first
camera.target.x = -1200;
camera.target.y = 1500;
camera.target.z = -1650;
Tweener.addTween(camera.target, {x:200, y:350, z:325,
_bezier:[{x:1725, y:75, z:950}, {x:-161, y:305, z:674}],
time:10, transition:"linear"});

// Animate camera position
Tweener.addTween(camera, {x:200, y:350, z:325,
_bezier:[{x:1725, y:75, z:950}, {x:-161, y:305, z:674}],
time:10, delay:0.5, transition:"linear"});

Pretty cool. I'm trying to put some demos together to show at the flash meeting but I'll post something when I have it. Also to note I like how Tweener deals with events and special properties, it is very flexible.

Undocumented ActionScript 3

One of the things that I hung my hat on for a while in ActionScript 2 was this class for drawing boxes with corners of any radius. In ActionScript 3, they happen to have such a function built in but they don't like to talk about it. Apparently, it is used by some component in Flex but is not in any of their documentation. Doing searches might bring up some old beta syntax but this is the final:

displayObject.graphics.drawRoundRectComplex( x, y, width, height, tl-corner, tr-corner, br-corner, bl-corner );

Works great, and all in one line! I can't even begin to tell you how complicated my AS2 one was. Here is a full example:

var element:Sprite = new Sprite();
element.graphics.beginFill( 0xFF3300, 100 );
element.graphics.drawRoundRectComplex( 10, 10, 100, 100, 5, 10, 5, 0 );
element.graphics.endFill();
addChild(element);

I love DENG

In 2002, Claus Wahlers started a project called DENG to attempt to render standards-based HTML inside of Flash. At this time, ActionScript 1 was still in full swing and, until recently, has stayed that way. I talked to him a few weeks ago, and he is working on a new version in ActionScript 3. Of course, he talks about the speed increases as being incredible, but I hope this isn't going to take 5 more years. In AS1, he has support for almost full CSS3 (which none of the browsers yet do), XHTML, SVG, XForms, XFrames, and a little SMIL. This is out of this world and I wish him all the luck fixing this stuff up; I wish I had more time to help him out.

SMIL, for the people who don't know, is a W3C standard markup language created and used by the video player companies who put out things like QuickTime and Real Player. It is much like Fuse, except in markup form, and has way more features. Basically, it is a language to create animations in a linear fashion, interactively --and it's wicked powerful. I would love to one day have something like this in Flash.

Why are more people not talking about

While I was at GoRuCo (see post below) I was talking to some people at Google, and Flash came up. I was talking to them about where I think things are going and brought up Tamarin, the new Adobe/Mozilla version of Spider Monkey, a 4th generation edition of ECMAScript, which is basically just open source ActionScript. This is a dream come true for so many people, and will open up the doors for many things to happen but no one is talking about it! -- for instance these people at Google hadn't even known about it. It is supposed to be ready next year, which sure is a long time, but, realistically, Microsoft will be pumping us lies for at least that long before any of that new Silverlight s**t comes out. Not to mention all the things that Firefox is also working on: hardware rendering, off-line browsing, etc. The internet will change drastically and you can forget about rounded corners being the most complicated thing you've made on your website.

GORUCO Gotham Ruby Conference

A week or so ago I was the Gotham Ruby Conference. It was lots of fun and I learned many things but I feel like the Ruby community is missing the point a little bit. Most of the presenters were way too aimlessly esoteric. The highlights were JRuby which isn't really ready and some VoIP stuff. But I think the best part of the gig was Google.

Google hooked them up with everything and more. My favorite part was the cereal vending machines. All food is free at Google but that isn't even the point --evidently, they have a whole system of making sure everyone has what they could ever want, before they could even dream of having it! If I didn't have things together over here I would love to work there...

AJAX is dumb

The deal with AJAX is, that JavaScript is so far behind that you need huge libraries to do anything good. One of the things they always make are auto-updating search boxes where they search the database as you type. Here is the same thing in Flash, but without the 180K of Prototype and Scriptaculous. I know you can compress it down but this will compile down to about 4k but maybe a little bigger depending on what kind of button you have. I do make HTML sites, but some of these examples are just crazy.

var samples:Array = ["suggestion1", "suggestion2", "suggestion3"];

var myString:String = samples[random(samples.length)];

var inField:Boolean = false;

var loader:LoadVars = new LoadVars();

var txt:TextField; // the search box
var suggestedTxt:TextField;
txt.text = myString;
txt.onSetFocus  = function(){
if( this.text == myString ){
this.text = "";  inField = true;
}
}
txt.onKillFocus = function(){ if(this.text == ""){
myString = samples[random(samples.length)];
inField = false; this.text = myString; }
}

var btn:MovieClip;
btn.onRollOver = function(){ this.gotoAndStop(2); }
btn.onRollOut  = function(){ this.gotoAndStop(1); }
btn.onRelease  = function(){
getURL( "/search.php?query="+txt.text );
}

var keyListener = new Object();
keyListener.onKeyDown = function(){
if( Key.getCode() == Key.ENTER && txt.text != myString && txt.text != "" ){
getURL("/contact/search/?query="+txt.text);
}else if( inField ){
loader.onLoad = function(){
 // this is the response from the server
 _root.suggestedTxt.text = this;
}
loader.load( "/search.php?query=" + txt.text );
}
};
Key.addListener(keyListener);