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!
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();
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.
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
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();
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).
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)
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();
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();
Copy link to clipboard
Copied
Thanks for your help - lots to learn!
Rich
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
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);