• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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.

Views

419

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
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

where's printInstanceNames defined?

Votes

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
community guidelines
Community Beginner ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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);
        }
    }
}

 

Votes

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
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

does something call init()?

Votes

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
community guidelines
Community Beginner ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

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

 

Votes

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
community guidelines
Community Beginner ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

did you use console.log to debug your code?

Votes

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
community guidelines
Community Beginner ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
LEGEND ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Beginner ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

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!

Votes

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
community guidelines
Community Expert ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

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);

Votes

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
community guidelines
Community Expert ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

LATEST

how to debug:

 

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

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

Votes

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
community guidelines