Help with stack photo animation

[gsFan]

Hi, im working in a intro animation for a website , it starts with an array of 10 images that falls in random order from certain Y pos and when a certain image fall for example img1_mc , a text appear on left side but text is another animation using masks, if img2 falls another text appear , if img3 appear another text and this until img10.

 

To guide me im only doing this with the first image in my img Array that is img1 to be precise and the animation text is the amor_mc and amorMask_mc

 

Im stuck in my code when i want to do this because the text animation appears at the beginning of the stack photo animation and not when the img1 appears... here is the code and the file:

 

public class BienvenidaPage extends AbstractPage
{	
	//Variables Fotos
	public var img1:MovieClip;
	public var img2:MovieClip;
	public var img3:MovieClip;
	public var img4:MovieClip;
	public var img5:MovieClip;
	public var img6:MovieClip;
	public var img7:MovieClip;
	public var img8:MovieClip;
	public var img9:MovieClip;
	public var img10:MovieClip;


	//Variables Texto
	public var amor_mc:MovieClip;
	public var amorMask_mc:MovieClip;


	public var cariño_mc:MovieClip;
	public var cariñoMask_mc:MovieClip;

	public var familia_mc:MovieClip;
	public var familiaMask_mc:MovieClip;

	public var ternura_mc:MovieClip;
	public var ternuraMask_mc:MovieClip;

	public var stackArray:Array;
	public var len:int;
	public var shuffled:Array;

	//
	public var textosArray:Array;

	//
	public var tl:TimelineLite = new TimelineLite({});


	public function BienvenidaPage()
	{
		super();
		alpha = 0;

		stackArray  	= [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10];
		len 			= stackArray.length;
		shuffled 		= [len];

		textosArray = [amor_mc, amorMask_mc, cariño_mc, cariñoMask_mc, familia_mc, familiaMask_mc, ternura_mc, ternuraMask_mc];

	}
	override public function transitionIn():void 
	{
		super.transitionIn();
		TweenMax.to(this, 0.3, { alpha:1, onComplete:transitionInComplete } );


		var ls:LiquidStage = new LiquidStage(this.stage, 1024, 750, 800, 600);		

		for each (var fotos:DisplayObject in stackArray)
		{
		ls.attach(fotos, ls.CENTER);
		ls.update();
		} 

		for each (var textos:DisplayObject in textosArray)
		{
		ls.attach(textos, ls.LEFT_CENTER);
		ls.update();
		} 

		init();

}
	override public function transitionOut():void 
	{
		super.transitionOut();
		TweenMax.to(this, 0.3, {alpha:0, onComplete:transitionOutComplete});
	}

