References

Distributing points on the sphere

Symmetries of configurations of charges on a sphere

What’s the prototype chain?

To answer that, let’s start by forgetting about user-defined Classes for the moment, and looking at some older mechanisms that have been common to ActionScript and JavaScript since AS1.

Functions and the new operator

Whenever a Function is created, the Function constructor also creates a new generic Object. The Function gets a property named “prototype” that refers to this new Object. This generic object is a default that you can change by setting the Function’s prototype to a different object, as we shall see.

Now when you the programmer want to create a new custom object, you can do it by invoking a function preceded by the new operator:

var myObject:Object = new SomeFunction();

When used with the new operator, a function is known as a constructor function (not to be confused with a constructor method!), or just a constructor. The new operator modifies the way the function works in three ways:

1. Ordinarily, the keyword this, when used inside a function, is bound to the global object. When a function is invoked with new, a new Object is created, and this refers to that Object. (This is like using the Function.apply() method.)

2. The new Object gets a property named __proto__ that refers to the constructor’s prototype. The Object’s __proto__ is a basis for inheritance — a way to customize the new Object — as described in the next section.

3. If the function returns a non-object value, then when invoked with new, this (the new object) is returned instead. If the function returns an object, that object becomes the value of the new expression, and this is discarded.

You can see that use of the new operator causes the function to behave quite differently. So although there is no formal difference between a constructor function and any other function, the code you put in them will be quite different. Constructor functions are conventionally named with an upper-case first letter as a reminder of the distinction.

Prototype Inheritance

When the runtime encounters a reference to a property of an object, as in myObject.var or myObject.func(), it naturally looks for the property in the object itself. But if it doesn’t find it there, it looks in the object’s __proto__ (the prototype object). Note that the prototype is an object like any other, and when it was created it got a __proto__ reference to a prototype, too. Thus we have a prototype chain. The chain has an end, though, because eventually we reach an Object that was created with new Object(); or with an Object literal in curly braces, and the next object in the chain is the unique and final Object.prototype. The runtime will search the chain until it finds the desired property or until it reaches Object.prototype.

The constructor’s prototype appears as the first element in the new Object’s prototype chain. Thus, although no new Class is created, and the new object’s type is simply Object, this particular prototype has a tangible effect on the object’s behavior that is shared with all other objects that have the same prototype chain. The prototype constitutes the Object’s pseudoclass. (The pseudoclass is often called “class” for simplicity when speaking of AS1 or JavaScript). The instanceof operator works by traversing the prototype chain.

If properties of the prototype are modified, the object naturally inherits the new values. If the object is directly assigned a property of a given name, that property will mask (or “shadow”) a property with the same name on the prototype.

If the constructor function is assigned a different prototype, then objects subsequently created with new SomeFunction() will inherit from the new prototype, but old objects continue to inherit from the original prototype. Normally, if a pseudoclass is to inherit from another, the programmer will explicitly set the constructor’s prototype before creating any objects from it:

function Shape() { this.handle = "shape"; }    // leave default prototype; shape objects will inherit from an Object

function Circle(r) { this.radius = r; }
Circle.prototype = new Shape();    // circle objects will inherit from a shape object

var circle = new Circle();    // circle will have the "handle" property

Note that the constructor function itself, being an object of class Function, inherits properties not from its prototype, but rather from its own __proto__, which is a reference to Function.prototype.

The programmer can also replace an object’s __proto__, changing its pseudoclass at will. This may seem a bit out there, but it was actually the way to set the document type in AS1 and AS2.

All of the above applies equally to JavaScript and to all versions of ActionScript. But ActionScript 3 imposes certain restrictions:
1. Neither package-level functions nor class methods may be used as constructor functions. So a constructor function must be defined outside a package statement, within a method, or in a frame script.

2. The __proto__ property of an object is not accessible to the programmer.

3. In strict mode, passing any parameters to a constructor function that is declared outside a package statement is a compile-time error, even if the function is declared to accept parameters. (This is not the case when the function is defined within the method where it is invoked, or when the function is invoked through a reference defined within the method where it is invoked.) This appears to be a mistake on the part of the compiler.

