TransformManager (AS2) – Scale/Rotate/Move any MovieClip
- Version: 6.22, Updated 2010-07-21
- Compatibility: Flash Player 8 and later (AS2) (AS3 version also available)
Description
TransformManager makes it easy to add interactive scaling/rotating/moving of MovieClips/TextFields to your Flash application. It uses an intuitive interaction style that's similar to most modern drawing applications. When the user clicks on a managed MovieClip, a selection box will be drawn around it along with 8 handles for scaling/rotating. When the mouse is placed just outside of any of the scaling handles, the cursor will change to indicate that they're in rotation mode. Just like most other applications, the user can hold down the SHIFT key to select multiple items, to constrain scaling proportions, or to limit the rotation to 45 degree increments.
Click here for the AS3 version of TransformManager.
Features
- Select multiple items and scale/rotate/move them all simultaneously.
- Perform virtually any action (transformations, selections, etc.) through code.
- Optionally set minScaleX, maxScaleX, minScaleY, and maxScaleY properties on each item
- Arrow keys move the selection (optional)
- You can set the scaleMode of any TransformItem to SCALE_WIDTH_AND_HEIGHT so that the width/height properties are altered instead of _xscale/_yscale. This can be helpful for text-related components because altering the width/height changes only the container's dimensions while retaining the text's size.
- There is a 10-pixel wide draggable edge around around the border that users can drag. This is particularly helpful with TextFields.
- Define bounds within which the MovieClips must stay, and TransformManager will not let the user scale/rotate/move them beyond those bounds
- Automatically bring the selected item(s) to the front in the stacking order
- The DELETE and BACKSPACE keys can be used to delete the selected MovieClips
- Lock certain kinds of transformations like rotation, scale, and/or movement
- Lock the proportions of the MovieClips so that users cannot distort them when scaling
- Scale from the MovieClip's center or from its corners
- Listen for Events like SCALE, MOVE, ROTATE, SELECTION_CHANGE, DEPTH_CHANGE, CLICK_OFF, FINISH_INTERACTIVE_MOVE, FINISH_INTERACTIVE_SCALE, FINISH_INTERACTIVE_ROTATE, DOUBLE_CLICK, and DESTROY (exactly like AS3 events)
- Set the selection box line color and handle thickness
- Cursor will automatically change to indicate scale or rotation mode
- Optionally hide the center handle
- VERY easy to use. In fact, all it takes is one line of code to get it up and running with the default settings.
Notes / Limitations
- All MovieClips that are managed by a particular TransformManager instance must have the same _parent (you can create multiple TransformManager instances if you want)
- TextFields cannot be flipped (have negative scales).
- TextFields cannot be skewed. Therefore, when a TextField is part of a multi-selection, scaling will be disabled because it could skew the TextField (imagine if a TextField is at a 45 degree angle, and then you selected another item and scaled vertically - your TextField would end up getting skewed).
- Due to a limitation in the way Flash reports bounds, items that are extremely close or exactly on top of a boundary (if you define bounds) will be moved about 0.1 pixel away from the boundary when you select them. If an item fills the width and/or height of the bounds, it will be scaled down very slightly (about 0.2 pixels total) to move it away from the bounds and allow accurate collision detection.
 |
 |
