Targetting multiple MCs using a for-loop??

[Hokeypokey]

Hi folks,

 

I am currently translating my AS2 code from Fuse to Tweenmax and must say, that Tweenmax is really cool! Unfortunately I am having problems with some some commands. I hope that someone here can help me out.

I want to translate the following Fuse code to a Tweenmax-code:

 

function move() //starts the movement of all projects, y:"movement target in absolute coords")
{
for ( var s = 1; s < max; s++ )
     {
        var f:Fuse = new Fuse ();
        f.push ([
				  	{target: _root["project"+ s], y: 100-(s*35), time: 1+(1/((1/s)+1)), ease:"easeOutQuint"}, //move all elements with smaller index than the clicked one
			]);
     }
}

 

I got the tweening working, but I dont know how to translate the targets into the Tweenmax code.

I have some movieclips called project1, project2, project3, … , projectn that I want to tween. How can I add the "["project" + s)]" into Tweenmax-code, so that I can target all of the projects via the for-loop after each other. Hmm, I hope you understand, what I mean. My current Tweenmax code:

 

function move() //starts the movement of all projects, y:"movement target in absolute coords")
{
for ( var s = 1; s < max; s++ )
     {
        var timeline:TimelineLite = new TimelineLite();

	 timeline.insertMultiple( TweenMax.allTo("project" + s, 1, {_y:100-(s+20), ease:Quint.easeOut}, 0.1));
     }
}

 

This code is not working

 

Please help me, I am at my wits end.

 

Many thanks in advance.

 

Chris

[Carl]

it seems you are doing a little mix and matching which I hope to straighten out for you.

 

1)allTo should be used when all of your objects are stored in an array AND all those object's have properties that tween to the same value.

 

for instance let's say you need 3 images to tween their alpha to 100

 

var imagesArray = [cat, dog, mouse]// each of these is the instance name of a movie clip
TweenMax.allTo(imagesArray, 1, {_alpha:100}, 1);

 

the big advantage is that you don't need a loop at all, TweenMax does that for you.

 

2)by putting your allTo inside a loop you are probably causing problems. The thing is you need the loop as it appears each object tweens to different y values. all the tweens need to be unique.

 

3)by putting your timeline inside the loop you are creating many timelines

 

Here is the simple non-TimelineLite version:

for ( var s = 1; s       {
    TweenMax.to(_root["project" + s], 1, {_y:100-(s+20), ease:Quint.easeOut, delay:1});
     }

 

if you need TimelineLite (for pausing , rewinding, restarting)

 

var timeline:TimelineLite = new TimelineLite({paused:true});
for ( var s = 1; s       {
    timeline.append(TweenMax.to(_root["project" + s], 1, {_y:100-(s+20), ease:Quint.easeOut, delay:1}));
     }
timeline.play()

[Hokeypokey]

Hey,

 

thank you so much for your help. I got the whole thing working. I hope that I can ask you one further question concerning the whole thing

 

If I click on a project, the whole set of projects moves at the desired position but only for one time. If I click on another project after that it wont move again. Can I start each tween only once?

 

My goal is to move every single project clicked (in connection with all of the other projects) to a predefined position, independently from their actual position. That requires that I can click on a project at any time and the timelinetween fires every time again. I tried to add

timeline.restart();

at the end of the for loop, but in that case the movement is not smooth at all.

 

I have attached the fla file this time.

 

My code looks like that:

//Setup Tweenmax

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

//--------------------------

var projects_counter:Number = 0;
var max:Number = 10;
var timeline:TimelineMax = new TimelineMax();


function move()
{
for ( var s = 1; s < max; s++ )
{ //timeline.insert( TweenMax.to(target, time, {attribute to be tweened, ease}
	timeline.insert( TweenMax.to(_root["project"+(projects_counter+1-s)], (1/((1/s)+1)), {_y:100-(s*35), ease:Circ.easeOut}));
		timeline.insert( TweenMax.to(_root["project"+(projects_counter+s)], (1/((1/s)+1)), {_y:100+((s-1)*35), ease:Circ.easeOut})); //Move the (with an index >= the clicked one) projects up
   }

timeline.play()
}



_root.project1.onPress = function()
{
projects_counter = 0;
move();
}

_root.project2.onPress = function()
{
projects_counter = 1;
move();
}

_root.project3.onPress = function()
{
projects_counter = 2;
move();
}



//----------------------- OLD FUSE CODE BELOW -------------------------
/*

//Setup and register with Zego Engine
import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup( Shortcuts, PennerEasing, Fuse );
//-----------------------------------------------------------

//Setup Variables

var projects_counter:Number = 0;

var max:Number = 10;

//-----------------------------------------------------------

function move() //starts the movement of all projects, y:"movement target in absolute coords")
{
for ( var s = 1; s < max; s++ )
     {
        var f:Fuse = new Fuse ();
        f.push ([
				  	{target: _root["project"+(projects_counter+1-s)], y: 100-(s*35), time: 1+(1/((1/s)+1)), ease:"easeOutQuint"}, //move all elements with smaller index than the clicked one
			  	{target: _root["project"+(projects_counter+s)], y: 100+((s-1)*35), time: 1+(1/((1/s)+1)), ease:"easeOutQuint"} //move all elements with higher index and including the clicked one
			]);
	 f.push(
				{func:open, scope:this} //starting "open"
			);
	f.start();

     }
}

*/
stop();

 

Can you help me once more?

 

Christian

[Carl]

your problem is that you are inserting tweens into the same timeline over and over again. so your timeline just keeps getting bigger.

 

if you re-create the timeline each time you may get the results you are after. try:

 

 

function move()
{
//next line creates new timeline
timeline = new TimelineMax();
for ( var s = 1; s 	{ //timeline.insert( TweenMax.to(target, time, {attribute to be tweened, ease}
	timeline.insert( TweenMax.to(_root["project"+(projects_counter+1-s)], (1/((1/s)+1)), {_y:100-(s*35), ease:Circ.easeOut}));
		timeline.insert( TweenMax.to(_root["project"+(projects_counter+s)], (1/((1/s)+1)), {_y:100+((s-1)*35), ease:Circ.easeOut})); //Move the (with an index >= the clicked one) projects up
   }

timeline.play()
}

 

 

//in your file project2 was calling an open() function instead of move()

[Hokeypokey]

Thank you very much!

 

Its working now!