Bringing it Up to Date

First let’s note that the above stuff is dynamic in that it can all be changed at runtime. Good times. Of course it comes with a price: slower performance, and everything is public and untyped.

Now let’s bring back Classes, and see how they behave compared to these ancestral features of the language.

In AS2, classes were grafted onto the underlying prototype-based language. Class syntax was just that: syntax allowing programmers to ignore the implementation and submit to certain restrictions at compile time. But prototype-based inheritance was all there really was in the VM, and its full power (and dangers) were still available at run time. AS3 is different. It has true classes and class-based inheritance.

When a Class is created, it gets a prototype object just as a Function does. The instances created by new ClassName() inherit from the class prototype, and you can add, delete, or change properties of the class prototype, and those properties are all public and untyped, too. The difference is that you cannot replace a Class’s prototype; the prototype chain (or tree, really) is isomorphic to the class hierarchy and is immutable.

Another difference, of course, is that you normally define fixed instance properties (variables and methods) when you write a Class. The fixed properties are placed in the class’s traits object, and the runtime checks the traits object for a property before searching the prototype chain; that is, class inheritance takes precedence over prototype inheritance. Fixed properties are typed, need not be public, and are found more quickly. As implied by the name, fixed properties cannot be deleted.

(You might think that the runtime has to search up the class hierarchy to find fixed properties that are inherited from a superclass. But in fact in AS3 these are copied down into the current class’s traits object, so they are found even more quickly.)

A Class’s constructor method is much like a constructor function. But you don’t get the chance to return anything from a constructor method, so new ClassName() will always return the new object. In fact you can’t even get a reference to the constructor method as a Function object, so you have no opportunity to try to invoke it without the new operator. This suggests that in AS3 the constructor method is still in a sense the same thing as the class.

I’m not going to get into the fascinating topic of closures right now, except to note that every function in AS and JS is a closure, so named because the scope of an inner function in these languages encloses the parameters and variables of the functions they are defined within.

Closures are first-class citizens of ActionScript. Every method in your class is a closure. That’s how it knows the instance variables of the class. Essentially every class is a big closure. You can write a function with closures inside that would be very much a class for all practical purposes.

– the RIA Book, p. 88

That last sentence describes what Douglas Crockford does in JavaScript: The Good Parts — what classical programmers may call simulating classes, and what Crockford calls better than classes.

Should you use dynamic features in your programming?

Sure, occasionally. Obviously, if you want to, you can create objects with a constructor function, then replace the constructor’s prototype, and create more objects with it.

If you think up a good use case for doing that, please let me know.

In fact, you should probably not use constructor functions at all. Crockford advises against them — and this in a language without user-defined classes! The lack of privacy is just one of the reasons he cites.

But you should definitely consider placing properties on class prototypes where appropriate.

UPDATE 22 Sept 2008: I now believe that the STRATEGY pattern is a better solution for this use case (see the comments on this post), but I’m leaving this example up as a demonstration of the technique for those who are interested.

Consider a game character who has a number of private methods; he wants to execute the appropriate method when he arrives at various targets, depending on the type of the target. He may have one method that he must execute whenever he arrives at any Flower, whether it be a Daisy or a Pansy or whatever derived class instance. If I set

Flower.prototype.myTask = flowerTask;

then on arrival, my character can call

target["myTask"]();

and the flowerTask is the one that will be executed if the target is any Flower derivative.

Here’s a little example; I’ve set properties on Target1.prototype and on Target2.prototype but not on Target3.prototype. Target2A is derived from Target2. Click on the targets:

An archive of the FlexBuilder project with sources and fuller explanation is here.

I like to think of prototype properties as a kind of enhanced reverse Dictionary; if you think of the property name as the data structure, and the object instances as keys — as though you were saying “myTask”[target] in the last example — then, when a certain value is set on a class’s prototype, you retrieve that value through any index that’s an instanceOf that class.

