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.
44 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.
I get a ton of errors when trying to compile using TextMate and the Flex SDK. There are lot of variables without type set.
You get warnings. Either set data types on the unset variables or disable strict compilation in your fcsh settings.
@Stephen Braitsch I fixed the typing of the variables. This is good. Just need to tweak some things to make it work for my needs. The registration point issue of the object being transformed is a bugger. Currently it looks like the object being transformed needs to have it’s registration point in the center.
@Stephen Has this code been rewritten since you posted the example? When I use this the mouse_up listeners never fire, when I release the mouse after scaling a MovieClip the MC still scales on mouse move.
@Stephen I don’t think this Transform Tool likes dynamically created movieClips. I spent several hours with it tonight and can’t get the movieClip to drag after it is added to the stage. The transform tools work to scale or rotate but after you initialize the transformation you can’t get rid of it on MouseUP. I’m generating mc’s on the fly, pushing them into an array that the transformTool is using. Any hints?
Sample: http://www.thespikeranch.com/test/dm/
Thanks again!
@gerry check to see that you have access to the stage inside of the onMousePress & onMouseRelease handlers. If trace(this.stage) returns null that would be your problem right there. Ensure that the transform tool is being added to your main canvas sprite and not the dynamic mc’s you are setting as the target.
I am using internal MovieClips nether stage movieClips,what have i to do make it correct.???
Hi Stephen,
Excellent work, I myself was working in some tool like this & it works but yours really nice & works smoothly, but the difference is that my tool works over Dynamic sprites as well, I hope you could modify this point in your tool it would be awsome.
I will supply my tool in your site as soon as I finish it in a good looking output. regards to you all.
First of all, thank you SO MUCH for posting this code. It is exactly what I’ve been looking for. I’m a bit of an AS3 hack at the moment so solid work like this is immensely helpful.
I’m having one issue with it that I imagine is a pretty easy fix. I just need to know where to change AS.
When I select an item to be rotated the rotation box/handles appears far away from the item. The item is on the right side of the page while the handles are all the way to the left of the page.
Is there a setting in the TransformTool file that will fix this? That will place the transform handles exactly around the item to be transformed?
You can see the file I’m working on here…
http://lotusmomentsevent.com/wordpress/?page_id=38
Thanks again!
Thanks a million times for this great code!
I have a little problem though.
I have a mysymbol that is nested in root.middle.myclip (and inside there is mysymbol that I want to be transformed). The code is written on a frame of myclip.
Where I am supposed to add the _transform -addChild(transform)- so Tool “focus” right? At the moment everything is working except that the transform tool instance doesn’t focus exactly on top of mysymbol.
Again thanks for your help
Dimitris
Finally solved!
I had to set my nested clips at x:0, y:0.
In case sb has the same problem.
FIX: The only problem I see is when switching between objects the next objects jumps to where the previously selected one is.(from SteveW)
On function onMousePress, move this line:
_mouseOffset = _targCenter.subtract(_mouseDownPos);
after the next cicle for.
CODE FIXED:
private function onMousePress(evt:MouseEvent):void
{
if (evt.target is Stage) hideBoundingBox();
_mouseDownPos = new Point(mouseX, mouseY);
// check if a registered target was selected //
for (var i:int = 0; i < _targets.length; i++)
{
if (evt.target==_targets[i]) {
activeTarget = _targets[i];
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveTarget);
}
}
_mouseOffset = _targCenter.subtract(_mouseDownPos);
if (evt.target is TransformHandle) {
_handlepressed = true;
stage.addEventListener(MouseEvent.MOUSE_MOVE, transformTarget);
}
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseRelease);
//stage.addEventListener(MouseEvent.MOUSE_UP, onMouseRelease2);
}
nice fix NEXO, there is also a weird jump when scaling. Click the outer or inner point of the handle ( furthest point away from the object that is being scaled but still on the handle. ) Its particularly noticeable when using larger handles. This offset I have no idea how to compensate into the scale method.
@ CHRIS: do you mean the jump that the mc does after the scale? The mc is bigger than the Stage or go out after scale?
hi
great code
i tried to use it in a project but i have a problem
i have a movieclip that loads a external image
after the image is loaded i add u’r tool
the problem is that the image appears from the center of the transformation box (so the image is loaded on the bottom right part of the transformation box http://quasiperfect.eu/temp/example.jpg)
any ideas ?
Center your loaded image in a Sprite and then set that Sprite as the target of the transform tool.
hmm i tried that no luck
i made a sample project in witch u can see the problem
http://www.quasiperfect.eu/temp/test.rar
hi to everybody,
after you draw the object, use this to reset the registration point of the object:
myObj.transform.matrix = new Matrix(1,0,0,1, -regx, -regy);
where regx and regy are the half of the obj width/height
with reseting the regpoint the transform tools work like a charm
many thx for shareing this script
greets marek
Thanks for sharing the code, im making pretty much exactlly this (for a basic ‘make-your-avatar’ configurator kind of project) but couldnt wrap my head around proper rotational code.
By the looks of it, this will definatlly provide me with all needed info/math to finish my own, so ye, thanks
Does this work with dynamically created Sprites inside nested clips?
This is a great script thank you!
Anyone got an example of getting this to work with a loaded image?
I’ve read above and tried but the tool is not aligned correctly.
I have a script that allows a user to upload an image then it downloads again at which point I’m trying to apply the transform tool.
I’m close but it is all wonky and I get various degrees of transforming, none of this is due to the script which is great