Need Assistance with JavaScript and Adobe Animate (CreateJS) Integration Issue

[estherf67587675]

I am facing difficulties with running ActionScript animations in the HTML5 canvas using Adobe Animate (CreateJS) integration. Specifically, the printInstanceNames() function, designed to log instance names of movie clips on the stage, is not working as expected. When testing the animation in a browser, the function doesn't log any output to the console, and I'm unable to identify the root cause of the issue.

I have verified that the stage variable is correctly referencing the createjs Stage object and that the init() function, responsible for initializing the stage and calling printInstanceNames(), is being executed after the instances are present on the stage. However, despite these efforts, the function still doesn't work as intended.

Additionally, I noticed a warning message in the console regarding the performance of a setTimeout handler, but it doesn't seem directly related to the problem with printInstanceNames().

I am seeking assistance to understand why the printInstanceNames() function is not logging instance names to the console and to identify any potential issues in the integration of ActionScript with the HTML5 canvas environment.

Any insights, suggestions, or debugging tips would be greatly appreciated. Thank you.

[kglad]

where's printInstanceNames defined?

[estherf67587675]

This is my code in the first frame of the movie.

This is a simple test because I can't get any code to run at all. So I tried this function to see if it would at least return the instances on stage.

I've checked the javascript file and the HTML. The createjs is there and also the init()

Thank you!

// Function to initialize the animation
function init() {
    // Get canvas and stage references
    var canvas = document.getElementById("canvas");
    var stage = new createjs.Stage(canvas);

    // Call the function to print instance names of movie clips on the stage
    printInstanceNames();
}


function printInstanceNames() {
    var numChildren = stage.getNumChildren();
    for (var i = 0; i < numChildren; i++) {
        var child = stage.getChildAt(i);
        if (child.name) {
            console.log("Instance name: " + child.name);
        }
    }
}

[kglad]

does something call init()?

[estherf67587675]

I have this code at the end of the body of the html

<script>
        window.onload = function() {
            init();
        };
</script>

[estherf67587675]

I would be grateful for any code that can prove to me I can run a programmatic animation in html5 canvas. I can't figure out what is wrong when I publish in Animate

[kglad]

did you use console.log to debug your code?

[estherf67587675]

Precisely. If I use console.log outside a function it prints correctly. But when I use it within a function it doesn't work. It is as if createjs weren't working, but I check the JS sources in the browser and the code is there.

[ClayUUID]

Declaring the canvas and stage variables in the init() function does nothing. Those are local variables that cannot be accessed outside that fuction. You don't even need to declare either of those variables because they're already declared as globals in the published code.

Re-declaring the same variable every time through a loop is bad practice.

If you're getting no output, then obviously it's because either your loop is iterating over nothing, or the child.name check is failing. So get rid of the check and log child itself.

But since you're calling init() immediately on page load, who knows, you could be calling it before anything even exists on the stage.

[JoãoCésar]

Hi.

Animate already creates a canvas and a stage global variables in the publishing process. And your stage variable - besides of the conflict - is storing a reference to a newly created stage that has no children. You are not creating a reference to the current stage.

And you can just place your function definitions and calls in the first frame of the main timeline and they should work.

Also, if you want to get the children of any container you just need to access the children property.

Please let us know if you have any further questions.

Regards,

JC

[estherf67587675]

Thank you for all your responses. Regardless of my code, I have tested many different simple tests for html5 canvas publishing and I can't get any function to work and it doesn't read my instance names, no matter what. A simple line of console.log(myMovieClip); returns Uncaught ReferenceError: myMovieClip is not defined, and I made sure the mc is on stage and has that instance name which I copied and pasted into the code. 

Could anything be wrong with my Adobe Animate installation? 

Thank you!

[JoãoCésar]

In the HTML5 Canvas document, any instance created in design time belongs to the current Movie Clip (timeline). So if you have a MC instance called myMovieClip, you need to use the this keyword to access it. Eg.:

console.log(this.myMovieClip);

[kglad]

how to debug:

Lesson 1: https://youtu.be/bG05_am-fQI

Lesson 2: https://youtu.be/H9e9toftvdM