Further Reading

AS3 Language Specification

Adobe Flex 3 Help -> Programming ActionScript 3.0 -> Object-oriented programming in ActionScript -> Advanced topics

Colin Moock: Essential ActionScript 3.0 Chapter 15, “Dynamic ActionScript”

Douglas Crockford: JavaScript: The Good Parts (get this book!)

Google Chrome Comic (JavaScript implementation and garbage collection)

Branden Hall and Samuel Wan: Object-Oriented Programming with ActionScript (historical interest; AS1 only)

Yakov Fain, Victor Rasputnis, and Anatole Tartakovsky: Rich Internet Applications with Adobe Flex & Java (Secrets of the Masters) (aka The RIA Book; especially Chapter 4, “Learning Flex Through Applications”)

Jens C Brynildsen: The Future of ActionScript

Derek Wischusen: Mixins in ActionScript 3 (perhaps going too far)

UPDATE: I have rebuilt the Valstar example using Mario Klingemann’s optimized version of Ron’s class.

Frocessing Resources

• Takanawa’s Frocessing demo
  His code is presented as a Flash frame script; here is a .as version of it suitable for Flex Builder. He also notes that for performance reasons, Font and Image implementation will have to wait for the Astro release. How close can Flash ultimately come to Java performance?
• Frocessing Wiki (Japanese)
• ASDocs
• Frocessing source code (library and samples)

We need to be able to traverse the connections among the Class, an instance of the Class, and the name of the Class.

From name to Class; from instance to Class

First, you want to be able to get hold of a Class object, either from its package path and class name:

import flash.utils.*;

var myClass:Class = getDefinitionByName("com.myDomain.myPackage.SomeClass");

or from an instance of the class:

var myClass:Class = myInstance.constructor;

Here are a few simple ways you can use these:

• The Class object is a factory for making instances of its class, so using getDefinitionByName() you can write a factory method to instantiate objects of types specified by Strings, e.g. in an XML file:

  var myClass:Class = getDefinitionByName("com.myDomain.myPackage." + xmlData.@type);
  var myObject:Object = new myClass();
  

• Run-time enforcement of an abstract class:

  public function MyClass()
  {
  	super();
  	if (this.constructor == MyClass)
  	{
  		throw new IllegalOperationError("AbstractException");
  	}
  }
  

• Suppose a game character is collecting items such as gems or weapons or vegetables, and all you need to know about the items is their type. You don’t have to hang on to the items themselves; you can store the collection as a Dictionary indexed by class objects:

  private var _collection:Dictionary = new Dictionary(true);
  .
  .
  .
  private function collect(item:Object):void
  {
  	var itemClass:Class = item.constructor;
  	if (_collection[itemClass] == null)
  	{
  		_collection[itemClass] = 1;
  	}
  	else
  	{
  		_collection[itemClass]++;
  	}
  }
  

From Class to class name; from instance to class name

I’ll just show my getClassName() function here:

import flash.utils.*;

public function getClassName(o:Object):String
{
	if (o is Class)
	{
		var s:String = o.toString();	// "[class SoAndSo]”
		return s.substring(7, s.length - 1);
	}
	else
	{
		var fullClassName:String = getQualifiedClassName(o);
		var i:int = fullClassName.lastIndexOf(”::”);
		if (i == -1)
		{
			return fullClassName;
		}
		return fullClassName.slice(i + 2);
	}
}

The toString() method is defined in the root Object class, and it can be redefined in your own classes. It’s called whenever the String representation of an object is needed. For example in getClassName() I could have written

var s:String = "" + o;

which would have implicitly invoked o.toString(). The trace() function also uses toString(). So it’s a good idea to implement toString() in your classes. I usually start out by doing this:

public override function toString():String
{
	return getClassName(this);
}

and then add whatever specific data I need to show into it.

Related ActionScript 3 Tip of the Day by Senocular: #73

From Class to Class

