Participant

Answered

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

Forum|Forum|11 years ago
July 2, 2014
7 replies
28114 views

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

This topic has been closed for replies.

Correct answer Joan_Mira

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

UDESCO

Participating Frequently

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

TheJokker

Participant

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.

H

hander flander

Participating Frequently

Really helpufl

T

tanvira5454192

Inspiring

LANNY createjs specialist has answered . And it is working fine

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

lainlese

Participant

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"

clevermill.com

Inspiring

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?

clevermill.com

Inspiring

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

Joan_MiraAuthorCorrect answer

Participant

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

B

barlas10155597

Participant

thank you very much for this mate (;

Joan_MiraAuthor

Participant

kglad

Community Expert

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.

Joan_MiraAuthor

Participant

@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?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded