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

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

Transform Tool - Z-order

Hello! 
Example below shows how to simply add z-order functionality such as bring to front, send to back, etc. using action content.
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

Transform Tool - graphic shapes

Hello! 
See simple example how to add graphic elements as target of transformation for tool.
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

Transform Tool - action content

Hello! 
Now you can easily add your custom controls using action content property of Transform Tool. It will be placed into bounding group that is positioned always around tool with rotation 0, see red rectangle on picture below.

 If you creates your custom transform tool skin make sure that skin part "boundingGroup" is defined. See example below. Press view source context menu to get source code. 

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

Transform Tool - text modes

Hello! 
If you want to have editable text in Transform Tool you need two different modes (e.g. like in MS PowePoint). You can implement it easily extending Transform Tool component like in example below.
Drag by border to perform moving. Press view source context menu to get source code. 

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

Transform Tool - multi selection (Visio approach)

Hello! 
Good news, I've added one of the most desired feature - multi selection. Currently it works similar to MS Visio multi selection model.
See example below, click on images holding shift or ctrl keys to multi select them. You can also drag mouse over design area to get selection rectangle. Press view source context menu to get source code. 

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

Transform Tool - undo/redo

Hello! 
Today I'll show you how to implement simple history manager for undo/redo operations. It's very simple example and it doesn't handle changing target of transformation and other user specific operations. For this purpose you need to create something more complex probably using command pattern.
See example below. Press view source context menu to get source code. 

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

Transform Tool - android mobile example

Hello! 
I've just tried tool on android mobile and saw that performance is pretty good on my HTC Desire. It uses custom skin with large controls for fingers.

You can download package with .apk file and source code from here: Mobile Example


SWC: Transform Tool 2 version 2.3.9a.
Source code: Project home page.
ASDoc:  API ASDoc.

Required Flex SDK version: SDK 4.5 

Transform Tool - custom control

Hello! 
Today I'll show you how to add custom control (e.g. delete button) into transform tool. You simply need to extend UITransformTool or TransformTool class, add skin part for this control and define it in skin.
See example below. In this example I also added ability to deselect objects clicking on panel, supporting guide lines for move, resize (only for rotation multiplied by 90 degree) and rotate operation.
Press view source context menu to get source code. 

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

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

Transform Tool - live transformation

Merry Christmas and Happy New Year! 
Today I'm going to speak a little bit about PowerPoint transformation model. You may notice that it doesn't have live update of objects during transformation, but it has some kind of preview. I've added similar functionality, you can turn it on setting liveTransformation property of TransformTool into false, it will use target snapshot during transformation. For some cases (e.g. for text target) it is not good idea to use snapshot so I've added another option to use some cover instead. To turn it on you need to set showPreviewCover property of TransformTool into true. If you are using custom skin make sure that skin parts preview and previewCover is defined. See following example. Press view source context menu to get source code. 

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

Transform Tool - working with text

Hallo, today I'd like to show how to use tool for text block transformation. There is to ways: resizing and scaling. Resizing is default way of transformation, following example shows how to use it. Press view source context menu to get source code. 


For scaling you need to use special connector - UIScaleConnector. See example below. Press view source context menu to get source code. 

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

Transform Tool 2.3

Hello again, I've added new interesting functionality in Transform Tool ver. 2.3 and today I would like to share it with you. First of all I've added ability to set box which will be used as boundaries for tool. Also you can specify snapping grid, you can use it in two different variants. First when you not specify "fraction" (fraction - the maximum delta value between grid line cross and actual position of transform tool that leads to snapping). If you not specify it then it will always jump by grid, see example below. Press view source context menu to get source code. 


And second when you specify "fraction", see example below. Press view source context menu to get source code. 

Also I added supporting guidelines. Currently they are supported only by MoveOperation. See a little bit more complex example below. Press view source context menu to get source code. 

Here you can change target of transformation simply clicking on different images. Move them around to see guidelines.


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

Transform Tool 2 Sample 2

Hello, this is second post about Transform Tool 2 component I built. 
Let me show you how to connect component with target object. For this purpose I created IConnector interface and 3 classes  that implements it:

1. SimpleConnector. This class is the simpliest and fastest one, it used to connect transform tool and target object in case they are in the same coordinate space (in the same ui container). Actually it connects transform tool and model of target object, see example below. Press view source context menu to get source code. 
   
   To simplify you can use SimpleTransformTool which is combined transform tool with simple data connector.


2. DataConnector. Connector which connects model of target with transform tool. Target of transformation and transform tool can be placed in different coordinate space. To specify target coordinate space you need to pass ui container that holds target. See example below, press view source context menu to get source code.
   
   There is also combined version DataTransformTool.


3. And finally UIConnector. Probably the most useful one. It connects UI target with transform tool. It based on DataConnector and automatically creates model object from ui target. Example of using it I showed in previous post.

Source code: Project home page.

ASDoc:  API ASDoc.
Required Flex SDK version: SDK 4.5

PopUp window with light point behind

Just want to share with you this cool popup window container. I extended it from SkinnablePopUpContainer and added custom cover with ligt shader behind popup. I decided to make popup in IPhone style. Shader filter was created with PixelBender tool, actually I changed a little bit light point filter that I created long time ago. Press view source context menu to get source code. 

Required Flex SDK version: SDK 4.5


Enjoy !

Transform Tool 2 Sample 1

In my previous post I showed you Transform Tool which I created. It has several issues and I promised to fix them. Finally I've done new version of it, let me present Transform Tool 2 which is completely redesigned and has better performance. Below I would like to show you first example of using it. Press view source context menu to get source code. 


Intentionally I put image and transform tool in different groups with differen position and rotation to show you how tool handle it and place itself in right position. Also you can notice UI anchor points for resize and rotate transformation.


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


In next posts I'm going to show you examples how to create custom skins and more... See you soon.

Elastic Racetrack tool

In one of my previous posts I showed tool that can measure actual frame per second of your applications. I noticed that some times it is not enough to analyze performance of application, so I decided to create more sophisticated tool. Often flash player's cycle Adobe displays as "Ellastic Racetrack" (see http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/). I wrote tool that can visually show that racetrack on the screen. It gathers information of code execution and rendering times during some interval (configurable, by default 1 sec.) and draws on the screen two racetracks that represents heaviest code execution frame and heaviest rendering  frame.



Press "Execute code" button to slow down performance and see how racetrack react. Use view source to get source code.
To start using it you need to include swc file into project and just put ElasticRacetrack component on the stage. Also, you can download source code of lib here.

Skinnable and customizable Transform Tool component

I've been working on transform tool component for Adobe Flex 4. It is completely skinnable and customizable component. Below you can find example how to use it. In this implementation skin class also used as config. I've created two additional skins. Use combobox to change them.

Please, use view source to get source code of example.
Also, cursors are created in mxml as vector graphics, you can create your own cursors and apply them in skin.
Here you can download source code of Transform Tool library. Also, you can download swc here.

Next version is released, see first example.

Simple FPS Display component

Some times when we write and test Flex applications we need to know current FPS or RPS (render per second) values to see performance. So I decided to write simple FPS display component. The component has two possible mode "fps" and "rps". It based on SkinnableComponent so you can write and apply your own skins.
Below you can see the example (use view source to get source code):

Hope you will find it helpfull.