Highlighted

Help with children dynamically placed on stage from code

Explorer ,
Jan 04, 2020

Copy link to clipboard

Copied

I'm trying to dynamically place 10 instances of a movie clip in a movie clip and evenly space them. I'm using this code in an Adobe Animate HTML5 canvas:

 

 

 

var container = this.container_mc;
var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

function addTicToMC() {
for (i = 0; i < number.length; i++) {
container.addChild(new lib.hash());
hash.x = 5;
hash.y = 5;
}

}

addTicToMC();

 

 

 

The children get placed, however they all land at the 0,0 coordinate, and I can't seem to place them evenly. Can anyone help? Id also like to push the coordinates to an array, so I can use the numbers for something else later on. Let me know what I'm doing wrong! Thank you!

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

Glad you were able to figure it out. It's a bit wasteful to be re-declaring "hash" every time through the loop though. And I'm not sure why you're storing the X coordinates in an array. This would be the most concise form of what you're currently actually doing:

 

var container = this.container_mc;
function addTicToMC() {
	var i, hash;
	var newX = 0;
	for (i = 0; i < 10; i++) {
		hash = container.addChild(new lib.hash());
		hash.x = newX += 5;
	}
}
addTicToMC();

 

 

TOPICS
Code, Other

Views

186

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Help with children dynamically placed on stage from code

Explorer ,
Jan 04, 2020

Copy link to clipboard

Copied

I'm trying to dynamically place 10 instances of a movie clip in a movie clip and evenly space them. I'm using this code in an Adobe Animate HTML5 canvas:

 

 

 

var container = this.container_mc;
var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

function addTicToMC() {
for (i = 0; i < number.length; i++) {
container.addChild(new lib.hash());
hash.x = 5;
hash.y = 5;
}

}

addTicToMC();

 

 

 

The children get placed, however they all land at the 0,0 coordinate, and I can't seem to place them evenly. Can anyone help? Id also like to push the coordinates to an array, so I can use the numbers for something else later on. Let me know what I'm doing wrong! Thank you!

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

Glad you were able to figure it out. It's a bit wasteful to be re-declaring "hash" every time through the loop though. And I'm not sure why you're storing the X coordinates in an array. This would be the most concise form of what you're currently actually doing:

 

var container = this.container_mc;
function addTicToMC() {
	var i, hash;
	var newX = 0;
	for (i = 0; i < 10; i++) {
		hash = container.addChild(new lib.hash());
		hash.x = newX += 5;
	}
}
addTicToMC();

 

 

TOPICS
Code, Other

Views

187

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 04, 2020 0
Adobe Community Professional ,
Jan 04, 2020

Copy link to clipboard

Copied

Let's try the Socratic method...

 

You're attempting to assign to properties of "hash". Where in your code do you think a variable named hash is being created?

 

Also what's up with that "number" array? Why aren't you just doing a numeric for loop? And you never declare "i" as a local variable, so it's going into the global namespace. That's bad.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2020 0
Explorer ,
Jan 05, 2020

Copy link to clipboard

Copied

Thank you for a few tips in there. I changed the code to declare i - had it in there but it worked without it so I wondered if it was necessary - sounds like it its. So now I know. 

 

The goal of this exercise is to learn - I'm coming over to HTML5 canvas from action script 3, so the number array is just a see if it would work excercise. Later on there will be values in there that are meaningful, but the number array is just a sample for now. I realize you can just put a number in the for loop instead of relying on an array.

 

'hash' is the linkage name I assigned to the tic movie clip. Do I need to do more to it to use it? It is populating on the stage currently.

 

More importantly, I can't seem to manage the x and Y coordinates when I place the movie clip on stage - is there a good way to do that? Despite the fact that I assigned x coordinates in my code, it is always going to the 0,0 coordinates. 

 

Thanks again for the help.

Rich

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Explorer ,
Jan 05, 2020

Copy link to clipboard

Copied

Code looks like this now:

