Dave Stewart

Is there a way to set a default scope? I generally don't use the onScope properties in Tween or TimelineMax, rather I bind my functions as I pass them in: function onComplete() { // do something here } var tl = new TimelineMax({onComplete:onComplete.bind(this)}); However, I've also got a fair few callbacks I'm using in the animation, and the .this is common to all of them, which is my Scene object. It would be really useful to do something like this, rather than any of the options above: function onComplete() { console.log(this); } function callback() { console.log(this); } var tl = new TimelineMax({onComplete:onComplete, defaultScope:this}); tl .to('#box', 2, {alpha:1}) .call(callback); Is that possible right now, or could it be implemented? Cheers, Dave

Hey guys, Thanks for taking the time to demo some code! That will certainly get me started in the right direction. It looks like the key is TimelineMax.set(). I have an Animation class that extends a Sprite class, so I could very easily wrap that code inside and get going pretty quickly. The core extracted code exported from Flash in EaselJS format looks like this, so as you can see, it would be pretty easy to just loop over that and set the correct properties: { images: ["nicky.png"], frames: [ [0, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [240, 0, 121, 198, 0, 57, 185.35], [361, 0, 122, 198, 0, 58, 185.35], [483, 0, 123, 198, 0, 59, 185.35], [606, 0, 124, 198, 0, 60, 185.35], [730, 0, 124, 198, 0, 60, 185.35], [854, 0, 125, 198, 0, 61, 185.35], [0, 198, 126, 198, 0, 62, 185.35], [126, 198, 127, 198, 0, 63, 185.35], [253, 198, 128, 198, 0, 64, 185.35], [381, 198, 129, 198, 0, 65, 185.35], [510, 198, 129, 198, 0, 65, 185.35], [639, 198, 130, 198, 0, 66, 185.35], [769, 198, 131, 197, 0, 67, 184.35], [769, 198, 131, 197, 0, 67, 184.35], [769, 198, 131, 197, 0, 67, 184.35], [769, 198, 131, 197, 0, 67, 184.35], [769, 198, 131, 197, 0, 67, 184.35], [769, 198, 131, 197, 0, 67, 184.35], [769, 198, 131, 197, 0, 67, 184.35], [0, 396, 131, 198, 0, 67, 185.35], [0, 396, 131, 198, 0, 67, 185.35], [0, 396, 131, 198, 0, 67, 185.35], [131, 396, 130, 198, 0, 66, 185.35], [261, 396, 129, 198, 0, 65, 185.35], [390, 396, 128, 198, 0, 64, 185.35], [518, 396, 127, 198, 0, 63, 185.35], [645, 396, 126, 198, 0, 62, 185.35], [771, 396, 125, 198, 0, 61, 185.35], [896, 396, 124, 198, 0, 60, 185.35], [0, 594, 123, 198, 0, 59, 185.35], [123, 594, 122, 198, 0, 58, 185.35], [245, 594, 121, 198, 0, 57, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35], [120, 0, 120, 198, 0, 56, 185.35] ], animations: { cup: [0, 35, true], cup: [36, 68, true], end: [69, 84, true] } } Cheers, Dave

I have the need to do some sprite sheet animation. It's fairly typical: A single PNG containing multiple images One or several arrays pertaining to frame indices, dimensions and offsets The code will set up the DOM element to the correct size, then update the background position on a frame by frame basis The spritesheet itself will be generated by Flash Pro. From what I'm aware it's not possible to do this with GreenSock directly, so my plan is either to use Easel JS, or program it manually. It seems a third option though might be to write a plugin for TweenMax. Is that possible? Is it a good idea? Is there an API for this (rather than using something like "onUpdate") ? Cheers, Dave

Makes sense! Thanks.

Is it possible to animate a property of an object based on the value of something else? I'd like to animate a parallax effect, so it would be useful to animate all but the top layer based on fractions of the top layer's left property.

Have just got a new client brief to build and animate a story-style site, very similar to this: http://www.costa.co.uk/experience/ http://www.creativebloq.com/netmag/how-costa-coffees-rich-parallax-website-was-made-11410486 It's pretty clear this will need a significant amount of top-down organisation and control aside from the creative / pure animation side, namely: asset management interactivity some kind of abstracted scene setup and animation control I'm perfectly happy building all this myself, using the usual tools such as Flash Pro, GreenSock, EaselJS, jQuery plugins, Backbone/Angular/etc but is there anything out there at the moment that either: solves the problem of managing scenes full of animation, or provides a robust animation scene management platform to build on I'm well-versed in animation and all kinds of JS frameworks, but before starting thought it prudent to ask how (or if) this particular cat may have been skinned before. I would imagine the ultimate solution will be a mix of both workflow (Flash, JSON, spritesheets, etc) and technical (HTML, JS, JSON, Framework X/Y/Z) to set up and manage each scene in a way that abstracts-away brittle JavaScript coding practices. Any input / experience welcome. Cheers, Dave

Jack, sounds great, and it is an absolute pleasure I'l let you know when it's up on github. Cheers for now, Dave

Hey Jack, I hope the world finds you well. I'd like to include LoaderMax as the loading mechanism for a small open source micro-framework I'm releasing in the next few weeks. I already have some rudimentary loading mechanisms that do the job adequately, but it occurred to me that as a lot of your code sets such a nice standard to build off, it might be better, rather than reinventing the wheel, to just use LoaderMax, as more than likely people would want to include this library anyway. No point making people instantiate 2 sets of loaders, directly or indirectly. So, on a practical level, should I just include the latest greensock classes in the framework, or just direct people to download your files directly? If you could let me know how to proceed, that would be great. Cheers for now, Dave

Hey Jack, You know I think I've figured out the problem, and you will be pleased that I can 100% confirm that it has nothing to do with TweenLite. The culprit lies with MonsterDebugger, or more accurately, how I was calling traces with it. The standard way to trace something to the MonsterDebugger console for inspection is as so: MonsterDebugger.trace(, ); The first parameter must always be the application, i.e. "this", and the second parameter is what you want to inspect. So to simply inspect an XML list, I would write the following code... MonsterDebugger.trace(this, assetNodes); ...giving an output like this: # | Time | Target | Message | Memory 6 | 20:05:49:466 | [object IndexPage] | (XMLList) | 66824Kb Double-clicking on the entry in the debugger would allow you to visually inspect and navigate the passed XMLList, however, there is no way to inspect the Target parameter, which is often what I wanted to look at, so I started to trace the following throughout my app: MonsterDebugger.trace(this, this); It turns out that ONLY this code, and not anything in Gaia, my app or Greensock was making the animation seemingly "pop" in, I guess as Flash and MD communicated, and some intensive processing took place. Interestingly, the memory consumption column in MD stayed around the same, so I don't think it was this - I suspect that perhaps inside MD it was resolving recursive references or something like that. Anyway - good to finally get to the bottom of it. My app is now performing as smoothly as I would have expected, and I just want to thank you again for your help in looking at the problem. I will be purchasing a Greensock membership as soon as the client pays me! All the best, Dave

Right - I swapped back to my old TweenLite version, 8.16, and everything (again) is fine: >> CONTENT PAGE TRANSITIONING IN [object ContentTest] has an alpha of 0.10546875 [object ContentTest] has an alpha of 0.20703125 [object ContentTest] has an alpha of 0.296875 [object ContentTest] has an alpha of 0.37890625 [object ContentTest] has an alpha of 0.3828125 [object ContentTest] has an alpha of 0.46484375 [object ContentTest] has an alpha of 0.53515625 [object ContentTest] has an alpha of 0.5390625 [object ContentTest] has an alpha of 0.609375 [object ContentTest] has an alpha of 0.609375 [object ContentTest] has an alpha of 0.671875 [object ContentTest] has an alpha of 0.671875 [object ContentTest] has an alpha of 0.734375 [object ContentTest] has an alpha of 0.734375 [object ContentTest] has an alpha of 0.78515625 [object ContentTest] has an alpha of 0.78515625 [object ContentTest] has an alpha of 0.8359375 [object ContentTest] has an alpha of 0.875 [object ContentTest] has an alpha of 0.91015625 [object ContentTest] has an alpha of 0.94140625 [object ContentTest] has an alpha of 0.96484375 [object ContentTest] has an alpha of 0.96484375 [object ContentTest] has an alpha of 0.98046875 [object ContentTest] has an alpha of 0.9921875 [object ContentTest] has an alpha of 0.9921875 [object ContentTest] has an alpha of 0.99609375 [object ContentTest] has an alpha of 1 >> CONTENT PAGE TRANSITIONING IN COMPETE! So this might suggest that there's something up with the latest and greatest...

OK. There is definitely something funny going on. I replaced the TweenLite calls with some old fashioned enterframe handlers and the pages smoothly animate in and out as they should. The Preloader clip however still pops on and off as it is still controlled by TweenLite. This also only seems to happen on animating in... out is fine. Am happy to provide more info, and I hope to hell this is not be being a klutz somewhere along the line.

OK - I've stuck some pretty obvious traces in there, along with a trace on TweenLite.to() that reports any objects that get tweened and their current alpha, and an onUpdate handler which reports the current alpha when the object tweens. OK - the file at http://www.davestewart.co.uk/files/files/greensock/tween-debug.zip Email me on dave at davestewart dot co dot uk and I will talk you though it. Are you on skype / msn / google chat? Skype suits me as at least I can just tell you which class is doing what, without too much time spent typing. In the meantime, this is a class reference (don't worry - it looks complex, but is just well-organised): And this is a kind of debug log - you can see TweenLite receiving the object with the alphas at 0, then immediately afterwards, the onUpdate callback reporting that the alphas are in fact 0.5 or more: Gaia Framework (AS3) v3.2.0 Instantiating: [object IndexPage] ChangeMenu MainMenu TWEENLITE TWEENING: [object PreloaderScaffold], which currently has an alpha of 0 Instantiating: [object HomePage] TWEENLITE TWEENING: [object IndexPage], which currently has an alpha of 0 [object IndexPage] has an alpha of 0.78125 [object IndexPage] has an alpha of 0.78125 [object IndexPage] has an alpha of 0.796875 [object IndexPage] has an alpha of 0.80859375 [object IndexPage] has an alpha of 0.8203125 [object IndexPage] has an alpha of 0.8359375 [object IndexPage] has an alpha of 0.83984375 [object IndexPage] has an alpha of 0.84765625 [object IndexPage] has an alpha of 0.859375 [object IndexPage] has an alpha of 0.87109375 [object IndexPage] has an alpha of 0.87890625 [object IndexPage] has an alpha of 0.890625 [object IndexPage] has an alpha of 0.90625 [object IndexPage] has an alpha of 0.90625 [object IndexPage] has an alpha of 0.9140625 [object IndexPage] has an alpha of 0.921875 [object IndexPage] has an alpha of 0.92578125 [object IndexPage] has an alpha of 0.9375 [object IndexPage] has an alpha of 0.953125 [object IndexPage] has an alpha of 0.953125 [object IndexPage] has an alpha of 0.95703125 [object IndexPage] has an alpha of 0.95703125 [object IndexPage] has an alpha of 0.96484375 [object IndexPage] has an alpha of 0.96875 [object IndexPage] has an alpha of 0.9765625 [object IndexPage] has an alpha of 0.984375 [object IndexPage] has an alpha of 0.984375 [object IndexPage] has an alpha of 0.984375 [object IndexPage] has an alpha of 0.98828125 [object IndexPage] has an alpha of 0.98828125 [object IndexPage] has an alpha of 0.9921875 [object IndexPage] has an alpha of 0.99609375 [object IndexPage] has an alpha of 0.99609375 [object IndexPage] has an alpha of 0.99609375 [object IndexPage] has an alpha of 0.99609375 [object IndexPage] has an alpha of 0.99609375 [object IndexPage] has an alpha of 1 Instantiating: [object GroupPage] > GROUP PAGE INITIALIZED TWEENLITE TWEENING: [object PreloaderScaffold], which currently has an alpha of 0 Instantiating: [object ContentPage] >> CONTENT PAGE INITIALIZED TWEENLITE TWEENING: [object PreloaderScaffold], which currently has an alpha of 0.15234375 > GROUP PAGE TRANSITIONING IN TWEENLITE TWEENING: [object GroupPage], which currently has an alpha of 0 [object GroupPage] has an alpha of 0.515625 [object GroupPage] has an alpha of 0.5859375 [object GroupPage] has an alpha of 0.6171875 [object GroupPage] has an alpha of 0.68359375 [object GroupPage] has an alpha of 0.70703125 [object GroupPage] has an alpha of 0.765625 [object GroupPage] has an alpha of 0.7890625 [object GroupPage] has an alpha of 0.8359375 [object GroupPage] has an alpha of 0.83984375 [object GroupPage] has an alpha of 0.859375 [object GroupPage] has an alpha of 0.89453125 [object GroupPage] has an alpha of 0.89453125 [object GroupPage] has an alpha of 0.91015625 [object GroupPage] has an alpha of 0.94140625 [object GroupPage] has an alpha of 0.953125 [object GroupPage] has an alpha of 0.953125 [object GroupPage] has an alpha of 0.97265625 [object GroupPage] has an alpha of 0.97265625 [object GroupPage] has an alpha of 0.98046875 [object GroupPage] has an alpha of 0.9921875 [object GroupPage] has an alpha of 0.9921875 [object GroupPage] has an alpha of 0.99609375 [object GroupPage] has an alpha of 1 >> CONTENT PAGE TRANSITIONING IN TWEENLITE TWEENING: [object ContentPage], which currently has an alpha of 0 > GROUP PAGE TRANSITIONING IN COMPETE! [object ContentPage] has an alpha of 0.9765625 [object ContentPage] has an alpha of 0.98828125 [object ContentPage] has an alpha of 0.99609375 [object ContentPage] has an alpha of 0.99609375 [object ContentPage] has an alpha of 0.99609375 [object ContentPage] has an alpha of 1 >> CONTENT PAGE TRANSITIONING IN COMPETE! I really appreciate this! I am so donating after this. Thanks, Dave

