Help! I'm a Edge Animate novice. How do I put images on the "backside" of cards in a random order?
i attempting use written floral matchmaker example few years ago create own edge animate matching-memory) game. instead of matching colors, want use images. in original, author had array of flowers (0 through 24) , array of 12 pastel hexadecimal colors (2 instances of each color can matched). in project, i'm attempting swap out colors images. i've uploaded images want use edge animate projectin images file , have created symbol named "card" have placed 24 times on stage have 24 instances of "card" symbol, each named "card1", "card2" "card3" etc... have manipulated code floral matchmaker example change arrays ("card1", "card2", "card3"... instead of "flower1", "flower2", "flower3"...). have changed color array instead list images sources ("url(images/image1.png)", "url(images/image2.png)", "url(images/image3.png)"... instead of ("#ed451d", "bc95e3", a0b2ac"...). have changed references of "color" "image" , attempted have images show on backside of card symbols, no images show up. have feeling missing basic/important original project (perhaps how author placed gameboard on stage) don't know how edge animate works i'm confused. doing wrong?
i've included "full code" code window in edge animate project below allow review , error-checking. i've included (below code) "full code" of original floral matchmaker project using template. credit original author of project. genius failing miserably attempt follow. appreciated!!!!
[the "full code" edge animate project]
/***********************
* adobe edge animate composition actions
*
* edit file caution, being careful preserve
* function signatures , comments starting 'edge' maintain the
* ability interact these actions within adobe edge animate
*
***********************/
(function($, edge, compid){
var composition = edge.composition, symbol = edge.symbol; // aliases commonly used edge classes
//edge symbol: 'stage'
(function(symbolname) {
symbol.bindsymbolaction(compid, symbolname, "creationcomplete", function(sym, e) {
// insert code run when symbol created here
// insert code run when composition loaded here
// of cards put images on in 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) {
/*
private method randomly shuffles board different
board each time. use javascript equivalent of associative array to
keep track of how many of each image have. since match-two game,
max set 2.
*/
// reset score
currsym.setvariable("matched", 0);
// create 24 matches - 12 images
var matcharray = new array();
var imagehashobject = new object();
// initialization of imagehashobject's hash
(var i=0; < 12; i++) {
imagehashobject[i.tostring()] = 0;
}
// create 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) {
(var i=0; i<24; i++) {
// each card knows image is
var currimage = randomimages[i];
currsym.getsymbol(boardarray[i]).setvariable("image", imagearray[currimage]);
// set image of 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 mouse click here
sym.play("flip");
});
//edge binding end
})("card");
//edge symbol end:'card'
})(jquery, adobeedge, "edge-8115927");
------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------ ------------------------
[end of "full code" edge animate project]
[here "full code" of original floral matchmaker project using template]
/***********************
* adobe edge animate composition actions
*
* edit file caution, being careful preserve
* function signatures , comments starting 'edge' maintain the
* ability interact these actions within adobe edge animate
*
***********************/
(function($, edge, compid){
var composition = edge.composition, symbol = edge.symbol; // aliases commonly used edge classes
//edge symbol: 'stage'
(function(symbolname) {
symbol.bindelementaction(compid, symbolname, "${playagaintext}", "click", function(sym, e) {
/*
rebooting game board. delete existing board symbol instance
, dynamically create , place 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 board , attach stage. has index
in dom causes hide behind "background" symbol instance if
iframe 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"];
(var i=0; < 7; i++) {
/*
each of flower colors randomly generated. flower asset (transparent png)
has yellow center, transparent flower, , darker circle opacity
set. behind asset, have ellipse called "background". changing color
of div changes color of 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) {
// of flowers colorize in 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) {
/*
private method randomly shuffles board different
board each time. use javascript equivalent of associative array to
keep track of how many of each color have. since match-two game,
max set 2.
*/
// reset score
currsym.setvariable("matched", 0);
// create 24 matches - 12 colors
var matcharray = new array();
var colorhashobject = new object();
// initialization of colorhashobject's hash
(var i=0; < 12; i++) {
colorhashobject[i.tostring()] = 0;
}
// create 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) {
(var i=0; i<24; i++) {
// each flower knows color is
var currcolor = randomcolors[i];
currsym.getsymbol(boardarray[i]).setvariable("color", colorarray[currcolor]);
// set color of 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 code panel's tree see symbol-level
// functions randomly generate board.
newboard(sym);
// 5x5 board means there's 1 left out in match-two game
sym.getsymbol("flower12").$("background").css("background-color","#ffffff");
// initialize 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();
/*
of logic matching happens in closure. since each flower knows
own color, can compare them , decide whether or not they're match.
use single variable on gameboard level remember first object we've
clicked whether or not we've clicked on anything.
*/
// if first click, register first clicked object
var clicked = sym.getparentsymbol().getvariable("firstclickobject");
if (clicked == null) {
sym.getparentsymbol().setvariable("firstclickobject", sym);
}
else {
// if second click, comparison, , if it's same, animate
var clickedcolor = clicked.getvariable("color");
var currcolor = sym.getvariable("color");
if (clickedcolor == currcolor) {
clicked.play("spin");
sym.play("spin");
// have 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, clear 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");
More discussions in Edge Animate CC
adobe
Comments
Post a Comment