Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Polarathene

  1. Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows. I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened). If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?
  2. Just woken up, and with a fresh mind it occurs to me the pivot was probably at the center of the graphic but the graphic might not have been aligned correctly to have it's pivot at center(basically a bunch of circles). Could be the way I exported the SVG(pulling out separate elements for different animations), or that the SVG js lib I'm using is trimming/cropping the SVG layer instead of being the dimensions expected, thus not positioned correctly in the div. I'll look into this debugging with a css circle as a replacement first to verify if I'm right. That's what I get for coding all night to the morning!
  3. Hi, have started getting familiar with JS from AS3, want to work with GSAP of course I'm animating svgtags instead of divs, I'm not sure what is the cause of the issue, I'm doing a basic tween to rotate 360 degrees with repeat at -1. It starts off ok being centered where I want it and also ends at the same location, during the spin though it shifts to the side a bit for some reason. Any ideas? I'll try get a codepen up after I've slept. Not sure if I'll be able to load the specific graphic via codepen or not.
  4. I'm not sure how I would check the loading time like I do with VideoLoader. Not too concerned, was just curious why the first load takes 10x the duration regardless of the video file, and then any other video's same one or different will load considerably faster. Would seem that it's not related to the video but something on the code end, could be specific to the runtime handling new Video() rather than anything to do with loading.
  5. I know that I shouldn't be too concerned as this is something I've noticed while testing my app in debug. When I transition to a screen that has video content I've noticed my ui elements repositioning(Feathers/Starling) and figure it's due to the workload being too much for that frame. Haven't looked at scout but know that not loading video prevented it. I could alternatively load the video when the user presses the play button instead and have any delay occur there instead, what I'm interested in though was that the load time of 0.64 is for the first time I load a video, when I try any other it becomes 0.078, this is irrespective of what video I am loading(<15mb mp4 h264). I've had a look at the api and tried various options but had no luck. Am I right to assume there is some sort of initialization for the loader? It seems to be when I tell my loadermax queue to load the first file. Is there a way that I can avoid this delay by doing something with loadermax during my app startup? Again unlikely a major issue as long as it does not scale with file size in release.
  6. Yup, so pause(0) is the way to go. Cheers for all the help Awesome product!
  7. Err not exactly. I get that. I keep trying to point out with the last few posts that I'm dealing with two seperate timelines, I'm going to paste the code again from above. var timeline_1:TimelineLite = new TimelineLite({paused:true}) var timeline_2:TimelineLite = new TimelineLite({paused:true}) buildTween(timeline_1, 0.3) //adds tweens to target objects with a stagger of 0.3 buildTween(timeline_2, 1) //adds tweens to the same target objects with a stagger of 1 //These two tweens are added for each target object to both timeline_1 and timeline_2 inside the buildTween() function: /* var staggerValue:Number = i * _stagger _timeline.add(String(i), staggerValue) .fromTo(cardArray[i], 0.5, { alpha:0 }, { alpha:1, ease:Power1.easeOut }, staggerValue) .fromTo(cardArray[i], 0.5, { scaleX:0, scaleY:0 }, { scaleX:1, scaleY:1, ease:Back.easeOut }, staggerValue) */ //After tweens have been built, I start the first one timeline_1.restart() //Time passes, say 5 seconds a button is pressed that calls the following: timeline_1.pause()//reset the timeline with timeline.pause(0) and the problem below doesn't occur, as the playhead has reversed all the tweens setting the alpha/scale values back to 0. timeline_2.pause(2.2) //timeline_2 has done it's rendering with the playhead from "0"(initial paused state) to "2.2", it is unaware that the targets have had their alpha and scale values altered but resets them when the fromTo tween starts on the timeline? So before I manipulate either of the paused timelines, no tween targets are visible, all have scale and alpha set to 0 from the fromTo tweens. When I play timeline_1, if I then pause() it without returning the playhead to 0 reverting to the original state, when I then manipulate timeline_2 such as timeline_2.pause(2.2), then the tween targets that had their alpha/scale values set to 1 from timeline_1 will not reset to their property values to 0. Only the tweens that occur from timeline_2's starting time of 0 when it was paused on creation to the newly paused time of 2.2 will be affected. So I have the present solution of "timeline_1.pause(0)" , then timeline_2 will be accurate visually with it's tween targets. Perhaps I should make an example project?(Pretty much the same as the code sample above but you'd visually see what I'm trying to describe)
  8. I do pause() the timeline, I was asking if there was a better option than pause(0). If I just pause() and then manipulate the 2nd timeline like in the example in reply #13, then the tween targets don't reset to initial values that I set in my fromTo tweens. Is there a way to reset the tween targets to what they should be on the timeline I'm manipulating? Or is pause(0) on the previous timeline the best way to go about it like mentioned in the example in reply #13?
  9. If the starling movieclip class converts the number to int when the tween sends the value then what difference would roundProps offer? The immediateRender:true was required, tried it out with the latest GSAP release I had which had the invalidate()/fromTo bug, but with the pre-release 12.04 you provided immediateRender:true is no longer needed. So with the two timelines with the same tween targets being tweened, is it best to pause(0) the timeline I'm not going to actively be working with when I switch to using the other timeline? (example above in reply #13, timeline_1 & timeline_2) Or is there a better way to handle different sequences on the same targets?
  10. I think with my example I should have stayed with the names timeline_main, timeline_extra instead of 1/2. I had the tweens and the targets on two timelines, just with different staggered values. That's why I had a problem with rendering. I don't recall the fromTo causing an immediateRender:true without declaring it, it might have been part of the bug? I'll give it a go shortly. The movieclip having its frame property tweened looks like this: TweenMax.to(movieclipObj,1,{currentFrame:movieclipObj.numFrames,ease:Linear.easeNone,repeat:-1}) And testing it doesn't produce the error that I had mentioned, I think I was using a timeline initially like I described earlier, will try to see if I can get the old behaviour back. This one traces the currentFrame property being set with the same value about 6 times, the animation is only 8 frames, is there a way to only have the tween update the property when the currentFrame increments? I'm guessing it's sending a number to the setter which converts the value to int. Cheers.
  11. Ha, ok well I think your explanation clears it up. Below is roughly what I was doing with my code, from what I gather about the rendering, in this case I need to reset timeline_1 with pause(0) rather than just pause(). var timeline_1:TimelineLite = new TimelineLite({paused:true}) var timeline_2:TimelineLite = new TimelineLite({paused:true}) buildTween(timeline_1, 0.3) //adds tweens to target objects with a stagger of 0.3 buildTween(timeline_2, 1) //adds tweens to the same target objects with a stagger of 1 //These two tweens are added for each target object to the timelines sent to the buildTween function: /* var staggerValue:Number = i * _stagger _timeline.add(String(i), staggerValue) .fromTo(cardArray[i], 0.5, { alpha:0 }, { alpha:1, immediateRender:true, ease:Power1.easeOut }, staggerValue) .fromTo(cardArray[i], 0.5, { scaleX:0, scaleY:0 }, { scaleX:1, scaleY:1, immediateRender:true, ease:Back.easeOut }, staggerValue) */ //After tweens have been built, I start the first one timeline_1.restart() //Time passes, say 5 seconds a button is pressed that calls the following: timeline_1.pause()//reset the timeline with timeline.pause(0) and the problem below doesn't occur, as the playhead has reversed all the tweens setting the alpha/scale values back to 0. timeline_2.pause(2.2) //timeline_2 has done it's rendering with the playhead from "0"(initial paused state) to "2.2", it is unaware that the targets have had their alpha and scale values altered but resets them when the fromTo tween starts on the timeline? In another case I used a tween to control a starling movieclip currentFrame property instead of controlling it with starlings juggler. I had it trace the frame number it was changing and noticed when the tween reached the end as it would go back to the first frame the traced numbers went backwards eg("frame1","frame2","frame3","frame2","frame1"). Now that I know how the rendering works I understand why that is happening. Would be great if I could avoid that behaviour for that case though so it was telling the movieclip class to update the frame as the playhead moved back to 0 decreasing the currentFrame property. Is there some sort of book/resource out there to learn about all this? I guess that's what the forums are for
  12. Yeah I cleared it up earlier with you that it was due to me not clearing the timelines as they were paused. The 500 loop is not a part of my actual code, it was just to see the memory increase even though I'm sure I was disposing of everything for gc correctly minus the solution commented in the code that you gave me earlier. So the invalidate thing was a bug, well that's good to know Cheers for the preview. One last thing, if I have the following setup: timeline_main(has same tweens/targets, stagger 0.3) timeline_extra(has same tweens/targets, stagger 1) Then timeline_main.restart(), the tweens play through the sequence, if after that I call: timeline_main.pause();timeline_extra.pause("2") I notice that for timeline_extra's timeline all it's tweens up to that label are updated to what they should look like at that point in time. The tweens that would play after that point in time though have not reset their targets alpha/scale to 0, so...before "2" all tweens are executed/paused at that point in time, but any after that which have not started are not run at all? Can you explain this? If I set timeline_main.pause(0) instead, then all tweens are reset to the starting alpha/scale in the fromTo. Does the timeline_main have more influence? Or is it to do with the timing of the tweens from different stagger values. Is there a way to control the rendering of these timelines? Such as just rendering what tweens are active/placed at a specific time on the timeline, instead of going through and rendering/executing the previous tweens. Likewise can I reset the tween targets to the state they all started in where immediateRender:true set the scale and alpha values to 0, if I set the timeline_main to 0 the initial alpha/scale are set to what the from values in the tweens were, but not when I set timeline_extra to 0. If that's also troubling to take in I can create another example project demonstrating the issue and current solution. I might be using timelines wrong or it may be part of the bug that was fixed in your upcoming release which I haven't tried yet. Cheers for all the help, hugely appreciated. EDIT: I can confirm that it's not related to the fixed bug, most likely I am doing something wrong. If I play timeline_extra from 0 it will not update the tween targets to alpha/scale 0 until it reaches that point in time unlike timeline_main(both setup the same way via buildTween() function).
  13. Ok have put together a sample file that demonstrates the issues we've talked about. It's the full project folder for flashdevelop though perhaps all you need is the src folder. Startup is the document class. http://www.filedropper.com/greensockexample So the original problem was just caused by timeline = new timelinemax({paused:true}) where the previous was still paused and had no variable name referencing it but held references to the tween targets as you mentioned earlier. So that is sorted by using clear() instead of creating a new timeline instance. There is an example of the visual error I experience if I don't use invalidate() and another of memory increase when I repeatedly add the same tween/tween target. Code has plenty of comments, if you could explain the issue I have if I don't invalidate() that'd be great. I'm pretty sure it has something to do with having two timelines, where one has the tween targets active and the other has the same tween targets but paused.
  14. Just in case you're wondering why I set tweenLiteInstance to the timeline animation call, from what I understand the fromTo creates a tweenLite instance and I was experiencing a problem where I was getting unintended animation on my sprite graphics while another timeline was running, storing the instance and killing it fixed the issue.
  15. I guess I misunderstood invalidate(), I've removed it but noticed I'm getting an issue if I interrupt the timeline. First I'll bring up again that I'm not doing a for loop on a function 5,000 times design wise, I have a newGame() function that resets variables to starting values and builds the tweens on the timeline. To check that I had no memory issues I added the for loop and ran the function 5,000 times to avoid clicking a button that triggers newGame() manually. If I comment out the invalidate() line, when I run my code I see the animation play perfectly fine, if I press the button that runs newGame() while a tween is running on the timeline, when the timeline is cleared and the new tweens added for the next set of cards to animate that specific point in time where the previous tween was interrupted, the new tween in it's place does not seem to appear, but every other tween in the sequence worked fine. I tried this with different parts of the sequence and it was always missing the tween where I interrupted previously. Perhaps the alpha or scale value for that tween was at 0 and didn't tween to 1 when newGame() cleared the timeline and added a set of new tweens for the new sprite graphics. So I'm not sure what invalidate() does in this case that avoids that visual error, but it works and if that avoids any visual error I'm all for it. The newGame() function clears both timelines(autoTimeLine with a stagger of 0.3 and controlledTimeLine with a stagger of 1), it also performs removeChildren(0,-1,true) on the container sprite for my card graphics, in starling this is meant to perform dispose on the graphics which should free them up for gc, I also null the array and create a new one with "cardArray=[]" that stores the graphics that buildTween() uses to provide tween targets. There is a TweenMax.killAll() in there as well, though since I am no longer using tweenMax perhaps that is now useless. I've just added to newGame() after the timeline.clear() timeline = new timelineMax({paused:true}). This also fixes the issue like invalidate() was doing. Perhaps you can provide some more insight, still more than happy to put together an isolated example and if it reproduces the problem send it off to you. I know that I previously encountered an issue with restart() on a tween if it had a delay where the tween only moved back a few frames/moment in time rather than restarting completely. I tested it on a non-starling project and didn't encounter the error so it's possible any other issues I'm experiencing could be due to my use of starling/feathers/stage3D? As for the first issue we were discussing, it definitely seems like the starling sprites were the cause of the bulk of memory and weren't able to be gc'd due to the orphaned paused timelines that still had tweens targeting them. I just found it odd that if I copy/pasted the same line that created a tween with the same target, that the size continued to go up, as if it was adding a copy of the sprite or something else was going on that was increasing the memory. 5,000 iteration loop aside, I'll move the variables that are only used by my buildTween function into the function. I'm still pretty new to how to optimize code. Is there a better solution to restarting individual tweens than using a dictionary? Each newGame() will create 4-6 card graphics to be tweened based on the top 6 card values of a deck. At the moment I'm using: tweenLiteInstance = controlledTimeline.seek(drawCount).tweenFromTo(controlledTimeline.time(), controlledTimeline.getLabelAfter()) drawCount++ The sequence will always be drawn in the order it was built, for that timeline the tweens are 0.5 and have been staggered by 1 second, the label is just a string of the iteration in the buildTween() loop as provided above. Though using that code on the autoTimeLine with the stagger of 0.3 would cause other tweens to popup as they overlap and if taking manual input should only display one at a time. Using a dictionary I could just use: tweenDictionary[String(drawCount)].restart() drawCount++ The only problem I have with that is that each card graphic has two tweens as my alpha and scale have different eases(wanting alpha to be 1 before the bounce of the back ease on scale happens). Sorry about the huge amount of text, I really appreciate your support and hope to purchase a greensock license later in the year. If you need an example for any of the discussed issues, I work solely in FlashDevelop so I have no .fla file, I could provide a .zip of a project folder instead?
  16. Oh sorry, I was terribly tired up late trying to suss out what was going on, my code is in a bit of a commented out mess at the moment where I'm building the timeline, the abc value is equivalent to i, I meant to replace abc with i but must have missed it. The 2nd example didn't need either of those arrays, again my mistake from tiredness. I used a trace for each loop to trace the iteration number "trace(iteration++)" Just so I could visually see the progress before anything would display on the stage. With TweenNano it took alot less time to go through 5,000 loops than tween Lite or Max, I have no idea about actual performance. I invalidated to set the targets properties to the starting scale/alpha values, though if invalidate does more than that and it's better to set those directly prior I can change the code, figured it was more easier to tweak the tweenMaxVars. The variables that weren't declared in the examples were declared outside of the function I was looping, perhaps I've misunderstood performance optimization with looping: var arrLength:int var i:int var j:int private function startLoop():void { for(i=0;i<5000;i++) { functionToLoop() } } private function functionToLoop():void { arrLength = arr.length for(j=0;j<arrLength;j++) { //do something } } Is it the same just to declare var arrLength = arr.length inside the loop function? That'd be creating a new object wouldn't it? Whereas having the var outside of my functions would just update the value to the same object. I think the problem came from assuming the same when I did this loop I was performing "myTimeLine = new TimelineMax(paused:true)", in doing so the previous instance if paused was true would keep it in memory, though later I found that if I perform clear() on the timeline prior to replacing it with a new instance it gc's perfectly. I later removed creating a new instance in the function loop and just cleared the same timeline instance, which also gc's fine. I don't expect the user to ever go through 5,000 hands, though they might, it's a training app for casino staff and is intended for mobile deployment. The problem is solved with clear(), I just found it very odd how copy/pasting the same tweenmax lines so that it would add the two tweens say 2-3 times that belong to that same target was causing a large memory increase, the amount did change based on the target however as I mentioned I switched my card sprite for an empty sprite(starling sprites mind you). So I can only assume it's holding the targets in memory, but why would the memory increase if the tweens are exactly the same to the same target? A tween itself shouldn't have that much of a memory footprint right? As far as I know all references were cleared. And that simply turning paused from true to false at the start of the loop caused gc to work fine. Again the amount of instances in this case is intentionally high from doing a loop 5,000 times where each loop can add up to 12 tweens per timeline (of which there are two). If I could restart individual tweens without causing other tweens on the timeline to play with it I think I could use just a single timeline. My GSAP files were downloaded roughly a month ago, I could download again and see if the problem persists, although I have a working solution now if you like I can try sort you out an isolated project that demonstrates the issue.
  17. While typing out the post I realised that I was creating a new timeline each time I ran the function through the loop. Although I had it assigned to a variable, and thought that when instancing a new one the previous would be released for garbage collection. I can now perform a clear() on the timeline prior to doing anything else within the sequence building function. I also create the first and only instance of the timeline in my init rather than the function building the sequence. If you don't mind, is there a better way to go about building a tween sequence like this? I am tweening the same object but with two different duration/ease combinations, from what I understand I can't add multi-dimensional arrays to a timeline so I added the tweens to another timeline instance, this way it staggers the sequence correctly and labels are placed alongside the pair of tweens. private function buildTween(_mainTimeLine:TimelineMax, _stagger:int):void { tempArray = [] labelArray = [] cardArrayLength = cardArray.length for(i=0;i<cardArrayLength;i++) { var tempTimeLine:TimelineMax = new TimelineMax() tempTimeLine.add ([ TweenMax.fromTo(cardArray[abc], 0.5, tweenMaxVars_alphaFrom, tweenMaxVars_alphaTo ), TweenMax.fromTo(cardArray[abc], 0.5, tweenMaxVars_scaleFrom, tweenMaxVars_scaleTo ) ]) tempArray.push(tempTimeline) labelArray.push(String(i)) } _mainTimeLine.add(tempArray,0,"start",_stagger) _mainTimeLine.add(labelArray,0,"start",_stagger) _mainTimeLine.invalidate() } The opening post however I was working with a different approach to skip the extra set of timelines which is probably a better choice: private function buildTween(_mainTimeLine:TimelineMax, _stagger:int):void { tempArray = [] labelArray = [] cardArrayLength = cardArray.length for(i=0;i<cardArrayLength;i++) { _mainTimeLine.add ([ TweenMax.fromTo(cardArray[abc], 0.5, tweenMaxVars_alphaFrom, tweenMaxVars_alphaTo ), TweenMax.fromTo(cardArray[abc], 0.5, tweenMaxVars_scaleFrom, tweenMaxVars_scaleTo ) ], i*_stagger) _mainTimeLine.addLabel(String(i), i*_stagger) } _mainTimeLine.invalidate() }
  18. I'm putting together an animation in starling/feathers that scales a sprite from scale x/y values of 0 to 1, same with alpha property. I use a timelinemax instance to sequence a series of the same animation on different sprites staggering them by 0.3. I also created another timelinemax instance with a stagger of 1 with labels to manually progress through the animation one animated sprite at a time using buttons. This is being developed in AIR so I have access to System.gc(), I've noticed that if I run the code that creates all the tweens and sprites(card graphics which will be different each time based on shuffled deck input) when using System.gc() garbage collection works fine, but only if I don't create my timelinemax instances paused. I've also read over quite a few threads on this forum to see if anyone had memory issues with greensock classes but constantly see reassurance that is highly unlikely. Where I'm confused is that when creating the sequence, if I instead provide an array with exactly the same tween code to the same target with the same tweenmaxvars objects the memory continues to rise. Without any tweenmax calls using the sprites as targets, over a loop of the creation function 5,000 times I have only 16mb memory usage. When I add just one tweenmax call 383mb that the gc doesn't want to remove unless the timeline is unpaused, the sprites must be referenced by the timeline in some way as without creating tweenmax instances that target them they gc perfectly. I copy/pasted the tweenmax line 4 more times and added that as an array of tweens to the timeline, this gave 500mb+ in memory. Is all that extra memory only tweenmax related or is it holding/duplicating other information? I also gave it a stock starling new Sprite() instead of my card sprite and got 200mb from the loop. This is my tweenMaxVars and the tweenMax code(not actual function, though can try provide condense/isolated version if needed). private var tweenMaxVars_alphaFrom:TweenMaxVars = new TweenMaxVars( { alpha:0 } ) private var tweenMaxVars_alphaTo:TweenMaxVars = new TweenMaxVars( { alpha:1, immediateRender:true, ease:Power1.easeOut } ) private var tweenMaxVars_scaleFrom:TweenMaxVars = new TweenMaxVars( { scaleX:0, scaleY:0 } ) private var tweenMaxVars_scaleTo:TweenMaxVars = new TweenMaxVars( { scaleX:1, scaleY:1, immediateRender:true, ease:Back.easeOut } ) TweenMax.fromTo(cardArray[i], 0.5, tweenMaxVars_alphaFrom, tweenMaxVars_alphaTo ) TweenMax.fromTo(cardArray[i], 0.5, tweenMaxVars_scaleFrom, tweenMaxVars_scaleTo ) So is this sort of behaviour correct? I don't intend to use System.gc() intentionally, I just wanted to make sure that when flash calls it on it's own that there are no issues like the one described above where data is not removed from memory. One last thing, I noticed how much faster tweenNano is compared to lite and max at least with my situation. My tweens aren't overly complicated but I use "fromTo", is there anyway to get that functionality working with tweenNano or is it omitted for performance cost compared to the "to" and "from" functions?