That's very generous of you! Do you have Gaia installed? You can run the files without, but it might make it easier.

I'm getting some very strange behaviour with tweening alphas, where stuff would at first appear not to tween at all, rather just "pop" to full alpha, then after setting the duration to 5 seconds, would tween from about 0.808 to 1. In other words: Seconds: 0 1 2 3 4 5 Values: 0 -----> 1 0.80 -----> 0.84 -----> 0.88 -----> 0.92 -----> 1.96 -----> 1.00 It's almost as if nothing happens for half a second or so, then the duration has "run out" and the tween has finished. However, even with the longer tween example I just mentioned - proportionally, the tween is still starting from too high a number, in this case 0.8 (4/5) of the way through in value, although only 1/10 of the way through in time. The strange thing is, this is the second project this has happened in, with unrelated code, and I'm very sure I don't have any other tweens going on. This project is Gaia-based, but I don't think there is anything else tweening - but is there any way I can check for other tweens happening at the same time? There's a Dictionary on the TweenLite class, right? Or could it be something else? Is this a known bug? Do I have conflicting classes? What the hell could it be? My tweens are currently very basic. It has literally just raised its ugly head today, right before a deadline tomorrow, so any help would really be appreciated - I really need to solve this. Thanks, Dave

Ah: "Important changes ("gotchas" to watch out for when switching from v10 to v11)", jolly good! Sorry I missed that. I know what a pain it is when you write lots of docs then people miss the stuff you set out to make easy. Cheers, Dave

