Free Transform Manager As3

update: new version!

Put together a simple transform manager for a friend’s project. Supports dragging and single click scaling and rotating. Source provided after the jump.

Download: Source only | Source + Examples

I call it FreeTransformManager because it is free, but maybe I should have called it Simple instead, because it lacks some advanced features such as disproportionate scaling, shearing or setting a custom pivot, which exists in Senocular’s awesome TransformTool class. However, I think it rather excels in being a simple and lite alternative to other components, as scaling and rotating is merged into a single action and the absence of other features makes the code smaller too. Suitable for cases where you do not require the advanced features and just need a simple way to allow users to move, scale and rotate objects.

That said, if you can fork out USD$300 then GreenSock’s full featured TransformManager would definitely be a better choice.

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 to fund v2.0! :D
[donateplus]

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);

Other users:
// Listen to ON_TRANSFORM event.
fts.addEventListener(FreeTransformEvent.ON_TRANSFORM, onTransform);
// Manually acticate the handlers on a DisplayObject
activateSprite(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%)

  • Cesar Flores

    hi ryan.
    I entered a code to move objects dynamically loaded with arrows, and it works moves in four directions, but when I click again returns to the original position. Where is my fault.
    thanks

    stage.addEventListener(KeyboardEvent.KEY_DOWN, key)
    function key(e:KeyboardEvent):void{
    switch(e.keyCode){
    case 39:
    temp.x += 5;
    break;
    case 40:
    temp.y +=5;
    break;
    case 37:
    temp.x -= 5;
    break;
    case 38:
    temp.y -= 5;
    break;

    }
    }

    • http://www.ryantan.net ryan

      Hi Cesar, try calling fts.updateAfterChange(); after you change the position. In this case, add the line after your switch statement.

  • Cesar Flores

    Thanks Ryan.
    moves the object and the tool very well with the mouse, the problem is that when I move with the arrow tool object and return to the place where the last time you use the arrow and does not start in the position he last used by the mouse. I’m dynamically loading the object using a
    var list:TileList = new TileList();
    var xml2:XML;
    var dp:DataProvider = new DataProvider(xml2);
    var ui:UILoader = new UILoader();
    thank you very much for answering

  • http://www.ryantan.net ryan

    Hi Cesar, may I know what you are referring to as the ‘arrow tool object’? If you send me your code or .fla I can take a look when I’m free.

  • Cesar Flores

    Ok
    This is the code.
    how do I send you the fla
    thanks

    import fl.containers.UILoader;
    import fl.controls.TileList;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import fl.data.DataProvider;
    import fl.motion.easing.*;
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.*;
    import flash.display.Sprite;

    var openTween:Tween;
    var closeTween:Tween;
    var list:TileList = new TileList();
    var ui:UILoader = new UILoader();

    ROJO.addEventListener(MouseEvent.CLICK, rojo);
    function rojo(event:MouseEvent):void {

    list.setSize(120,50);
    list.move(180,200);
    list.rowCount= 5;
    list.columnCount= 5;
    list.columnWidth = 80;
    list.rowHeight = 65;
    list.sourceField = “thumb”;
    list.scrollPolicy = “of”
    list.height = 225;
    list.width = 440;
    addChild(list);
    openTween = new Tween(list,
    “x”,
    None.easeNone,list.x,240,0.5,true);
    }

    var xml:XML;
    var url:URLRequest = new URLRequest(“ROJO.xml”);
    var loader:URLLoader = new URLLoader();
    loader.load(url);

    function Completar(event){
    var xml:XML = new XML(loader.data);
    var dp:DataProvider = new DataProvider(xml);
    list.dataProvider = dp;
    }
    loader.addEventListener(Event.COMPLETE, Completar);

    list.addEventListener(MouseEvent.CLICK, Cambiar);
    function Cambiar(e:MouseEvent){

    var ui2:UILoader = new UILoader();
    ui2.setSize(150,50);
    ui2.move(450,150);
    ui2.buttonMode=true;
    ui2.source = list.selectedItem.source;
    addChild(ui2);
    ui2.addEventListener(MouseEvent.CLICK, myobjeto);
    removeChild(list);
    }
    var temp:Sprite;
    function myobjeto(event:MouseEvent):void {
    var mySpr2:Sprite = event.currentTarget as Sprite;
    myselect=mySpr2
    fts.registerSprite(myselect);
    myselect.filters = testObj.filters;
    }

    stage.addEventListener(KeyboardEvent.KEY_DOWN, key2)
    var myselect:Sprite
    function key2(e:KeyboardEvent):void{

    switch(e.keyCode){
    case 39:
    myselect.x += 5;
    fts.updateAfterChange();
    break;
    case 40:
    myselect.y +=5;
    fts.updateAfterChange();
    break;
    case 37:
    myselect.x -= 5;
    fts.updateAfterChange();
    break;
    case 38:
    myselect.y -= 5;
    fts.updateAfterChange();
    break;

    }
    }

  • Cesar Flores

    Ryan
    when you drag the object with the mouse to a position to do very well,
    but when I move the object with the arrows (switch(e.keyCode)) the object returns to the starting position.
    thanks.

  • http://www.vipesoft.com Todorus

    You’re a livesaver Ryan. I started on a game where I want users to be able to create their own component based ships (Think Warning Forever or Starships Forever) via an editor. You practicly made the sprite editor part of it.

    I did notice that there is a register function but not an unregister function. I altered to code myself so there is one, but I had to remove the inline _onSpriteFocus function and make it a private method instead. This means I had to lose the options object, but that doesn’t seem to effect much.

    Thanks, I’ll make sure to come back and donate in the event I make a buck with the game.

    • http://www.ryantan.net ryan

      Glad you found it useful!

  • http://www.vipesoft.com Todorus

    Hey Ryan, popped back to report a bug and a (possible) fix.

    In your comment about usage you say:
    hideHandlers()
    hides handlers. But they will be visible again the next time the user clicks on a registered DisplayObject

    However this is only the case if you click another registered DisplayObject. I added ‘mustReactivate = true’ to the hidehandlers function, which seems to override your check.

    public function hideHandlers():void {
    handlerContainer.visible = false;
    mustReactivate = true;
    }

  • http://www.ryantan.net ryan

    Thanks Todorus! Have patched that to my code =)

  • http://www.prowessweb.in deepak

    Hi ryan,

    How can i add a color component to color the object after call them on stage?
    and can we scale objects for separate transformation for height only or width only?

    Hope I will get an good answer from you!

    Thanks for sharing

    kind Regards
    deepak

  • Dylan Caestecker

    Hey Ryan,

    is it OK that we use your simple transformmanager in a school project?
    That would be very nice!

    Thanks!

    • http://www.ryantan.net ryan

      Sure go ahead =) just leave a credit mention

  • Pingback: Top 10 Transform Tools built in AS3 for Flex and Flash

  • http://riaxe.com Susrut Mishra

    List of all the transform tools available for flex/flash

    http://www.riaxe.com/blog/flex/top-10-transform-tools-built-in-as3-for-flex-and-flash/

  • lekshmi

    hai ……

    nice work…. but is it any way to transform textfield without changing fontsize?

    • http://www.ryantan.net ryan

      Hi Lekshmi, sorry but this feature is not available yet. FTM uses the tranform matrix to scale objects.

  • morfo

    hi,

    thanks you very much for you share it is great, i need you help i need that transform tool to not bring the selected objet to top level(above all other objects) how can i do that please

    thank you again

    • http://www.ryantan.net ryan

      @morfo: sorry for the late reply. You can turn off the option by doing fts.bringTargetToTop = false;

  • Nabil

    Hello;
    i first want to thank you for the great effort.
    i was wondering if the component works for flex 3 projects.
    thank you

  • http://www.ryantan.net ryan

    Hi guys, head over to http://blog.ryantan.net/2012/07/free-transform-manager-as3-v1-5-1/ for latest version and discussion!

  • http://www.ryantan.net ryan
  • Max

    how to get only the scale, not the rotate!

  • Max

    i just see the code in a comment, sorry.. another question there is a chance to have the onTransformComplete event instead of execute the event onTransform everytime is changing the object?