Highlighted

Accessing movieclips within movieclips in a frame's code. (Canvas / Javascript)

Community Beginner ,
Feb 20, 2019

Copy link to clipboard

Copied

Hi, and apologies if this is an easy question. I've been trying various things all day to no avail.

if I create an movie clip in canvas mode in Animate, and name it "Object1", and then inside that, make another movie clip named "Object2", I seem to be unable to access "Object2" at the start of a frame.  For example, see the following code:

var _this = this;

console.log(_this.object1); // Prints an actual object to the console log. You can even see Object 2 inside there with values.

console.log(_this.object1.object2); // Undefined.

   

However, if I add it a on click function, as shown below, it works.

_this.on('click', function()

{

    console.log(_this.object1); // Prints object 1 as above.

    console.log(_this.object1.object2); // print object 2.

});

Does anyone know why it does this, and how I'm meant to get around it?  It's basic functionality that I've been used to in flash, but I'm not sure how it works in animate.  I figure it's a timing thing? perhaps object 2 isn't ready on time? But I can't find any documentation on this at all.

Thanks

Hi Daniel

if you would do the following in frame 1

var _this = this;

_this.timeoutFunction = function() {

    console.log(_this.Object1);

    console.log(_this.Object1.Object2);

};

setTimeout(_this.timeoutFunction, 0);

that works. It's like with click, the setTimeout comes later in the exucution chain once everything is available.

Klaus

Views

972

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Accessing movieclips within movieclips in a frame's code. (Canvas / Javascript)

Community Beginner ,
Feb 20, 2019

Copy link to clipboard

Copied

Hi, and apologies if this is an easy question. I've been trying various things all day to no avail.

if I create an movie clip in canvas mode in Animate, and name it "Object1", and then inside that, make another movie clip named "Object2", I seem to be unable to access "Object2" at the start of a frame.  For example, see the following code:

var _this = this;

console.log(_this.object1); // Prints an actual object to the console log. You can even see Object 2 inside there with values.

console.log(_this.object1.object2); // Undefined.

   

However, if I add it a on click function, as shown below, it works.

_this.on('click', function()

{

    console.log(_this.object1); // Prints object 1 as above.

    console.log(_this.object1.object2); // print object 2.

});

Does anyone know why it does this, and how I'm meant to get around it?  It's basic functionality that I've been used to in flash, but I'm not sure how it works in animate.  I figure it's a timing thing? perhaps object 2 isn't ready on time? But I can't find any documentation on this at all.

Thanks

Hi Daniel

if you would do the following in frame 1

var _this = this;

_this.timeoutFunction = function() {

    console.log(_this.Object1);

    console.log(_this.Object1.Object2);

};

setTimeout(_this.timeoutFunction, 0);

that works. It's like with click, the setTimeout comes later in the exucution chain once everything is available.

Klaus

Views

973

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 20, 2019 0
Advocate ,
Feb 20, 2019

Copy link to clipboard

Copied

Hi Daniel

if you would do the following in frame 1

var _this = this;

_this.timeoutFunction = function() {

    console.log(_this.Object1);

    console.log(_this.Object1.Object2);

};

setTimeout(_this.timeoutFunction, 0);

that works. It's like with click, the setTimeout comes later in the exucution chain once everything is available.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 2
Community Beginner ,
Feb 20, 2019

Copy link to clipboard

Copied

Thanks! Is that the recommended way of doing things in Adobe Animate? It seems like a bit of a bodge!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 0
Adobe Community Professional ,
Feb 20, 2019

Copy link to clipboard

Copied

This is what I do. I put all my code in frame 1 and use

var root = this;

which is the same, just a different variable name. (I prefer root because it is more distinguishable from the regular this when you read code).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 0
Advocate ,
Feb 20, 2019

Copy link to clipboard

Copied

H i Daniel

https://forums.adobe.com/people/Daniel+Stamp  wrote

Thanks! Is that the recommended way of doing things in Adobe Animate? It seems like a bit of a bodge!

This is the recommended way for HTML5/Canvas documents. It has to do with how Javascript is executed: from top to bottom. Strictly linear (well apart from AJAX ops). So when you want to access nested Objects (_this.Object1.Object2) immediately in frame 1, not everything in the running order of things is available in that millisecond when frame 1 code strikes. Some say, and that is true, that at least 1 frame must have passed. Which in a way conforms with a Tick has passed in CreateJS' Ticker, the inner clock of CreateJS.

Read more about this here Re: Accessing movieClip.children array Animate CC Canvas, particularly what ClayUUID has to say.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2019 1
Community Beginner ,
Feb 21, 2019

Copy link to clipboard

Copied

Thank you for the extremely helpful replies! It is starting to make some sense.  I've used actionscript for years, so getting my head around the differences here is taking some time.  I understand that things might not be ready straight away but I would have expected there to be some kind of on load type action or callback.

With that 0 ms timer in place, that seems to get some things working. but not others.  For example, on frame 2 I want the animation to sit there, and make a movie clip stop on a random frame.

So, after that 0 second timer, I ask this to happen:

// This is inside the function that gets called after the timer.

_this.movieClipIWantToStop.stop(); // Does nothing

_this.movieClipIWantToStop.gotoAndStop('A1'); // Also does nothing

  

// This now works A1 is set up as a label and it works.

_this.buttons.button1.on('click', function(){ _this.movieClipIWantToStop.gotoAndStop('A1'); });

However, changing the timer to 20 ms makes it work.

So I'm guessing this is a similar thing, in that the object just isn't ready to get told to stop? but after a bit of time it is?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 0
Community Beginner ,
Feb 21, 2019

Copy link to clipboard

Copied

That wouldn't make any discernable difference though would it?  All that does is make _this slightly different to read? As far as i can see, variables seem to be local to that frame.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 0
Advocate ,
Feb 21, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Daniel+Stamp  wrote

As far as i can see, variables seem to be local to that frame.

True. let's say our variable is named score.

VAR DECLARATION

var score = 0; // declares a variable to that frame only

this.score = 0; // creates a property for that object and it's available for the entire timeline

score = 0; // declares a global variable

(This is not from me. João César wrote this here in an interesting post. Fourth from top starting with Excellent.)

The other thing with _this.movieClipIWantToStop.stop(); - so this is all happening on frame 2 of the main timeline? And the movieclip movieClipIWantToStop starts playing first on frame 2 ? Well, maybe you need here a timeout of 20 ms because after 0 ms the movieclip in question has not entered the playState yet. I'm only guessing - it's always difficult without seeing the thing itself.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 1
Adobe Community Professional ,
Feb 21, 2019

Copy link to clipboard

Copied

I'm guessing he's trying to do things to a frame that the playhead hasn't even reached yet when that code executes.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 1
Community Beginner ,
Feb 21, 2019

Copy link to clipboard

Copied

That's another extremely useful bit of information there on that link.  Thanks for that.  I've been really struggling to find anything at all.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 1
Adobe Community Professional ,
Feb 21, 2019

Copy link to clipboard

Copied

No, I just use root because when I read code it is easy to find it compare to _this which is similar to this.

Note: I think that lots of people use root which was an old Macromedia name for the main timeline.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2019 0