As always, there's a 30-day money-back guarantee included. If you don't like the class and would prefer to forfeit your license and get a refund within 30 days, no problem.
Other links: License | Forums | AS3 version
Documentation
Click here for full ASDoc documentation (ASDocs are for the AS3 version which has virtually the same feature set plus XML export/import capabilities)
Important properties
- constrainScale : Boolean To constrain items to only scaling proportionally, set this to true [default:false]
- scaleFromCenter : Boolean To force all items to use the center of the selection as the origin for scaling, set this to true [default:false]
- lockScale : Boolean Prevents scaling [default:false]
- lockRotation : Boolean Prevents rotating [default:false]
- lockPosition : Boolean Prevents moving [default:false]
- arrowKeysMove : Boolean When true, the arrow keys on the keyboard move the selected items when pressed [default: false]
- autoDeselect : Boolean When the user clicks anywhere OTHER than on one of the TransformItems, all are deselected [default:true]
- allowDelete : Boolean When the user presses the DELETE (or BACKSPACE) key, the selected item(s) will be deleted (except TextFields) [default:false]
- allowMultiSelect : Boolean To prevent users from being able to select multiple items, set this to false [default:true]
- bounds : Rectangle Defines the boundaries for movement/scaling/rotation. [default:null]
- lineColor : Number Controls the line color of the selection box and handles [default:0x3399FF]
- handleSize : Number Controls the handle size (in pixels) [default:8]
- handleFillColor : Number Controls the fill color of the handle [default:0xFFFFFF]
- paddingForRotation : Number Sets the amount of space outside each of the four corner scale handles that will trigger rotation mode [default:12]
- enabled : Boolean Allows you to enable or disable the TransformManager [default:true]
- forceSelectionToFront : Boolean When true, new selections are forced to the front [default:false]
- selectedTargetObjects : Array An easy way to get an Array of all selected targetObjects
- selectedItems : Array Similar to selectedTargetObjects, but returns the TransformItem instances of the selected items
- items : Array All of the TransformItem instances that are controlled by this TransformManager (regardless of whether they're selected or not)
- targetObjects : Array All of the targetObjects (MovieClips) that are controlled by this TransformManager (regardless of whether they're selected or not)
- hideCenterHandle: Array If true, the center scale handle will be hidden.
- ignoredObjects : Array Sometimes you want TransformManager to ignore clicks on certain MovieClips, like buttons, color pickers, etc. Those items should populate the ignoreObjects Array. The MovieClip CANNOT be a child of a targetObject.
Events
- TransformEvent.SELECTION_CHANGE (the TransformEvent's "items" Array contains any items affected by the selection change - either deselected or selected. to determine which items are selected after the Event, check the TransformManager instance's selectedItems Array)
- TransformEvent.MOVE
- TransformEvent.SCALE
- TransformEvent.ROTATE
- TransformEvent.FINISH_INTERACTIVE_MOVE
- TransformEvent.FINISH_INTERACTIVE_SCALE
- TransformEvent.FINISH_INTERACTIVE_ROTATE
- TransformEvent.CLICK_OFF (only called when autoDeselect is false, otherwise the DESELECT event is called)
- TransformEvent.DELETE
- TransformEvent.DOUBLE_CLICK
- TransformEvent.DEPTH_CHANGE
- TransformEvent.DESTROY
All TransformEvents have an "items" property which is an Array populated by the affected TransformItem instances.
EXAMPLES
To make two MovieClips (myClip1 and myClip2) transformable using the default settings:
-
import com.greensock.transform.TransformManager;
-
var manager:TransformManager = new TransformManager({targetObjects:[myClip1, myClip2]});
To make the two MovieClips transformable, constrain their scaling to be proportional (even if the user is not holding down the shift key), call the onScale function everytime one of the objects is scaled, lock the rotation value of each MovieClip (preventing rotation), and allow the DELETE key to delete the selected MovieClip from the stage:
-
import com.greensock.transform.TransformManager;
-
import com.greensock.events.TransformEvent;
-
-
var manager:TransformManager = new TransformManager({targetObjects:[myClip1, myClip2], constrainScale:true, lockRotation:true, allowDelete:true, autoDeselect:true});
-
manager.addEventListener(TransformEvent.SCALE, onScale);
-
function onScale(event:TransformEvent):Void {
-
trace("Scaled " + event.items.length + " items");
-
}
To add myClip1 and myClip2 after a TransformManager has been created, set scale constraints so that myClip2 cannot be scaled below 50 or above 100, and then listen for when only myClip1 is selected:
-
import com.greensock.transform.TransformManager;
-
import com.greensock.events.TransformEvent;
-
-
var manager:TransformManager = new TransformManager();
-
-
var clip1Item:TransformItem = manager.addItem(myClip1);
-
var clip2Item:TransformItem = manager.addItem(myClip2);
-
clip2Item.setScaleConstraints(50, 100, 50, 100);
-
-
clip1Item.addEventListener(TransformEvent.SELECT, onSelectClip1);
-
-
function onSelectClip1(event:TransformEvent):void {
-
trace("selected myClip1");
-
}
Tip
- I want autoDeselect on, but I don't want items deselected when the user clicks on certain buttons or form elements. How can I accomplish that?
You have several options. You could have TransformManager ignore particular MovieClips using the addIgnoredObject() method, or try this:- Set autoDeselect to false
- Add a background MovieClip (it could have a transparent fill so that it's invisible but still clickable)
- Add an onRelease listener to that background MovieClip that calls your TransformManage's deselectAll() function.
FAQ
- If I purchase TransformManager, do I get access to the raw source code files or just a SWC?
You get the raw source code. Feel free to tweak it if you want, (just don't redistribute it). - What if I purchase TransformManager but don't like it? Can I get my money back?
Of course. I always offer a 30-day money-back guarantee. If you'd like to forfeit your license and get your money back, just e-mail me and I'll promptly send you the refund. - Do you offer discounted pricing for charitable/educational projects?
Yes, depending on the project. Feel free to contact us about your request at info@greensock.com. - What are the terms of the license? Is there a multi-user/corporate license available?
If you would like to use TransformManager in a commercial appication or on a team with multiple developers, all you need to do is get the corporate Club GreenSock membership that corresponds to the number of developers in your organization (including freelancers, consultants, etc. who may get access to the code). See the licensing page for details and answers to frequently asked questions. - Can I use TransformManager to transform dynamically-loaded assets?
Absolutely. Just load your asset, make sure it is fully instantiated, and then use the addItem() method to add it to your TransformManager instance. Keep in mind that all of a TransformManager's items must share the same _parent. - I want the old (free) version that doesn't have all the new features - where can I get it?
You can get it here. - Where can I get the AS3 version?
Get the AS3 version here.
Need Help?
Feel free to e-mail me a question. Or post your question on the forums.
 |
|
Comments (35)
I’ve been getting a lot of people commenting about the delete function not working, but the reason they think it’s not working is because they’re only trying it in the authoring test environment (after hitting CTRL-ENTER when working in their FLA) and they haven’t selected the “Disable Keyboard Shortcuts” under the Control menu. Doing so would prevent Flash from intercepting the key press. If/when they tested it in the browser or in a projector or anywhere outside of the test environment, it was working fine for them. So please remember to select “Disable Keyboard Shortcuts” under the “Control” menu when you’re looking at your test movie inside Flash!
I was hoping I could replace one of the movieclips with a simple:
loadMovie(“image.jpg”, test_mc);
Although the movieclip is now untransformable, any help on why this would be the case and possibly a work around.
The reason your newly loaded MovieClip isn’t transformable has to do with the fact that when you do a loadMovie() call, Flash dumps everything about the old MovieClip and replaces it with the new one, so the “hooks” that the TransformManager had into the old clip are broken. I’d recommend removing your MovieClip from TransformManager, then loading the new content. When you’re sure the clip has finished loading (so that the TransformManager can sense the _width and _height and _x and _y properties accurately), add it back to the TransformManager. You can select it immediately if you want after it loads by calling myManger.selectItem(myClip_mc);
Hope this helps.
hi,
just got to look into latest. wow it’s got the same functionality i had previously searched for and during that time i made it hard coded the bounds property.
one bug is for text control. if we rotate the text the text field becomes transparent.
Actually, siva, the text disappearing isn’t a bug – there’s a big warning in the documentation at the top of the class file – Flash won’t render any TextField that’s rotated UNLESS you embed the fonts. My bet is that your TextField doesn’t have embedded fonts. As soon as you embed them, I’m confident it’ll work perfectly for you. If you’re going to use a TextField without embedded fonts, I’d recommend setting the lockRotation property to true in order to avoid any confusion.
Hello Jack,
Thank you 1000000000000000000000000000000000 times for saving my days. I was searching for transform manager for last few days and no help. Specially I wanted to know how to constrain a transforming MC within a defined area. But With your class that can be done like a charm. 
I am going to use this with http://www.rockstargeodesigner.com ..
Thank you again
-Nish
Hey Jack
This TransformManager is excellent, I’ve tried a couple of different classes and this is by far the best that I have come across. It’s allowing me to do more than I actually wanted to, which is now giving me more flexibility in my application. Thank you for allowing us to use this freely, very much appreciated.
Sam
“Or maybe you just have a “save†button on the screen that loops through the MovieClips and records their properties. In fact, the application that I built this for does exactly that – I had to allow users to interact with MovieClips on the stage, rearrange them, and then save the new layout. Worked like a charm.”
Hey Jack,
Do you have any hints on how to do this?
Great work!
JV, if you’re asking me how to loop through the TransformManager’s MovieClips and get their properties, it’d be something like (not tested):
import gs.TransformManager;
var myManager_obj = new TransformManager({targetObjects:[myClip1_mc, myClip2_mc]});
function getNewValues():Void {
var clips_array = myManager_obj.targetObjects;
var mc:MovieClip;
for (var i = 0; i < clips_array.length; i++) {
mc = clips_array[i];
trace(“New values for ” + mc + “: _x:” + mc._x + “, _y:” + mc._y + “, _xscale:” + mc._xscale + “, _yscale:” + mc._yscale + “, _rotation:” + mc._rotation);
}
}
And then you’d just have your button call the getNewValues() function and save them wherever you want (I just traced them out so you can see them in the above function).
Hope that helps.
Luis from São Paulo, Brasil, a novice in Actionscript. Thanks for your help, Jack.
I want to capture the name of the mc clicked by the user. I tried inserting
on(release){
_global.mc_clicked=this._name;
trace(mc_clicked);
}
directly in the movieclips.
But it seems that TransformManager “deafen” events on objects “TransformManagered”. No answer.
But suddenly something astonishment ocurred! After one week making a lot of trials, I constructed a set of movieclips and the code above worked perfectly on them.
An they are identical to the others mcs! But now I can’t reproduce the “good way”.
May you help me?
Yes, Luis, in order to make the MovieClips clickable/draggable, my class must “hijack” the onPress and onRelease handlers, so if you set your own and then apply my TransformManager, it’ll overwrite them (until you set the enabled property to false). But it’s really easy to do what you’re trying to accomplish. Do something like:
var manager_obj = new TransformManager({targetObjects:[test_mc, test2_mc]});
manager_obj.addEventListener(“select”, onSelectItem);
function onSelectItem(event_obj:Object):Void {
trace(“selected MovieClip named: “+event_obj.item.targetObject._name);
}
First, thanks Jack for this amazing code!
My situation is this: I’m trying to use these scripts in conjunction with the Sepy ColorPicker. However, when I click to use the colorpicker, it recognizes the click as a deselect, so I lose focus on the transformable item I wanted to change the color of. Is it possible to tell the deselect to not really perform a deselect by ignoring clicks on certain movieclips? Thanks in advance for any pointers.
Jesse, yes, there is definitely a solution to your problem. In fact, I had to do almost exactly the same thing on a project I worked on. Simply set the autoDeselect property to false (it’s true by default). Then in order to sense when the user clicks off of the item (like when they’re clicking on your color picker), set up a listener for the “clickOff” event. In your event handler, you can test to see if the user is clicking on the ColorPicker – if so, do nothing (keep it selected), if not, deselect it by calling the deselect() method.
This is EXACTLY what I’ve been looking for. I’m glad I stayed up late tonight Will let you know when I have put it to good use. Thanks a great deal.
Great work with this class, it’s very useful, and it’s awesome that you are giving it to the community to use and learn from.
I do have one question…
If the object that you are transforming is in a container mc that is dynamic masked (and so the selection outline and handles disappear under the mask as well), is there a way to keep the _selection_mc from being masked too?
I tried modding some lines in TrandormItem.as..
findNextHighestDepth(_selection_mc._parent)
(changed to) findNextHighestDepth(_root),
and also changing _selection_mc = _targetObject._parent.createEmptyMovieClip(“selection”+l+”_mc”, l);
(changed to) _selection_mc = _root.createEmptyMovieClip(“selection”+l+”_mc”, l);
.. which did work to place selection_mc above the transform object and container movieclip that is masked, but now the selection_mc is created at _root coordinates 0,0 as it is no longer default to 0,0 in the same object..
Is there a better way to do this, or a way to mod it to account for the x and y offset…? Or are the x.y coords being set again somewhere else preventing me from setting them with _selection_mc._x = _targetObject._x; _selection_mc._y = _targetObject._y; in the initHandles() function?
..Or is this class designed around nesting the selection_mc in the target mc’s _parent and not really mod-able like this?
Thanks a million, love your code.
AS per my last q post…
I realized that what I have to do is set the selection MC X/Y coord’s to the not just the target X/Y, but that PLUS the container mc’s X/Y…
After the last modifications and going through and accounting for the parent’s X/Y offset everywhere there is a reference to the target MC’s position, it works great! It just goes to show how dynamic and flexible this well-formed code you’ve created can be.
Thanks again for this class, I will link you the site when it is done, and also donate something as well to encourage you to keep developing with such generosity.
Awesome!
Great flash tool
Can you help me on this?
I have a large MovieClip_A and inside it another smaller MovieClip_B
(Circle MC inside rectangle MC)
I want to make both movieclips transform using your component.
manager_obj.addItem(MovieClip_A);
manager_obj.addItem(MovieClip_B);
But only MovieClip_A will transform but not MovieClip_B
Binay, there are actually two problems with the idea of nested MovieClips being transformable:
1) Since the user needs to be able to simply click on a MovieClip to select it, how would Flash know when the user wanted to transform the subclip instead of the parent clip since technically clicking on the subclip IS clicking on the parent clip? Keep in mind that TransformManager applies onPress and onRelease handlers to each item and a parent’s handlers will override its subclip’s handlers in this case. That’s a Flash thing, not a TransformManager thing.
2) All of the items in each TransformManager instance must share the same _parent MovieClip. No nesting is allowed. You can, however, create new TransformManager instances for multiple MovieClips – just stay away from nesting, that’s all.
Hi Jack,
Any way i managed to transform both parent and child movieclip.
Parent MC: parent_MC
child MC: child_MC , circle_MC
parent_MC contains rectangular shaped child_MC and circular shaped circle_MC
If child_MC is selcted then remove child_MC from manager_obj and add parent_MC in manager_obj this will transfrom the parent_MC (i.e when we resize and rotate parent_MC, child_MC and circle_MC also gets transformed)
Now on delselect event remove parent_MC and add child_MC
While parent_MC is selected, if we want to select circle_MC which is child movie child of parent_MC, we have to deselect parent_MC first(i.e click outside parent_MC and then click on circle_MC)
Here is the code
var manager_obj = new TransformManager({forceSelectionToFront:false, allowDelete:true});
manager_obj.addItem(parent_MC.circle_MC);
manager_obj.addItem(parent_MC.child_MC);
manager_obj.addEventListener(“select”, onSelect);
manager_obj.addEventListener(“deselect”, onDeSelect);
function onSelect(event_obj:Object):Void {
_root.selectedMC=event_obj.targetObject;
if(event_obj.targetObject._name==”child_MC”)
{
mc=event_obj.targetObject;
_root.manager_obj.removeItem(mc);
_root.manager_obj.addItem(mc._parent);
}
}
function onDeSelect(event_obj:Object):Void {
if(event_obj.targetObject._parent._name==”parent_MC”)
{
mc=event_obj.targetObject;
_root.manager_obj.removeItem(mc); _root.manager_obj.addItem(mc.child_MC);
}
}
Thanks for your transform manager class.
Please excuse my previous request for help. I keep forgeting that things show up differently in the Macromedia design time versus the run time… when I ran this exact same SWF in a run time situation the transform outline and handles were correctly centered on the MC… Your class has saved me an unknown # of hours (which I am sure you know how many hours it saved me) … If my company ends up using this in the final product I will be back to donate as we regularly buy components to help save me time… Thanks! Check out my website if you do any C# coding and maybe you will find some free code there that may help you out as well…
Hi Jack,
Absolutely love this package – saved me hours and hours of work so thank you!
One question: When transforming a textfield, it seems to only work like in the above example (without distorting the text) when it is set to selectable = true. But when it’s selectable, it can’t be moved because the cursor changes to a “select text” cursor when the mouse is over the textfield.
I’ve put a selectable=false call in the “select” event, but then it stops the textfield from being transformable at all!
Any ideas how to get around this?
Dan, you’re right, it is tricky to handle transforming the text because it must be selectable but at the same time you want to give the user the ability to grab the whole text box and move it. So I took a similar approach to what a lot of graphics programs do – you just have to grab the EDGE of the text box and you can drag it around. Genius, I know.
But seriously, if you (or anyone) has a better idea, feel free to share. In the mean time, you should be able to grab the edges of the selection box to drag it around.
Jack, you are truly the man! This script does more than i even knew i needed.
Beautiful application. Thanks for sharing this. i have a question though
is it possible to do a proportional scale w/o using the shift key?
Thanks in advance
Sameer, absolutely you can. Just set the constrainScale property to true! No need to hold down the SHIFT key then – it’ll scale proportionally every time.
Totally AMAZING tool!
works perfectly.
This article is really terrific. The class files and sample file attached here is also great.
Hi Jack!
Thank you very (very!!) much for your excelent solution to scale/rotate/move issues.
TransformManager saved me lots of time and was 100% suitable for the problem i came into.
I used TransformManager in my personal project: http://www.faceinhole.com.
Thank you!!
Jose Teixeira (Portugal)
Sure, Matt, you should be able to change the “bounds” property anytime, either on the TransformItem or the TransformManager.
I like it very much………..
actually i’m a c# programer, I am going to develop a move for TShirt project.
It gives me courage and saves time
thank you very much…………..
Hi Jack,
Great tool – very well designed and of immense help,
thank you,
Mark
Jack, you are the man. Thanks for such great source.
Jack, I have simply these words for you “YOU ARE AWESOME”, this class saved a lot of my time and efforts.thanks again.
Dear Jack,
You are the great man in life and as2. You have reached two step ahead from others in our flash community.
Regards,
Nagarajan
You are the best!
Thanks you!