Transform Tool – Drag, Scale and Rotate in Flash at Runtime
August 8, 2008 • Actionscript / Flash • 66 Comments

On a recent project I created a Transform Tool similar to the one you might find in a typical CS3 application like Photoshop, Illustrator or Flash. Once you instantiate this tool and and assign it a target, you can easily scale, drag and rotate it around the Stage at runtime. Optional properties include a min and max scale value, a boundaries Rectangle object to constrain where the target can be dragged and custom scale and rotate handle icons that you can specify via a linked MovieClip in the library.

TransformTool

In a future version I will combine scale and rotate into one mode eliminating the need to select between them.

View the documentation here
View the source files here

Update 11/24/09 : This class has been refactored for improved legibility. Also added now is the ability to register specific targets on the stage via an internal _targets array. See documentation for details.

Update 11/24/08 : There was a syntax bug that was confusing placement of the transform handles which subsequently was throwing the selected object off screen at times. This has been fixed.

← Older Comments
  • shikra

    will u plz tell me
    how can i use this for text,textfields??

    regards

  • saurabh

    Hi,

    I have seen the tool and i am very much impressed.

    Can I get the same stuff in AS2??

    Thank you n best regards

  • Isabel

    Hi,
    many thanks for sharing this, it’s great for my project.
    There’s only one little question, how can I put the transform tool target in the hightest level? I mean if is it possible that when a piece is selected it appears over the rest.
    Thanks again and sorry for my English!
    Kind regards,
    Isabel

  • http://www.yahoo.com faixi

    hay thanks man its awesome :)

  • newbie

    Hi, i am newbie here, extremely interested in this transformtool. Excellent piece of work. now my query is can I use it for a different set of shapes. Could you please show me a sample of how to add another shape to this. Thanks

  • Jordi

    STEPHEN BRAITSCH, thats awesome. Thanks for sharing!

  • Charles

    Cool!

    I borrowed your rotation function for a project where I needed to do something similar with a DynamicMovie class object. The math was making me crazy!

    Totally saved my sanity.

  • Rob

    This is Great! Quick question is there away in the code were the image does not scale in proportion. I would like to have it were you can distort the image.

  • http://alesys.net Rolf Ruiz

    There is a problem with the bounding box points when the clip and the transformtool are inside multiple nested items.

    I solved it changing repositionBoundingBox function:

    private function repositionBoundingBox():void
    {
    _stroke.x = _target.x;
    _stroke.y = _target.y;
    // reposition handles //

    var p1 = _stroke.localToGlobal(new Point(_stroke_tl.x, _stroke_tl.y));
    var p2 = _stroke.localToGlobal(new Point(_stroke_tr.x, _stroke_tr.y));
    var p3 = _stroke.localToGlobal(new Point(_stroke_bl.x, _stroke_bl.y));
    var p4 = _stroke.localToGlobal(new Point(_stroke_br.x, _stroke_br.y));

    var pp = globalToLocal( new Point (parent.x, parent.y));

    tl.x = p1.x+pp.x; tl.y = p1.y+pp.y;
    tr.x = p2.x+pp.x; tr.y = p2.y+pp.y;
    bl.x = p3.x+pp.x; bl.y = p3.y+pp.y;
    br.x = p4.x+pp.x; br.y = p4.y+pp.y;

    }

  • Reinhardt

    Hi Stephen, I’ve only come across this now, wow, looks great. Coyuld you supply the cs3 version again, I’ve downloaded it and it wont open.
    Will be greatly appreciated, excellent work.
    Reinhardt

  • Stephen Braitsch

    You can download a CS6 trial and backport the file to CS3 if you need it.

  • parishann

    It’s awesome! Great work ya, Stephen ! Thank you for sharing this !! =)

  • http://www.facebook.com/SnuK964 Max Stein

    Hi Stephen!

    Great tool, thanks a lot. I have one little problem that I was hoping you or someone could help me with.

    I have one large MC named back_mc on my stage and ontop of that MC layer I have a button that when pressed adds another MC from my library to the Background. Back_mc is recognized by the transform tool and works fine. The other MC that gets layered into back_mc after clicking the button gets added and can move. However, the added MC and the transform tool border do not properly fall in place. The other thing is, when I move Back_MC then try to move the added MC, the borders of the added MC are changed further.

    Is there a way for both MC’s to work with the transform tool while one MC is within the other MC?

    Thanks. I can provide my code and FLA if needed.

    MAX

  • braitsch

    Try creating a container sprite and adding both of your MCs to that and then set the container sprite as the target of the transform tool. When the content of the container sprite changes you may have to reset the activeTarget of the TT to the container again so it redraws the boundaries correctly.

  • http://www.facebook.com/SnuK964 Max Stein

    Stephen. I think I tried what you have recommended but I cannot be sure since I am not as advanced in AS3 as you are. I am still unfortunately having the same issue.

  • Ganeshan Nadarajan

    The Transform tool in which the target can be dragged and custom scale and rotate handle icons that you can specify via a linked MovieClip in the library.

← Older Comments