4 Replies Latest reply on Aug 1, 2014 9:26 AM by Miroku_87

    createJS animation in edge

    Miroku_87 Level 1

      Hi everyone.

      Has anybody ever tried and successed in importing a canvas animation generated by the Flash Professional PlugIn CreateJS?

      I would like to know how to do it.


      Thank you in advance =)

        • 1. Re: createJS animation in edge
          hemanthR Adobe Employee

          I have attached examples to do it in 3 ways known to me

          One way is to add is using iframe(main.an) and another way is to append the canvas element and the libs needed to stage(main2.an) and another way is to import the required libs using the script loading feature and append only the canvas to animate stage(main3.an).


          forCjs.zip - Google Drive

          1 person found this helpful
          • 2. Re: createJS animation in edge
            Miroku_87 Level 1

            Sorry for the late reply!

            I will take a look at your code, give it a try and get back to you! =)


            Thank you!

            • 3. Re: createJS animation in edge
              Miroku_87 Level 1

              Wow now I am VERY late but I FINALLY managed to take a look at your files and they were very clear!

              Thank you very much!

              • 4. Re: createJS animation in edge
                Miroku_87 Level 1

                Hey I've got another question:

                since I'm using a canvas with animated images is it possible to make Edge load the images and then tell CreateJS to use those ones?


                Thank you!



                EDIT: I've tried adding all the images to the symbol, disabling them and editing the code like below.

                It works since I don't have to wait extratime for createJS to load all the images because in "creationComplete" they are already there. Btw I'm still not so sure that it's the good way of doing it.


                var canvas_id = "expanded_canvas";

                var canvas, exportRoot;

                sym.expStage = null;


                sym.canvasInit = function() {


                  canvas = document.getElementById(canvas_id);

                  images = images||{};


                  /*var imgRoot = window.location.href.indexOf("localhost:") != -1 ? "images/" : "";

                  var manifest = [

                  {src:"./"+imgRoot+"expanded_claim.png", id:"expanded_claim"},

                  {src:"./"+imgRoot+"expanded_data.png", id:"expanded_data"},

                  {src:"./"+imgRoot+"expanded_device.png", id:"expanded_device"},

                  {src:"./"+imgRoot+"expanded_didascalia.png", id:"expanded_didascalia"},

                  {src:"./"+imgRoot+"expanded_guide.png", id:"expanded_guide"},

                  {src:"./"+imgRoot+"expanded_logo_mw.png", id:"expanded_logo_mw"},

                  {src:"./"+imgRoot+"expanded_prezzo.png", id:"expanded_prezzo"},

                  {src:"./"+imgRoot+"expanded_sfondo.jpg", id:"expanded_sfondo"}


                  var loader = new createjs.LoadQueue(false);

                  loader.addEventListener("fileload", sym.handleFileLoad);

                  loader.addEventListener("complete", sym.handleComplete);





                  //images[evt.item.id] = evt.result;

                  //regex is for "file name without extension"

                  images[$(this).attr("src").replace(/.*?\/(.*?)\..*?$/,"$1")] = this;





                sym.handleComplete = function(evt) {

                  if (evt.item.type == "image") { images[evt.item.id] = evt.result; }



                sym.handleComplete = function() {

                  exportRoot = new lib._1600x1000_fbf();


                  sym.expStage = new createjs.Stage(canvas);


                  sym.expStage.scaleX = .5;

                  sym.expStage.scaleY = .5;




                  createjs.Ticker.addEventListener("tick", sym.expStage);