madbutter

I have worked for years with an interactive audio/video development environment called Max/MSP/Jitter made by Cycling '74. It is a visual development environment where you "patch" objects together using virtual patch cords to create processing chains. The built-in objects are written in C and you can write your own, and a lot of developers also use Java as well, to write new objects or use a large library of existing objects that run in the JVM. Javascript has also been possible for several versions of Max, and the new version uses Mozilla's Jaegermonkey Javascript 1.6 engine behind the scenes to interpret the text contents of a javascript object you can make in your patch. Also in the latest version is support for a graphics engine call Mgraphics, although I can find no reference to it outside of Max. Mgraphics raises the possibility of doing sprite animation inside of Max, which is great at real-time video manipulation. I've worked in Max and Flash alternately for years, one for realtime video effects and the other for sprite animation. I was hoping that GSAP would let me use my Flash skills to do complex sprite animation in Max. The first problem seems to be that the code is specifically meant to be rendered in a browser, and is laden with browser/DOM calls like references to window and document objects. Has anyone done anything with GSAP as a pure JS library that would work outside the browser? Thanks, bob

Hi Jack, Thanks for the prompt reply! Yes I guess it does make sense, and the workaround would give me what I want. I was looking at your code for your slideshow and I see that you do this to get a continuous scroll: private function _enterFrameHandler(event:Event):void { if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) { if (this.mouseX < _SCROLL_AREA) { _destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED; if (_destScrollX > 0) { _destScrollX = 0; } trace(_thumbnailsContainer.x); TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX}); } else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) { _destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED; if (_destScrollX < _minScrollX) { _destScrollX = _minScrollX; } TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX}); } } } Interesting approach - I would think that restarting the Tween over and over again with the default easing would make it lurch slightly, but the thumbnail container moves smoothly. Hmmm, I guess since the restart is called on an enterframe event it only gets rendered once (and despite the fact that it would take 15 frames to play the tween at 30fps if it wasn't restarted) Why did you pick .5 as the timing? I take it that you just played with the timing number and the _SCROLL_SPEED to come up with something that looked right -its not easy to tell what your speed is, right? I set the time to 0 so that my scroll velocity was actually _SCROLL_SPEED, but I have a feeling that you picked that .5 number for a reason... Just trying to understand better how it all works under the hood a bit. -bob

Simple newbie question, I fear: I wanted to start an object moving, say, right in x until I stop it. I was hoping I could use something like: TweenMax.to(mc, 1, {x:"10", repeat:-1}); I was surprised to see that mc would move 10 to the right, then go back to its original position, then move 10 to the right again. Wouldn't it move 10 pixels to the right of its new position at the end of the tween, over and over again, essentially animating right 10 px per second? Why would I want to do this, rather then simply incrementing mc.x in an enterframe function? I dunno - I was thinking that you could make a timeline where the first Tween eased into an x velocity then the second kept that velocity smoothly until you stopped the tween...