Carl

Hello Beno, I'm glad things are getting closer. The sum of all your code is a bit much to digest. This isn't a criticism of your code, just the fact that its a bit rough to look at it all and make any real sense of it without knowing the full scope of what it is trying to accomplish. That being said, your recent explanation does help quite a bit. In general terms it seems you are re-sorting your images each time you want them to tween. Back to the key issue of the tween not repeating, I think the expectations of what the following code should do is where the problem lies: var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()}); while (i { timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:j-_w}) ); ++i; } this is the only place that any animation takes place. its also the only place that the x property of parent_container is referenced. the only thing that loop does is something SIMILAR to TweenLite.to(parent_container, 1, {delay:1, x:j-_w}) TweenLite.to(parent_container, 1, {delay:2, x:j-_w}) TweenLite.to(parent_container, 1, {delay:3, x:j-_w}) TweenLite.to(parent_container, 1, {delay:4, x:j-_w}) TweenLite.to(parent_container, 1, {delay:5, x:j-_w}) TweenLite.to(parent_container, 1, {delay:6, x:j-_w}) ... TweenLite.to(parent_container, 1, {delay:7, x:j-_w, onComplete:nextSlide}) (i've simplified the delay) the focus here is on the fact that each new TweenLite that is being created in the loop is tweening the same object (parent_container) to the same final x position (j-_w) once the first tween runs, parent_container is at an x of j-_w... so all subsequent tweens have nowhere to move parent_container TO as it is already there. in addition, the onComplete:NextSlide will only fire once the timeline completes all of its tweens. From what I gather you want an image to tween, some re-sorting to occur, tween another image and so on. I don't believe that the use of the loop with TimelineMax in its current state is going to achieve that goal. Again, just trying to offer my 2 cents. Its much easier for me to troubleshoot a specific functional problem of a GreenSock implementation than to troubleshoot what isn't working when it is combined with much more complex mathematics and conditional statements. From a development standpoint it might be easier to create a button on the stage that calls the nextSlide() function. get that function to visually re-sort / reposition your assets without tweening. once you are positive that nextSlide() can infact get the next slide on the screen and move others around then consider how it can be animated efficiently. Right now there is too much like: j = i%_numOfSlides; var container:MovieClip = new MovieClip(); img.myArray = [imagesArray[j], "index.py", _w, _h, (_w+spacer)*j+_x+70, _y]; that is impossible to understand without further context whether there is something in the TimelineMax set up that is causing the delay problem or something elsewhere. If you get things running better and need help cleaning something up GreenSock-related, let me know. Best of luck on your project Carl

Hey Bassta, I was going to recommend the sticky showcase thread in this tweening forum, but it seems you already know about it Frankly, I never really bother to look in there It does seem that a thread showcasing client projects / fully working sites is a bit different than a repository for working code samples. this site here is a pretty cool resource for the AS3 community as a whole: http://cookbooks.adobe.com/actionscript As far as there being a forum on forums.greensock.com dedicated to this sort of thing that would be something for the admin to weigh in on. As a GreenSock enthusiast/nut I agree that such a resource would be quite valuable. Perhaps if this thread does not get the attention of an admin you can create a new thread addressing this issue or try to contact info@greensock.com. I assure you that the support channels around here are world class and you will get an answer. Carl

since each tab already has a linkId you could create a frameArray like: var frameArray:Array = new Array("home", "about", "contact", "etc"); the tabUp() function for MOUSE_UP could include something like var target:Object = event.currentTarget; trace("my linkId " + target.linkId); trace("my frame " + urlArray[target.linkId]); gotoAndPlay(urlArray[target.linkId]);

hey beno the main source of trouble is that in your loop you are recreating a timeline many times. I believe that in each iteration of the loop you are overwriting the timeline that was created in the previous iteration of the loop. further more if the values of j and w aren't changing, you are also telling the container to tween to the same place a bunch of times so you will probably only notice one tween happening. to start try something like this //Have one timeline created outside the loop var timeline:TimelineMax = new TimelineMax({onComplete:NextSlide()}); //then use your loop to add TweenLites to the parent timeline while (i { //each time you append a new TwennLite, make sure the ending x value is different timeline.append(TweenLite.to(parent_container, 1, {delay:2.5, x:(j-_w)* i or someEquationToGenerateAUniqueValueForTheEndPositionOfEachTween}) ); ++i; trace(i); } also your onCompleteNextSlide may work better if it happens on the end of each Tween that is added and not the parent timeline. There is a good chance that I'm not understanding your situation completely and my advice may not be completely helpful, but perhaps it will help get you closer to having this work. Carl

Bassta, thank you for sharing your work. I personally enjoy looking at how other people organize their code and get things to work. I believe many people can benefit from just downloading and exploring your files. It is a very neat component and makes very good use of the powerful GreenSock platform. Happy New Year Carl

very glad you got it working!

this line here seems strange: var timeline:TimelineMax = new TimelineMax(NextSlide); you should only be passing a vars object into a TimelineMax constructor, not the name of a function. remove the NextSlide from the line above and see if you still get errors Carl

hello it is extremely rare if not impossible that a swf once published and working in Flash will fail to run in a browser because of something related to the GreenSock code. perhaps you could show some of the code you are using or upload a simplified fla file for someone to look at. thanks Carl ps. make sure you clear your browser cache to ensure that you are seeing the most recent version of the swf that you uploaded

there are a few errors in the way you are incorporating the code from the tutorial. every where I use the var navItem it is to determine which button is being clicked on as I applied my MOUSE_OVER eventListeners to a movieclip that contains all my buttons. this approach allows me to apply eventListeners to many objects without having to code them all individually. more here: http://www.snorkl.tv/2010/08/assign-eve ... enttarget/ since you are applying your listeners diretly to each buttons such as portfolio_btn.addEventlistener it is going to work differently. furthermore, in the tutorial each button contains a dot_mc which has its tint changed. in your file your buttons are effecting movieclips that live outside the buttons and have unique instance names such as portfolio_mc. with your current implementation navItem.portfolio_mc is what is throwing the error as portfolio_mc probably doesn't live inside portfolio_btn or whatever navItem is referring to. if you upload a simplified fla file I will take a look at it. Being a holiday I may not get to it until tomorrow. thanks and Happy New Year Carl

oh, in addition, you could also create your subtimelines in advance, append them to the supertimeline right away (have the super paused) and then later on prepend() a whole bunch of stuff.

Hello cipriancaba, Thank you for so clearly explaining your issue. In order to better provide a solution can you explain why it is that your subtimelines need to be created prior to the supertimeline being created and played? In a situation like this I would normally just recommend that you create or populate the subtimelines as soon as they are being placed in the supertimeline, this way there is no need to pause and resume and they will perform as expected. import com.greensock.*; //set up supertimeline with some stuff in it var superTL:TimelineMax=new TimelineMax({paused:true}); superTL.append(TweenLite.to(b0, 1, {x:300})); //create subtimelines for future use var child1TL:TimelineMax = new TimelineMax(); var child2TL:TimelineMax = new TimelineMax(); stage.addEventListener(MouseEvent.CLICK, playTL); function playTL(e:MouseEvent):void { //populate first subtimeline child1TL.append(TweenLite.to(b1, 1, {x:300})); child1TL.append(TweenLite.to(b1, 1, {alpha:0})); //populate second subtimeline child2TL.append(TweenLite.to(b2, 1, {x:300})); child2TL.append(TweenLite.to(b2, 1, {alpha:0})); //append to supertimeline superTL.appendMultiple([child1TL, child2TL], 0, TweenAlign.SEQUENCE); //play supertimeline superTL.play(); } Perhaps there is a way to approach your situation with your current setup and reach your desired results. If you just want to "have them coded prior to coding the supertimeline" you could create them in a function and just call that function prior to appending them to the supertimeline as well. Again, it would help to know why they need to be created in advance. Thanks Carl CS4 fla attached for reference (no greensock classes)

in general terms you need to do the following: when each button is clicked record somewhere which button has been clicked when you roll_out of each button ask "am I the button that has most recently been clicked? if yes, than I won't play my out animation. If no, then play my out animation. the same thing will apply when you roll over each button. if the button you are rolling over is the most recently clicked... then do nothing. if you are rolling over a button that isn't in its clicked/active state then it can perform its animation. This principle is illustrated in this tutorial here: http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/ here is a sample of the code. t import com.greensock.*; nav_mc.buttonMode=true; nav_mc.addEventListener(MouseEvent.MOUSE_OVER, navOver); nav_mc.addEventListener(MouseEvent.MOUSE_OUT, navOut); nav_mc.addEventListener(MouseEvent.CLICK, navClick); nav_mc.nav1_mc.mouseChildren=false; nav_mc.nav2_mc.mouseChildren=false; nav_mc.nav3_mc.mouseChildren=false; nav_mc.nav4_mc.mouseChildren=false; //the variable currentNav is used to hold a reference to the most recently clicked button/MovieClip var currentNav:MovieClip; function navOver(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; trace(navItem.name); //when you roll over the currently selected nav item you probably don't want it to animate if (navItem!=currentNav) { TweenMax.to(navItem.dot_mc, .5, {tint:0x00CCFF}); } } function navOut(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; //when you mouse out ask "hey, am I the most recently clicked button?" if (navItem!=currentNav) { // if I'm not the most recently clicked button than play my "out" animation, or else do nothing TweenMax.to(navItem.dot_mc, .2, {tint:null}); } } function navClick(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; //disable the previously clicked button if (currentNav!=null) { TweenMax.to(currentNav.dot_mc, 0, {tint:null}); } //activate the currently clicked button TweenMax.to(navItem.dot_mc, .2, {tint:0xFF6600}); currentNav=navItem; } there is a sample file to download from the link above as well. My file may be set up a bit differently than yours but the concepts you will need to apply are the same. by applying my eventListeners to the MovieClip that holds all the nav items (nav_mc), I don't have to apply eventListeners to each item individually Carl

Hi patrick. thanks for posting. I'm very glad to hear that you had success!

sorry I can't open the rar file. perhaps you can provide a .zip

Hey jack, That file is fabulous. Its a big help. Thanks for building it AND for commenting the code so clearly. Beyond the whole FrameSequence class I really like seeing how LoaderMax does so much with so little. Carl

Hello Patrick, Thank you for posting the code, it makes things much more clear. What you are trying to accomplish is a cool and practical effect. From what I know the greensock family of tweening tools doesn't provide anything built in to achieve this goal as what you are doing isn't really a tween. What you are doing is using a tweening platforms events / methods / features to drive a series of functions that produce your desired end result (which isn't necessarily a bad thing). Your implementation does work and its a fairly clever approach. I just don't know enough about your project to assess why you are using TimelineLite for this functionality. Do you need to reverse this sequence or change its timescale at some point? I'm curious if your approach holds up it the tween is reversed. What I'm getting at, is that unless its not 100% necessary that features of TimelineLite are being used, there are definitely simpler ways of getting a sequence of images to display. If you really want the GreenSock platform to drive this sequence of images check out GreenSock's response and sample fla in this thread: viewtopic.php?f=1&t=4226 He mentions tweening a custom property of an object using a TweenLite/max. as that property's value changes it drives the positioning of a series of clips. I believe you could create your own "PNGSequence" object and tween something like its currentImageIndex property. currentImageIndex may be an index of your image in your xml object / loaderMax queue... whatever. as the currentImageIndex property changes... you can hide all images that don't have the same index value as currentImageIndex. I think this type of approach will allow to add your animated sequence into a timelineLite as a single TweenLite and you will be able to benefit from all the features of the platform. From looking at your code which illustrates your familiarity of loaderMax and everything else, I think you will really enjoy looking at the files in the link above and implementing something similar. Carl

hello. can you please be more specific about exactly what you want to accomplish? "arrange a sequence of pngs which plays" isn't clear to me. do you want multiple images to be animated? are you trying to simulate a keyframed animation? thx Carl

it makes sense to me! controlling tweens independently of their parent timeline seems like it could be a real bear to manage for the reasons you provided. -Carl

Hello Chrisatflash, the short answer is no, there is no special listener as each tween has no idea that is part of a loop or what its position is in the loop. inside the loop you could test to see if the value of i has reached a certain value and then create your last tween with an onComplete. the great news is you don't need the loop and what you want to do is entirely possible. Since your tiles are already in an array just use TweenMax.allTo() like so TweenMax.allTo(tileArray, 5, {rotation:50, ease:Quad.easeOut, onCompleteAll:finishedWithAllItems}, .02); the line of code above can replace your entire loop. the .02 value at the end is the "stagger" amount which does the same thing as your previous delay:i*.02. enjoy Carl

ugh. completely ignore what I said earlier. When I was "testing" what I thought was a fixed approach... I was reversing the tween while the timeline was still playing. my whole move the timeline declaration out thing was completely wrong as I was testing it wrong. attached is a file that illustrates the problem. when timeline completes (box2 fades out) box1's tween will not reverse but it's properties can be referenced as the original poster mentioned. click on the stage to reverse the tween. if timeline is playing, tween can be reversed, if timeline is finished it won't reverse. Carl

taking the timeline out of the function a scope will make this work: import com.greensock.*; var t:TweenMax = TweenMax.to(do, 1, {x:100}); var tl:TimelineLite = new TimelineLite(); //in a local function function a():void{ tl.insertMultiple([ t, TweenMax.to(otherDo, 2, {y:12}) ]) } a(); stage.addEventListener(MouseEvent.CLICK, reverseT) function reverseT(e:MouseEvent):void{ trace(t.currentProgress); t.reverse(); } i don't know the exact why or how of this. like you said it is sort of confusing that with the timeline declared in the function, t.currentProgress works but not t.reverse(). I'm sure there is a good reason. Carl

gee whiz that thing is neat. i know I wouldn't have thought of that approach.

i enjoyed fixing this. its really cool that you took something pretty small and were able to incorporate it into something much bigger. great job.

i think i got it. one of the issues was holder.mask was set before holder.cacheAsBitmap. i put the timeline creation in its own function so it is only created once. check it out: package { import com.greensock.*; import com.greensock.easing.*; import flash.display.*; import flash.utils.*; import flash.events.*; import flash.net.*; public class Slideshow1219 extends Sprite { var bars:Bars = new Bars(); var n:int = 0; var intCurrentSlide:int; var req:URLRequest; var holder:Sprite = new Sprite(); var loader:Loader; var rand:int; var nxtNum:int; var picNum:String; var slideCount:int; var xmlLoader:URLLoader; // slideshow xml loader var xmlSlideshow:XML; // slideshow xml var strXMLPath:String = "slideshow-data.xml"; var slideName:String; var history:Array = new Array(); var duration:Number=.5; var prevSlide:String; var timeline:TimelineMax; public function Slideshow1219(){ nxtNum = rand + 10000; picNum = intCurrentSlide.toString(); xmlLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete); xmlLoader.load(new URLRequest(strXMLPath)); createTimeline(); } private function onXMLLoadComplete(e:Event):void { xmlLoader.removeEventListener(Event.COMPLETE, onXMLLoadComplete); xmlSlideshow = new XML(e.target.data); // create new xml with the received data slideCount = xmlSlideshow..image.length(); // get total slide count trace("slideCount "+slideCount); loadSlide(); } private function loadSlide():void { prevSlide=history[history.length-1]; rand = Math.ceil(Math.random()* slideCount - 1); loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displaySlide); slideName = xmlSlideshow..@src[rand].toString(); trace("slideName "+slideName); if(slideName != prevSlide){ history.push(slideName); loader.load(new URLRequest(xmlSlideshow..@src[rand])); }else{ loadSlide(); } } private function createTimeline():void{ timeline =new TimelineMax({repeat:1,repeatDelay:2,yoyo:true,onComplete:loadSlide, paused:true}); for (var count:int = 1; count var mc:MovieClip=bars["bar"+count]; trace("doing it"); timeline.append(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), -.4); } } private function displaySlide(e:Event = null):void { holder.addChild(loader); bars.cacheAsBitmap=true; holder.cacheAsBitmap=true; holder.mask=bars; addChild(holder); addChild(bars); timeline.restart(); var duration:Number=.5; loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, displaySlide); addChildAt(holder, 0); if(holder.numChildren > 1){holder.removeChildAt(0);} bars.width = holder.width; bars.height = holder.height; // timeline.insert(TweenMax.from(mc, 2, {alpha:0, ease:Cubic.easeOut})); } } }

cool. i'll look at it later tonight.