Here’s the last basic class-slinging tool, and I believe it’s one that not many Flash programmers are aware of. Suppose you want to know if class A is derived from class B. You might think you’d have to make an instance of A and use the is operator on it. And that’s OK if you don’t have to come up with parameters for the constructor. But there’s a cleaner way:

public function isDerived(childClass:Class, ancestorClass:Class):Boolean
{
	if (ancestorClass.prototype.isPrototypeOf(childClass.prototype))
	{
		return true;
	}
	return false;
}

Now you may say yeccch, we’ve left the prototype behind, that’s old-school AS1 programming, and you’d certainly be correct in a way: In AS1 there was no way to simulate classes except by mucking with the prototype, and in AS2 the compiler simulated classes under the hood by mucking with the prototype, and in AS3 we have true class inheritance. So there’s almost certainly no need to simulate classes in AS3. But the prototype, and the isPrototypeOf() function, are not going away any time soon; they’re in the ECMA spec, so they must be retained in the language. I believe I can guarantee, though, that aside from this isDerived() function, there is NO other legitimate use case for isPrototypeOf() in AS3! The prototype itself is a different matter, and I mentioned a use case for placing properties there in a comment to my recent post Advanced Users May Choose.

Related ActionScript 3 Tip of the Day by Senocular: #74

What can you do with isDerived()? Suppose my game character is collecting various kinds of Gems, such as Rubies, Sapphires, and Diamonds, and various kinds of Vegetables, such as Rutabagas, Kohlrabi, and JerusalemArtichokes. He’s saving them in a Dictionary as in the example above, and I need to know how many Gems or how many Vegetables he has:

private function numInCollection(collectionClass:Class):uint
{
	var n:uint = 0;
	for (var key:* in _collection)
	{
		var c:Class = key as Class;
		if (c == collectionClass
		||  isDerived(c, collectionClass))
		{
			n += _collection[key];
		}
	}
	return n;
}

Summary of indexed collections in AS3

• Object: properties indexed by Strings
• Array: properties indexed by Numbers
• Dictionary: properties indexed by Objects

Occasionally I meet a programmer who indexes an Array object’s properties using Strings. Of course this works, but it works because the array is an Object; if you’re not using Numbers as indices, then you’re just wasting space by declaring the collection as an Array. You could make it a MovieClip and it would work just as well!

We’ll start with the sameSide() function, which I’ll use to implement some more interesting functions:

// sameSide.as
package
{
    import flash.geom.Point;

    // are p1 and p2 on the same side of the line through a and b?
    public function sameSide(p1:Point, p2:Point, a:Point, b:Point):Boolean
    {
        var cp1:Number = cross(b.subtract(a), p1.subtract(a));
        var cp2:Number = cross(b.subtract(a), p2.subtract(a));
        return (dot(cp1, cp2) >= 0);
    }
}       

    import flash.geom.Point;

    function cross(a:Point, b:Point):Number
    {
        // z coordinate of the cross product; x and y coordinates are zero
        return a.x * b.y - a.y * b.x;
    }

    function dot(a:Number, b:Number):Number
    {
        // z vectors
        return a * b;
    }

A little AS3 note about the foregoing: The above code is the entire sameSide.as file; it’s a bit unusual in that it does not contain a class. AS3 requires that a source file expose a single external definition, which in this case is a function rather than a class. A function defined in this way is called a package-level function. The functions cross() and dot() that appear after the closing curly brace are visible only to code within the same file, and thus any access control specifier like “internal” or “private” would be redundant.

Of course you could make sameSide() a public static method of a Class, and cross() and dot() private static methods.

Now we implement some other functions based on sameSide():

// behind.as
package
{
    import flash.geom.Point;

       /**
         * Is p2 behind me when I stand at p0 and face p1?
         *
         */
        public function behind(p0:Point, p1:Point, p2:Point):Boolean
        {
            // slope of normal to the line p0p1:
            var m:Number = (p0.x - p1.x)/(p1.y - p0.y);
            // y-intercept of normal through p0:
            var b:Number = p0.y - m * p0.x;

            return !sameSide(p1, p2, p0, new Point(0, b));
        }
}