I'm getting the following errors (all the same on all objects) regarding autoAlpha throughout my project after upgrading from v8 to v11: ReferenceError: Error #1069: Property autoAlpha not found on flash.text.TextField and there is no default value. at com.greensock::TweenLite/init() at com.greensock::TweenLite/renderTime() at com.greensock.core::SimpleTimeline/renderTime() at com.greensock::TweenLite$/updateAll() Can anyone suggest where to start looking before I dive in to debug? Thanks, Dave

It's a little cumbersome to select from all the various algorithm / ease type combinations in one uber-dropdown of 30+ entries. What about 2 dropdowns (or one dropdown and one set of radio buttons) one with the ease algorithms (10) and the other the ease types (3)? It's not a massive deal, but I do like the Plugin Explorer as a nice way to quickly visualise the different tween types (although I usually plump for cubic anyway!) Cheers, Dave

Jeez Lousie... Jack that is excellent! I was a 3D animator in TV and film before I came over to coding, and where I used to somewhat like animating in Flash with it's rudimentary but effective animation tools, now they've introduced the bloody appalling new motion editor, it's a complete chore, with none of the good bits of the old approach and none of the good bits from other animation packages. This looks great - not only an elegant API, but logical too. You must be really pleased with yourself! I'm going to download now and get stuck in. Cheers, Dave

