I am attempting to iterate through an array of 3 images and add them to the stage using easelJS. I also need to position them accordingly. However, when I try to access the images in the array, I encounter an error stating that I cannot set the x property of undefined. Why is it that I am unable to access the x variable of the easeljs Bitmap?
function displayPosters() {
getPosters(); // Retrieve all images and assign them to designated array
console.log(frontPosters);
console.log(frontPosters.length);
if(currentCat == Category.HOME) { // Check if the current category is HOME
for(var i = 0; i < frontPosters.length; i++) { // Iterate through posters
frontPosters[i].x = 40; // Set x position for testing, which is where the error occurs
stage.addChild(frontPosters[i]); // Add poster to the stage
}
}
}
Below is the code responsible for loading and storing the images in the frontPosters arrray.
var frontPosters = new Array(3);
function getPosters() {
var games = new Image(); // Create 3 images
var apps = new Image();
var aboutme = new Image();
games.onload = function() { // Add image to frontImages array on load
var gamesPost = new createjs.Bitmap(games);
frontPosters[0] = gamesPost;
};
apps.onload = function() {
var appPost = new createjs.Bitmap(apps);
frontPosters[1] = appPost;
};
aboutme.onload = function() {
var amPost = new createjs.Bitmap(aboutme);
frontPosters[2] = amPost;
};
games.src = "images/assets/posters/games_poster.jpg";
apps.src = "images/assets/posters/apps_poster.jpg";
aboutme.src = "images/assets/posters/aboutme_poster.jpg";
}