Animate HTML5 Canvas/Javascript, help understanding addChild and dot notation

Hi.

It's because you're trying to reference nested objects using dot notation and the variable names. But instances added and nested at runtime can't be accessed by the variable name like it was the instance name you set in the IDE.

For instances created at the authortime (IDE), the Animate exporter sets a property on the parent for us to access a child by using this child's name.

So it's like:

@ authortime (IDE):

--- parent

    |--- child

Code:

this.parentName.doSomething();
this.parentName.childName.doSomething();

@ runtime:

--- parent

    |--- child

Code:

parent.doSomething();
child.doSomething();

Example: workflow for creating, nesting, and rotating instances:

@ authortime (IDE):

- Create three instances on the stage using the drawing tools: container, box, triangle;

- Add box to the container;

- Add triangle to the box;

- Rotate each of them.

this.container.rotation = 90;
this.container.box.rotation = 45;
this.container.box.triangle.rotation = 30;

@ runtime:

var container = new createjs.Container();
var box = new lib.Box();
var triangle = new lib.Triangle();

this.addChild(container);
container.addChild(box);
box.addChild(triangle);

container.rotation = 90;
box.rotation = 45;
triangle.rotation = 30;

So your code woud be like:

// Create a box and triangle from the library
var box = new lib.Box();
var triangle = new lib.Triangle();

// Create container1 and add the box and triangle
var container1 = new createjs.Container();
this.addChild(container1);

container1.x = container1.y = 50;

container1.addChild(box);
box.addChild(triangle); // ERROR: Cannot read property 'addChild' of undefined
triangle.rotation = 30; // Why can't I rotate the triangle this way?

// Create container2 and add the box and triangle
var container2 = new createjs.Container();
this.addChild(container2);

container2.x = container2.y = 250;

container2.addChild(box);
box.addChild(triangle); // ERROR: Cannot read property 'addChild' of undefined
triangle.rotation = 60; // Why can't I rotate the triangle this way?

Of course you can handle yourself access to children by their name. It's up to you. The getChildByName method will certainly be helpful.

I hope this makes some sense.

Regards,

JC