Arranging layers with Dynamically Loaded Images

[link1155]

Hello! I was wondering if anyone had answers to how I can arrange for a text box or a button to be displayed on top of Dynamically Loaded Images?

This is the code that i am using to load the images from an external folder. Is there any way to arrange to the back of the stage so that I can have other objects shown on top of these images?? Help would be much appriciated ❤️

var image = new Image();

showProduct = function(imgPath)  {

// on load create a bitmap from the loaded image

image.onload = function() {

var img = new createjs.Bitmap(event.target);

// this helps resize picturess

img.scaleX = img.scaleY = 1;

//this controls positioning

img.x = stage.canvas.width / 2 - 280; //half width of pic

img.y = stage.canvas.height / 2 - 150; //half width of pic

stage.addChild(img);

stage.update();

}

image.src = imgPath;

}

showProduct("images/Siena1.jpg");

[kglad]

after your stage.addChild(img)

use:

stage.addChild(this.yourtextfield)

stage.addChild(this.yourbutton)

p.s. make sure 'this' is scoped correctly.

[ClayUUID]

Don't load your images directly into the stage. Load your images into a container movieclip on the stage.

[link1155]

how would i go about doing this? would i create a movieclip and then add the code from above in an action frame inside the movie clip?

[kglad]

use

img_parent.addChild(img)

instead of

stage.addChild(img)

[link1155]

so i have updated the code to the following: however now the images are not showing up. What I am trying to do is Dynamically load images to be a 360 degree viewer and have these buttons mouseover and show dialog of certain aspects of the image. I just cant get the layering right :<

var image = new Image();

showProduct = function(imgPath)  {

// on load create a bitmap from the loaded image

image.onload = function() {

var img = new createjs.Bitmap(event.target);

// this helps resize picturess

img.scaleX = img.scaleY = 1;

//this controls positioning

img.x = stage.canvas.width / 2 - 280; //half width of pic

img.y = stage.canvas.height / 2 - 150; //half width of pic

mc_container.addChild(img);

//stage.addChild(this.mc_bubble);

//stage.addChild(this.btn_marker1);

stage.update();

}

image.src = imgPath;

}

showProduct("images/Siena1.jpg");

[kglad · Accepted solution]

either use:

var image = new Image();

var tl = this;

showProduct = function(imgPath)  {

// on load create a bitmap from the loaded image

image.onload = function() {

var img = new createjs.Bitmap(event.target);

// this helps resize picturess

img.scaleX = img.scaleY = 1;

//this controls positioning

img.x = stage.canvas.width / 2 - 280; //half width of pic

img.y = stage.canvas.height / 2 - 150; //half width of pic

stage.addChild(img);

stage.addChild(tl.mc_bubble);

stage.addChild(tl.btn_marker1);

stage.update();

}

image.src = imgPath;

}

showProduct("images/Siena1.jpg");

/////////////////////////////////////////////////////// or //////////////////////////////////////////////////////

var image = new Image();

var tl = this;

showProduct = function(imgPath)  {

// on load create a bitmap from the loaded image

image.onload = function() {

var img = new createjs.Bitmap(event.target);

// this helps resize picturess

img.scaleX = img.scaleY = 1;

//this controls positioning

img.x = stage.canvas.width / 2 - 280; //half width of pic

img.y = stage.canvas.height / 2 - 150; //half width of pic

tl.mc_container.addChild(img);

stage.update();

}

image.src = imgPath;

}

showProduct("images/Siena1.jpg");

Correct Answer

[link1155]

thank you so much!! that fixed the issue ❤️

[kglad]

you're welcome.