HTML5 Canvans: v20 changed the generated JavaScript

[dmontz]

I just updated to Animate Version 20 (Build 17400) and noticed that the generated JavaScript has changed which is causing issues with our use of Animate.

I have a MovieClip named "field2_show3" that has once TextField child.  When I used to publish this (before v20), I got:

// show_3
this.field2_show3 = new lib.SampleHarmonicTextField3();
this.field2_show3.name = "field2_show3";
this.field2_show3.parent = this;
this.field2_show3.setTransform(368,13.95,1,1,0,0,0,50,50);
this.field2_show3.alpha = 0;

With v20, I am now getting:

// show_3
this.field2_show3 = new lib.SampleHarmonicTextField3();

// NOTE:  The missing parent and name properties.
this.field2_show3.setTransform(368,13.95,1,1,0,0,0,50,50);
this.field2_show3.alpha = 0;

Why was this removed?  

[dmontz]

I was able to come up with a workaround that works but is a bit inefficient compared to just having the name added to the object.

Since JavaScript is introspectible and Adobe uses the MovieClip's instance name as the property name, you can use the following code to discover the name of the MovieClip's instance name.

    static discoverName(createjsObj) {

        if (createjsObj) {

            if (createjsObj.parent) {

                for (var key of Object.keys(createjsObj.parent)) {

                    if (createjsObj.parent[key] === createjsObj) {

                        return key;

                    }

                }        

            }

        }

        return null;

    }   

[ClayUUID]

The "static" keyword and "for ... of" loop will crash any browsers running Internet Explorer. Try this code instead. In addition to not crashing IE, it has the advantage of not polluting the global namespace, doesn't run a lookup loop every single time you need the name, and doesn't do the lookup if .name is actually set:

// add name extraction method to all display objects
createjs.DisplayObject.prototype.getName = function() {
	if (!this.name && this._cacheName === undefined) {
		var parent = this.parent;
		var keys = Object.keys(parent);
		var len = keys.length;
		while (--len) {
			if (parent[keys[len]] === this) {
				this._cacheName = keys[len];
				break;
			}
		}
	}
	return this.name || this._cacheName;
}

Use as, for example:

alert(myObjectReference.getName());