question about tracking movieclip location

[Leftyplayer]

I've set up an associative array and then loop through each object in the array to animate it. Later on, however, I have a function that will manipulate these objects. How do I set up a command in the loop that will track the location of each object for later use in the next function, as each of the objects will continue to move around the stage until user presses key to send them to another location? (the final location for the tween is known, but not it's original location as it's free to move around until the tween function is activate).

I'm looking into getChildIndex, but can't find enough info to understand how this works and whether it's what I need.

Happy to show code, if needed.

[5TonsOfFlax]

You have your objects in an array (though why you'd want to use string indices instead of numbers eludes me). Each object knows it's x, and y. I'm not sure what you think is missing.

[Leftyplayer]

I'm not sure what I'm missing either LOL - but the thing's just not working. Each item in the array is a specific shape that I will need to place at an exact location (basically, various shapes move around on stage onEnterFrame, then at keypress they "fall into place" to form something (all the shapes make up a larger image). I can show you the code. See here ...

var tl:MovieClip = new Topleft();
var tr:MovieClip = new Topright();
var bl:MovieClip = new Bottomleft();
var br:MovieClip = new Bottomright();

var myShapes:Array = new Array(tl, tr, bl, br);

for each(var shape in myShapes){
var colorInfo:ColorTransform = shape.transform.colorTransform;
colorInfo.color = 0xffffff * Math.random();
shape.transform.colorTransform = colorInfo;

shape.minX = 0;
shape.minY = 0;
shape.maxX = 1024;
shape.maxY = 738;

shape.x = Math.random() * shape.maxX - shape.minX;
shape.y = Math.random() * shape.maxY - shape.minY;

shape.vel = 3;
shape.vx = Math.random() * 15 + 5;
shape.vy = Math.random() * 15 + 5;

addChild(shape);
shape.addEventListener(Event.ENTER_FRAME, animateShapes);
}

function animateShapes(evt:Event):void {
var shape:MovieClip = MovieClip(evt.currentTarget);
shape.posX += shape.velX;
shape.posY += shape.velY;

shape.x += shape.vx;
shape.y += shape.vy;

if ((shape.x + shape.width/2) >= shape.maxX) {
shape.x = shape.maxX - shape.width/2;
shape.vx *= -1;
}
else if ((shape.x - shape.width/2) <= shape.minX) {
shape.x = shape.minX + shape.width/2;
shape.vx *= -1;
}
if ((shape.y + shape.height/2) >= shape.maxY) {
shape.y = shape.maxY - shape.height/2;
shape.vy *= -1;
}
else if ((shape.y - shape.height/2) <= shape.minY) {
shape.y = shape.minY + shape.height/2;
shape.vy *= -1;
}
shape.parent.removeEventListener(Event.ENTER_FRAME , animateShapes);
stage.addEventListener(KeyboardEvent.KEY_UP, makeShapes);
}


function makeShapes(e:KeyboardEvent):void
{
shape.x = shape.vx;
shape.y = shape.vy;
//This is where part of the problem is. Can't really set up a Tween for each of the objects in the array here because I don't know where they are located and because nothing in the loop is giving me info to refer to each object and it's location here)
var xMove:Tween = new Tween(shape, "x", Regular.easeIn, shape.x, 450, 3, true);
var yMove:Tween = new Tween(shape, "y", Regular.easeIn, shape.y, 450, 3, true);
stage.removeEventListener(KeyboardEvent.KEY_UP, makeShapes);
}

[5TonsOfFlax]

Your array is not associative. It's a normal array. This is actually good.

First, animateShapes should not be removing the event listener for itself, unless you only want each shape to move a single frame. Also, even if you did want that, you're removing it from the wrong item. The listener was on the shape, not the shape's parent.
Similarly, animateShapes should not add the KEY_UP listener each frame. Add it once after setting up the shapes.

makeShapes should iterate through myShapes, just like you did when you set them up. You have fallen into the trap of using the leftover shape variable again. As you have it now, it will only affect the last shape in myShapes because that's what shape is set to after the first loop.

You already have the shape's position to make your tweens. Your code even uses the x and y properties.

If you mean you don't know what to put in place of the 450 value, you'll have to have some mapping from shape to desired place. This could be properties on the shape itself.

Please use [ code ] or [ php ] tags to format code.

var tl:MovieClip = new Topleft();
var tr:MovieClip = new Topright();
var bl:MovieClip = new Bottomleft();
var br:MovieClip = new Bottomright();

var myShapes:Array = new Array(tl, tr, bl, br);

for each(var shape in myShapes){
  var colorInfo:ColorTransform = shape.transform.colorTransform;
  colorInfo.color = 0xffffff * Math.random();
  shape.transform.colorTransform = colorInfo;

  shape.minX = 0;
  shape.minY = 0;
  shape.maxX = 1024;
  shape.maxY = 738;

  shape.x = Math.random() * shape.maxX - shape.minX;
  shape.y = Math.random() * shape.maxY - shape.minY;

  shape.vel = 3;
  shape.vx = Math.random() * 15 + 5;
  shape.vy = Math.random() * 15 + 5;

  addChild(shape);
  shape.addEventListener(Event.ENTER_FRAME, animateShapes);
}

stage.addEventListener(KeyboardEvent.KEY_UP, makeShapes);

function animateShapes(evt:Event):void {
  var shape:MovieClip = MovieClip(evt.currentTarget);
  shape.posX += shape.velX;
  shape.posY += shape.velY;

  shape.x += shape.vx;
  shape.y += shape.vy;

  if ((shape.x + shape.width/2) >= shape.maxX) {
    shape.x = shape.maxX - shape.width/2;
    shape.vx *= -1;
  }else if ((shape.x - shape.width/2) <= shape.minX) {
    shape.x = shape.minX + shape.width/2;
    shape.vx *= -1;
  }
  if ((shape.y + shape.height/2) >= shape.maxY) {
    shape.y = shape.maxY - shape.height/2;
    shape.vy *= -1;
  }else if ((shape.y - shape.height/2) <= shape.minY) {
    shape.y = shape.minY + shape.height/2;
    shape.vy *= -1;
  }
}


function makeShapes(e:KeyboardEvent):void{
  for each(var shape in myShapes){
    shape.x = shape.vx;
    shape.y = shape.vy;
    var xMove:Tween = new Tween(shape, "x", Regular.easeIn, shape.x, 450, 3, true);
    var yMove:Tween = new Tween(shape, "y", Regular.easeIn, shape.y, 450, 3, true);
  }
  stage.removeEventListener(KeyboardEvent.KEY_UP, makeShapes);
}

[Leftyplayer]

That definitely clarifies part of the problem - I appreciate you taking the time, 5TonsofFlash, and wonder if I may ask, the problem that remains after the changes is that on key-up, all four shapes go to position (0,0) slowly glide mid-stage and then go back to random animation (from animateShape function). The goal is to have EACH shape go to a different (x, y) coordinate (so ultimately four separate tweens - as with the current tween, it just sends all four shapes to same spot). Also, regardless of what I change the "450" value to of the tween, they still go to (0,0).

I'm wondering if part of the solution may have to do with needing to add some code inside the end of animateShapes function that says something like "create a new variable for each shape and track this objects x,y coordinates so I can use them later in the createShapes tweens - but not sure how to phrase this. I think I've been staring at this code for way too long LOL.

Hope I'm not being too confusing.

[5TonsOfFlax]

Well, it sounds like you should remove the animateShapes listener for each shape in makeShapes. That will keep them from doing the random animation while tweening.

I don't know why they would go to 0,0. They should be going to 450, 450.

Oh. I don't think they were going to 0,0. they were going to shape.vx, shape.vy because you had set the x and y to that. Those will be small numbers, typically less than 15, which would look like 0,0 if you're not paying attention.

To send each to a particular spot (such as the original place they started), save the original x and y values in the shape and use those in the tween.

var tl:MovieClip = new Topleft();
var tr:MovieClip = new Topright();
var bl:MovieClip = new Bottomleft();
var br:MovieClip = new Bottomright();

var myShapes:Array = new Array(tl, tr, bl, br);

for each(var shape in myShapes){
  var colorInfo:ColorTransform = shape.transform.colorTransform;
  colorInfo.color = 0xffffff * Math.random();
  shape.transform.colorTransform = colorInfo;

  shape.minX = 0;
  shape.minY = 0;
  shape.maxX = 1024;
  shape.maxY = 738;

  shape.origX = shape.x = Math.random() * shape.maxX - shape.minX;
  shape.origY = shape.y = Math.random() * shape.maxY - shape.minY;

  shape.vel = 3;
  shape.vx = Math.random() * 15 + 5;
  shape.vy = Math.random() * 15 + 5;

  addChild(shape);
  shape.addEventListener(Event.ENTER_FRAME, animateShapes);
}

stage.addEventListener(KeyboardEvent.KEY_UP, makeShapes);

function animateShapes(evt:Event):void {
  var shape:MovieClip = MovieClip(evt.currentTarget);
  shape.posX += shape.velX;
  shape.posY += shape.velY;

  shape.x += shape.vx;
  shape.y += shape.vy;

  if ((shape.x + shape.width/2) >= shape.maxX) {
    shape.x = shape.maxX - shape.width/2;
    shape.vx *= -1;
  }else if ((shape.x - shape.width/2) <= shape.minX) {
    shape.x = shape.minX + shape.width/2;
    shape.vx *= -1;
  }
  if ((shape.y + shape.height/2) >= shape.maxY) {
    shape.y = shape.maxY - shape.height/2;
    shape.vy *= -1;
  }else if ((shape.y - shape.height/2) <= shape.minY) {
    shape.y = shape.minY + shape.height/2;
    shape.vy *= -1;
  }
}


function makeShapes(e:KeyboardEvent):void{
  for each(var shape in myShapes){
    shape.removeEventListener(Event.ENTER_FRAME, animateShapes);
    var xMove:Tween = new Tween(shape, "x", Regular.easeIn, shape.x, shape.origX, 3, true);
    var yMove:Tween = new Tween(shape, "y", Regular.easeIn, shape.y, shape.origY, 3, true);
  }
  stage.removeEventListener(KeyboardEvent.KEY_UP, makeShapes);
}

[Leftyplayer]

We're sooooo close - hang in there with me just a bit longer : ) Your suggestion works great in taking the shapes to the right location ... except, it still takes them all to the same location, rather each one going to it's original location (different locations).

I likely need to set up four tweens, one for each shape (something like the code below?), by referring to each shape separately ... so I think somewhere in the loop I need code that lets me end up with: shape1 shape2 shape3 shape4 - but what that is, I dunno?

function makeShapes(e:KeyboardEvent):void{
var shape1Tween:Tween = new Tween(shape1, "x", Regular.easeIn, shape1.x, orig1.x, 3, true);
var shape1Tween:Tween = new Tween(shape1, "y", Regular.easeIn, shape1.y, orig1.y, 3, true);

var shape2Tween:Tween = new Tween(shape2, "x", Regular.easeIn, shape2.x, orig2.x, 3, true);
var shape2Tween:Tween = new Tween(shape2, "y", Regular.easeIn, shape2.y, orig2.y, 3, true);

var shape3Tween:Tween = new Tween(shape3, "x", Regular.easeIn, shape3.x, orig3.x, 3, true);
var shape3Tween:Tween = new Tween(shape3, "y", Regular.easeIn, shape3.y, orig3.y, 3, true);

var shape4Tween:Tween = new Tween(shape, "x", Regular.easeIn, shape4.x, orig4.x, 3, true);
var shape4:Tween = new Tween(shape, "y", Regular.easeIn, shape4.y, orig4.y, 3, true);

This line, that's at the beginning of the function, is making them all do the same exact thing, so I might just have to take it out and not use a loop on the makeShapes function:

for each(var shape in myShapes){

[5TonsOfFlax]

You already are setting up four pairs of tweens. They are set up inside the for-each loop, so there's one for each shape.

Which location are they going to? I don't see why each would not return to it's original spot. Try tracing shape.origX and shape.origY just before the tweens in the for-each to see whether they are different values.

[Leftyplayer]

5TonsOfFlax ..... THANK YOU for helping me. I truly appreciate your time!

It's working perfectly now. And, sadly (as is often likely) it was my own stupidity getting in the way. I thought that if I used the original array names (tl, tr, etc) it would not incorporate what was already done with the animations.

This works perfectly ....

function makeShapes(e:KeyboardEvent):void{
for each(var shape in myShapes){
var gotoplaceXbr:Tween = new Tween(br, "x", Regular.easeIn, br.x, bro.x, 3, true);
var gotoplaceYbr:Tween = new Tween(br, "y", Regular.easeIn, br.y, bro.y, 3, true);

var gotoplaceXbl:Tween = new Tween(bl, "x", Regular.easeIn, bl.x, blo.x, 3, true);
var gotoplaceYbl:Tween = new Tween(bl, "y", Regular.easeIn, bl.y, blo.y, 3, true);

var gotoplaceXtr:Tween = new Tween(tr, "x", Regular.easeIn, tr.x, tro.x, 3, true);
var gotoplaceYtr:Tween = new Tween(tr, "y", Regular.easeIn, tr.y, tro.y, 3, true);

var gotoplaceXtl:Tween = new Tween(tl, "x", Regular.easeIn, tl.x, tlo.x, 3, true);
var gotoplaceYtl:Tween = new Tween(tl, "y", Regular.easeIn, tl.y, tlo.y, 3, true);

shape.removeEventListener(Event.ENTER_FRAME, animateShapes);
}
stage.removeEventListener(KeyboardEvent.KEY_UP, makeShapes);
}


thank you thank you thank you

[5TonsOfFlax]

You do not need to have those inside the for-each. As it is, you are creating 32 tweens. You only need 8 (two for each). You could do this:

function makeShapes(e:KeyboardEvent):void{
  var gotoplaceXbr:Tween = new Tween(br, "x", Regular.easeIn, br.x, bro.x, 3, true);
  var gotoplaceYbr:Tween = new Tween(br, "y", Regular.easeIn, br.y, bro.y, 3, true);

  var gotoplaceXbl:Tween = new Tween(bl, "x", Regular.easeIn, bl.x, blo.x, 3, true);
  var gotoplaceYbl:Tween = new Tween(bl, "y", Regular.easeIn, bl.y, blo.y, 3, true);

  var gotoplaceXtr:Tween = new Tween(tr, "x", Regular.easeIn, tr.x, tro.x, 3, true);
  var gotoplaceYtr:Tween = new Tween(tr, "y", Regular.easeIn, tr.y, tro.y, 3, true);

  var gotoplaceXtl:Tween = new Tween(tl, "x", Regular.easeIn, tl.x, tlo.x, 3, true);
  var gotoplaceYtl:Tween = new Tween(tl, "y", Regular.easeIn, tl.y, tlo.y, 3, true);
  for each(var shape in myShapes){
    shape.removeEventListener(Event.ENTER_FRAME, animateShapes);
  }
  stage.removeEventListener(KeyboardEvent.KEY_UP, makeShapes);
}

But you shouldn't have to deal with each individually, if you had put the original values on the actual clips instead of in parallel objects.

[Leftyplayer]

But you shouldn't have to deal with each individually, if you had put the original values on the actual clips instead of in parallel objects.

Ahhh, yes, of course. Duh! Not being very efficient, was I? I'll fix it.

You do not need to have those inside the for-each. As it is, you are creating 32 tweens. You only need 8 (two for each). You could do this:

I thought the same thing, but at first, when I removed the second line, the function didn't work. However, you are right ... I just went back and played with it more and realize that it was because I didn't changed the removeEventListener to each shape and was still using just "shape" -- once I changed that, it's good great without doing the 32 tweens. Thanks for the heads up on that one!

This is what it looks like now:

function makeShapes(e:KeyboardEvent):void{
var gotoplaceXbr:Tween = new Tween(br, "x", Regular.easeIn, br.x, bro.x, 1, true);
var gotoplaceYbr:Tween = new Tween(br, "y", Regular.easeIn, br.y, bro.y, 1, true);

var gotoplaceXbl:Tween = new Tween(bl, "x", Regular.easeIn, bl.x, blo.x, 1.5, true);
var gotoplaceYbl:Tween = new Tween(bl, "y", Regular.easeIn, bl.y, blo.y, 1.5, true);

var gotoplaceXtr:Tween = new Tween(tr, "x", Regular.easeIn, tr.x, tro.x, 2, true);
var gotoplaceYtr:Tween = new Tween(tr, "y", Regular.easeIn, tr.y, tro.y, 2, true);

var gotoplaceXtl:Tween = new Tween(tl, "x", Regular.easeIn, tl.x, tlo.x, 2.5, true);
var gotoplaceYtl:Tween = new Tween(tl, "y", Regular.easeIn, tl.y, tlo.y, 2.5, true);

bl.removeEventListener(Event.ENTER_FRAME, animateShapes);
br.removeEventListener(Event.ENTER_FRAME, animateShapes);
tl.removeEventListener(Event.ENTER_FRAME, animateShapes);
tr.removeEventListener(Event.ENTER_FRAME, animateShapes);

stage.removeEventListener(KeyboardEvent.KEY_UP, makeShapes);
}