TransformTool modification

Recently I used the great senocular Transform Tool for a Flex2 project.
We just needed to made a little modification to the way the scale transformation worked. Something like the Photoshop’s Transform tool, where the registration point only affects rotation, while all the scale controls are independent from the registration point.
For this reason I modified a bit the TransformTool code to allow this feature to be set on/off (I called this scaleWithRegistration)

Hold down SHIFT key while rotating or scaling to constrain transformation
Double click to complete transformation.

Get Adobe Flash player

This is the code used in the mxml Application file:

< ?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="" layout="absolute" creationComplete="init()" backgroundGradientColors="[#ffffff,#ffffff]" viewSourceURL="/test/flex/2/transform_tool/srcview/index.html">
   <mx:image x="10" y="45" source="" id="image" complete="onImageComplete(event)"/>
      < ![CDATA[
         import com.senocular.display.TransformTool;
         private var tool:TransformTool;
         private function init():void
         private function onImageComplete(event:Event):void
            var timer:Timer = new Timer(1000,1);
            timer.addEventListener(TimerEvent.TIMER, function(evt:TimerEvent):void
            image.addEventListener(MouseEvent.CLICK, createTool);
         private function onDoubleClick(event:MouseEvent):void
            tool = null;
         private function createTool(event:MouseEvent):void
               tool = new TransformTool();
               tool.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
      = image;
               tool.scaleWithRegistration = scale_registration.selected;
   <mx:checkbox x="10" y="10" id="scale_registration" label="scale with registration" selected="{tool.scaleWithRegistration}" click="{tool.scaleWithRegistration =}" enabled="{tool != null}"/>
Source file of the modified senocular's transform tool
Title: Transform Tool (0 click)
Caption: Source file of the modified senocular's transform tool
Size: 449 kB

  • Nice 🙂

  • hosey

    Need to fix link to
    senocular Transform Tool
    It contains apostrophe at the end

  • Nice !

  • Really cool. Thanks Alessandro. There is another cool transform class you can find from

  • Jon

    Great job!
    Now the big question is – can we take a look at that modification you made to Senocular’s code?

  • Jon

    And yet another question – do you have the modification of the TransformTool code that allows it to work within Flex (as UIObject?).
    that’d be sweet…

  • To see the code just right click on the swf and select “view source”.
    BTW, the new tool extends the uicomponent, so it’s supported by flex too

  • Jon

    ahh… doh – didn’t think of the “View Source” option! Thanks for that Alessandro – great addition to the community.

  • san

    Thanks for this awesome tool. You guys are awesome!
    Can you please tell me one thing? After resizing, I see the tool is updating the transform matrix. Is there anyway I can actually scale the width and height instead?
    Also flex does not call the updateDisplayList method after the resize is done (nor any resize event occurs). Where can I add that trigger in this code?
    I’m happy hacking this for now, but if you guys can help me out it will be greatly appreciated.
    Again, thanks so much…
    Kind Regards,

  • brrucki

    Is it possible to have the transform tool select the current target within a canvas when it is clicked on in a flex 2.0 application..similar to what senocular did with the following line of code: = ( is Sprite) ? as Sprite : null;

  • Alessandro Crugnola

    yes, it is

  • brucki

    How’d you go about doing so? a code sample would be very helpful, thanks :).

  • Magi

    I have a situation where I’d like to pass in a registration point. Do you have a suggestion for a good way to go about that?

  • Hello and thanks for this nice twick of the TransformTool. Could anyone give me hints on how to best save the changes that are done with the tool. I want to have a way to save any changes made to the “target” (rotation, skew, scale…) so as to be able to reload those changes and update the target accordingly. I’m new to Flex but guess I need to save the matrix right? Any code sample! Thanks a million.

  • Ravi

    Thanks man Great stuff

  • rconceiver

    how can I restrict the drag area for the image.

  • rconceiver

    the tool is awesome..
    can u show how to restrict the boundaries of the tool.

  • How did you implement the skinned cursors? I see methods for skinning the controls but not the cursors.

  • There are two major things already mentioned here missing – setting a min/max height and width (not scale) and the more tricky point is to set some bounds in which the target has to stay – I’m trying to figure it out and post it as soon as I mastered it (if I will someday). Allesandro any help would be appreciated, it hasn’t to be free of charge – drop me an email PLEASE

  • Edy

    I would like to know how to add new control points to the tool. And how to remove some. I am trying to customize it to handle lines (only 2 control points).
    Any examples would be great.
    Thank you! This is a great tool.

  • Devendran

    Thanks for the great tool
    Where can i find the AS2 version of this tool?

  • kanu kukreja

    Its a very helpful tool.
    I would like to add new delete control and put the rotate control in the center.I tried both of these functionalities but not working.Any code sample!
    Again, thanks so much… Kind Regards, Kanu

  • kanu kukreja

    how i can add tooltip for each control???

  • Colin Shreffler

    I have tried using this component in Flex 3 but can’t get the constrainScale property to work.
    I’m assuming that by setting this to true, the component should maintain the aspect ration of the original image as its resized?
    PS: GREAT component. Thanks for sharing with the community.

  • Sandy

    Can you pls provide the facility of multiple object selection and tranformation 🙂

  • How to get the transfomed image width/height ?
    If you inspect .width or .height, It shows the original width and height and not the transfomed one.

  • Alessandro

    You will see them in the transformed matrix

  • mahesh

    I need some information to get the width and height of the tool.
    and i am using this tool for dragged images and i want to set the tool that tool can’t move on the total stage.
    i want multiple selection of the tool targets…
    Thanx in Advance,

  • Neo

    Nice tool,but it can not transform TextArea Any idea?

  • Hi,I am quite new with Flex, and not so experienced with AS3, I have a major problem, for some reason I cant use Senocular’s TransformTool with Flex, I had problems in my original app, and then found this blog, I copied the exact code from the example above and I get the same error, I cant add/initialize the tool(using the addChild method like in the example above) because when I do I get an error messaje :
    TypeError: Error #1034: Type Coercion failed: cannot convert com.senocular.display::TransformTool@114d42a9 to mx.core.IUIComponent.
    so it cannot be converted into a UI Flex component, but does it need to ? its not clear for me…aniway please help. thanks a lot, Flavius

  • Sameer

    Hello,i have a question. If I attached tool to a masked component, it doesnt care of the masked area instead of it use full dimension of the component for resizing? Please advice

  • Thanks to this awesome tool which helped understand some concepts related to the Matrix class. I faced some problems with the tool though while scaling a text control like TextArea in Flex. I created a simple tool from scratch that for that purpose. The example of the tool is present on my blog – Thanks for supporting the community.

  • Hello,
    Thank you for this tool. When I use the buttons placed in a VBox, can we force a redraw VBox children ?

  • delock

    Hi Alessandro,
    is there any solution to share in streaming all manipulation of this clip ?
    (like a whiteboard)
    Let me know if it’s possible

  • Multiple objects using Senocular TransformTool

    Senocular TransformTool is one of the best and most used components around the net. It is really useful for those (include me) who don’t want to fight against Matrix, concatenation of Matrix and all those painful stuff… The only ‘lack’…

  • I am sorry for bringing this up again, but how do you get the width/height of the transformed object ?
    I always get 0,0 (i want to use this tool to generate svg files server side, but need all transformations and of all, these 2 are the tricky ones).
    You mentioned about transformation matrix ? What do you mean ?
    Thank you! GR8 work of both Senocular and you.

  • Fred Val

    Hi Alessandro. I went to look deeper into the code but, because of lack of documentation, i cannot figure out how to unselect the transform tool around an image and then select again on another one. Any idea how to do that? Just changing the target doesn’t seem to fire the event that would update the tranform tool to display around the new image.
    Thanks and great job you’ve done

  • Vik

    Flex noob here.. So any help is appreciated.
    How can I get the wrapper/transform tool which is around the image on my click or later when I drag and drop the images on some other component rather than already having it?

  • Any way to have this tool working also from Flash (NOT flex)?
    As you know, the mx.core.UIComponent isn’t available from there!
    Can It be used another class as Sprite?

  • Hoang Huynh

    Thank you for sharing this! I worked around this by changing the registration point each time user interacts with the transform tool’s anchors — but your solution is clearly more robust.