Fade Array of Images

[iTech]

How can I use TweenLite/TweenMax to fade in and out an array of images? I don't want to cross fade, just fade an image in for X amount of seconds and fade it out to nothing and then fade the next one in. The entire process would repeat indefinitely.

[Carl]

GIve this a try

import com.greensock.*;


var images:Array = [mc1,mc2,mc3];


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


for (var i:int = 0; i < images.length; i++) {
tl.from(images[i],0.5,{alpha:0}) //fade in
 .to(images[i], 0.5, {alpha:0}, "+=1"); //fade out after 1 second
}

fadeInOutArrayImages_CS5.zip

[iTech]

I'm using DataLoader to get the array of images then using ImageLoader to load each image. I don't think that would work since they won't be movieclips.

[Carl]

The code and sample I provided will work for an array of any type of DisplayObjects. In your case you will use an array of ContentDisplay objects which are basically Sprites created by ImageLoader.

 

Once your ImageLoader's load just push() their content into an Array.

 

The content of an ImageLoader is a ContentDisplay Sprite which wraps holds the loaded bitmap.

http://api.greensock.com/as/com/greensock/loading/ImageLoader.html

[iTech]

What do you mean by push their contents into the Array?

 

I got this error:

 

Line 72 1061: Call to a possibly undefined method from through a reference with static type com.greensock:TimelineMax.

 

 

Here is what I'm doing:

 

I use DataLoader to grab an array of URLs. Once that's loaded, it goes to another function that adds an ImageLoader per URL to a LoaderMax queue that 1. has an onChildComplete that pushes the "event.target.content" to images:Array 2. onComplete runs your code.

[iTech]

I figured out the error, it was due to v11 and not v12 being used.

 

Edit: I figured out everything to a certain point. There are 3 images being loaded but only the last two fade in and out. I also load all the image loaders to the stage with an alpha of 0.

 

Edit: Sorry for all the posts, haha. I figured it all out. If I don't set the alpha to 1 then it won't work properly. Thanks!

[Carl]

Cool. Thanks for the update. Glad you got it working

[santyas3]

 

GIve this a try

import com.greensock.*;


var images:Array = [mc1,mc2,mc3];


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


for (var i:int = 0; i < images.length; i++) {
tl.from(images[i],0.5,{alpha:0}) //fade in
 .to(images[i], 0.5, {alpha:0}, "+=1"); //fade out after 1 second
}

 

 

 

 

Hello, good work! Is it possible to navigate to different images of the array with different buttons (like bullets)? Thank you very much

 

Santiago

[Carl]

Hi and welcome to the GreenSock forums.

 

I'm not really sure what level of help you need or how well you know ActionScript but you can certainly add labels to a timeline and then navigate to them. 

 

You could also dynamically create the buttons as you are creating the timeline.

 

In the example above you could just use the addLabel() method to place the labels:

 

 

for (var i:int = 0; i < images.length; i++) {
tl.from(images[i],0.5,{alpha:0}) //fade in
 .addLabel("image" + i) // place label right after image fades in
 .to(images[i], 0.5, {alpha:0}, "+=1"); //fade out after 1 second
}

then on your  buttons use

tl.pause("image2");

[santyas3]

 

Hi and welcome to the GreenSock forums.

 

I'm not really sure what level of help you need or how well you know ActionScript but you can certainly add labels to a timeline and then navigate to them. 

 

You could also dynamically create the buttons as you are creating the timeline.

 

In the example above you could just use the addLabel() method to place the labels:

 

 

for (var i:int = 0; i < images.length; i++) {
tl.from(images[i],0.5,{alpha:0}) //fade in
 .addLabel("image" + i) // place label right after image fades in
 .to(images[i], 0.5, {alpha:0}, "+=1"); //fade out after 1 second
}

then on your  buttons use

tl.pause("image2");

 

 

 

 

Hello, thank you very much. I try to learn little by little!

I paste the same code of "array" within each function buttons, ex:

bullet1.addEventListener(MouseEvent.CLICK, bullet1_click);

function bullet1_click(ev:MouseEvent):void {
   tl.from(images[1],1,{alpha:0})
   .to(images[1], 0, {alpha:0});
}

//etc

 

 

Maybe 2 to 5 times, depending on the amount of images.

In this way should have the effect "alpha" between instances?

 

Thank you and I apologize for my english.

 

Santiago

[santyas3]

tl.play("image1");

This works.

[santyas3]

I cant find the right way to "play" each node of the array... maybe the problem is on the "onpress" code? Thank you!

import com.greensock.*;

var images:Array = [mc0,mc1,mc2,mc3]; //my movieclips to animate

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

for(var i:Number = 0; i < images.length; i++){
	var imageVar:String = "image" + i;
	var bulletVar:String = "bullet" + i;
	
	tl.from(images[i],1,{_alpha :0}) //fade in
	.addLabel(imageVar) // place label right after image fades in
	.to(images[i], 1, {_alpha :0}, "+=1"); //fade out
	
	duplicateMovieClip(mcBullet, bulletVar, i); // duplicate "i" times
	
	setProperty(bulletVar, _x, "100"*i); // _x align
	
	this[bulletVar].onPress = function(){ // problem :/
		tl.play(imageVar);
    }
}

[Carl]

Not really sure what the problem is. At first glance the code actually looks pretty good.

Might be a scope thing. 

try

_root.tl.play(imageVar);

otherwise trace everything

 

this[bulletVar].onPress = function(){ // problem :/
trace("button clicked")
trace(tl)
trace(imageVar)
tl.play(imageVar);
    }

you could also upload and fla that only includes the code and assets necessary to replicate the issue

[santyas3]

Thank you carl, Im sorry, the problem is when i clicked on any bullet the "tl" always show me "mc03", I think the problem is in the call to the button 

this[bulletVar]

[Carl]

If you upload an fla (zipped) it will be much easier to figure out what is wrong.

[santyas3]

ok! thank you

array_images.zip

[Carl]

Ah, ok it seems that imageVar wasn't evaluated until the button was pressed. You'll notice that the trace(imageVar) always returned "image3" (the last value of imageVar) regardless of which button you clicked.

 

What I did was just give each bullet its own unique imageVar value. Try this code:

 

import com.greensock.*;


var images:Array = [mc0,mc1,mc2,mc3];
var tl:TimelineMax = new TimelineMax({repeat:-1});


for(var i:Number = 0; i < images.length; i++){
var imageVar:String = "image" + i;
var bulletVar:String = "bullet" + i;


tl.from(images[i],1,{_alpha :0})
.addLabel(imageVar)
.to(images[i], 1, {_alpha :0}, "+=1");


duplicateMovieClip(mcBullet, bulletVar, i);


setProperty(bulletVar, _x, "100"*i);


// modified 
this[bulletVar].imageVar = imageVar;
this[bulletVar].onPress = function(){
trace(this.imageVar)
tl.play(this.imageVar);
}
// end modified
}

Thanks for providing the file. Very helpful.

[santyas3]

Ahhhhh, details that make a good practitioner of AS (not my case). Thank you very much!
I will continue to improve the animation between steps (I'll try to do it alone this time).
If it works, I share!