GreenSock

By popular request, here's a "sticky" thread for showcasing what you've done with the GreenSock tweening platform. Go ahead and brag a little. It's allowed. Inspire others with what you've created. Even if it's not super whiz-bang, maybe you've got an effect or technique you used that could help others or give them some ideas. Please don't use it as a soliciting tool for jobs, though. Post your stuff and keep it short and simple. If you want to discuss the details about a particular technique, that's great - just start another thread and link to it from this one. Don't be shy. There's a huge community of users out there who could be inspired by your efforts.

I bet your item is running into the bounds. Remember, FlexTransformManager won't allow items to go past its edges. So let's say your FlexTransformManager is 300 pixels wide and tall and you load an image in that's 200 pixels wide and then try to moveSelection(200, 200), it'll actually end up only moving it 100 pixels in each direction. Then if you try moving it backwards (-200, -200), it will again only go 100 pixels either way assuming it started at 0, 0. It protects rotations from going outside the bounds too, just so you know. As for the numbers being slightly off, it is likely just due to floating point rounding issues which are next to impossible to avoid. I tried your code and it worked exactly as expected. As long as I wasn't violating the bounds, it went right back to where it was supposed to be. Also remember that rotations occur using the center of the object as the axis, so if the object's registration point is in the upper left (or anywhere other than the center), the x/y properties will be affected by rotations.

Any chance you could post a sample FLA? (don't include Simple3D please). The simpler the better And/or could you circle where the distortion/artifacting is happening? I haven't run into anything like that before.

Aha! Sorry about that - I needed to tweak one line of the code so that it would retain the delay you set in the vars object. My bad. It's fixed now. Please download the latest version and give it a shot. http://blog.greensock.com/v11beta/

Oh, if you don't need to call a function when it's all done, you can just omit those last two parameters. The stagger is the 4th parameter. Your allFrom call would look more like: TweenMax.allFrom([hexOrangeA,hexGreenA,hexOrangeB,hexOrangeC,hexGreenB,hexOrangeD,hexGreenC,hexOrangeE,hexOrangeF,hexOrangeG,hexOrangeH,hexOrangeI], 1, {autoAlpha:0, delay:1, scaleX:0, scaleY:0, ease:Back.easeOut}, 0.2)

Yep, that's because in order to clarify the API better, I moved "stagger" to official parameter status OLD: TweenMax.allTo([mc1, mc2, mc3], 1, {x:100, stagger:0.2, onCompleteAll:myFunction, onCompleteAllParams:[2, "myString"]}); NEW: TweenMax.allTo([mc1, mc2, mc3], 1, {x:100}, 0.2, myFunction, [2, "myString"]); This has the added benefit of strict data typing, more helpful code hinting in certain authoring tools, and reduced code. Sorry about any confusion.

TweenMax.allTo() and TweenMax.allFrom() return an Array of tweens. In order to insert that into a timeline, you need to use the insertMultiple() method (because insert(), append() and prepend() don't accept Arrays). If you want to add it to the end, just use the duration as the insertion point, like: buildHexTL.insertMultiple(TweenMax.from(hexMama, 0.5, {delay:1, autoAlpha:0, ease:Linear.easeOut}), buildHexTL.duration); Hope that clears things up.

Yep, that's why I mentioned in my previous post that I moved allTo() and allFrom() to TweenMax (from TimelineMax). Your code is still calling it from TimelineMax. (I posted a note on the blog page too). As for the dropShadowFilter stuff being applied via a regular TweenMax to an Array, I'm pretty sure that can't be the case. You sure? Could you post an example?

It's because "hexFX" is an Array. You're trying to tween a GlowFilter on an Array which won't work. Only DisplayObjects can have GlowFilters applied to them. I just posted an update to the platform and moved the allTo() and allFrom() methods from TimelineMax to TweenMax because several people have asked for that and the more I thought about it, the more sense it made. So if you want to tween all the DisplayObjects in the hexFX Array to the same values/filters/whatever, you can use that. I left the commented-out "allTo()/allFrom()" code inside TimelineMax if you still need it there (you can just uncomment it for now). Hope that helps.

Hm. Well, if you're still running into trouble, please post an FLA (along with the gs class files) that demonstrates the issue so we can see if we can replicate the issue. Maybe try re-downloading the tweening classes again just to be sure.

What changed between yesterday and today? Did you just download an update or something? What version of TweenLite/Max are you using?

Sent you another e-mail.

Ah, yes, it's due to another bug in Flex which can improperly report the parent for a few frames while the parent instantiates. But I believe I figured out a way to work around it internally. Please download the latest build and let me know if it solves the problem for you. (use the link from the e-mail I sent you)

Two questions: 1) Are you using the latest version (1.66 or later) 2) Does trace(MyNewSWF.parent) return null if you put it right before the addItem()?

