Free AS3 transformation manager
This time I would like to share with You, my own transformation manager implementation. It is a simplified version of transformation manager used komixo project. Manager handles rotation, scale and skew transformations.It has not any build-in solutions for selection of object nor dragging them. It's mainly because, in application, for which it was created, dragging and selection of object are handled in specific way. Our manager can be used in Flash and/or Flex based applications. All modifications are applied directly to object's transform.matrix property. Thanks to this, our manager can be used for any DisplayObject descendant objects. In this version, manager does not provide any default way to apply modifications in any other way (eq. append scaling by changing width/height properties).
how it works
Transform manager does not work directly on DisplayObjects, instead it works on ITransformer implementators.
ITransformer interface is implemented by specific 'transformers'. Transformers are responsible for physically changing all underlying DisplayObjects.
By default, two transformers are available, that is :
- SingleTransformer - used to transform a single DisplayObject
- MultipleTransformer - used to transform multiple DisplayObjects. This 'transformer' can also be used to transform single object.
When there is any special use case, where non of those two can be used, You can just implement You own transformer. Moreover if there is a need to customize, the default way the object is transformed, You can implement ITransformable interface. Doing so, You will have a full control of how transformations are appended to Your object.
Whole transformation process consists of four steps:
- initialization step, method initTransformation() of ITransformer interface is called
in this step transform manager, retrieves initial transformation matrices - transformation begins, manager calls beginTransformation()
this method is called when user starts transformation. in most cases by pressing mouse button of one of control points. - object updating, manager calls appendTransform( new_matrix )
this is called, when user moves mouse and transforms the object. - transformation finished, manager calls commitTransformation()
method is called when user releases mouse button. That is, when user finished transformation.
More informations can be found in example applications.
examples
(in both examples use SHIFT to select/transform multiple objects)
//flash example
Flash player (ver. 10.0.0) is required to see this content. Please update to newest possible version.
//compilation - to compile flash example You have to add additional compilation parameters
Above example has to be compiled in Flash CS4 or higher. To use our transformation manager in older versions, You will have to revisit source files and remove all conditional compilation blocks.
//flex example
Flash player (ver. 10.0.0) is required to see this content. Please update to newest possible version.
//compilation - to compile flex example You have to add additional compilation parameters
Compared with other available managers, this one not only works sometimes faster, it can be also easily extended and, what is most important, it is completely free and GPL licenced. Although our manager has some limitations, it is still very powerful and can be easily extended. We are currently also working on more advanced versions, but they are not going to be free.
Please feel to used it in GPL way, and inform us about any extensions.
Comments
I think your transformer is awesome! But I'm having a little trouble and was wondering if you could please post a few examples of how to implement the ITransformable interface so to customize, the default way the object is transformed, like a button click? I would greatly appreciate it!
I look forward to the release of the paid version and will certainly purchase it.
Could you add a slider similar to this
http://www.foxarc.com/blog/article/65.htm
How much will you charge for adding a slider similar to the above example for all the functions, Skew, Re-size, Move etc?
Hi,
I love your transform manager and was wondering if you could please help me out using the interface?
I have imported:
import com.segfaultlabs.transform.interfaces.ITransformable;
import com.segfaultlabs.transform.interfaces.ITransformer;
My code located in the first key frame in my .fla file:
var reset_matrix:Matrix = new Matrix(a:1, b:0, c:0, d:1, tx:0, ty:0);
reset_btn.addEventListener(MouseEvent.CLICK, _reset)
function _reset(e:Event):void
{
var _manager:ITransformer;
_manager.data = kittie;
_manager.initTransformation();
_manager.beginTransformation();
_manager.appendTransformation(reset_matrix);
_manager.commitTransformation();
}
Error:
Cannot access a property or method of a null object reference. at flashTransformEx/_reset()
Any help would be appreciated!
Tim
@tim:
I believe You forgot to initialize You variable, your code should look like this:
var _manager:ITransformer = new SingleTransformer();
_manager.data = kittie;
_manager.initTransformation();
_manager.beginTransformation();
_manager.appendTransformation(reset_matrix);
_manager.commitTransformation()
Thank you for your help! Much appreciated. I'll post a link to my app once it's completed.
Tim
Hi,
Can you please explain how to use this wonderful piece of code on my display objects in Adobe Flash CS4 ?
Best regards,
Noman.
hi,
@Noman
all You have to do is to add sources to 'class-path' of Your project and then just setup compilation 'config constants'. just like shown on one of the images above.
Nice way to transform the image with the help of flex.
I use this one : http://boceto.fr/produit-9-librairie-transformation-geometrique-flash-flex.html, it is well supported, the doc is in english, and it uses MVC and matricial transformation. But it is not free...
I like this very much. there is one feature missing gradable if you can implement it. it would be grate good alternative for http://www.greensock.com/transformmanageras3/
@Anil what feature do You think is missing?
Drag&Drop is missing. I try to understand your code to add it, but is not simple.
Is there any way to check the type of the object, and if it is a image, use only proportional scale? Olny little explanation were i can add it?
free transformer free code source
http://www.softpeople.fr/Ressources/as3/transformer_scale_rotate/transformer_scale_rotate.html
this is approx perfect
it just need a better documentation and move feature...
over 1 year ago Charlie Swindall http://www.gladhatter.com #0
Can you please provide me any help finding a drag and drop component for Flash to accompany this skew/rotate etc?