The rotation property should, by default, rotate around the origin.
There are two ways to rotate around a different point.
1) set transformCenterX, transformCenterY
2) use the transformAround( ) utility function on UIComponent/
You can also use s:Rotate, but you have to set autoCenterTransform="true" to get it to rotate about the center.
Yeah, right now I'm using mx:Rotate, and the item will randomly jump outside of its renderer (it's in a tilelist). Is there a good way to rotate around a point (near the end of my group, not at the center) and still do a rotation effect? Best thing I can think of is to animate the rotation manually.
If you use s:Rotate instead, you can specify the transformX/transformY properties to pick a center to rotate around.
Also, note that you may be fighting the layout, which is trying to position the object inside the TileList. You might try the disableLayout="true" flag (again, on the spark version of Rotate).
Or do a post-layout rotation instead.
Looks like s:Rotate with disableLayout isn't any better. The item will still happily move away from where it should be when its container is scrolled.
How do I do a post-layout rotation? Does that handle the rotation being screwed up by subsequent layouts? The rotate works fine except that something comes along and butchers its x/y.
At this point, I'd need to see some sample code (simple running app would be best); otherwise we're just throwing out suggestions without knowing exactly what's going on, at that's apparently not helping.
There is a way to do post-layout rotation: set applyChangesPostLayout="true". In fact, that's what the 3D transform effects do by default. But again, this may not work for you, so it'd be better to see your actual (simplified) app.
Ok, here's what I've got. In the process of moving it from my current project to this temp one, my x/y origin calculation no longer works.
The various spacers everywhere are because I couldn't reproduce this when it was in a sterile fullscreen container.
1) Click a bunch of the gauge's to change their rotation.
2) Resize the window a lot- taking it so thin that only a single column is allowed seems to help.
3) Resize back to a respectable size and look at the renders- several of them are probably off in the woods.
I'm not really seeing the "off in the woods" artifact, but then the app is sufficiently complicated that I'm not sure what I'm looking for. I was hoping for something simpler with as few objects and layers of code as possible that demonstrates the problem (otherwise I'm spending more time figuring out what your code does than I am figuring out what the effects issue is).
By the way, did you know there's now an AnimateColor effect in the Flex 4 effects? I see you bundled one of your own...
Ok, I managed to make a much simpler example - the rotation just targets a local label. This one starts with sample data, not all 0's. Hopefully it screws up for you too, because on my end I don't even have to do anything to mess it up- it starts that way. The items will be outside of their renderers. I'm guessing it has to do with the animation playing before the entire view is laid out, but they never right themselves. This is similar to what happens for me- through some sort of resize/layout actions I cause the origin to get confused and from that point on it uses that new origin.
I'm using the native animateColor, but am using the third party tool to split the rgb values out of a color so I can apply the necessary changes to each color to pass into the animation. I should have just stripped out the hex ranges, but slapped this together pretty quickly.