Wednesday, December 28, 2011

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

Friday, December 16, 2011

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

Monday, October 31, 2011

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

Tuesday, October 25, 2011

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

Sunday, October 9, 2011

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 !

Friday, September 30, 2011

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.

Sunday, February 6, 2011

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.