2 Replies Latest reply on Aug 30, 2013 10:47 AM by Will at RR

    How to make two create.js files work on same page?

    Eva131212

      Can someone please help me?

      I have two flash banners that are different and are placed in separate divs on my webpage in dreamweaver.

      All was fine while they were .swt files except they were not visible on cellphones and tablets.

      So I converted them with create.js toolkit but only one of the banners show. I know I have to modify the code

      but I don´t know how. Can anyone help me please?

      Here is my code for the page:

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>Modedrive-Från vardag till fest-för kvinnor i alla åldrar</title>

      <link href="Styles/Modedrive_cs5.css" rel="stylesheet" type="text/css" />

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

       

       

       

       

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

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

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

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

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

      <script src="Modedrive-film7.js"></script>

       

       

        <script>

      var canvas, stage, exportRoot;

       

       

      function init() {

                canvas = document.getElementById("canvas1");

                images = images||{};

       

       

                var manifest = [

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

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

                          {src:"images/Gottnytt.jpg", id:"Gottnytt"},

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

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

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

                ];

       

       

                var loader = new createjs.PreloadJS(false);

                loader.onFileLoad = handleFileLoad;

                loader.onComplete = handleComplete;

                loader.loadManifest(manifest);

      }

       

       

      function handleFileLoad(o) {

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

      }

       

       

      function handleComplete() {

                exportRoot = new lib.Julfilm();

       

       

                stage = new createjs.Stage(canvas);

                stage.addChild(exportRoot);

                stage.update();

       

       

                createjs.Ticker.setFPS(30);

                createjs.Ticker.addListener(stage);

      }

      </script>

       

       

        <script>

      var canvas, stage, exportRoot;

       

       

      function init() {

                canvas = document.getElementById("canvas2");

                images = images||{};

       

       

                var manifest = [

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

                          {src:"images/Bettykofta.jpg", id:"Bettykofta"},

                          {src:"images/Byxdress.jpg", id:"Byxdress"},

                          {src:"images/Kofta.jpg", id:"Kofta"},

                          {src:"images/leopkavajred.jpg", id:"leopkavajred"},

                          {src:"images/Leopardjacka.jpg", id:"Leopardjacka"},

                          {src:"images/liladress.jpg", id:"liladress"},

                          {src:"images/Longdress.jpg", id:"Longdress"},

       

                          {src:"images/Fur.jpg", id:"Fur"},

                          {src:"images/Redzebrakofta.jpg", id:"Redzebrakofta"},

                          {src:"images/Skinnjacka.jpg", id:"Skinnjacka"},

                          {src:"images/vitsvponcho.jpg", id:"vitsvponcho"}

                          ];

       

       

                var loader = new createjs.PreloadJS(false);

                loader.onFileLoad = handleFileLoad;

                loader.onComplete = handleComplete;

                loader.loadManifest(manifest);

      }

       

       

      function handleFileLoad(o) {

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

      }

       

       

      function handleComplete() {

                exportRoot = new lib.Modedrivefilm7();

       

       

                stage = new createjs.Stage(canvas);

                stage.addChild(exportRoot);

                stage.update();

       

       

                createjs.Ticker.setFPS(30);

                createjs.Ticker.addListener(stage);

      }

      </script>

       

       

      <style type="text/css">

      body {

                background-image: url(images/mode_bakg.jpg);

      }

      </style>

      </head>

       

       

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

       

       

      <div id="container">

        <div id="logo"><img src="images/Modedrive-logo.png" width="900" height="163" alt="Modedrive" />

        <p>Fr&aring;n vardag till fest f&ouml;r kvinnor i alla &aring;ldrar.</p></div>

        <ul id="MenuBar1" class="MenuBarHorizontal">

          <li><a href="#">Hem</a>    </li>

          <li><a href="historik.html">Historik</a></li>

          <li><a class="MenuBarItemSubmenu" href="designs.html">M&auml;rken</a>

            <ul>

              <li><a href="designs.html">V&aring;ra M&auml;rken</a></li>

              <li><a class="MenuBarItemSubmenu" href="http://www.tee4twogolf.se">Vi st&ouml;djer</a>

                <ul>

                  <li><a href="http://www.tee4twogolf.se">Tee 4 Two</a></li>

                  <li><a href="team_tiara.html">Team Tiara</a></li>

                  <li><a href="xocai.html">Xo&ccedil;ai</a></li>

                </ul>

              </li>

            </ul>

          </li>

          <li><a href="aktuellt.html">Aktuellt</a></li>

          <li><a href="VIP.html">VIP Kundklubb</a></li>

          <li><a href="kontakt.html">Kontakta oss</a></li>

        </ul>

       

        <div id="main">

        <canvas id="canvas1" width="775" height="270" style="background-color:#000000"></canvas>

        </div>

       

        <div id="left_column"><h1>440 m&#178 med mode!</h1><p>Vi hj&auml;lper dig<br /> hitta r&auml;tt<br />bland s&auml;songens<br /> modenyheter<br />f&ouml;r kvinnor<br /> i alla &aring;ldrar<br />fr&aring;n vardag<br /> till fest.</p><h2>V&auml;lkommen in!</h2></div>

       

        <div id="center_column">

      <canvas id="canvas2" width="420" height="570" style="background-color:#000000"></canvas>

       

       

        </div>

        <div id="right_column"><h1>Just nu...</h1>

        <p><h1>K&ouml;p tv&aring;<br /> plagg</h1><h2>betala</h2><h1> 1 krona</h1><h2>f&ouml;r det billigaste!<br /><br />Nu har vi <br />advents&ouml;ppet<br />p&aring; s&ouml;ndagar mellan<br />12-16:00 </h2>

        </div>

       

        <div id="footer"><p><img src="images/Tbana-liten.png" width="30" height="30" alt="Tbana symbol" />Odenplan, Karlbergsv&auml;gen 16, 11327 Stockholm. Tel: o8-343838<br />&Ouml;ppet tider: Vardagar 10-19:00, L&ouml;rdagar 10-16:00, S&ouml;ndagar 12-16:00.</p></div>

      </div>

       

       

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

       

       

      </script>

      </body>

      </html>