Adventures In ActionScript
Friday, March 10th, 2006Once again, post work nap out of the way, I resumed doing my homework project and learning flash in the process. It seems (like most things) there are many different ways to use flash. On one extreme you can use the timeline along with automagic tweening functionality and very minimal scripts to lash things together, or you can go to the other extreme and use it as a visual programming environment, using object-oriented (well as OO as JS/AS get) externally defined scripts for everything. Being a programmer, I chose the latter.
One of the problem’s I’ve had is resolving fields in the various namespaces, particularly finding one “movieclip” from another. Its odd that everything useful has to be a movieclip or a button, and that you can only apply certain graphic filters to those type of objects. Back to the namespace issue - now that I seem to be able to properly find objects from one another, I encountered the problem that function objects in JS/AS don’t know what object instances they’re associated with like they would in Python. So setting a button’s event handler to call one of the functions in either approach below won’t work: (I wish I new why the editor in Wordpress is effectively double spacing the text below by inserting break tags)
/* approach one :
* fails because doSomething will not be bound to this instance
*/
this.myButton.onRollOver = this.doSomething;
/* approach two:
* fails because this is not pointing to the right thing when it is executed
*/
this.myButton.onRollOver = function() { this.doSomething(); };
At this point I picked my roommate Phil’s brain because he’s always crawling around the obscure guts of languages like this, and found out some of these strange consequences of Javascript not really being OO - that the this pointer sucks and the above facts about the capabilities of function references.
Big thanks to him for pointing out this simple way to fix the problem using a closure:
var a = this;
this.myButton.onRollOver = function() { a.doSomething(); };
And for reminding me that you can do something like MochiKit does in their bind function to make “real” function pointers that know what instance they belong to (in a really stripped down form below)
class BindUtil {
static function bind(obj,func,args) {
return function() {
if (args != 'undefined')
func.apply(obj,args);
else
func.apply(obj);
};
}
}
Because that function makes it possible to pass arguments, one can easily define one handler to use for various buttons inline like this:
this.tempMinusBtn.onPress = BindUtil.bind(this,this.changeTemp,[-1]);
this.tempPlusBtn.onPress = BindUtil.bind(this,this.changeTemp,[1]);
So I’ve got one working dialog for my prototype due on Tuesday, but this is more functional that a lot of the rest will be. Its a screen from a inflight entertainment system we’re prototyping. The screen linked below is the climate control dialog that will fly in from the side to adjust temperature etc. The close button does nothing.
Flash Demo (Requires Flash Player 8 )
Only now do I notice that the control areas aren’t centered. I guess I’ll fix that later.
