4 Replies Latest reply on Jan 13, 2016 4:03 PM by bumples5

    how to upload html5 canvas into my program

    bumples5 Level 1

      I have a magazine and I need to get the html5 canvas into my file issues where I load each page under a javascript file.  The javascript opens each page and I have added flash programs with the old formula.  Not every page will have a canvas file or interaction. Thus I need to load the canvas files individually in the javascript file. I don't know how to do that and have tried several methods. 

      I hope you can help me.

      Jennifer

        • 1. Re: how to upload html5 canvas into my program
          rosebudd Level 3

          Not enough info. Do you have a link to the page you want to put your Canvas div and the related files (images and javascript files)

          • 2. Re: how to upload html5 canvas into my program
            bumples5 Level 1

            Below is enclosed the file that opens the pages of the mag. I took most of it out to just give you an idea.  I was thinking of putting the js style sheets on the masterpage. I don't want the html to load the pages because the program, many javascripts opens the pages and also gives me the animation capabilites like drag and drop. Also there are special javascript programs for some of the games like the puzzle and lotto. There is a movie javascript that does a lot of the animations.

            I was thinking of just grabbing the sprite sheets and rewritting the javascript to put it up on the site. But if there is a way to load thses pages with the canvas I would lke it. I know the future is canvas. 

            You can go to bumples.com to see the magazine and look at the sample issues. 

            Thank you very much for looking at this. I am not a programmer but trying to learn very fast. Jen

            Here is the javascript file:

            ////////////////////////////////////////////////////////////////////////////////////////// ////////

            // Data

            ////////////////////////////////////////////////////////////////////////////////////////// ////////

            var questions   = new Array();

            questions.push({qu:"wimbc-q1a1", rw:false, an:"<span style=\"color: #ff0000;\">Yipes, wrong button. <br/>Try again.</span>"});

            questions.push({qu:"wimbc-q1a2", rw:true, an:"<span style=\"color: #339900; font-size: 18px;\">Good work! <br/>Keep going...</span>"});

            questions.push({qu:"wimbc-q1a3", rw:false, an:"<span style=\"color: #ff0000;\">Not under your bed! <br/>Try again...</span>"});

             

            ////////////////////////////////////////////////////////////////////////////////////////// ////////

            // Functions

            ////////////////////////////////////////////////////////////////////////////////////////// ////////

            // ========================================================================================= ======

            // User Feedback

            // ========================================================================================= ======

            Issue_PuzzleDone = function(puzzle)

            {

                var balloon = "";

               

                switch(puzzle)

                {

                    case "DavidHousePuzzle":

                        balloon = "<span style=\"color: #000000; font-size: 20px;\">You Solved David's Junk Yard Puzzle!!!</span>";

                        break;       

                  

                DisplayTalkingBalloon(balloon, 7000, "PrzGre");

            };

                   

            // ========================================================================================= ======

            // Page 14 - David's House Puzzle

            // ========================================================================================= ======

             

            var davidHousePuzzleContainer = null;

            var bmDavidHousePuzzle = null;

             

            // ========================================================================================= ======

            // Page 23 - Baseball Lotto

            // ========================================================================================= ======

            var baseballLottoContainer = null;

            var bmBaseballLotto = null;

            // ========================================================================================= ======

            // Load

            // ========================================================================================= ======

            function BmOnLoad()

            {

                // ========================================================================================= ======

                // settings

                // ========================================================================================= ======

             

              bmPageWidth = 578;

              bmPageHeight = 680;

              bmNextPage = 0;

             

              for(var i = 1; i <= 44; i++)

                 bmPages[i] = "Issue010/Pages/page-" + ((i < 10) ? ("0" + i) : (i)) + ".jpg";

             

                BmInitialize();

                     

              // ========================================================================================= ======

              // Index

              // ========================================================================================= ======

             

                AddIndexToJumpTo( 1,"Cover");

              AddIndexToJumpTo( 2,"Contents");

                AddIndexToJumpTo( 5,"Special New Magazine Subscriptions");

              // ========================================================================================= ======

               ========================================================================================== =====

              // Page 10 - Where is Miss Bumples Cane? Questions

                // ========================================================================================= ======

             

              InsertDinamicDiv(10, "wimbc-q1a1", "", 65, 113, 25, 27, "", "", "", "");

              InsertDinamicDiv(10, "wimbc-q1a2", "", 65, 156, 25, 27, "", "", "", "");

              InsertDinamicDiv(10, "wimbc-q1a3", "", 65, 177, 25, 27, "", "", "", "");

                InsertDinamicDivArea(10, "", "", 62, 120, 251, 161, "Issue_VerifyQuestion('wimbc-q1a1')", "", "", "");

                InsertDinamicDivArea(10, "", "", 62, 162, 226, 185, "Issue_VerifyQuestion('wimbc-q1a2')", "", "", "");

                InsertDinamicDivArea(10, "", "", 62, 186, 236, 206, "Issue_VerifyQuestion('wimbc-q1a3')", "", "", "");

                  // ========================================================================================= ======

              // Page 14 - David's House Puzzle

                // ========================================================================================= ======

             

              davidHousePuzzleContainer = InsertDinamicDivArea(14, "davidHousePuzzleContainer", "", 25, 75, 553, 650, "", "", "", "");

              bmDavidHousePuzzle = new Puzzle(davidHousePuzzleContainer, 5, 5, "DavidHousePuzzle", 100, 100, 10, 200);

              InsertDinamicDivArea(14, "", "", 35, 30, 58, 75, "bmDavidHousePuzzle.Shuffle()", "", "", "");

                      // ========================================================================================= ======

                // Page 23 - Baseball Lotto

                // ========================================================================================= ======

              baseballLottoContainer = InsertDinamicDiv(23, "baseballLottoContainer", "", 58, 236, 464, 386, "", "", "", "");

              bmBaseballLotto = new MemoryGame(baseballLottoContainer, 6, 5, "BaseballLotto", 74, 74, 4, 200);

                  

            ========================================================================================= ======

              // Page 31 - Name that Tortoise Game

                // ========================================================================================= ======

                  

              nameTortoiseContainer = InsertDinamicDivArea(31, "nameTortoiseContainer", "", 0, 0, 578, 680, "", "", "", "");

              nameTortoiseGame = new MoveObjectTo(nameTortoiseContainer, 200);

             

              BmInsertTag( 64, 544, 163, 287);

              BmInsertTag(129, 544, 292, 459);

              BmInsertTag(194, 544,  34, 201);

               

              // ========================================================================================= ======

              // Start

              // ========================================================================================= ======

             

              BmStart();

            }

            • 3. Re: how to upload html5 canvas into my program
              rosebudd Level 3

              To be perfectly honest, if you are not a programmer, you are going to probably want to go back to whoever built this site for you.

               

              Or you would probably want to start over, as it is not responsive.

               

              But if you did want to put a Flash CC canvas published animation to replace something else on the page, simply put your

               

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

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

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

              <script src="libs/preloadjs-0.6.1.min.js"></script>

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

               

              <script>

              var canvas, stage, exportRoot;

               

               

              function init() {

                canvas = document.getElementById("canvas");

                images = images||{};

               

               

                var loader = new createjs.LoadQueue(false);

                loader.addEventListener("fileload", handleFileLoad);

                loader.addEventListener("complete", handleComplete);

                loader.loadManifest(lib.properties.manifest);

              }

               

               

              function handleFileLoad(evt) {

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

              }

               

               

              function handleComplete(evt) {

                exportRoot = new lib._myFile_Canvas();

               

               

                stage = new createjs.Stage(canvas);

                stage.addChild(exportRoot);

                stage.update();

                stage.enableMouseOver();

               

               

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

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

              }

               

              in the head

               

              and your

               

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

              inside an existing div on the page.

              • 4. Re: how to upload html5 canvas into my program
                bumples5 Level 1

                Thank you for your help. The programmer has moved on and built it 5 years ago. I will try that but think that I need to build the animations in jquery and javascript. The javascript loads the page so don't want to confuse it with canvas. 

                Again thank you,

                Jennifer