This is an update to my earlier post announcing the launch of FTM. Source provided after the jump.
Download: Source only | Source + Examples
This update consolidates some of the changes people have requested and some refactoring.
Usage:
// Only need one instance per project
var fts:FreeTransformManager = new FreeTransformManager(false);
// Register any DisplayObject and you are done. handles are activated when user clicks on testObj
fts.registerSprite(box);
You can also use the functions below to manually set the properties. These functions trigger the FreeTransformEvent so it should work seamlessly with the handles. For more information, download the example to take a look at how they are used.
public function setWidth(w:Number):void {};
public function setHeight(h:Number):void {);
public function setSize(w:Number, h:Number):void {};
public function setRotateDeg(r:Number):void {);
public function setRotateDeg(r:Number):void {};
public function setScale(s:Number):void {};
public function setRotate(r:Number):void {};
public function setPos(x:Number, y:Number):void {};
Other users:
// Listen to ON_TRANSFORM event.
fts.addEventListener(FreeTransformEvent.ON_TRANSFORM, onTransform);
// Manually activate the handlers on a DisplayObject
activateSprite(sourceSprite:DisplayObject):void
// Deactivate a DisplayObject
deregisterSprite(sourceSprite:DisplayObject):void
// Update the handlers after the DisplayObject is modified externally
updateAfterChange():void
// Whether to show tracking points and angle lines
property showInterestingStuff
// Hides handlers. But they will be visible again the next time the user clicks on a registered DisplayObject
hideHandlers():void
Properties exposed by event:
targetObject:DisplayObject // The DisplayObject that is in focus.
x:Number // X position
y:Number // Y position
rotation:Number // Rotation in radians
rotationInDeg:Number // Rotation in degrees
scale:Number // Scale (1 = 100%)
Styling properties:
handleOutlineColor:uint;
handleFillColor:uint;
boundingBoxOutlineColor:uint;
handleRadius:Number;
handleOutlineThickness:Number;
boundingBoxOutlineThickness:Number;
If you’ve tried it in your project and found it useful, do drop me a link. And if you found it really useful, do consider making a donation! *shameless smiley* ![]()
Do you have a version that supports multi-touch gestures?
Hi William, nope not at the moment.
It seems that FTM only works on objects with registration-point set on top-left corner. How could I modify the FTM code to make it work for those that have the registration-point in the center?
Hi Purga, that’s an interesting problem that I haven’t thought of, do you have the .swf hosted somewhere that I can take a quick look?
Hey bro! Love the program, so awesome and useful you have mad design skills.
I got one question…
I see in this example that when you nest an object into another the transformer still works perfectly for the parent object.
What if I wanted to allow the child object to be selected and rotated as well… (but not moved)
any pointers to get me started in the modification to your code to allow that? How can I get the transformer to select the child objects?
It would be useful say for a human character… I could let the character be moved + rotated and then grab his individual limbs and rotate them into new positions as well.
Thanks again for the sweet tool!
Thanks Devin =)
The use case you are describing is not really what FTM was meant for though, sounds like a more specialized tool is appropriate. Perhaps a rotation tool with a fixed pivot and less handles.
I think Purga from the previous comment sent me some code that might help, I’ll report back when I find some time to look at it.
Cool Ryan,
Yea I’ve been trying to modify the code to add this additional fixed pivot rotation but its been a little hard.
I’ve updated it so that now child objects are registered a children and parents are registered as parents. Then when child objects are clicked I prevent the tool from conforming to the parent and instead have it conforming to the children.
Then I removed the movement and scaling functionality but haven’t updated it to be rotation for a fixed pivot point yet.
What I’m having trouble with at the moment is when a parent object is clicked and the tool conforms to its shape, no child objects can be clicked because I think the mouse clicks only get noticed by the transform container and not the underlying child objects. So if I click a child then an parent it works fine, but if I click a parent I can’t click any of the underlying children.
Cool Ryan,
Yea I’ve been trying to modify the code to add this additional fixed pivot rotation but its been a little hard.
I’ve updated it so that now child objects are registered a children and parents are registered as parents. Then when child objects are clicked I prevent the tool from conforming to the parent and instead have it conforming to the children.
Then I removed the movement and scaling functionality but haven’t updated it to be rotation for a fixed pivot point yet.
What I’m having trouble with at the moment is when a parent object is clicked and the tool conforms to its shape, no child objects can be clicked because I think the mouse clicks only get noticed by the transform container and not the underlying child objects. So if I click a child then an parent it works fine, but if I click a parent I can’t click any of the underlying children.
I know your tool wasnt designed for this so I’m not expecting much, but any help is appreciated~ and if purgas code helps i’d love to know
Hey Ryan
Don’t worry about the previous question, I ended up building a custom tool to do this fixed pivot point rotation.
I’ll send you a link when the project is up and running.
I just have one question left… Any idea how I could horizontally flip one of the objects?
I’ve tried code such as this:
function horizontalFlip(event)
{
var matrix:Matrix=event.currentTarget.transform.matrix;
matrix.transformPoint(new Point(event.currentTarget.width/2,event.currentTarget.height/2));
if (matrix.a>0) {
matrix.a=-1*matrix.a;
matrix.tx=event.currentTarget.width+event.currentTarget.x;
} else {
matrix.a=-1*matrix.a;
matrix.tx=event.currentTarget.x-event.currentTarget.width;
}
event.currentTarget.transform.matrix=matrix;
}
but this code only works if you don’t rotate the object first.
Any idea how to make this possible after rotation?
Hi Ryan,
Great work, i’m playing around with your script and have to say i really like it. I’m currently working on a self portrait styling application, user takes a webcam snapshot and adds glasses, hair and other stuff (these are fts objects). Everything is fine until i’m moving to next frame and i have to deactivate all the objects after copying pixels from the canvas.
Would you mind to give a tip how to deactivate all the objects, not only the one that is currently on focus?
I appreciate your work, thanks
Thanks Sam and Devin, but I’m afraid I won’t have time to help, sorry! I will be terribly busy all the way up to Feb 6, when the TV show I’m working on is launching. Check it out at http://www.angelsgate.com/tv !
Hi Ryan! Great script!!!
Is there are a way to make the objects rotate by 45 degrees only? I’ve been playing around with it but I can’t figure it out.
Really great work! Kerp it up!
Thank you in advance!
found that code to display html format text to dynamic textfield in as3:
var url:String = “http://edeejay.dyndns.org:8000/currentsong?sid=1″;
var loadit:URLLoader = new URLLoader(); loadit.addEventListener(Event.COMPLETE, completeHandler);
loadit.load(new URLRequest(url));
function completeHandler(event:Event):void {
myText_txt.htmlText = event.target.data as String;
}
all work fine in local , but when upload to the net , swf can’t display the text ??? thanks for your help
anyone ever figure out how to horizontally flip the objects?
nice work…. but is it any way to transform textfield without changing fontsize?
Great work. Continue…AS3 community is with you.