Tweening several Objects by multiple Tweens

[Eckstein1]

Hi,

I try to tween several objects by multiple tween. If I run it I get an error message. Is there something I misunderstood or what am I doing wrong?

 

Here is what I try to do (that's a simplyfied example just to show what I intend to do):

At 0s I start tweening alpha to 0. After finishing it I want to move a bit. At 2s I want to start tweening alpha to 1 again. After finishing that I want to move back again.

The timeline should be performed for all three objects.

 

Now my code:

import com.greensock.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;

var IMAGE1:ImageLoader = new ImageLoader("images/flower.jpg", {name:"flower", container:this, x:0, y:0, width:200, height:200, onComplete:loadImage2});
var IMAGE2:ImageLoader = new ImageLoader("images/rose.jpg", {name:"rose", container:this, x:175, y:200, width:200, height:200, onComplete:loadImage3});
var IMAGE3:ImageLoader = new ImageLoader("images/sky.jpg", {name:"sky", container:this, x:350, y:0, width:200, height:200, onComplete:imagesLoaded});
IMAGE1.load();

function loadImage2(e1:LoaderEvent):void { IMAGE2.load() }
function loadImage3(e1:LoaderEvent):void { IMAGE3.load() }

function imagesLoaded(e1:LoaderEvent):void {
var ARRAY:Array=[iMAGE1.content, IMAGE2.content, IMAGE3.content];
var TIMELINE:TimelineMax=new TimelineMax();

TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {alpha:0}, 0),
						 TweenMax.allTo(ARRAY, 1, {x:"-10"}, 0)], 	0, "sequence", 0); 
TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {alpha:1}, 0),
						 TweenMax.allTo(ARRAY, 1, {x:"10"}, 0)], 	2, "sequence", 0); 
}

 

Thanks in advance and kind regards,

Uli

 

PS: attach you'll find the files:

[Eckstein1]

Hi again,

I just realized that it makes no sense to move objects with alpha=0 and just 10 pixels, so I did a small change:

 

import com.greensock.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;

var IMAGE1:ImageLoader = new ImageLoader("images/flower.jpg", {name:"flower", container:this, x:0, y:0, width:200, height:200, onComplete:loadImage2});
var IMAGE2:ImageLoader = new ImageLoader("images/rose.jpg", {name:"rose", container:this, x:175, y:200, width:200, height:200, onComplete:loadImage3});
var IMAGE3:ImageLoader = new ImageLoader("images/sky.jpg", {name:"sky", container:this, x:350, y:0, width:200, height:200, onComplete:imagesLoaded});
IMAGE1.load();

function loadImage2(e1:LoaderEvent):void { IMAGE2.load() }
function loadImage3(e1:LoaderEvent):void { IMAGE3.load() }

function imagesLoaded(e1:LoaderEvent):void {
var ARRAY:Array=[iMAGE1.content, IMAGE2.content, IMAGE3.content];
var TIMELINE:TimelineMax=new TimelineMax();

TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {alpha:0}, 0),
		     TweenMax.allTo(ARRAY, 1, {alpha:1}, 0)], 	0, "sequence", 0); 
TIMELINE.insertMultiple([TweenMax.allTo(ARRAY, 1, {x:"-100"}, 0),
		     TweenMax.allTo(ARRAY, 1, {x:"100"}, 0)], 	2, "sequence", 0); 
}

 

The problem remains the same.

 

Kind regards,

Uli

 

PS: the changed files...

[Carl]

Hi Eckstein,

 

The problem arises because when you use insertMultiple or appendMultiple you can only include ONE allTo.

 

insertMultiple and appendMultiple expect a single array of tweens.

 

each time you use allTo you are creating a new array of tweens.

 

so what happened when you use 2 allTos inside an insertMultiple() was that you were passing in 2 arrays.

 

the solution is to put each allTo inside its own insert or append.

 

I don't know exactly how you intend each individual tween inside each allTo to sequence, so you can add that code where necessary.

 

here is a simplified approach that builds a sequence of

 

all fade out

all fade in

all move left

all move right

 

  TIMELINE.insertMultiple(TweenMax.allTo(ARRAY, 1, {alpha:0}))
  TIMELINE.appendMultiple(TweenMax.allTo(ARRAY, 1, {alpha:1}))	
  TIMELINE.appendMultiple(TweenMax.allTo(ARRAY, 1, {x:"-100"}))		
   TIMELINE.appendMultiple(TweenMax.allTo(ARRAY, 1, {alpha:1}))
   TIMELINE.appendMultiple(TweenMax.allTo(ARRAY, 1, {x:"100"}))

[Eckstein1]

Hi Carl,

changed my coding as proposed and surprise-surprise it exactly does what it should do.

Thanks a lot

Uli