My AS3 TransformManager Experience

Posted on

10/2/2008 in AS3 • Other Classes

I recently posted about Jack Doyle's new class called TransformManager which basically allows you to take a display object and make it a transformable item. This means that you can easily scale/rotate/move around the object in real-time in your application. It just so happens that I got tasked with creating an application where you can select and drag out images onto a canvas, apply transformations to them, change their colors, etc. (basically a small photo editor). I decided to use TransformManager to help me out with a couple of things on the project.

Please note that although I am good friends with Jack, I do not just go around just touting any of my friends' work. I will only write about something I truly believe in and would not play favorites just for the sake of helping a friend out. This is a totally unbiased opinion of the TransformManager coming from someone who doesn't have to write this review.

Naturally, I used TransformManager to do the transforming of the clips that were dragged out onto the stage. This was a no brainer and saved me HEAPS of time, not to mention was a much cleaner and smoother solution than what the designer had originally intended to do in his comps. I kid you not, this is how you simply set up the TM to do its thing and in two lines of code you have a fully functional... manager of transformations.

PLAIN TEXT

Actionscript:

var tm:TransformManager = new TransformManager();
tm.addItem(clip_mc);

That's it! "clip_mc" now becomes transformable and you can do whatever you'd like with it. Can you imagine the time it would have taken me to create something like this from scratch? I mean, this thing takes care of ALL transformations for you. You could even grab a handle from an object on the right side, move that handle to the negative side of the left-most handle, and it'll mirror itself properly and everything. It's simply amazing.

Moving forward with the project, however, and because of the way the architecture in my project was set up, I had to utilize the TransformManager in many different ways. My project had an erase functionality that caused me many sleepless nights (and subsequently caused Jack to lose working time as well, which I thank him for dearly). I basically had to delete an item off stage and re-draw it using BitmapData every time any kind of transformation was made. With TM's events being fired off this was a super simple process. All I had to do was listen to SCALE/ROTATE/MOVE events that get fired off after you perform them and use those to re-create my items.

I decided to also use the TransformManager for the crop functionality in my application. You could imagine how this made it super simple as I basically drew a square on the canvas, added it to the TM instance, and then I had handles and rotations to use and move around and apply as a mask to the canvas. Again, this process saved me days of work by using the TM as I didn't have to create any of the crop functionality from scratch. I had my handles and everything right there for me in a matter of seconds and it turned out to work much like the crop tool does in Photoshop!

While I was working on the project I had also made some suggestions to Jack that in my eyes would make the TM even a bit more helpful in some of the situations I ran across in my project. Jack was super quick to update it for me and it had absolutely not effect on previous versions of projects that may have used the TM. Nobody's project would have gotten messed up if they updated to the newer version that Jack provided for me which means the code is very well written and organized in a way that suggestions from customers are easy to implement for Jack (but of course the suggestion should be something that adds to the overall product, not just any old thing).

The last thing I want to talk about with the TransformManager is the customization of it. As you could see on the TM site on Jack's blog, there are plenty of options that you can use to make each instance of the manager act differently. As I mentioned before, I used an instance of the TM to keep track of all my items that I was dragging out onto the stage but I also used another instance of the TM to keep track of my crop shape(s). This meant that my canvas items were able to select multiple shapes to edit them at once and I needed it to auto-deselect items if I clicked elsewhere in my app. For the cropping, however, I needed it to stay selected if I clicked elsewhere on the canvas as there should only be one crop shape on the stage at a time (for obvious reasons) and to not be deletable when you hit Delete on your keyboard. How simple was this? Well, all I did was pass those values into the constructor (or you can subsequently set them right on the instance):

PLAIN TEXT

Actionscript:

var tm:TransformManager = new TransformManager({autoDeselect: false, allowDelete: false});

Yes, that is it! That's all it takes. Can you imagine having to add even little things like this in yourself to your own solution? Sure, you can do it, but why not just have it all there, pre-made for you? And just take a look at the list of customizable parameters that you can pass in to it: constrainScale, scaleFromCenter, allowMultiSelect, and forceSelectionToFront, just to name a few. I mean, come on, you could potentially spend hours on adding each of these to your app.

Just as I did before, I have to point out that TransformManager is not free and there is only an AS3 version available (although an AS2 version is available for free here, it just doesn't have as many awesome features, but still is great for AS2 projects). It costs $299 but after having worked on this project for so long and seeing how long everything else took me to do compared to how much time I spent on creating transformations, I wouldn't hesitate to send Jack $499 for the class. Just think of how long this would take you to do, multiply that by your hourly rate, and if you're working on a flat rate project like I was, that's how much you'd save yourself. There isn't an excuse NOT to buy this thing, people.