Flash Coders NY MVC

I've been doing ActionScript sessions at the flash coders meetings and have come up with a simple MVC framework that is much easier to understand and explain then the standard things that you see out there. If you are looking for something to start with it isn't bad.
Download the files here!

Runtime expression evaluation in ActionScript

The Tamarin port that I mentioned before is big and heavy and classes upon classes porting everything that they could from the Java source that really creates the swf byte code. The other way to go about making eval() is to break the problem down to what really needs to happen and not cloud your code with Java garbage. Amazing what you can do with ActionScript. This is a really amazing piece of code, really well written in my opinion, Check it out here.

I hope more is added to the library and a few things are changed a little but I'm really excited how small it is. I will try and add it into Wrapper when I get a chance.

New ActionScript Stuff

ActionScript is the coolest but to prove the point here is a few things that I've come across my travels lately.

New Photoshop Elements made in Flex
Adobe is starting to take clue web 2.0 area of getting away from the desktop and doing a pretty good job of understanding the market. Other efforts like Adobe Connect isn't really mind blowing if you ask me but this is a pretty nice application that I can see a lot of people using. It is a little to simple for me but I also am not really the target audience so I still think it is pretty great. It is nice that Adobe is using there own products to create but it also scares me a little. I don't want them taking the thunder away from other businesses that are creating comparable products with there technology already. There are a few of products that already have this type of functionality but it is Adobe's niche also so I understand but hope that it doesn't continue to much. Buzzword was questionable but they are adding some nice text features that I imagine were inspired by this purchase.

An ActionScript Compiler written in ActionScript
This is an amazing project that I think was missed buy the ActionScript community at large. The ability to compile within ActionScript opens the doors to all kinds of dynamic functionality that is currently very limited. I use methods like getDefinition all the time trying to create some form of flexibility within my projects but eval()eval()() has been greatly missed and I look forward to maybe one day coming back to ActionScript. I haven't spent a lot of time with this project but I'd like to see what it is capable of with out crashing everything.

ActionScript ActiveRecord for AIR SQLite
I'm working on a big AIR app and have already written all my database stuff but next time totally using this. It also comes with some really nice utilities that would be great to

JQuery in ActionScript: as3Query
This is really awesome but the thing that really pulls me back is it's still written in compiled ActionScript, it would be really nice if something like this could be rendered from a dynamically. This opens my mind to a few things for Wrapper but not really with this implementation.

Physaxe: Haxe Physics Engine
Pretty nice, it visually seems faster then anything else I have seen but testing would have to be done to prove that. But pretty impressive for realtime flash stuff.


I also have to add, I've been working in Flex a lot and I don't agree with the component architecture or the size of the framework. My biggest gripe is that it promotes the creation of projects that have more code than is comprehensible and requires a developer to trust the structure to much. To many things are automatically done for you without very much control for overriding or restructuring. It's all or nothing and the whole thing is big and slow. But also take into account that I still use it because there are some nice things about it too.

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.

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);

The Apollo public alpha

Adobe's Apollo came out yesterday, which is similar to many other tools already out there ( Zinc, mProjector, screenwaver, etc. ). I've spent some time making a few applications and felt it needed some attention. So what is the difference between these and why is this something to care about?

The main point is that Adobe made it and because of that there are simpler implementations of things that are rather complex in many of the other products and it does a few things they can't. Most of the other ones work by sending things out of FScommand, but have limited ways of receiving things back from the system. Their set up is usually based on add-ons or fitting things into what Adobe has already made but with apollo they seem to much more closely tried system level processes with actionscript then the other projector tools that I've used.

In short, because Adobe has control of their technology they have not only added ways to talk to things outside of flash but given control elements inside of your swf from the outside. They have a much more basic functionality in terms of system control then the others do but most projects only need basic system level control.

What does Apollo have that these others don't?
Apollo is way more then these other projector type applications, Apollo has 4 main parts: window controls, file system controls, calling scripts ( which is what the others do ), and combining the different web technologies together (html/javascript and flash).

This last part is the kicker.
var htmlView:HTMLControl = new HTMLControl();
You now have an element in side of your swf that can load an html page, then with javascript like you normally do or actionscript you can manipulate this element like any other movieclip on your stage.

// from an apollo application open a new window and add a html element to it.

package {
import flash.display.Sprite;
import flash.html.HTMLControl;
import flash.net.URLRequest;
import flash.display.NativeWindow;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowSystemChrome;

public class Main extends Sprite
{
public function Main()
{
// window options
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.systemChrome = NativeWindowSystemChrome.STANDARD;
options.transparent = false;

var newWindow:NativeWindow = new NativeWindow(false, options);
newWindow.title = "Hey cool.";
newWindow.width = 800;
newWindow.height = 600;
newWindow.visible = true;

//newWindow is a NativeWindow instance
var htmlView:HTMLControl = new HTMLControl();
htmlView.width = newWindow.width;
htmlView.height = newWindow.height;

//set the stage so display objects are added to the top-left and not scaled
newWindow.stage.align = "TL";
newWindow.stage.scaleMode = "noScale";
newWindow.stage.addChild( htmlView );

//set exposeRuntime=true to allow JavaScript on the page to reference ActionScript classes
htmlView.exposeRuntime = true;

//urlString is the URL of the HTML page to load
var urlReq:URLRequest = new URLRequest("http://www.listenerinteractive.com/");
htmlView.load(urlReq);

}
}
}

This was my first application and I'll write more about this soon, but this very simple small thing is the start of something very big in my mind.