Skip navigation
Currently Being Moderated

Coding challenge: what am I doing wrong?

Feb 14, 2014 6:11 PM

I've worked at this for days by myself and then worked on the phone with an Adobe support staff member. He solved the problem, but I tried to recreate his solution with two new files and it doesn't work. It's driving me nuts-- except for differences in file names I can't see what's wrong with my code.

 

Here's the problem. I want to combine two HTML5 Canvas outputs generated in Flash CC  onto the same HTML page. One file is called 'banner' and the other is called 'splash'. Files exported by Flash work fine independantly. But when combining them something gets screwed up and only the second file gets read. All I see is two canvases, one blank the other working fine.

 

Here's the code:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

 

<script>

          // change the default namespace for the CreateJS libraries:

          var createjsbanner = createjsbanner||{};

          var createjs = createjsbanner;

</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="banner.js"></script>

 

<script>

var canvas, stage, exportRoot;

 

function init() {

          canvas = document.getElementById("canvas");

          exportRoot = new libbanner.banner();

          stage = new createjsbanner.Stage(canvas);

          stage.addChild(exportRoot);

          stage.update();

 

          createjsbanner.Ticker.setFPS(libbanner.properties.fps);

          createjsbanner.Ticker.addEventListener("tick", stage);

}

</script>

 

<script>

          // change the default namespace for the CreateJS libraries:

          var createjssplash = createjssplash||{};

          var createjs = createjssplash;

</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="splash.js"></script>

 

<script>

var canvas, stage, exportRoot;

 

function init2() {

          canvas = document.getElementById("canvas2");

          exportRoot = new libsplash.splash();

 

          stage = new createjssplash.Stage(canvas);

          stage.addChild(exportRoot);

          stage.update();

 

          createjssplash.Ticker.setFPS(libsplash.properties.fps);

          createjssplash.Ticker.addEventListener("tick", stage);

}

</script>

 

</head>

 

<body onload="init(); init2();" style="background-color:#D4D4D4">

          <canvas id="canvas" width="550" height="120" style="background-color:#FFFFFF"></canvas>

    <canvas id="canvas2" width="550" height="400" style="background-color:#FFFFFF"></canvas>

</body>

 

</html>

 

 

And for what it's worth, here's the code for two similar files produced by the Adobe staff support worker:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>flash1</title>

 

 

 

 

<script>

          // change the default namespace for the CreateJS libraries:

          var createjs1 = createjs1||{};

          var createjs = createjs1;

</script>

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

<script src="flash1.js"></script>

 

<script>

var canvas, stage, exportRoot;

 

function init() {

          canvas = document.getElementById("canvas");

          exportRoot = new lib1.Untitled1();

 

          stage = new createjs1.Stage(canvas);

          stage.addChild(exportRoot);

          stage.update();

 

 

          createjs1.Ticker.setFPS(lib1.properties.fps);

          //createjs1.Ticker.addEventListener("tick", stage);

}

</script>

 

<script>

          // change the default namespace for the CreateJS libraries:

          var createjs2 = createjs2||{};

          var createjs = createjs2;

</script>

 

 

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

<script src="flash2.js"></script>

 

<script>

var canvas, stage, exportRoot;

 

function init1() {

          canvas = document.getElementById("canvas1");

          exportRoot = new lib2.Untitled1();

 

 

          stage = new createjs2.Stage(canvas);

          stage.addChild(exportRoot);

          stage.update();

 

          createjs2.Ticker.setFPS(lib2.properties.fps);

          //createjs2.Ticker.addEventListener("tick", stage);

}

</script>

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

 

</head>

 

<body onload="init(); init1();" style="background-color:#D4D4D4">

          <canvas id="canvas" width="550" height="100" style="background-color:#FFFFFF"></canvas>

    <canvas id="canvas1" width="550" height="100" style="background-color:#FFFFFF"></canvas>

 

</body>

</html>

 

Any help hugely appreciated!!

 
Replies
  • kglad
    72,235 posts
    Jul 21, 2002
    Currently Being Moderated
    Feb 15, 2014 7:25 AM   in reply to GraphicsGeezer

    your first error is that init and init1 and init2 are using duplicate variable names.  the same error is in both attempts.

     

    you should start over.

     

    rename all the js variables and functions in one of the html files (to make sure there are no name collisions when you get to the step where you combine them) and make sure it still works after doing that.  you can then combine the two html files

     
    |
    Mark as:
  • kglad
    72,235 posts
    Jul 21, 2002
    Currently Being Moderated
    Feb 15, 2014 12:17 PM   in reply to GraphicsGeezer

    canvas, stage and exportRoot.

     

    and don't have a canvas1 and canvas2 defined.

     
    |
    Mark as:
  • kglad
    72,235 posts
    Jul 21, 2002
    Currently Being Moderated
    Feb 15, 2014 3:26 PM   in reply to GraphicsGeezer

    use:

     

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>test</title>

     

    <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="two.js"></script>

     

    <script>

    var canvas2, stage2, exportRoot2;

     

    function init() {

        canvas2 = document.getElementById("canvas2");

        exportRoot2 = new lib.test();

     

        stage2 = new createjs.Stage(canvas2);

        stage2.addChild(exportRoot2);

        stage2.update();

     

        createjs.Ticker.setFPS(lib.properties.fps);

        createjs.Ticker.addEventListener("tick", stage2);

    }

    </script>

    </head>

     

    <body onload="init();" style="background-color:#D4D4D4">

        <canvas id="canvas2" width="200" height="200" style="background-color:#009933"></canvas>

    </body>

    </html>

     
    |
    Mark as:
  • kglad
    72,235 posts
    Jul 21, 2002
    Currently Being Moderated
    Feb 15, 2014 5:21 PM   in reply to GraphicsGeezer

    you're welcome.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points