var container = this.container_mc;
var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

	function addTicToMC() {
		for (var i = 0; i < number.length; i++) {
			container.addChild(new lib.hash());
			hash.x = 5;
			hash.y = 5;
		}

	}
	
addTicToMC();

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Explorer ,
Jan 05, 2020

Copy link to clipboard

Copied

OK, made some changes/progress, but not there yet.

Code now looks like this:

 

var container = this.container_mc;
var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var hash = new lib.hash();
var xCoordinates = [0]

	function addTicToMC() {
		for (var i = 0; i < number.length; i++) {
			container.addChild(hash);
			hash.x = xCoordinates[i]+5;
			xCoordinates.push(hash.x);
		}
	alert(xCoordinates);
	}
	
addTicToMC();

 

 The hash's show up at an x coordinate other than 0,0, but they are all stacked. (I think).  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Explorer ,
Jan 05, 2020

Copy link to clipboard

Copied

Sample file can be downloaded here:http://www.richcolicchio.com/tic.zip (couldn't attach an .fla for some reason)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Explorer ,
Jan 05, 2020

Copy link to clipboard

Copied

holy cow I think I got it to work! (updated the file with this working copy).

is there anything in the code I can do better? I'm getting multiple tic marks evenly spaced now!

Sample file can be downloaded here: http://www.richcolicchio.com/tic.zip 

 

var container = this.container_mc;
var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var xCoordinates = [0]

	function addTicToMC() {
		for (var i = 0; i < number.length; i++) {
			var hash = new lib.hash();
			container.addChild(hash);
			hash.x = xCoordinates[i]+5;
			xCoordinates.push(hash.x);
		}
	alert(xCoordinates);
	}
	
addTicToMC();

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Adobe Community Professional ,
Jan 05, 2020

Copy link to clipboard

Copied

Glad you were able to figure it out. It's a bit wasteful to be re-declaring "hash" every time through the loop though. And I'm not sure why you're storing the X coordinates in an array. This would be the most concise form of what you're currently actually doing:

 

var container = this.container_mc;
function addTicToMC() {
	var i, hash;
	var newX = 0;
	for (i = 0; i < 10; i++) {
		hash = container.addChild(new lib.hash());
		hash.x = newX += 5;
	}
}
addTicToMC();

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 1
Explorer ,
Jan 06, 2020

Copy link to clipboard

Copied

Thanks for your help - lots to learn!

Rich

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2020 0
Adobe Community Professional ,
Jan 05, 2020

Copy link to clipboard

Copied

Hi.

 

If you want a generic method to position instances in a row, you can write something like this:

var root = this;

root.createRowFromLib = function(linkage, container, total, offset)
{
	var array = [];
	var i;
	var instance;
	
	if (offset === undefined)
		offset = 0;
	
	for (i = 0; i < total; i++)
	{
		instance = new lib[linkage]();
		instance.x = i * (instance.nominalBounds.width + offset);
		array[i] = { x: instance.x, y: instance.y };
		container.addChild(instance);
	}
	
	return array;
};

root.stop();
root.row = root.createRowFromLib("Tile", root, 10, 5);
console.log(root.row);

 

I hope this helps.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0
Explorer ,
Jan 05, 2020

Copy link to clipboard

Copied

Thanks - got this to work too! 

Had to make a few changes to the code to work with my file:

var root = this;
var container = this.container_mc;

root.createRowFromLib = function(hash, container, total, offset)
{
	var array = [];
	var i;
	var instance;
	
	if (offset === undefined)
		offset = 0;
	
	for (i = 0; i < total; i++)
	{
		instance = new lib[hash]();
		instance.x = i * (instance.nominalBounds.width + offset);
		array[i] = { x: instance.x, y: instance.y };
		container.addChild(instance);
	}
	
	return array;
};

root.stop();
//instance, container, number of repeats, px apart
root.row = root.createRowFromLib("hash", container, 60, 20);
console.log(root.row);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2020 0