	//FUNCTION INICIAL
	public function init ():void 
	{

		for(var i:int = 0; i			{
		shuffled[i] = stackArray.splice(int(Math.random() * (len - i)), 1)[0];
		setChildIndex(DisplayObjectContainer(shuffled[i]), numChildren - 1);
		//trace(shuffled[i].name);
		/////////////////////////////////////////////////////////////////////////////////
		///////////PROBLEM HERE//////////////////

			if (shuffle[i] == img1)

			{

			//ANIMACION TEXTO AMOR
			amorMask_mc.cacheAsBitmap=true;
			amor_mc.cacheAsBitmap=true;
			amor_mc.mask=amorMask_mc;
			//create TimelineMax instance and set to repeat infinitely
			var amor_tl:TimelineMax=new TimelineMax({repeat:1,repeatDelay:1,yoyo:true});
			amor_tl.append(TweenMax.from(amor_mc, 1, {alpha:0, delay:2}));
			//speed vars
			var amor_dtn:Number=.5;
			//loop through bar in bars clip and add tween to timeline
			for (var amorCount:Number = 1; amorCount <= 143; amorCount++) 
				{
				//create reference to each individual clip
				var amorClip:MovieClip=amorMask_mc["bola"+amorCount];
				amor_tl.append(TweenMax.from(amorClip, amor_dtn, { alpha:0 } ), -.49);
				}
			}

		}

		//////////////////////////////////////
		var tl:TimelineMax = new TimelineMax ({});
		tl.appendMultiple(TweenMax.allFrom(shuffled, 3, { y: -3000, alpha:0, ease:Back.easeOut, easeParams:[.8]}, 5));


	}

[Carl]

without seeing your file (it wasn't attached) I think I have an idea.

 

the problem is that your array of images is shuffled, so that means img1 is hardly ever the first photo to fall.

 

Yet, your when your loop runs and looks for img1:

 

  for(var i:int = 0; i         {
        shuffled[i] = stackArray.splice(int(Math.random() * (len - i)), 1)[0];
        setChildIndex(DisplayObjectContainer(shuffled[i]), numChildren - 1);
        //trace(shuffled[i].name);
        /////////////////////////////////////////////////////////////////////////////////
        ///////////PROBLEM HERE//////////////////

           if (shuffle[i] == img1)

           {

'

 

that executes immediately and even if img1 is the last image in the array,

the amor_tl gets built at the same time the following code executes:

 

 var tl:TimelineMax = new TimelineMax ({});
        tl.appendMultiple(TweenMax.allFrom(shuffled, 3, { y: -3000, alpha:0, ease:Back.easeOut, easeParams:[.8]}, 5));

 

 

in concise terms, amor_tl is always being told animate right away, but img1 may not happen til 5 or 30 seconds later.

 

you need to have a way that img 1 falling directly triggers amor_t starting.

 

i have some ideas, but they will take a little time to experiment. its a fun challenge. I'll have something in an hour or so, or perhaps tomorrow if I run into trouble:)

[Carl]

okay, here is a very simplified approach. i didn't recreate your masked bars effect or anything

 

preview

http://www.snorkl.tv/dev/amor/

 

code:

import com.greensock.*;
import flash.display.MovieClip;
import flash.text.TextField;


var tl:TimelineMax = new TimelineMax();

//place photo and text in objects inside array. 
//when you shuffle array the photo and text stay together.
var stackArray:Array = [
					{img:img1, textbox:red_txt},
					{img:img2, textbox:blue_txt},
					{img:img3, textbox:green_txt},
					{img:img4, textbox:yellow_txt}

					]

trace(stackArray[0].img.name)//output img1
trace(stackArray[0].textbox.name) // output red_txt

var len:Number          = stackArray.length;
var shuffled:Array       = [len];

for(var i:int = 0; i         {
        shuffled[i] = stackArray.splice(int(Math.random() * (len - i)), 1)[0];
        trace(shuffled[i].img.name);

	 var currentImg:MovieClip = shuffled[i].img;
	 var currentTxt:TextField = shuffled[i].textbox;

	 var imgDur:Number = 1;
	 tl.append(TweenMax.to(currentImg, imgDur, {y:200}));

	 //multi tween text timeline
	 var textTl:TimelineMax = new TimelineMax({delay:imgDur*(i+1)});
	 textTl.append(TweenMax.to(currentTxt, .5, {x:currentImg.x}));
	 textTl.append(TweenMax.to(currentTxt, .2, {y:260}));
	 textTl.append(TweenMax.to(currentTxt, .2, {scaleX:2, scaleY:2, repeat:1, yoyo:true}));


}

 

basically the tl timeline handles the "photos" animating.

each time a photo animation is added to tl I create a separate timeline called textTl which handles animating each textbox.

the delay of the textbox timeline is based on the duration of photo animation * the current iteration of the loop.

 

i originally had everything in one timeline, but if you ever want to repeat a text animation infinitely repeat:-1.. it messes with the timing and append values.

 

this way has a few pros and cons but should be a good starting point for you.

 

 

 

 

i attached a cs4 fla

[gsFan]

Hi Carl , thanks for your reply.

 

What i need is something like a stack photo animation. I have attached my file to see if it gives a better idea of what i need to do.

 

The original file was the images falling with its own animation text all fine at that moment but then the client said, ok i like it but better i want the images in random order with its own animation text.

 

If you see the file i have learned from your tutorials and used it to make the handwriting effect with little circle masks...

 

You can make me any suggestions or change the code as you wish the only things i need to keep in animation is that the images need to fall in random order with its own handwriting animation text.

[Carl]

yes, the example i provided shows how to randomize the order in which objects fall. each object has its own text effect which happens after it falls.

[gsFan]

I think I'm getting better with the help you gave me Carl, but now I'm stuck.

 

When i run my swf inside flash to test it , only works the first image with its own animation text and then stops . i think the problem is with the little balls masks of the handwriting text effect... but im not sure.

 

This is the code so far:

 

import flash.display.*;
import flash.events.*;
import flash.text.TextField;
import com.greensock.*;
import com.greensock.TweenMax;
import com.greensock.easing.*;

var stackArray:Array 	= 	[
					  {img:img1, texto:amor_mc, bolitas:amorMask_mc},
					  {img:img2, texto:cariño_mc,	bolitas:cariñoMask_mc},
					  {img:img3, texto:familia_mc, bolitas:familiaMask_mc},	
					  {img:img4, texto:ternura_mc, bolitas:ternuraMask_mc}
				]
var len:int				= stackArray.length;
var shuffled:Array		= [len];

var tl:TimelineLite = new TimelineLite({});



for(var i:int = 0; i				{
			shuffled[i] = stackArray.splice(int(Math.random() * (len - i)), 1)[0];
			setChildIndex(DisplayObjectContainer(shuffled[i].img), numChildren - 1);

			var currentImg:MovieClip = shuffled[i].img;
			var currentTexto:MovieClip = shuffled[i].texto;
			var currentBolitas:MovieClip = shuffled[i].bolitas;
			var amor_dtn:Number=2.5;


			tl.append(TweenMax.from(currentImg, amor_dtn, { y: -3000, alpha:0, ease:Back.easeOut, easeParams:[.8]}));


			currentBolitas.cacheAsBitmap=true;
			currentTexto.cacheAsBitmap=true;
			currentTexto.mask=currentBolitas;

			var test_tl:TimelineMax=new TimelineMax({delay:amor_dtn*(i+1)});
			test_tl.append(TweenMax.from(currentTexto, .5, {alpha:0, delay:1}));

			for (var count:Number = 1; count <= 900; count++) 
				{

				var clip:MovieClip=currentBolitas["bola"+count];
				test_tl.append(TweenMax.from(clip, .5, { alpha:0 } ), -.49);

				}
			//supposed to turn visible false currentTexto when handwriting animation ends
			//test_tl.append(TweenMax.to(clip, .5, { alpha:0 } ), -.49);
			//test_tl.append(TweenMax.to(currentTexto, .5, { autoAlpha:0, delay:1.5 } )); 
			}

[Carl]

unfortunately, I don't have a lot of time to trouble-shoot issues with your project on an on-going basis.

 

I would suggest trying to get the simple mechanics to work first:

 

1) image falls

2) text appears

3) next image falls

4) next text appears

etc.

 

once that is solid, then worry about a custom handwriting effect that involves the masking of various assets and tweening of tons of balls.

 

I see in your code you have a loop set to run 900 times. I would really focus on simplifying that if possible before looking anywhere else.

more specifically this line here inside that loop

 

var clip:MovieClip=currentBolitas["bola"+count];

 

makes me think there are 900 objects inside currentBolitas, but I couldn't seem to find them.

[gsFan]

With the help of Carl i have resolved the problem i had with my images shuffle with its own handwriting text, but now im stuck with 1 more things i want to do, i hope someone can help me...

 

1.- When the third img of my shuffle enter stage, the first image of my shuffle alpha goes 0, and when the fourth img of my shuffle enter stage then the first img of my shuffle appears again with its animation falling and its own text and then the second img of my shuffle alpha goes 0 and so on indefinitely.

 

I attached my file and here is my actual code :

 

import com.greensock.*;
import flash.display.MovieClip;



var tl:TimelineMax = new TimelineMax({repeat:0});

//place photo and text in objects inside array. 
//when you shuffle array the photo and text stay together.
var stackArray:Array = [
					{img:img1, textbox:amor_mc , mascara:amorMask_mc, balls:143},
					{img:img2, textbox:cariño_mc, mascara:cariñoMask_mc, balls:155},
					{img:img3, textbox:familia_mc, mascara:familiaMask_mc, balls:164},
					{img:img4, textbox:ternura_mc, mascara:ternuraMask_mc, balls:195}

					]

//trace(stackArray[0].img.name)//output img1
//trace(stackArray[0].textbox.name) // output red_txt
//trace(stackArray[0].mascara.name)

var len:Number          = stackArray.length;
var shuffled:Array       = [len];

for(var i:int = 0; i         {
        shuffled[i] = stackArray.splice(int(Math.random() * (len - i)), 1)[0];

       // trace(shuffled[i].img.name);

	 var currentImg:MovieClip = shuffled[i].img;
	 var currentTxt:MovieClip = shuffled[i].textbox;
	 var currentMascara:MovieClip = shuffled[i].mascara;
	 var currentBalls:Number = shuffled[i].balls;

	 setChildIndex(DisplayObjectContainer(currentImg), numChildren - 1);

	 var imgDur:Number = 5;
	 tl.append(TweenMax.from(currentImg, imgDur, {y:-stage.stageHeight}));
	 trace(tl.currentProgress);

		currentMascara.cacheAsBitmap=true;
		currentTxt.cacheAsBitmap=true;
		currentTxt.mask=currentMascara;
		//
		var textTl:TimelineMax=new TimelineMax({delay:imgDur*(i+1), repeat:0,repeatDelay:0,yoyo:false});
		trace(imgDur*(i+1));
		textTl.append(TweenMax.from(currentTxt, 0, {alpha:0, delay:0}));
		//
		var dtn:Number=.5;
		//
		for (var count:Number = 1; count <=currentBalls; count++) {
		//
		var clip:MovieClip=currentMascara["bola"+count];
		textTl.append(TweenMax.from(clip, dtn, { alpha:0 } ), -.49);
		}
		textTl.append(TweenMax.to(currentTxt, dtn, { alpha:0, delay:0 } ));
		textTl.append(TweenMax.to(clip, dtn, { alpha:0, delay:0 } ));	 
}

[Carl]

that seems incredibly confusing.

 

if the third text coming in makes the first one go away.

wouldn't the fourth text coming in make the 2nd go away?

 

yet you say the 2nd one fades away after the first one comes in again.

 

when does the 4th one fade away.

 

please describe the entire sequence in as much detail as possible.

[gsFan]

Sorry if it was confusing Carl , i will try to explain properly this time.

 

My fla have 4 squares that are img1,img2,img3,img4 . imagine i add more squares lets say img5, img6.

 

So for example if the output of trace(shuffled.img.name) where:

 

img3

img4

img2

img1

img6

img5

 

I need to do 2 things:

 

1. Each three images, (in this case the third one is img2), i need the first image (in this case img3) alpha = 0 , so i can see only img4 and img2 in stage, this is because if i add more squares i dont want to see all the equares stacked.

 

Now that i have img4 and img2 in stage and img3 alpha= 0, the animation continues and img1 enters stage so now i need img4 alpha = 0

 

Animation continues and then img6 enters stage , now i need img2 alpha = 0 and then img 5 enters stage and img1 alpha = 0 .

 

2.- Ok now when the last image enters stage (in this case img5) , i need that img3 enters again and img6 alpha = 0 then img4 enters again and img5 alpha = 0, and so on ... so in fact the animation never ends ...

[Carl]

I regret that this recent explanation does not clarify things.

 

by shuffling the instance names makes it much harder to understand.

 

I have to constantly refer to your list to make any sense of

 

Each three images, (in this case the third one is img2), i need the first image (in this case img3) alpha = 0 , so i can see only img4 and img2 in stage

 

i made a little demo that has a number of staggered timelines that is quite simplified and maybe close to what you need

 

file attached

 

var tl1:TimelineMax = new TimelineMax({ repeat:-1, repeatDelay:2})
tl1.insert(TweenMax.to(mc1, 1, {y:100}));
tl1.append(TweenMax.to(mc1, 1, {alpha:0, delay:1}));

var tl2:TimelineMax = new TimelineMax({ delay:1, repeat:-1, repeatDelay:2})
tl2.insert(TweenMax.to(mc2, 1, {y:100}));
tl2.append(TweenMax.to(mc2, 1, {alpha:0, delay:1}));

var tl3:TimelineMax = new TimelineMax({ delay:2, repeat:-1, repeatDelay:2})
tl3.append(TweenMax.to(mc3, 1, {y:100}));
tl3.append(TweenMax.to(mc3, 1, {alpha:0, delay:1}));

var tl4:TimelineMax = new TimelineMax({ delay:3, repeat:-1, repeatDelay:2})
tl4.append(TweenMax.to(mc4, 1, {y:100}));
tl4.append(TweenMax.to(mc4, 1, {alpha:0, delay:1}));