Skip navigation
grandascreativos
Currently Being Moderated

Two animations on the same page html5 - toolkit for createjs

Apr 18, 2013 11:33 PM

Tags: #toolkit_for_createjs

Hello, I'm trying to do two animations on the same page and I can not, I'm a designer and I am looking for a guide to resolve this.

 

thanks.

 

This is my code:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CreateJS export from hola</title>

 

 

<script src="easeljs-0.6.0.min.js"></script>

<script src="tweenjs-0.4.0.min.js"></script>

<script src="movieclip-0.6.0.min.js"></script>

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

<script src="cloud gc.js"></script>

<script>

var canvas, stage, exportRoot;

 

 

function init() {

          canvas = document.getElementById("canvas");

 

          exportRoot = new lib.hola();

 

 

          stage = new createjs.Stage(canvas);

 

          stage.addChild(exportRoot);

          stage.update();

 

 

          createjs.Ticker.setFPS(30);

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

}

 

 

var canvas, stage, exportRoot;

 

 

function init() {

          canvas = document.getElementById("cloud");

 

          exportRoot = new lib.cloudgc();

 

 

          stage = new createjs.Stage(cloud);

 

          stage.addChild(exportRoot);

          stage.update();

 

 

          createjs.Ticker.setFPS(10);

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

}

 

 

</script>

 

 

</head>

 

 

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

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

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

</body>

</html>


 

 

 

 

 

 

 
Replies
  • Currently Being Moderated
    Apr 19, 2013 4:33 AM   in reply to grandascreativos

    You have two functions with the same name: init(). Only the first one will ever be called. You can fix this in two ways. You can change the name of the second function to something else, like "init2()". And then in the body tag add that function's name; <body onload="init(); init2();" style="background-color:#D4D4D4">

     

    A second way is to cut all of the content from the second init function and paste it into the first init function:

    function init() {

              canvas = document.getElementById("canvas");

     

              exportRoot = new lib.hola();

     

     

              stage = new createjs.Stage(canvas);

     

              stage.addChild(exportRoot);

              stage.update();

     

     

              createjs.Ticker.setFPS(30);

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

     

              canvas = document.getElementById("cloud");

     

              exportRoot = new lib.cloudgc();

     

     

              stage = new createjs.Stage(cloud);

     

              stage.addChild(exportRoot);

              stage.update();

     

     

              createjs.Ticker.setFPS(10);

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

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 31, 2013 7:33 PM   in reply to grandascreativos

    It seems like I am dealing with the same issue.  But simply adding the init2() isn't working...

     

    Here is my code.

     

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>CreateJS export from Boy_small</title>

     

     

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

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

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

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

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

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

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

     

     

     

     

    <script>

     

     

    var canvas, stage, exportRoot;

     

     

    function init() {

              canvas = document.getElementById("sun");

              images = images||{};

     

     

              var manifest = [

                        {src:"images/Sun20000021.png", id:"Sun20000021"}

              ];

     

     

              var loader = new createjs.LoadQueue(false);

              loader.addEventListener("fileload", handleFileLoad);

              loader.addEventListener("complete", handleComplete);

              loader.loadManifest(manifest);

    }

     

     

    function handleFileLoad(evt) {

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

    }

     

     

    function handleComplete() {

              exportRoot = new lib.SUN_MOVING();

     

     

              stage = new createjs.Stage(sun);

              stage.addChild(exportRoot);

              stage.update();

     

     

              createjs.Ticker.setFPS(24);

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

    }

     

     

    function init2() {

              canvas = document.getElementById("canvas");

              images = images||{};

     

     

              var manifest = [

                        {src:"sounds/RelaxationSoothingSoundsofNaturewav.mp3", id:"RelaxationSoothingSoundsofNaturewav"}

              ];

     

     

              var loader = new createjs.LoadQueue(false);

              loader.installPlugin(createjs.Sound);

              loader.addEventListener("fileload", handleFileLoad);

              loader.addEventListener("complete", handleComplete);

              loader.loadManifest(manifest);

    }

     

     

    function handleFileLoad(evt) {

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

    }

     

     

    function handleComplete() {

              exportRoot = new lib.Boy_small();

     

     

              stage = new createjs.Stage(canvas);

              stage.addChild(exportRoot);

              stage.update();

     

     

              createjs.Ticker.setFPS(24);

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

    }

     

     

    function playSound(id, loop) {

              createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

    }

     

     

     

     

     

     

    </script>

     

     

     

     

    </head>

     

     

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

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

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

    </body>

    </html>

     

     

    Any and all help would be greatly appreciated!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2013 7:32 AM   in reply to Will at RR

    You have two "handleFileLoad()" and two "handleComplete()" functions. Try renaming the second set and changing the names in the eventListeners that call them.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2013 9:12 AM   in reply to Rob Dillon

    Thank you man! That did it.  Thank you for getting me back on track!

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2013 9:37 AM   in reply to Will at RR

    Hey... You helped me before. Which I thank you for!  I am now trying to load a different js and I'm running into issues.  My sun canvas will only partially load.  It won't load it's image files.... 

     

    This is my code

     

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

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

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

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

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

     

     

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

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

     

     

     

     

     

     

    <script>

     

     

    var canvas, stage, exportRoot;

     

     

    function init() {

              canvas = document.getElementById("sun");

              images = images||{};

     

     

              var manifest = [

                        {src:"images/Sun20000021.png", id:"Sun20000021"}

              ];

     

     

              var loader = new createjs.LoadQueue(false);

              loader.addEventListener("fileload", handleFileLoad2);

              loader.addEventListener("complete", handleComplete2);

              loader.loadManifest(manifest);

    }

     

     

    function handleFileLoad2(evt) {

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

    }

     

     

    function handleComplete2() {

              exportRoot = new lib.SUN_MOVING();

     

     

              stage = new createjs.Stage(sun);

              stage.addChild(exportRoot);

              stage.update();

     

     

              createjs.Ticker.setFPS(24);

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

    }

     

     

     

     

    function init2() {

              createjs.MotionGuidePlugin.install();

     

     

              canvas = document.getElementById("canvas");

              exportRoot2 = new lib.Orange_shorts_wc();

     

     

              stage = new createjs.Stage(canvas);

              stage.addChild(exportRoot2);

              stage.update();

     

     

              createjs.Ticker.setFPS(24);

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

    }

    </script>

     

    Any help much appreciated.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2013 9:36 AM   in reply to Will at RR

    Here are comments on the code that you showed. There may be other problems.

     

     

    // these five lines are calling some createjs libraries that will be used by your code

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

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

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

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

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

    // these two lines are calling two javascript libraries that were written by Flash

    // these two files should be in the same folder as the document that contains the code below

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

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

     

     

    <script>

    // this line declares some global variables, you probably need to add exportRoot2

    var canvas, stage, exportRoot;

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)