Cool - thanks for the reply. Is there a way / need to namespace groups of tweens as it is?

After reading through the source, it looks like you may have already solved this problem from a different angle with: OverwriteManager.init(); Perhaps this is a better solution as it solves the issue of conflicting tweens as well?

I have a bunch of tweens in one class that control colour when the mouse is interacting with an object (think SimpleButton but with tweened transitions). I also have another class that is responsible for dragging objects, with optional tweening to catch up to the mouse, and tweening returning to the start point when the interaction is finished. However, as the user interacts with the object, the tweens applied by one class end up overwriting the tweens applied by the other. As each class is sealed, they will know nothing of the other's tweens, so using overwrite: is not an option. Is there a built-in way to separate sets of applied tweens into groups, or namespaces, so they don't overwrite each other? Thanks for reading, Dave

OK, readable textfields with ani-alias for animation look ****! So I've reverted to an old trick we used to use when I was in broadcast animation: Apply a 1px blur to the text. It's too little to be visible, but enough to soften the pixels so when the moving element resolves *exactly* to the grid at the end of the animation, it doesn't suddenly become bright as the curves of the text snap to whole pixels. EDIT - actually, just realised that this (the snapping) shouldn't affect non-moving text fields (my text fields in my final app are moving) but it also seems to do the trick. Cheers, Dave

Hey Up, Yeah - I pretty much thought that would be the case. OK - I redid the test file, but this time had the text field anti-aliasing set to "anti-alias for animation" and everything was fine! It appears that anti-alias for readability" causes this problem. I guess I'll just have to change my text fields and see how this affects things. Any further thoughts!? Cheers, Dave

I'm having problems with text suddenly jumping marginally (but noticeably) brighter at the end of tweens. Try this: 1 - Create a new AS2 .fla 2 - set the background to black 3 - place a dynamic textfield on stage called tf, set its color to white, embed the fonts, and type some random text in 4 - place this code in the main timeline: import gs.TweenLite; tf._alpha = 0; TweenLite.to(tf, 2, {autoAlpha:100}) 5 - test the movie Now, when the text field fades in, it suddenly jumps from grey to white, just before the end! Does anyone know what I can do about this? Thanks, Dave

The other option might be to provide 2 packages. "gs" as the default as not to scare noobs, then a (obvious) link for us more seasoned scripters so we could download the TLD style of package. I know it's a pain for you, but you could perhaps check the stats from the page after a month or so and see for yourself which has proved more popoular. Cheers! Dave