// beyond.as
package
{
    import flash.geom.Point;

       /**
         * Is p2 beyond p1 when I stand at p0 and face p1?
         *
         */
       public function beyond(p0:Point, p1:Point, p2:Point):Boolean
        {
            // slope of normal to the line p0p1:
            var m:Number = (p0.x - p1.x)/(p1.y - p0.y);
            // y-intercept of normal through p1:
            var b:Number = p1.y - m * p1.x;

            return !sameSide(p0, p2, p1, new Point(0, b));
        }
}

Cute, eh? Nice to know if something is behind you, or beyond me.

Here’s another:

package
{
    import flash.geom.Point;

/**
* Is the point p inside the triangle abc?
*/
    public function pointInTriangle(p:Point, a:Point, b:Point, c:Point):Boolean
    {
        return sameSide(p, a, b, c) && sameSide(p, b, a, c) && sameSide(p, c, a, b);
    }
}

which is to say p is inside triangle abc if it’s on the same side of line bc as a, and on the same side of line ac as b, and on the same side of line ab as c. How obvious is that?

I have to credit my source here, because “point in triangle” was the search that led me to sameSide(): Point In Triangle Test. As it turns out, I haven’t actually used pointInTriangle() for anything yet. behind() and beyond(), though, play an important part in Geometry-Based Path Planning, the subject of a future post.

Frequent sources of inspiration on similar topics are Wolfram MathWorld and of course Wikipedia.

(Flex language manual, Object.constructor)

Advanced users may choose to use the function keyword instead of the class keyword to define a Function object that can be used as a template for creating objects. Such a function is called a constructor function because you can use it in conjunction with the new operator to create objects. If you use the function keyword to create a constructor function, its prototype object is assigned a property named constructor that holds a reference to the constructor function. If you then use the constructor function to create an object, the object inherits the constructor property from the constructor function’s prototype object. For example, the following code creates a new constructor function, f, and an object named myF:

function f() {}
trace(f.prototype.constructor); // function Function() {}
trace(f.prototype.constructor == f); // true
var myF = new f();
trace(myF.constructor == f); // true

UPDATE: I’ve looked into this and I have some answers to my own question:
Dynamic Programming in AS3

Wow, and wow!  Both products are absolutely free (and Sandy is open-source as well), and they’re both asking for donations.

Send them each ten bucks now!

The controls are all clear to the non-Chinese reader, except for the selector at bottom left. It’s “fillType: linear/radial.”

Here’s what Kinglong has to say:

Recently when developing a Flash component, I needed to implement gradient fills (beginGradientFill) in ActionScript. Previously I had little understanding of the matrix used in this method. I searched on the Web and found some information, but it was all pretty unclear! So I wrote this test program to gain basic understanding of the method. I hope it’s useful for everyone; I call this “using a program to study a program”! I hope those who study AS coding can also learn this mode of thinking, and can “use a program to study a program” to understand the real meaning of other methods! That’s much better than reading dry docs.

“Learning Flash development is really not dull!”

Yes, indeed. May we all “Learn from model developer Kinglong!”

Meanwhile, over on the mother ship, Clive Whitear of Adobe Consulting has come up with a Transition and Tween Explorer, and a couple of weeks ago Peter Baird of the same group posted a Flex 2 Style Explorer.

Flash Insider suggests that Adobe build explorers into the Flash UI.

Explorers!

UPDATE 2006/4/24: Keith Peters is in the Explorers Club too! Check out the Noise Explorer and Perlin Explorer in his FITC presentation!

UPDATE 2006/5/17: Here’s a link to the updated Flex 2 Style Explorer Beta 3.

· setBoxSize(wd:Number, ht:Number) (default 150 x 50)
· showDecimal(yesno:Boolean) (default true)
· showHex(yesno:Boolean) (default false)
· register(tipTarget:MovieClip). Of course you can register multiple MovieClips.

Download