Monday, March 22, 2010

Skinnable and customizable Transform Tool component

I've been working on transform tool component for Adobe Flex 4. It is completely skinnable and customizable component. Below you can find example how to use it. In this implementation skin class also used as config. I've created two additional skins. Use combobox to change them.

Please, use view source to get source code of example.
Also, cursors are created in mxml as vector graphics, you can create your own cursors and apply them in skin.
Here you can download source code of Transform Tool library. Also, you can download swc here.

Next version is released, see first example.

15 comments:

  1. can you tell me how add the close icon to this transformtool

    ReplyDelete
  2. Thank you so much. You have no idea how much of a help this has been. I have been trying to build my own transformation manager for the last 20 hours to no avail, and I finally stumbled upon yours. You win. You are amazing. Thank. You.

    ReplyDelete
  3. Thanks. This version still have few bugs. I'm going to fix them.

    ReplyDelete
  4. Thanks a lot. I have used math part of library. Formulas work great.

    ReplyDelete
  5. offset problems when transforming component in a scaled container. coordonates offsets should be calculated with localToGlobal.
    Also a great tool.

    ReplyDelete
  6. Hi, No, sorry it's only for Flex 4.

    ReplyDelete
  7. I use this one for flex 3. It's well done and well documented. http://www.boceto.fr/produit-9-library-geometric-transformation-manager-flash-flex.html

    ReplyDelete
  8. This tool is based on Flex 4 so it uses skinnable architecture. You can skin it as you whant :)

    ReplyDelete
  9. Thanks so much this tool is great!! saved me so much time.

    I made one simple update to the ResizeOperation...
    I gave it a property maintainAspectRatio so the rectangle doesn't expand vertically or horizontally without scaling the object.

    So within doOperation()

    // check for aspect ratio
    if(maintainAspectRatio) {
    var initialRatio:Number = initialRectangle.width / initialRectangle.height;
    var rectRatio:Number = rect.width / rect.height;
    if(rectRatio < initialRatio) {
    rect.height = rect.width / initialRatio;
    }else if(rectRatio > initialRatio) {
    rect.width = rect.height * initialRatio;
    }
    }

    ReplyDelete
  10. Thanks a lot!!! This tool was very helpful for me in my current project.

    ReplyDelete
  11. new version 2.3 is released. See my posts http://vstyran-flex.blogspot.com/search/label/Transformation

    ReplyDelete
  12. I have button onclick I have added combobox ib group now I want to add Transform Tool component to it how can I do this?

    ReplyDelete