0 Replies Latest reply on Oct 20, 2015 10:33 AM by BryanWangs

    Help! I'm a Edge Animate novice. How do I put images on the "backside" of cards in a random order?

    BryanWangs Level 1

      I am attempting to use the very well written Floral MatchMaker example from a few years ago to create my own Edge Animate matching-memory) game. But instead of matching colors, I want to use images. In the original, the author had an array of flowers (0 through 24) and an array of 12 pastel hexadecimal colors (2 instances of each color so that they can be matched). In my project, I'm attempting to swap out the colors for images.  I've uploaded all the images I want to use into my Edge Animate projectin the Images file and I have created a symbol named "Card" that I have placed 24 times on my stage so that I now have 24 instances of the "Card" symbol, each named "Card1", "Card2" "Card3" etc... I have also manipulated the code from the Floral MatchMaker example to change the arrays ("Card1", "Card2", "Card3"... instead of "flower1", "flower2", "flower3"...). I have changed the color array to instead list my images sources ("url(images/Image1.png)", "url(images/Image2.png)", "url(images/Image3.png)"... instead of ("#ed451d", "bc95e3", a0b2ac"...). I have changed all the references of "color" to "image" and attempted to have the images show on the backside of my Card symbols, but no images show up. I have a feeling that I am missing something very basic/important from the original project (perhaps how the author placed the gameBoard on the stage) but I don't know very much about how Edge Animate actually works so I'm confused. What am I doing wrong?

       

      I've included the "full code" from the Code window in my Edge Animate project below to allow for review and error-checking. I've also included (below my code) the "full code" of the original Floral MatchMaker project that I am using as a template. All credit to the original author of that project. She is a genius that I am failing miserably to attempt to follow. Any help would be greatly appreciated!!!!

       

       

      [The "full code" from my Edge Animate project]

       

       

      /***********************

      * Adobe Edge Animate Composition Actions

      *

      * Edit this file with caution, being careful to preserve

      * function signatures and comments starting with 'Edge' to maintain the

      * ability to interact with these actions from within Adobe Edge Animate

      *

      ***********************/

      (function($, Edge, compId){

      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

       

       

         //Edge symbol: 'stage'

         (function(symbolName) {

          

           

            Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

               // insert code to be run when the symbol is created here

             

               // insert code to be run when the composition is fully loaded here

       

             

               // all of the cards to put the images on in an array

               var boardArray = ["Card1", "Card2", "Card3", "Card4",

                "Card5", "Card6", "Card7", "Card8", "Card9", "Card10",

                "Card11", "Card12", "Card13", "Card14", "Card15", "Card16",

                "Card17", "Card18", "Card19", "Card20", "Card21",

                "Card22", "Card23", "Card24"];

             

               // Images

               var imageArray  = ["url(images/CheckBattery.png)", "url(images/DoorAjar.png)",

               "url(images/CheckEngine.png)", "url(images/ParkingBrake.png)", "url(images/LowFuel.png)",

               "url(images/CheckTemp.png)", "url(images/LowTirePressure.png)", "url(images/CheckBrakes.png)",

               "url(images/SeatbeltWarning.png)", "url(images/ABSWarning.png)", "url(images/AirbagWarning.png)",

               "url(images/CheckOil.png)"];

             

               function setUpBoard(currSym) {

                  /*

                  This private method randomly shuffles the board so that you get a different

                  board each time.  We use the JavaScript equivalent of an associative array to

                  keep track of how many of each image we have.  Since this is a match-two game,

                  the max is set to 2.

                  */

             

                // reset score

                currSym.setVariable("matched", 0);

             

                // create 24 matches - 12 images

                var matchArray = new Array();

                var imageHashObject = new Object();

                // initialization of the imageHashObject's hash

                for (var i=0; i < 12; i++) {

                imageHashObject[i.toString()] = 0;

                }

             

                // create the list of objects - max 2 matches per image

                while(matchArray.length < 24) {

                var randNum = Math.floor(Math.random() * 100) % 12;

                if (imageHashObject[randNum.toString()] < 2) {

                imageHashObject[randNum.toString()] += 1;

                matchArray.push(randNum);

                }

                else {

                continue;

                }

                }

                return matchArray;

               }

             

               function imagizeBoard(currSym, randomImages) {

                for (var i=0; i<24; i++) {

                // each card knows what its image is

                var currImage = randomImages[i];

                currSym.getSymbol(boardArray[i]).setVariable("image", imageArray[currImage]);

                // set the image of the background

                currSym.getSymbol(boardArray[i]).$("CardBox").css("background-image", imageArray[currImage]);

                }

               }

             

       

       

            });

            //Edge binding end

       

       

         })("stage");

         //Edge symbol end:'stage'

       

       

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

       

         //Edge symbol: 'Card'

         (function(symbolName) { 

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2300, function(sym, e) {

               // insert code here

               sym.stop();

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 750, function(sym, e) {

               // insert code here

               sym.stop();

       

       

            });

            //Edge binding end

       

       

            Symbol.bindElementAction(compId, symbolName, "${Group}", "click", function(sym, e) {

               // insert code for mouse click here

               sym.play("Flip");

       

       

            });

            //Edge binding end

       

       

         })("Card");

         //Edge symbol end:'Card'

       

       

      })(jQuery, AdobeEdge, "EDGE-8115927");

       

      ------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------ ------------------------

       

      [End of "full code" from my Edge Animate project]

       

       

       

      [Here is the "full code" of the original Floral MatchMaker project that I am using as a template]

       

       

      /***********************

      * Adobe Edge Animate Composition Actions

      *

      * Edit this file with caution, being careful to preserve

      * function signatures and comments starting with 'Edge' to maintain the

      * ability to interact with these actions from within Adobe Edge Animate

      *

      ***********************/

      (function($, Edge, compId){

      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

       

       

         //Edge symbol: 'stage'

         (function(symbolName) {

          

          

            Symbol.bindElementAction(compId, symbolName, "${playAgainText}", "click", function(sym, e) {

               /*

                Rebooting the game board.  We delete the existing board symbol instance

                and dynamically create and place a new board symbol.

               */

             

               sym.stop("gameStart");

               var existingBoard = sym.getVariable("gameBoard");

               existingBoard.deleteSymbol();

               var newBoard = sym.createChildSymbol("gameBoard", "Stage", 1);

               newBoard.getSymbolElement().css("left", 38);

               newBoard.getSymbolElement().css("top", 110);

               sym.setVariable("gameBoard", newBoard);

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 4750, function(sym, e) {

               sym.stop();

       

       

            });

            //Edge binding end

       

       

            Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

               /*

                Dynamically create the board and attach it to the Stage.  It has an index

                in the DOM that causes it to hide behind the "background" symbol instance if

                the iframe is collapsed.

               */

             

               var gameBoard = sym.createChildSymbol("gameBoard", "Stage", 1);

               gameBoard.getSymbolElement().css("left", 38);

               gameBoard.getSymbolElement().css("top", 110);

               sym.setVariable("gameBoard", gameBoard);

       

       

            });

            //Edge binding end

       

       

         })("stage");

         //Edge symbol end:'stage'

       

       

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

       

         //Edge symbol: 'cascadingFlowers'

         (function(symbolName) { 

       

            Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

               var flowerNames = ["falling0", "falling1", "falling2", "falling3", "falling4",

                "falling5", "falling6"];

             

               for (var i=0; i < 7; i++) {

                /*

                 Each of the flower colors are randomly generated.  The flower asset (transparent PNG)

                 has a yellow center, a transparent flower, and a slightly darker circle with an opacity

                 set.  Behind this asset, we have an Ellipse called "background".  Changing the color

                 of this div changes the color of the flower.

                */

                var hue = 'rgb(' + (Math.floor((256)*Math.random()) + 50) + ',' + (Math.floor((256)*Math.random()) + 50) + ',' +  (Math.floor((256)*Math.random()) + 50) + ')';

                sym.getSymbol(flowerNames[i]).getSymbol("flower").getSymbol("simpleFlower").$("background ").css("background-color", hue);

               }

             

             

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 750, function(sym, e) {

               sym.getSymbol("falling1").play("center");

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1250, function(sym, e) {

               sym.getSymbol("falling6").play("center");

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1750, function(sym, e) {

               sym.getSymbol("falling4").play("center");

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2250, function(sym, e) {

               sym.getSymbol("falling2").play("center");

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2750, function(sym, e) {

               sym.getSymbol("falling0").play("center");

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3250, function(sym, e) {

               sym.getSymbol("falling5").play("center");

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3750, function(sym, e) {

               sym.getSymbol("falling3").play("center");

       

       

            });

            //Edge binding end

       

       

         })("cascadingFlowers");

         //Edge symbol end:'cascadingFlowers'

       

       

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

       

         //Edge symbol: 'fallingFlower'

         (function(symbolName) { 

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2043, function(sym, e) {

               sym.playReverse();

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 943, function(sym, e) {

               sym.play();

       

       

            });

            //Edge binding end

       

       

         })("swingingFlower");

         //Edge symbol end:'swingingFlower'

       

       

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

       

         //Edge symbol: 'flower'

         (function(symbolName) { 

       

         })("flower");

         //Edge symbol end:'flower'

       

       

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

       

         //Edge symbol: 'decorateTheOutdoorsText'

         (function(symbolName) { 

       

         })("decorateTheOutdoorsText");

         //Edge symbol end:'decorateTheOutdoorsText'

       

       

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

       

         //Edge symbol: 'background'

         (function(symbolName) { 

       

         })("background");

         //Edge symbol end:'background'

       

       

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

       

         //Edge symbol: 'simpleFlower'

         (function(symbolName) { 

       

         })("simpleFlower");

         //Edge symbol end:'simpleFlower'

       

         //Edge symbol: 'gameBoard'

         (function(symbolName) { 

            // all of the flowers to colorize in an array

            var boardArray = ["flower0", "flower1", "flower2", "flower3", "flower4",

            "flower5", "flower6", "flower7", "flower8", "flower9", "flower10",

            "flower11", "flower13", "flower14", "flower15", "flower16",

            "flower17", "flower18", "flower19", "flower20", "flower21",

            "flower22", "flower23", "flower24" ];

          

            // colors 0-11, preselected pastel colors

            var colorArray  = ["#fd5e54","#49823d", "#ca542d", "#e90c4f",

            "#274947", "#c9ebb4", "#95e80f", "#8e799f",

            "#3688c3", "#c64f34", "#e21889", "#9b2654"];

          

            function setUpBoard(currSym) {

               /*

                This private method randomly shuffles the board so that you get a different

                board each time.  We use the JavaScript equivalent of an associative array to

                keep track of how many of each color we have.  Since this is a match-two game,

                the max is set to 2.

               */

          

            // reset score

            currSym.setVariable("matched", 0);

          

            // create 24 matches - 12 colors

            var matchArray = new Array();

            var colorHashObject = new Object();

            // initialization of the colorHashObject's hash

            for (var i=0; i < 12; i++) {

            colorHashObject[i.toString()] = 0;

            }

          

            // create the list of objects - max 2 matches per color

            while(matchArray.length < 24) {

            var randNum = Math.floor(Math.random() * 100) % 12;

            if (colorHashObject[randNum.toString()] < 2) {

            colorHashObject[randNum.toString()] += 1;

            matchArray.push(randNum);

            }

            else {

            continue;

            }

            }

            return matchArray;

            }

          

            function colorizeBoard(currSym, randomColors) {

            for (var i=0; i<24; i++) {

            // each flower knows what its color is

            var currColor = randomColors[i];

            currSym.getSymbol(boardArray[i]).setVariable("color", colorArray[currColor]);

            // set the color of the background

            currSym.getSymbol(boardArray[i]).$("background").css("background-color", colorArray[currColor]);

            }

            }

          

            function newBoard(mySym) {

               var randomColors = setUpBoard(mySym);

            colorizeBoard(mySym, randomColors);

            }

          

            Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

            // IMPORTANT: click on "gameBoard" in the code panel's tree to see the symbol-level

            // functions that randomly generate the board.

            newBoard(sym);

          

            // 5x5 board means that there's always one left out in match-two game

            sym.getSymbol("flower12").$("background").css("background-color","#ffffff");

          

            // initialize the first click

            sym.setVariable("firstClickObject", null);

          

            });

            //Edge binding end

       

       

         })("gameBoard");

         //Edge symbol end:'gameBoard'

       

       

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

       

         //Edge symbol: 'simpleFlower_1'

         (function(symbolName) { 

          

            Symbol.bindElementAction(compId, symbolName, "${question}", "click", function(sym, e) {

               sym.play("reveal");

       

       

            });

            //Edge binding end

          

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3111, function(sym, e) {

               sym.stop();

          

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 696, function(sym, e) {

               sym.stop();

               /*

                All of the logic for matching happens in this closure.  Since each flower knows

                its own color, we can compare them and decide whether or not they're a match.

                We use a single variable on the gameBoard level to remember the first object we've

                clicked as well as whether or not we've clicked on anything.

               */

             

               // if this is the first click, register that this was the first clicked object

               var clicked = sym.getParentSymbol().getVariable("firstClickObject");

               if (clicked == null) {

                sym.getParentSymbol().setVariable("firstClickObject", sym);

               }

               else {

                // if this is the second click, do the comparison, and if it's the same, animate

                var clickedColor = clicked.getVariable("color");

                var currColor = sym.getVariable("color");

                if (clickedColor == currColor) {

                clicked.play("spin");

                sym.play("spin");

                // have we won?

                var matched = sym.getParentSymbol().getVariable("matched");

                if (matched >= 11) {

                sym.getComposition().getStage().play("gameWin");

                }

                else {

                matched++;

                sym.getParentSymbol().setVariable("matched", matched);

                }

             

                }

                else {

                // no match

                sym.play("flipback");

                clicked.play("flipback");

                }

                // either way, we clear the first clicked

                sym.getParentSymbol().setVariable("firstClickObject", null);

               }

             

       

       

            });

            //Edge binding end

       

       

            Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1928, function(sym, e) {

               sym.stop();

       

       

            });

            //Edge binding end

       

       

            })("gameFlower");

         //Edge symbol end:'gameFlower'

       

       

      })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-38094116");