Changing Index mid-tween

[chickens]

Hey guys,

 

I was doing pretty well until I ran into an indexing problem. I'll briefly describe what I'm trying to do:

 

Got a stack of 10 Rurs (an imaginary currency). The topmost flies from the stack and lands in another location. Then the second follows suite until all ten are in a stack in a new location. Everything's great except that that first Rur lies visually on top of all the others (should be on the way bottom) and vice versa for the last one.

 

All I want to do it drop the index by one in mid-flight but I'm having difficulties figuring out how. I'm also confused in general about how I'm supposed to reference the various instances in the first place...

 

I'd be really grateful if someone could help me out! Code's below.

 

-Jon

 

 

 

import com.greensock.*;
import com.greensock.easing.*;

var rurMax:Number = 10;
var stackHeight:Number = 100;
var spacing: Number = stackHeight / (rurMax - 1);

var stack1X: Number = 100;
var stack1Y: Number = 200;

var stack2X: Number = stage.stageWidth - 100;
var stack2Y: Number = 300;

// the master timeline
var tl:TimelineMax=new TimelineMax();

// generate random num between a min and max value
function randomRange(min:Number, max:Number):Number {
return min + (Math.random() * (max - min));
}



function createRur(count:Number) {
// create a Rur (attach symbol in library with Class Rur) and position on stage
var rur:Rur=new Rur();
rur.x = stack1X;
rur.y = stack1Y + count * spacing;	
addChildAt(rur,0);
trace(rur.name);

var nestedTl:TimelineMax = new TimelineMax();	
nestedTl.insert(TweenMax.to(rur, 1, {x:stack2X, y:stack2Y - count * spacing, ease:Circ.easeInOut}));

tl.append(nestedTl, -.5);
}

// loop the createRur function a bunch of times
function init() {
for (var count:Number = 0; count		createRur(count);
}
}

init();

[Carl]

attach a zip of your fla and I will give it a try

[chickens]

Thanks! Btw, Carl, I've been learning a ton from your tuts. I think I may have even gotten the code from you that I based this on, but I've been through so many tuts, I can't remember any more!

 

You're a huge help to all of us!

 

-Jon

[Carl]

nice work on your file. It reminds me of the type of thing I enjoy building. that was a tricky challenge but i think this solution will work well for you.

 

replace your createRur with this:

function createRur(count:Number) {
// create a Rur (attach symbol in library with Class Rur) and position on stage
var rur:Rur=new Rur();
rur.x = stack1X;
rur.y = stack1Y + count * spacing;	
addChildAt(rur, 0);
trace(rur.name);

var nestedTl:TimelineMax = new TimelineMax();	
nestedTl.insert(TweenMax.to(rur, 1, {x:stack2X, y:stack2Y - count * spacing, ease:Circ.easeInOut}));			

tl.append(nestedTl, -.5);

       // NEW //
       //halfway through the current rur's animation call setDepth:

tl.addCallback(setDepth, tl.duration-.5, [rur]);
}

 

add this below createRur

function setDepth(rur:Rur):void{
addChild(rur);
}

 

BTW: I duplicated all your rurs and am keeping them as payment

[chickens]

That's great, it works! But after looking through it, I'm still not sure how it works. The setDepth function uses addChild. Does that mean there's twice as many children on the screen at the end of the movie? Or does that replace each rur in question..?

 

I think my problem is a lack of understanding how multiple instances get referenced in such a loop. Are they all called rur? Or rur1, rur2, etc? I've spent hours scouring the web and haven't found anything that really explains it well. Maybe you could point me in the right direction?

 

thanks,

 

Jon

[Carl]

Hi Jon,

 

addChild simply places a displayObject at the highest depth of the display list. There is no duplication, its the same symbol just put higher in the stack.

 

when your loop is running it is creating many rurs.

 

everytime createRur gets called... a new Rur is created.

you are referencing that Rur with the variable rur.

everytime you use the term rur in your function, flash knows that you are referring to the most recently created Rur.

 

that rur gets put into nestedTl and now that same rur is being used a parameter in the addCallBack method.

 

since all this happens within the same function, rur doesn't need a unique.

 

if later on in your code you want to access specific rurs, you would then give them a .name property and access them with getChildByName("mySpeciallyNamedRur").

 

----

 

if you are migrating from as2 and are used to everything being referenced by instance name it can be confusing.

read both pages here

http://theflashconnection.com/content/f ... able-names

 

and this

http://theflashconnection.com/content/c ... s-loop-as3

[chickens]

Those links were a great help, thanks. The arrays are a great thing.

 

Regarding the code, I'll do you one better. Finally figured out how I can just change the index, so that at the end I'm still left with just 10 Rurs, and not 20. Check it out if you're interested.

 

-Jon

 

import com.greensock.*;
import com.greensock.easing.*;

var rurMax:Number = 10;
var stackHeight:Number = 100;
var spacing: Number = stackHeight / (rurMax - 1);
var speed:Number = 1;

var stack1X:Number = 100;
var stack1Y:Number = 200;

var stack2X:Number = stage.stageWidth - 100;
var stack2Y:Number = 300;

// the master timeline
var tl:TimelineMax=new TimelineMax();

// creates a stack of Rurs and flies them individually to new stack location
function flyingRurs()
{
for (var i:int = 0; i	{
	// create a Rur (attach symbol in library with Class Rur) and position on stage
	var rur:Rur=new Rur();
	rur.x = stack1X;
	rur.y = stack1Y + i * spacing;
	addChildAt(rur, 0);

	var nestedTl:TimelineMax = new TimelineMax();
	nestedTl.insert(TweenMax.to(rur, speed, {x:stack2X, y:stack2Y - i*spacing, ease:Circ.easeInOut}));
	nestedTl.addCallback(moveUpFront, speed/2, [rur]); // brings the Rur up front so it stacks correctly

	tl.append(nestedTl, -speed*.75);
}
}

function moveUpFront( clip:DisplayObject ):void {
   clip.parent.setChildIndex(clip, clip.parent.numChildren-1);
}

flyingRurs();

[Carl]

glad you are enjoying this. and yes, storing your rurs in an array is very helpful.

 

just to be clear. my previous code did not create 20 rurs. there were only 10.

[chickens]

Touche