iTech Posted August 6, 2013 Share Posted August 6, 2013 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. Link to comment Share on other sites More sharing options...
Carl Posted August 6, 2013 Share Posted August 6, 2013 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 1 Link to comment Share on other sites More sharing options...
iTech Posted August 6, 2013 Author Share Posted August 6, 2013 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. Link to comment Share on other sites More sharing options...
Carl Posted August 6, 2013 Share Posted August 6, 2013 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 Link to comment Share on other sites More sharing options...
iTech Posted August 14, 2013 Author Share Posted August 14, 2013 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. Link to comment Share on other sites More sharing options...
iTech Posted August 14, 2013 Author Share Posted August 14, 2013 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! 1 Link to comment Share on other sites More sharing options...
Carl Posted August 14, 2013 Share Posted August 14, 2013 Cool. Thanks for the update. Glad you got it working Link to comment Share on other sites More sharing options...
santyas3 Posted September 16, 2013 Share Posted September 16, 2013 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 Link to comment Share on other sites More sharing options...
Carl Posted September 16, 2013 Share Posted September 16, 2013 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"); 1 Link to comment Share on other sites More sharing options...
santyas3 Posted September 16, 2013 Share Posted September 16, 2013 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 Link to comment Share on other sites More sharing options...
santyas3 Posted September 16, 2013 Share Posted September 16, 2013 tl.play("image1"); This works. Link to comment Share on other sites More sharing options...
santyas3 Posted October 16, 2013 Share Posted October 16, 2013 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); } } Link to comment Share on other sites More sharing options...
Carl Posted October 17, 2013 Share Posted October 17, 2013 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 Link to comment Share on other sites More sharing options...
santyas3 Posted October 17, 2013 Share Posted October 17, 2013 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] Link to comment Share on other sites More sharing options...
Carl Posted October 17, 2013 Share Posted October 17, 2013 If you upload an fla (zipped) it will be much easier to figure out what is wrong. Link to comment Share on other sites More sharing options...
santyas3 Posted October 17, 2013 Share Posted October 17, 2013 ok! thank you array_images.zip Link to comment Share on other sites More sharing options...
Carl Posted October 17, 2013 Share Posted October 17, 2013 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. Link to comment Share on other sites More sharing options...
santyas3 Posted October 17, 2013 Share Posted October 17, 2013 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now