Yep, looks like yet another bug in the Flex framework. It doesn't accurately perform globalToLocal() on a canvas with a border (it offsets things by the thickness of the border). You can see proof with this simple MXML: <br> import mx.containers.Canvas;<br><br> public function doMain():void {<br><br> var redReg:Point = red.parent.globalToLocal(red.localToGlobal(new Point(0, 0))); //just translates the origin of the red box into the coordinate space of its parent where we'll position the green box.<br><br> //now position the green box directly over the red box (you'll see that it's actually offset by however thick the border of the parent is (which is a bug in Flex)<br> green.x = redReg.x;<br> green.y = redReg.y;<br><br> } <br> ]]><br> If you've got any ideas on how to elegantly work around the Flex bug, let me know. I'm not interested in littering my code with a bunch of conditional logic to accommodate a Canvas border, though, especially because it seems to be an obvious bug in the framework that Adobe will hopefully fix on the next rev of Flex.

Ah, the joys of working with AS2. It's a scope issue. Delegate.create() is your friend. eventHandler:Delegate.create(this, onTransformObject) (don't forget to import mx.utils.Delegate)

It'd be SUPER helpful if you'd zip up a simplified Flex project that clearly demonstrates the issue and send it directly to me via e-mail or private message. When I pasted your code into Flex, it kept complaining "Initializer for property 'states' is not allowed here". I've got a lot on my plate at the moment and don't have much time to try building something that reproduces the problem (TransformManager seems to work great for me and nobody else has complained about a similar issue), so your help would be greatly appreciated.

Did you make sure your HTML wrapper is correct? LiquidStage doesn't actually make the SWF go full-browser. You need to set up your embed code (probably using SWFObject or something) in a way that fills the browser. Then when the SWF is scaled, THAT'S when LiquidStage does its work

The problem was that when you pinned your objects, you set the "accordingToBase" parameter to false instead of true. The purpose of that parameter is to tell LiquidStage if it should be pinned according to its original position on the unscaled stage (BEFORE it gets scaled in the browser) or not. The default value is true because that what is most typically desired, but if you pin something later (at runtime dynamically), you might want to set it to false. So in your case: BAD: LiquidStage.pinObject(menu, LiquidStage.RIGHT_CENTER, false, 0); GOOD: LiquidStage.pinObject(menu, LiquidStage.RIGHT_CENTER, true, 0); Once I set it to true, things seemed to work the way you expected.

It looks like the problem had to do with the fact that you were adding the item to TransformManager before adding it to the display list. I made an adjustment in the class, though, so it should resolve the issue. Just download it from the link in the e-mail I sent you and let me know if that works well for you.

I wonder if it's another bug in the Flex framework. There are tons of them (acknowledged by Adobe). Have you tried tracing cont.transform.matrix? Is it null? If so, I'm almost positive that's a Flex bug.

It sounds like your SimpleCanvas isn't actually a DisplayObject. All DisplayObjects have a "transform.matrix" property which is necessary for TransformManager to do its work.

The reason I didn't implement something like this is because I thought it would hurt performance (creating and dispatching events every time the mouse moves can degrade performance). It wouldn't be terribly difficult to implement, though. I'll consider it for a future release.

Did you make sure you're using the correct version of SWFObject? That's the most likely problem. But have you also tried removing fscommand("fullscreen", "true"); from the browser-based one? Just curious.

It certainly looks like there's a bug in the Flash Player (unrelated to TweenLite/Max) because the position seems to shift intermittently (about 50% of the time in my tests) with the following code (notice there's no TweenLite/Max stuff): import flash.display.*; import flash.filters.*; var mySquare:Sprite = new Sprite(); var maskCir:Shape = new Shape(); mySquare.graphics.beginFill(0x000000); mySquare.graphics.drawRect(0,0,200,200); mySquare.graphics.endFill(); maskCir.graphics.beginFill(0x000000); maskCir.graphics.drawCircle(100,100,50); maskCir.graphics.endFill(); addChild(mySquare); addChild(maskCir); mySquare.mask=maskCir; mySquare.filters = [new BlurFilter(20, 20, 2)]; setTimeout(removeFilters, 1000); function removeFilters():void { mySquare.filters = []; }