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.
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.
21 Responses to Transform Tool – Drag, Scale and Rotate in Flash at Runtime
Hi there, Thanks for sharing the transform tool, but is there any settings to set whether to constrain proportion or not, appreciate it
Hi Tan, There currently is no support for constraints but that would be a great feature to add in. I plan on rewriting this again from scratch in the near future and that will surely be a feature to be included.
Hi!
I would like to know if you are capable of coding the rotation center to be moveable, like in flash.
A tiny white dot that can be moved around and that serves as a pivot point for the rotation and scaling.
That would be an excellent feature to add. Rewriting this component from scratch is high on my list of things to do as soon as I have a break from work and can throw a Saturday at it. Jack Doyle @ GreenSock has a utility for sale that looks to include all the bells and whistles. Have not tried it myself though.
GreenSock Transform Manager
Hi Steve,
I’ve worked with Senocular’s and Greensock’s transformation tools and find yours to be the most straight forward and easy to customize. Not using the matrix fits my needs the best. I’m working on drag and drop ability and am curious how to initiate a new _target. Great work.
Thanks,
Doug
It’s good script.
Thanks,
oarvoodoo
hello stephen
great script.
I have been playing around with it now for a couple of hours, but I cant figure out how I implement it in a real project.
I have a tool where users can design stuff, so the functionality should only point at those objects in the _canvas_mc (thats where user creates stuff)
But the script seems to wrap the whole stage no mather what. I have been trying, among other things, to filter by adding code to
checkInvalidTargets($targ)
But I have a feeling that I oversee something. You must have a prop or function. Or???
if you got a minute – it would be nice to hear from the wizard him self : )
cheers / Lasse
Hi Lasse,
I had a few minutes this morning to update the script and add in the ability to register only specific display objects on the stage. Take a look at the documentation and hopefully this will help make things clearer.
Cheers,
-sb
huha
)
thank you – that was most kind of you. I am stunned.
But I still have to work on the stage/root-level, don’t I? Would it be difficult to put in a setter where I also can assign the MovieClip/Sprite where I let my user play around. So I can isolate it and later use it for funny stuff.
In a real life project you would never do this directly on the stage level.
But rather make a “canvas” Movieclip where users can arrange their postcards or whatever it is. Typically you would want to “save” the creation by taking a snapshot of the clip. (sorry for my AS2-parlour
Like this
2.3 –userinterfacestuff etc
2.3.0 — lots of dynamic content to be dragged, rotated and layouted.
2.2 –CANVAS_mc
2.1 –PALETTE_mc
1. -platform_mc
0. stage
And typically I only want this behaviour on the canvas.
Yeah I know – my next question will probably be: and what about maing the elephant fly? Huh
)
hope the sun is bright. Here denmark it’s dead black night
cheers / Lasse Hall
The smileys came out wrong. They should be enthusiastic like me,
So don’t mind the silly smiley’s.
/ Lasse
Great work Lasse…
I am looking something like this tool.. and it’s a great fortune for one of my project.
Thnks a lot
champion for sharing your code, I like your approach as I have been having trouble getting the rotation working in my own attempts.
Hi Stephen!
Thank you for great work and source files! I’m currently working on a image application were the user can upload a picture and scale/rotate it to fit in an selected background. Then he/she can export the image as a profile picture on facebook=)
Complicated, but your post got me started well on my research!
Thank you for sharing the script!
hI Stephen:
This work of yours is great but after downloading it. I cant open it up in flash saying fail to open. Is it only myself? I tried different computer but none worked.Can you please check?
Thanks
hope to hear back from you soon
Hi Stephen,
thanks for sharing this beautyful Script with us.
@yima I just saved the .fla back out to CS3, the version that was in the zip was made in CS4. You should be able to open it now.
Hi,
I tried to understand how you’ve made this application.
what thoses constructors :
new HandleHintScale();
new HandleHintRotate();
refers to?
Thanks,
Alex
new HandleHintScale();
new HandleHintRotate();
are library items that represent the display object to show when rolling over the tool in scale or rotate mode. look inside the library in the fla.
Web site not live yet.
Newbie to flash from PHP. I have been trying to do all this using some SVG javascript libraries but drew a blank on the outputting for printing. So I have dragged and screaming back to flash. I see from the code that adding a movie to ‘_transformTool.targets = [f1, f2, f3, f4 , f5 ];’ simpl adds the functionality to that movie. Is it really that simple to use?
I am trying to create a ‘design and print’ web service where the client adds a text box / image or drawing then moves / rotates / fades etc and once the artwork is finished produce a jpg & vector image for large format printing.
The only problem I see is when switching between objects the next objects jumps to where the previously selected one is. I am using cs4. Also when I add a text box and convert to movie there is a problem scaling. http://www.iw50.com/transformTool/transformTool.html.
Cheers
SteveW
Ok thanks!
@stevew converting a textfield to a movieclip will still allow the textfield to receive mouse events. try disabling the textfield by setting textfield.mouseEnabled = false and setting the movieclip as the target of the transformTool.