Thursday, January 5, 2012

Transform Tool - cursors

Hello! 
Today I'm going to show you how to work with cursors. Transform tool supports two type of cursors  standard Flex bitmap cursors and vector cursors


1. To use bitmap cursors you need to create custom skin of tool and use CursorManager  from raster package. Actually it's wrapper for standard Flex CursorManager. Then embed cursor images and add them to cursor manager in skin. Tool has default bitmap cursors embeded as static properties in raster Cursors class.


2. By default tool uses vector cursors. To create you own cursors you need to create fxg or mxml files with graphics and add them into CursorManager  from vector package. Tool has default vector cursors embeded as static properties in vector Cursors class.


Following example shows 3 different skins with vector end bitmap cursors, just select them from drop down list. Press view source context menu to get source code. 

SWC: Transform Tool 2 version 2.3.8.
Source code: Project home page.
ASDoc:  API ASDoc.
Required Flex SDK version: SDK 4.5

11 comments:

  1. Hello Volodymyr,

    This really looks great.

    As I am new to Flex stuff, I have a question.

    Is it possible/recommended to replace the creation of the UITransformTool in the MXML by its ActionScript code ?
    The aim of this is to add it dynamically to a component when it is needed.

    For instance, I would like to replace :
    view:UITransformTool ...>
    view:bounds
    model:Bounds .../>
    /view:bounds>
    /view:UITransformTool>

    by its ActionScript code in the section of the MXML.

    Thanks for your answer.

    ReplyDelete
  2. Hi Volodymyr,
    Your tool works awesome. Do we have any chance to select multiple objects at same time using this tool?
    Thanks in advance for your reply!

    ReplyDelete
  3. Hi there,
    thanks for that great tool! As a beginner i can learn a lot from your code!
    Can you please help me to get running your example "TransformToolSample8" (Text transformation) with with your TransformTool 2.3.8 Version. I get Error #1009 with UIScaleConnector.

    Thanks for your answer!

    ReplyDelete
  4. Hi guys, thanks for comments. Sorry for delay I was on Christmas holliday without internet access.

    To Hieu. - yes it's possible example:

    protected function creationCompleteHandler(event:FlexEvent):void
    {
    var tool:UITransformTool = new UITransformTool();
    tool.target = imageTarget;

    var bounds:Bounds = new Bounds();
    bounds.x = 30;
    bounds.y = 45;
    bounds.width = 400;
    bounds.height = 250;
    tool.bounds = bounds;

    toolPanel.addElement(tool);
    }

    To Arun. - currently it's impossible but it's in my plans to implement.

    To Mjusick. - There is an issue in 2.3.8 Version. I fixed it and create version 2.3.9. You can download it from http://code.google.com/p/transform-tool/downloads/detail?name=TransformTool_2_3_9.swc

    ReplyDelete
  5. Hi Dude,
    Is it possible create our own connector with custom event (like delete object by clicking that connector)? Thanks in advance!

    ReplyDelete
  6. Hello Volodymyr,

    I have another question.

    If I want to deselect my object, what is the best way ?

    I tried :
    1) set the 'target' attribut of UITransformTool to null
    ==> error
    2) set the 'visible' attribut of UITransformTool to false.

    Thanks for the advice

    ReplyDelete
  7. Hi,

    Arun, connector is not display object and used only to apply transformation on target. You can find info how to add delete button in my next post, follow link below.

    Hieu, I fixed error when you set target into null. You need to use new 2.3.9a version. See my next post how to deselect objects.

    http://vstyran-flex.blogspot.com/2012/01/transform-tool-custom-control.html

    ReplyDelete
  8. hi,
    nice work dude, as am new to flex and as3, is there any way to customize the appearance of transform tool and cursors (for example i want to use my own set of cursor images that i created in photoshop). if possible plz explain it briefly.

    ReplyDelete
    Replies
    1. Hi, you need to create you own skin (best way is to copy existing one from source code http://transform-tool.googlecode.com/svn/trunk/TransformTool/src/com/vstyran/transform/skins/TransformToolSkin.mxml). Embed your images and add them into CursorManager in skin.

      Delete