Rotate On Center in Adobe Flex

Sometimes our programs have visual objects that need to be rotated. The default registration point in Flex is the top left corner, but that’s not always ideal. In Flash, we have the freedom to change that registration point — not in Flex.

We have to work around this limitation in Flex and I have seen a few different approaches. There are some blog posts out there that suggest using the Rotate effect, this seems messy to me. If you want to rotate around any point using a MatrixTransformer: Joel Connett has a great post on it here. I quite like that method, but I think I’ve found a more simple solution for center rotation.

Here’s a sample you can play with:

Click Here for Source Code

Try clicking the "show canvas" button, you'll see a white box that surrounds the bottom right quadrant of the spiral circle. It is only that quarter of the circle which is actually in the canvas. I have placed the center of the circle at the top left corner of the canvas. The canvas will (by default) crop content that exceeds it's boundaries; however, there is a property on the canvas called "clipContent". Set that to false and voila.

I know this is really simple solution, but it wasn't obvious to me until recently. Leave a comment to let me know if this helped to you.

This method works with Flex 2 and Flex 3.

12 thoughts on “Rotate On Center in Adobe Flex

  1. Great idea – just what I was looking for 🙂

    (Why didn’t I think of this myself??)

    Thanks 🙂

  2. This is pretty cool.

    Another option, especially if you’re doing this programmatically, is to add the item to a parent UIComponent, and offset it within the UIComponent.

    – Derrick

  3. NOOO! The source is gone! Why didn’t you give us a little hint in your body?!?!?!? This is exactly what I’m looking for I think but I can’t tell. maybe I can decompile your swf?!

Leave a Reply

Your email address will not be published. Required fields are marked *