Thursday, February 16, 2012

Transform Tool - skinning

Hello! 
Today I'll explain you how to create skin for tool and what skin parts it uses. If you look at default skin for tool you'll see following:


1. States.
States determines if key modifiers is pressed. If on start of transformation shift button pressed then tool will be switched into "shiftPressed" state until transformation complete. Priority shift, ctrl, alt. You can put some modification on states for example if shift pressed then maintain aspect ratio.

 2. Cursor manager.
Here you can add cursors for each control. Property "maintainRotation" specifies whether cursor should be rotated automatically to take the same angle as tool (you can see it with default resize cursor). Also here you can specify hint popup (specify your custom skin), it automatically shows under current cursor position with specified offset while transformation is in progress.


3. Preview
Used when "liveTransformation" property is false to show bitmap copy of target.


4. Bounding group
It will be positioned automaticlly and used as container where all action content would be placed. 


5. Controls
You can specify as many controls as you want and add to them different operations. Property "anchor" on Control object would specify Anchor ui object that would be switched into anchor state while operation is in progress. Property "anchor" on Operation specifies position of ahchor relative to tool size (point [0.5, 1] means that anchor is width*0.5, height*1). If you don't specify it then anchor would be given from control's anchor (center of it in tool's coordinate space), if control's anchor also is not specified then default value [0.5,0.5] would be given.


6. Anchor
Control can be used as UI anchor but if you have for example rotate operation where anchor is center than you can put there special Anchor object thet will be shown while rotation.


See below some examples with different skins. 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
Опубліковано о

32 comments:

  1. ScriptTutorFebruary 28, 2012 at 3:33 AM

    I have some probs with the control

    1. I need to scale the object programatically
    How do I do this. Do I use this with DataUtil.size, but this seem to be a point. I need to set it as 25% should scale the object by .25

    2. I have 4 corners set to rotate an the 4 mid points to scale in their respective directions. with horizontalEnabled = false or verticalEnabled = false but the image seem to scale proportionately. and the tool is larger than the actual object in the direction resized. It will only resize if after you dragged the other handle. how do I prevent this as the transform doing this.

    ReplyDelete
    Replies
    1. UnknownFebruary 28, 2012 at 5:04 AM

      Hi, you can just set scaleX and scaleY properties on target and then call updateTool() method. Or you can use DataUtil.applyScaledData()

      Delete
  2. ScriptTutorFebruary 28, 2012 at 3:56 AM

    sorted the second point. I havent put the image.scaleMode oops..

    :)

    ReplyDelete
  3. ScriptTutorFebruary 28, 2012 at 9:36 AM

    thanks man.. you r a savior. but how do I get it back i.e if the transform control changes the scale? so I can setup a text box. Obviously it should change every time.

    ReplyDelete
    Replies
    1. UnknownFebruary 28, 2012 at 1:05 PM

      I'm not sure that I understand your question but transform tool dispatches event for transformation: TransformEvent.TRANSFORMATION_START, TransformEvent.TRANSFORMATION, TransformEvent.TRANSFORMATION_COMPLETE, maybe this can help you.

      Delete
  4. ScriptTutorFebruary 28, 2012 at 9:47 AM

    and also need to pass the data to an undo_manager

    ReplyDelete
    Replies
    1. UnknownFebruary 28, 2012 at 1:06 PM

      Simple example for undo/redo you can find here http://vstyran-flex.blogspot.com/2012/01/transform-tool-undoredo.html

      Delete
    2. ScriptTutorMarch 4, 2012 at 3:27 PM

      hi i the controls seem to overlap when downsizing any target I can make it so small and the corner controls do collapse to one pile so it is not operational. I am using a skin with images as the control. Can you help? .... :(

      Delete
    3. UnknownMarch 4, 2012 at 10:29 PM

      Hi, you need to set minWidth and minHight properties on target of transformation.

      Delete
  5. ScriptTutorMarch 5, 2012 at 10:22 PM

    Thanks bro. Like the fool I am, I was trying to add minHeight & minWidth to the transform control.. :0 !

    The next question may be irrelevant. I am asking this because you seem to know your matrix mathematics.. :) I did a rotation transform on a target using the control. Then I manually reset the rotation to 0 typed in a text box. this will directly set the rotation of the target by displaydata.rotation (setRotation or something) and then call transformTool.updateTool. But it won't rotate to 0. Is it something I do?

    I need to fit an image horizontally and/or vertically to a size of a container. How do I get the bounding box of target and what is the matrix math to do this irrespective of the rotation. I believe that I need to fit the bounding box instead of the setting the width of the target. Does this involve matrices at all? or should I look for something else?

    ReplyDelete
    Replies
    1. UnknownMarch 6, 2012 at 1:19 PM

      If you need to change property like rotation manually change it on target of transformation and then call updateTool() to place tool just right under target.

      If you need to fit image into box look at DisplayData class it has a lot of methods such as setBoundingSize and other.

      Delete
  6. ScriptTutorMarch 6, 2012 at 8:17 AM

    What does maintainAspects and maintainAspectRation do. I thought that the image will scale proportionately irrespective of the the scale direction

    ReplyDelete
    Replies
    1. UnknownMarch 6, 2012 at 1:13 PM

      maintainAspectRatio - saves aspect ratio of target.
      maintainAspects - turn on snapping to aspects specified by property aspects:Vector. ( you can specify aspects something like 2:1, 1:1, 2:3, etc. )

      Delete
    2. ScriptTutorMarch 7, 2012 at 10:06 AM

      Then how to do a proportionate scaling?

      Delete
    3. UnknownMarch 7, 2012 at 12:26 PM

      Create your own skin and set maintainAspectRatio into true for all resize operations

      Delete
    4. ScriptTutorMarch 9, 2012 at 3:33 AM

      Thanks

      Whats the difference between UITransformTool and TransformTool. I wanted to stretch a label I have to use TransformTool but there is not updateTool() method so the tool cannot be updated after manual transform. I need the tool to be able to handle both Image and Label. What should I do?

      Delete
    5. ScriptTutorMarch 9, 2012 at 3:36 AM

      Sorry, the updateTool() on TransformTool doesn't seem to do anything like the that of the UITransformTool. and I don;t think UIScaleConnector works with the UITransformTool. Am I mistaken?

      Delete
    6. UnknownMarch 9, 2012 at 3:56 AM

      Look at http://vstyran-flex.blogspot.com/2011/10/transform-tool-2-sample-2.html

      Delete
    7. UnknownMarch 9, 2012 at 3:58 AM

      Probably you should look at all may posts concerning transform tool at http://vstyran-flex.blogspot.com/search/label/Transformation before asking questions

      Delete
  7. Dima K.March 15, 2012 at 10:50 AM

    Hi Volodymyr,

    Thank you for sharing your work, great job!
    I found few interest points.
    In version 2_4_7 up to 2_4_9 when I'm trying to get target of UITransform I get Error #1009 instead :)

    Problem:
    Delete button was already added in skinClass. I copied your skinClass code from THURSDAY, JANUARY 12, 2012 post, but seems it works only with with TransformTool_2_3_9a and transformTool_2_4_0 SWC. For some reason I can't see/add delete button in 2.5.0 version. Maybe it should work with some other approach in last version of Transform Tool?

    Thanks,
    Dima

    ReplyDelete
    Replies
    1. UnknownMarch 15, 2012 at 12:43 PM

      Hi,

      Yes, there was an issue with getting target and it is fixed in latest version.

      Concerning delete button it was implemented only as example in custom class extended from tool, at latest version I implemented action content functionality, so please use it to add delete button, see examples in my posts:

      http://vstyran-flex.blogspot.com/2012/02/transform-tool-action-content.html

      http://vstyran-flex.blogspot.com/2012/02/transform-tool-z-order.html

      Delete
  8. UnknownMarch 15, 2012 at 2:31 PM

    Thanks for sharing this great tool it is very impressive! Quick question - in a lot of applications, holding down the Shift key fixes the aspect ratio of the object while you resize. So when you resize and hold down Shift, the aspect ratio always remains the same. Release Shift key and you are free to resize anyway you want. How difficult do you think it would be to implement this with your Transform Tool. Thanks again!

    ReplyDelete
    Replies
    1. UnknownMarch 16, 2012 at 3:11 AM

      Hi, you need to create skin for tool and for ResizeOperation set property "maintainAspectRatio" into true on "shiftPressed" state.

      Delete
  9. UnknownMarch 16, 2012 at 8:13 AM

    That's great - thanks again!

    ReplyDelete
  10. Dima K.March 19, 2012 at 5:23 AM

    http://vstyran-flex.blogspot.com/2012/02/transform-tool-action-content.html

    delete button works fine now
    thank you!

    ReplyDelete
  11. ArunMarch 20, 2012 at 2:42 AM

    Hi Vstyran,
    Greetings. Can we able select multiple objects using mouse instead of using shift or ctrl keys? Thanks in advance.

    With Regards,
    Arun Ganesh. P

    ReplyDelete
    Replies
    1. UnknownMarch 21, 2012 at 12:58 AM

      Hi, I updated my post about multiselection with selecting by mouse example. See at http://vstyran-flex.blogspot.com/2012/01/transform-tool-multiselection-visio.html

      Delete
    2. ArunMarch 21, 2012 at 7:10 AM

      Thank you very much dude!!!

      Delete
  12. amarMay 23, 2012 at 10:06 AM

    hi Volodymyr,

    i've been working with your transform tool, I came across 3 issues, hope you can help me..

    1. is there any way to use native cursors with the cursor manager?
    the current way to pass in a class object seems to have some performance issues

    2. if you rotate items directly using the tool it works great, for example multi-select multiple items then rotate all rotate like 1 group. But if you use external controls, such as a slider (0 - 359) the behaviour is quite strange, all rotate individually and they dont rotate smoothly, seems to have some positioning lost. I'll post an example soon.

    3. The current approach looks like grouping (visio multi-selection), is there any way to get multi-select powerpoint approach, but it seems not?

    Thank you again,

    ReplyDelete
    Replies
    1. UnknownMay 25, 2012 at 12:21 AM

      Hi,

      1. You need to use raster cursor manager, see my post at http://vstyran-flex.blogspot.com/2012/01/transform-tool-cursors.html

      2. I need to see an example how you are doing it.

      3. I was thinking about PowerPoint approach, but currently it is not implemented.

      Hope it is helpful for you.

      Delete
  13. sreejithAugust 31, 2012 at 2:53 AM

    Hey , how do we customize the width and height box shown along with the transform tool . I need to edit the text in that box >??

    ReplyDelete
  14. UnknownSeptember 20, 2012 at 12:35 AM

    skinning sample(TransformToolSample18) and z-oder sample (TransformToolSample14)
    Two source codes are merged.

    The following error
    Error: MXML element TransformToolSkin27.boundingGroup.VGroup12 can only have one parent.

    help me.

    ReplyDelete

Subscribe to: Post Comments (Atom)