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

[avtutorials]

Hello,

I have tried reading up on addChild, and I don't understand how to add objects to parent objects and refer to them.  For instance, if I make a Container, add a Box, then add a Triangle to the Box, I want to rotate the Triangle -- but, I don't understand how to reference the Triangle.  I would appreciate any explanation of addChild to help clarify this.  Thank you!

// 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);
container1.box.addChild(triangle); // ERROR: Cannot read property 'addChild' of undefined
container1.box.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);
container2.box.addChild(triangle); // ERROR: Cannot read property 'addChild' of undefined
container2.box.triangle.rotation = 60; // Why can't I rotate the triangle this way?

[JoãoCésar]

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

[ClayUUID]

"It's because instances added and nested at runtime cannot be referenced by dot notation like you would do with instances added and nested using the IDE."

Of course they can be referenced with dot notation. Just assign the reference to a property on the object.

this.thing = this.addChild(new lib.libthing());
this.thing.x = 100;
etc...

[avtutorials]

Thank you both. I found a solution that works, based on your information.

// Make container1
var container1 = new createjs.Container();
this.addChild(container1);
container1.x = 50;

container1.box = container1.addChild(new lib.Box());
container1.box.triangle = container1.box.addChild(new lib.Triangle());

container1.box.triangle.rotation = -45;

// Make container2
var container2 = new createjs.Container();
this.addChild(container2);
container2.x = 250;

container2.box = container2.addChild(new lib.Box());
container2.box.triangle = container2.box.addChild(new lib.Triangle());

container2.box.triangle.rotation = 40;