Thursday, March 29, 2012

Transform Tool - changing connectors

Hello! 
If you need to have for example two connectors UIScaleConnector for text and UIConnector for images you need to know how to change them when user selects target. Following example shows this process and also this example shows you how to create transform tool object in action script code, not mxml.
Press view source context menu to get source code. 

SWC: Transform Tool 2 version 2.5.0.
Source code: Project home page.
ASDoc:  API ASDoc.
Required Flex SDK version: SDK 4.5
Опубліковано о

40 comments:

  1. damianMarch 29, 2012 at 3:42 PM

    This comment has been removed by the author.

    ReplyDelete
  2. damianMarch 29, 2012 at 3:47 PM

    Great! Thank you very much :-)

    I adopt TransformToolSample14 to this to use send to back/front/top/bottom buttons but have problem to transform to AS this part:

    http://pastebin.com/aaJu6GHy

    (button declarations)

    or maybe is a way to import this data in other way?

    ReplyDelete
  3. damianMarch 30, 2012 at 7:30 AM

    And another challenge :-) how to reset tool dimensions when by event change label text (add new line, etc.). What I need a method to paste new dimensions from label to tool to correct display control point. Any clue?

    ReplyDelete
  4. UnknownMarch 30, 2012 at 8:59 AM

    Change target and call tool.updateTool() method

    ReplyDelete
  5. damianMarch 30, 2012 at 1:54 PM

    Thank you again.

    I use for label element for every change my text editor:

    var p:Label = _currentTarget as Label;
    p.text = MyTextEditor.text;
    p.validateNow();
    p.setActualSize(p.getExplicitOrMeasuredWidth(), p.getExplicitOrMeasuredHeight());
    tool.updateTool(true);

    It works fine to moment when I rotate label or resize - then update label size don`t work and label style lineBreak looks like set as "toFit". I spend 3 hours to fix it with no success. Could you please give me any clue?

    ReplyDelete
  6. damianMarch 31, 2012 at 3:45 AM

    To problem above - even only move label is enough to broken update size label...

    ReplyDelete
    Replies
    1. MjusickApril 10, 2012 at 6:31 AM

      Hi,
      i think i have the same problem.
      (Size isn't updating when moving, rotating or resizing...)
      Did you solve it?

      Delete
    2. UnknownApril 10, 2012 at 6:37 AM

      Hi, send me code I'll try to help you.

      Delete
    3. damianApril 10, 2012 at 8:38 AM

      set:
      _currentTarget.explicitWidth = NaN; _currentTarget.explicitHeight = NaN;

      before calculate size and redraw object.

      Delete
    4. MjusickApril 11, 2012 at 12:14 AM

      Hi damian, thank you very much, that's it!
      And thank you Volodymyr for your offer to help!!

      Delete
  7. AJApril 3, 2012 at 9:52 PM

    Hi Its a very great tool to use....

    Right now i am developing whiteboard application where i need to insert text on the white board where ever i click on the board can you please help me with that????? if i place text area or so i am unable to place the other drawing tools on that....

    ReplyDelete
    Replies
    1. UnknownApril 4, 2012 at 1:10 AM

      Hi, for text you can insert text area as in example at http://vstyran-flex.blogspot.com/2012/02/transform-tool-text-modes.html also you can apply two different connectors that will scale or resize text area as in example at http://vstyran-flex.blogspot.com/2011/12/transform-tool-working-with-text.html and of course you will be able to add other elements that are extended from UIComponent, even more if you need to add element that is not extended from UIComponent you can do it using DisplayData model calss (manually create it and apply geometry properties) using DataConnector as in example at http://vstyran-flex.blogspot.com/2011/10/transform-tool-2-sample-2.html

      Delete
  8. Dima K.April 5, 2012 at 10:27 AM

    Hi Volodymyr,

    I'm trying to hide delete button when transform tool transfrom or rotate target.
    For some reason this code don't work correctly:
    deleteBtnGroup.visible = !this.transforming;
    Can you please give me advice?

    Thank you

    ReplyDelete
    Replies
    1. UnknownApril 5, 2012 at 11:41 AM

      Hi, you can do it in skin

      <s:Group id="boundingGroup" visible="{!rotateControl.controlActivated}"/>

      This code hides action content while rotating.

      Delete
    2. Dima K.April 6, 2012 at 3:48 AM

      Hi,
      Thanks, but seems it don't work.
      Please look at code below:
      public class CustomUITransformTool extends UITransformTool
      {
      /**
      * Constructor.
      */
      public function CustomUITransformTool()
      {
      super();
      this.setStyle("skinClass", skins.TransformToolSkin);

      var deleteBtnGroup:Group = new Group();
      // deleteBtnGroup.visible = !this.transforming;
      deleteBtnGroup.right = -25;
      deleteBtnGroup.top = -15;
      var delBtn:Button = new Button();
      delBtn.setStyle("skinClass", skins.DeleteButtonSkin);
      delBtn.buttonMode = true;
      delBtn.addEventListener(MouseEvent.CLICK, deleteHandler);
      deleteBtnGroup.addElement(delBtn);

      this.actionContent = [deleteBtnGroup];
      }
      ...rest of code

      I'm using TransformTool 2.5.0 version.
      How I can hide actionContent or deleteBtnGroup during transformation or rotation in progress?

      Thank you

      Delete
    3. UnknownApril 8, 2012 at 3:34 AM

      Hi, it works.

      Make sure that in your skin you add
      <s:Group id="boundingGroup" visible="{!rotateControl.controlActivated && !topLeftControl.controlActivated ...

      Delete
    4. Dima K.April 10, 2012 at 9:26 AM

      It works.
      Thank you!

      Delete
  9. Abinash Dev PradhanApril 13, 2012 at 12:25 AM

    Hi Volodymyr,

    An example with runtime added components will be a great help!

    ReplyDelete
  10. damianApril 17, 2012 at 2:20 PM

    Hi Volodymyr,

    strange behaviour. I have text label, I dynamical change font and use tool.update(true) and tool frame does not change. But when I change font again to other and again to previous - from this moment everything works ok. I think it may be a problem with redraw tool.updateTool(true);.
    Before I rotate object everything works ok.
    Is there another way to force redraw tool frame?

    ReplyDelete
    Replies
    1. UnknownApril 18, 2012 at 2:17 AM

      Hi, try to call validateNow() function of your label before calling tool.updateTool(true)

      Delete
    2. damianApril 18, 2012 at 5:06 AM

      I do it - without it is a mess with refresh. What is strange is what I wrote above - after transformation (i.e. rotate) first refresh fail. Alone object (label) refresh correctly but tool size - not.
      That is why I ask about other method to force refresh tool.
      Have you any suggestion?

      Delete
    3. damianApril 18, 2012 at 6:56 AM

      Maybe it help you Volodymyr - when label font change (and tool size don`t change correctly) and then I deselect object and select again, then tool size show correctly.

      Delete
  11. UnknownApril 28, 2012 at 5:15 AM

    how to target transform tool to flex controls when we are adding controls at runtime?

    ReplyDelete
  12. HieuMay 26, 2012 at 9:19 AM

    Hello Volodymyr,

    I need a advice about transform tool.

    Here is the situation : I need to manipulate (rotate, resize,...) a photo.

    For performance issue, I use a "web optimize" photo during the transformations
    done by the user.
    Then, when he finished,I need to replace it by the "hight resolution" version of that photo.
    The final result is : the "hight resolution" photo with the exact same transfomation than
    the "web optimize" one.

    To your opinion, what is the best way to do that ?
    Copy the transform tool instance of the "web optimize" and apply it to the "hight resolution" ?

    Thanks in advance for your help,

    ReplyDelete
    Replies
    1. UnknownMay 27, 2012 at 12:38 AM

      Hi,

      You can use DataConnector as in example at my post http://vstyran-flex.blogspot.com/2011/10/transform-tool-2-sample-2.html, in this case tool will apply transformation on model object and then apply this data on your images using DataUtil.

      Delete
  13. HieuJuly 29, 2012 at 11:26 PM

    Sorry for the late reply.

    I didn't use the DataConnector.
    For my specific usage, I take advantage of DataUtil to create a DisplayData source from the web photo. Then I apply it to the HD photo (still using DataUtil). Finally, replace the web photo by the HD one.
    Looks like working fine.

    ReplyDelete
  14. UnknownJuly 31, 2012 at 8:05 AM

    I want to restrict the image resizing to the group like restricting the image movement within in the group.Can you please tell how to do that

    ReplyDelete
  15. ShaneAugust 3, 2012 at 9:43 AM

    Is this just for Flex? Or can it be used with pure ActionScript?

    ReplyDelete
  16. UnknownAugust 13, 2012 at 2:10 PM

    Присоединяюсь к вопросу выше. Как можно использовать TransformTools в чистом AS 3.0 проекте? Трансформация Sprite.

    ReplyDelete
  17. UnknownAugust 17, 2012 at 6:47 AM

    It's only for Flex 4 and higher.

    ReplyDelete
  18. UnknownOctober 11, 2012 at 2:38 AM

    I want to update the fontsize of label as well with the resizing of tool width and height.

    please help me to resolve this issue.

    ReplyDelete
  19. UnknownOctober 11, 2012 at 11:47 PM

    please someone help me to get Label fontsize that contained in a Tool while Resizing a transform tool or after transformation complete.

    ReplyDelete
  20. UnknownDecember 2, 2012 at 9:10 PM

    Hi man, I appreciate your work and your approach - i was was trying to create some very basic components of this kind myself before, but your version just rocks!;)

    Cheers!
    Igor

    ReplyDelete
  21. RoxanaDecember 11, 2012 at 9:41 AM

    Hi Volodymyr!
    I was just wondering if there is a method to get the real x of the component.So, when I have
    if(_currentTarget != event.currentTarget)
    { setCurrentTarget(event.currentTarget as UIComponent);
    transformTool.startMoving(event);
    }
    and trace trace(tool.x + " " + event.currentTarget.y + " " + tool.x + " " + tool.y); I get the same x and y for both the tool and component. Is there a way to get the real x of the component instead of the tool?

    ReplyDelete
  22. AnonymousDecember 27, 2012 at 7:19 AM

    Hi Volodymr,

    This is nice tool for flex and how we can use that in case of flash.
    I write very simple code in frame which add MovieClip on the stage and create a UITransformTool instance but when i compile my file then I get an error
    "1046: Type was not found or was not a compile-time constant: [mx.core]::IVisualElement."

    I dont know how to solve that.
    If possible please can anyone provide me simple transform tool using above transformtool library with Flash CS5.


    Thanks

    ReplyDelete
    Replies
    1. UnknownDecember 28, 2012 at 10:04 AM

      Hi, this tool was created using Flex sdk 4.5, you can't use it in pure flash project.

      Delete
  23. UnknownJanuary 20, 2013 at 6:55 AM

    Hi again Volodymyr,
    just wanted to ask about functionality of your Ruler component which accompanies the TransformTool - I found it in the source you kindly share and I find that one very useful too, but until now i failed to understand the proper usage myself just by reading the code. I would like to use it in a non-commercial project i am working on for a friend. Since I am totally overhelmed by my own ordinary work now (unity game), it would be a great save of time for me (althought i would enjoy implementing it myself otherwise)..
    So can I ask you for a brief clarification or pehaps a simple example of how you use it?
    I would be glad if I could offer any help or advice on anything I might know from my own research and experimenting in reward.
    Thanks in advance and best wishes mate! ;)
    Igor

    ReplyDelete
  24. UnknownJanuary 31, 2013 at 6:36 AM

    Hi Volodymyr, I wish I had found this sooner. I was searching to see if anyone else was having issues with performance with custom mouse cursors and ran across your blog on the transform tool. I work on an online desktop publishing application written in flex. We have had some issues with transforming components. I like your approach it is clean and well designed and your matrix operation are nice and succinct, well done.

    Todd

    ReplyDelete
  25. UnknownFebruary 13, 2013 at 8:06 AM

    This is very interesting! I never thought that with the image-flex you could just add them together like that. Thanks for this article!

    ReplyDelete
  26. UnknownJanuary 27, 2014 at 3:45 AM

    Good morning!
    I'm using your tool Transform Tool but I came across the following problem.
    When I need to flip the image in the designArea in the x and y coordinate I use the property scaleX and scaleY.
    By doing this inversion works, but when I select it and resize the object is deformed due to change of ownership.

    If you have a easier method for me to flip the image would be grateful.

    ReplyDelete

Subscribe to: Post Comments (Atom)