4 Replies Latest reply on Jun 17, 2016 8:13 AM by jimboslyce

    Custom Coding: How can I edit the generated JavaScript class in Adobe Animate Canvas?

    jimboslyce

      I am currently trying to add custom functionality to a Canvas MovieClip. However, whenever I add a function to the Actions panel, it generates a function wrapper called this.frame_0 (or whichever frame I edit), which is not the behavior I want. Is there a way (maybe a plugin?) to edit the generated JavaScript class? I cannot edit the JavaScript file directly because that is overwritten each time I publish.

       

      Example

      // What is currently generated

      (lib.Foo = function(mode,startPosition,loop) {

        this.initialize(mode,startPosition,loop,{});

       

        // timeline functions:

        this.frame_0 = function() {

             this.Bar = function() {

                // Some behavior

             }

        }

       

      }).prototype = p = new cjs.MovieClip();

      p.nominalBounds = new cjs.Rectangle(0,0,150,25);

       

      //What I want

      (lib.Foo = function(mode,startPosition,loop) {

        this.initialize(mode,startPosition,loop,{});

        

         this.Bar = function() {

            // Some behavior

         }

       

       

        // timeline functions:

        this.frame_0 = function() {

             // Scripting stuff

        }

       

      }).prototype = p = new cjs.MovieClip();

      p.nominalBounds = new cjs.Rectangle(0,0,150,25);

       

      EDIT: It would probably be better form to use prototypes, but the same question applies.

        • 1. Re: Custom Coding: How can I edit the generated JavaScript class in Adobe Animate Canvas?
          Colin Holgate MVP & Adobe Community Professional

          I am somewhat guessing here, but have you looked at how CreateJS handles things? It may well be that it's using prototypes. If what you are trying to do works, why do you not want to let CreateJS handle things?

           

          There are cases where we want to overwrite what gets published, and for those we use a gulp script. It can go through the things that CreateJS gave us and replace them with what we want. Maybe that's something that would work for you.

          1 person found this helpful
          • 2. Re: Custom Coding: How can I edit the generated JavaScript class in Adobe Animate Canvas?
            jimboslyce Level 1

            I am trying to abstract some common behaviors that I use to manipulate specific CreateJS containers/Animate symbols. I'd like to add the function directly on the container, if possible, so that the function exists on instantiation instead of waiting for this.frame_0 to be called. I mostly just want a clean way of doing this inline, so that I don't need to write an external JavaScript class and then add it via a gulp script. If that doesn't exist, no worries, I'll figure something else out.

            • 3. Re: Custom Coding: How can I edit the generated JavaScript class in Adobe Animate Canvas?
              ClayUUID Adobe Community Professional

              Running your initialization code on the first frame of the main timeline IS the clean way of doing it.

               

              Work with your tools, not against them.

              1 person found this helpful
              • 4. Re: Custom Coding: How can I edit the generated JavaScript class in Adobe Animate Canvas?
                jimboslyce Level 1

                The solution to this (after much tinkering), is the following:

                 

                Firstly, you'll need to edit your template.html file, by going to File->Publish Settings->Advanced->Import New... (or Export, if you don't have one yet), and add a javascript file under $CREATEJS_SCRIPTS. I called mine custom.js.

                 

                <!--
                  NOTES:
                  1. All tokens are represented by '$' sign in the template.
                  2. You can write your code only wherever mentioned.
                  3. All occurrences of existing tokens will be replaced by their appropriate values.
                -->
                
                
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>$TITLE</title>
                <!-- write your code here -->
                
                
                $CREATEJS_SCRIPTS
                <script src="src/custom.js"></script>
                $SCRIPT_START
                var canvas, stage, exportRoot;
                function init() {
                  // --- write your JS code here ---
                  $CJS_INIT
                  stage.update();
                }
                $PLAYSOUND
                $SCRIPT_END
                
                
                <!-- write your code here -->
                
                
                </head>
                <body onload="init();" style="background-color:#D4D4D4;margin:0px;">
                  <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG"></canvas>
                </body>
                </html>
                

                 

                Then, in that custom.js file, you can do the following:

                 

                lib.MySymbol = (function() {
                    var _cached = lib.MySymbol;
                   
                    _cached.prototype.SayHello = function(){
                          return this.Hello;
                    }
                    
                    return function() {
                        var old = new _cached();
                
                        old.Hello = "Hello World!";
                        //other init that you need
                
                        return old;
                    };
                })();
                

                 

                What's basically happening here is the original function is being redefined, but since you cache the original global, and then use it in this constructor (as a sort of pseudo-superclass), you can extend the original constructor that's defined by Adobe Animate.

                 

                Some notes:

                Because this.Frame_0 won't be called on child objects, anything that you define will be unaccessible inside this new constructor (this should be obvious but I'm just stating it for the sake of documentation). However, anything that you define in child objects constructors like this IS accessible. This is because anything that you put on the scene is called FIRST, due to it being in the original constructor created by CreateJS.

                 

                This is the best solution I found, and it's fairly clean all things considered.