How to load multiple HTML5 canvas on the same page (the proper method)

Report · Jul 02, 2014

Hi,

I've been struggling to load multiple canvas animations on the same page. At the beggining I thought that exporting the movies with different namespaces and reloading the libraries in a sequential flow might work, but it doesn't. It always loads just the last animation loaded. More info here: Coding challenge: what am I doing wrong?

Here is a sample of what I'm doing:

1st: Publish two flash movies with custom namespaces for "lib" set in the "publish settings": "libFirst" and "libSecond".

2nd: Edit the canvas tags in the HTML page. One called "firstCanvas" and the other one called "secondCanvas"

3rd: Edit the javascript like this:

        <script>
            // change the default namespace for the CreateJS libraries:
            var createjsFirst = createjsFirst||{};
            var createjs = createjsFirst;
        </script>
        <script src="//code.createjs.com/easeljs-0.7.1.min.js"></script>
        <script src="//code.createjs.com/tweenjs-0.5.1.min.js"></script>
        <script src="//code.createjs.com/movieclip-0.7.1.min.js"></script>
        <script src="{{assets}}/js/first.js"></script>
        <script>
            function initFirstAnimation() {
                var canvas, stage, exportRoot;

                canvas = document.getElementById("firstCanvas");
                exportRoot = new libFirst.first();

                stage = new createjsFirst.Stage(canvas);
                stage.addChild(exportRoot);
                stage.update();

                createjsFirst.Ticker.setFPS(libFirst.properties.fps);
                createjsFirst.Ticker.addEventListener("tick", stage);
            }
        </script>
        <script>
            // change the default namespace for the CreateJS libraries:
            var createjsSecond = createjsSecond||{};
            var createjs = createjsSecond;
        </script>
        <script src="//code.createjs.com/easeljs-0.7.1.min.js"></script>
        <script src="//code.createjs.com/tweenjs-0.5.1.min.js"></script>
        <script src="//code.createjs.com/movieclip-0.7.1.min.js"></script>
        <script src="{{assets}}/js/second.js"></script>
        <script>
            function initSecondAnimation() {
                var canvas, stage, exportRoot;

                canvas = document.getElementById("secondCanvas");
                exportRoot = new libSecond.second();

                stage = new createjsSecond.Stage(canvas);
                stage.addChild(exportRoot);
                stage.update();

                createjsSecond.Ticker.setFPS(libSecond.properties.fps);
                createjsSecond.Ticker.addEventListener("tick", stage);
            }
        </script>

<body onload="initFirstAnimation(); initSecondAnimation();">

Could someone please reply with the best practice on how to do this? If possible, without the need to reload all the libraries...

If I only need to show one flash movie at a time, would it be more efficient to cut & paste the canvas tag using jQuery in the DOM and reloading a different lib on it?

Many thanks!

#flash #reborn

Report · Jul 03, 2014

there's no easy way to do that. you'll need htm and javascript expertise to combine them.

so you should probably ask or hire someone to help you with that.

Report · Jul 04, 2014

@kglad: apologies for unmark your reply as "correct answer". With the rise of single page applications nowadays, this question takes even more relevance. I think that this is quite business critical for Adobe and we should try to provide more insight with the help of everyone interested.

I believe the "namespace" options in the "publishing settings" have something to do with multiple canvas on the same page. If that's not the case, what's their purpose?

Report · Jul 04, 2014

Related posts: Two animations on the same page html5 - toolkit for createjs and two animations on the same page Html5 canvas (flash cc)

Report · Jul 04, 2014

I was able to fix it. At the end, it was easier than I thought. Just have to publish using a different "lib" namespace for each movie, load all the scripts at the end of the <body> and then add the following to the onload or ready events:

$(document).ready(function () {
       
        var canvas, stage, exportRoot;

        // First movie
        canvas = document.getElementById("firstCanvas");
        exportRoot = new libFirst.first();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(libFirst.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);

        // Second movie
        canvas = document.getElementById("secondCanvas");
        exportRoot = new libSecond.second();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(libSecond.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
     
        // Third movie
        canvas = dument.getElementById("thirdCanvas");
        exportRoot = new libThird.third();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(libThird.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
});

Report · May 28, 2015

thank you very much for this mate (;

Report · Jul 26, 2015

I solved this problem, there must be only one init() function ¡this example works!

<head>
<script>
  // change the default namespace for the CreateJS libraries:
  var createjssecond = createjssecond||{};
  var createjs = createjssecond;
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="second.js"></script>
<script>
  // change the default namespace for the CreateJS libraries:
  var createjsfirst = createjsfirst||{};
  var createjs = createjsfirst;
</script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>
<script src="first.js"></script>
<script>


var canvas, stage, exportRoot;
var canvas_2, stage_2, exportRoot_2;//-------second vars


function init() {
  canvas = document.getElementById("canvas");
  images = images||{};
  var loader = new createjsfirst.LoadQueue(false);
  loader.addEventListener("fileload", handleFileLoad);
  loader.addEventListener("complete", handleComplete);
  loader.loadManifest(libfirst.properties.manifest);
    
  canvas_2 = document.getElementById("canvas_2");//-------second
  exportRoot_2 = new libsecond.second();

  stage_2 = new createjssecond.Stage(canvas_2);//-------second
  stage_2.addChild(exportRoot_2);
  stage_2.update();
    
  createjssecond.Ticker.setFPS(libsecond.properties.fps);//-------second
  createjssecond.Ticker.addEventListener("tick", stage_2);
 }


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


function handleComplete() {
  exportRoot = new libfirst.first();
stage = new createjsfirst.Stage(canvas);
  stage.addChild(exportRoot);
  stage.update();
createjsfirst.Ticker.setFPS(libfirst.properties.fps);
  createjsfirst.Ticker.addEventListener("tick", stage);
}
</script>

</head>
<body onload="init()">
</body>
//add id="canvas" and id"canvas_2"

Report · Aug 11, 2015

I'm still struggling with this. If I could see the full code of a simple html page, that'd be helpful.

I'm guessing my problem may have to do with where one puts the <script src....> tags. I have about 5 for each animation. So I don't know where exactly the init() and where the <script> tags should live. Check this out -- where do these go?

Report · Aug 11, 2015

Also, a screenshot of the correct publish settings to would be helfpful.

Report · Aug 26, 2015

LANNY createjs specialist has answered . And it is working fine

http://stackoverflow.com/questions/31901564/two-flash-cc-animations-in-the-same-html-page

Report · Feb 14, 2016

Really helpufl

Report · Feb 17, 2016

You may also want to try out Animate CC's OAM Export workflow than doing it manually.

See here: Export OAM files from Animate CC for use in Dreamweaver and Adobe Muse

Report · Jun 16, 2016

Thank you for posting this. I spent the better part of two days trying to edit code to make this work but it took me 10 minutes using Dreamweaver. Simple, reliable and easy to implement.

How to load multiple HTML5 canvas on the same page (the proper method)

1 Correct answer

Photos