Menu:

Sponsor

Discover Master of Alchemy, our first iPad/iPhone and iPod touch game!

Follow Me

 

Forum's topics

Latest Files

Archives

Top Rated

Categories

Photo Gallery


Alessandro Crugnola on July 10, 2007 in actionscript

senocular.com TransformTool modification

Recently I used the great senocular Transform Tool for a Flex2 project.
We just needed to made a little modification to the way the scale transformation worked. Something like the Photoshop's Transform tool, where the registration point only affects rotation, while all the scale controls are independent from the registration point.
For this reason I modified a bit the TransformTool code to allow this feature to be set on/off (I called this scaleWithRegistration)

Hold down SHIFT key while rotating or scaling to constrain transformation
Double click to complete transformation.

This is the code used in the mxml Application file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientColors="[#ffffff,#ffffff]" viewSourceURL="/test/flex/2/transform_tool/srcview/index.html">
	<mx:Image x="10" y="45" source="http://farm2.static.flickr.com/1437/560413557_04318cdc39_m.jpg" id="image" complete="onImageComplete(event)"/>
	<mx:Script>
		<![CDATA[
			import com.senocular.display.TransformTool;
			
			[Bindable]
			private var tool:TransformTool;
			
			private function init():void
			{
			}
			
			
			private function onImageComplete(event:Event):void
			{
				var timer:Timer = new Timer(1000,1);
				timer.addEventListener(TimerEvent.TIMER, function(evt:TimerEvent):void 
				{
					createTool(null);
				});
				timer.start();
				
				image.addEventListener(MouseEvent.CLICK, createTool);
			}
			
			private function onDoubleClick(event:MouseEvent):void
			{
				removeChild(tool);
				tool = null;
			}
			
			private function createTool(event:MouseEvent):void
			{
				if(!tool)
				{
					tool = new TransformTool();
					tool.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
					
					tool.target = image;
					tool.scaleWithRegistration = scale_registration.selected;
					addChild(tool);
				}
			}
		]]>
	</mx:Script>
	<mx:CheckBox x="10" y="10" id="scale_registration" label="scale with registration" selected="{tool.scaleWithRegistration}" click="{tool.scaleWithRegistration = event.target.selected}" enabled="{tool != null}"/>
</mx:Application>

 

 

Bookmark and Share

 

 

38 comments
Any way to have this tool working also from Flash (NOT flex)? As you know, the mx.core.UIComponent isn't available from there! Can It be used another class as Sprite?
Flex noob here.. So any help is appreciated. How can I get the wrapper/transform tool which is around the image on my click or later when I drag and drop the images on some other component rather than already having it? Thanks!
Hi Alessandro. I went to look deeper into the code but, because of lack of documentation, i cannot figure out how to unselect the transform tool around an image and then select again on another one. Any idea how to do that? Just changing the target doesn't seem to fire the event that would update the tranform tool to display around the new image. Thanks and great job you've done
I am sorry for bringing this up again, but how do you get the width/height of the transformed object ? I always get 0,0 (i want to use this tool to generate svg files server side, but need all transformations and of all, these 2 are the tricky ones). You mentioned about transformation matrix ? What do you mean ? Thank you! GR8 work of both Senocular and you.
Hi Alessandro, is there any solution to share in streaming all manipulation of this clip ? (like a whiteboard) Let me know if it's possible regards
Hello, Thank you for this tool. When I use the buttons placed in a VBox, can we force a redraw VBox children ? Tannoy
Thanks to this awesome tool which helped understand some concepts related to the Matrix class. I faced some problems with the tool though while scaling a text control like TextArea in Flex. I created a simple tool from scratch that for that purpose. The example of the tool is present on my blog - http://www.codevil.in/demo/transtool/ Thanks for supporting the community.
Hello,i have a question. If I attached tool to a masked component, it doesnt care of the masked area instead of it use full dimension of the component for resizing? Please advice Thanks
Hi,I am quite new with Flex, and not so experienced with AS3, I have a major problem, for some reason I cant use Senocular's TransformTool with Flex, I had problems in my original app, and then found this blog, I copied the exact code from the example above and I get the same error, I cant add/initialize the tool(using the addChild method like in the example above) because when I do I get an error messaje : TypeError: Error #1034: Type Coercion failed: cannot convert com.senocular.display::TransformTool@114d42a9 to mx.core.IUIComponent. so it cannot be converted into a UI Flex component, but does it need to ? its not clear for me...aniway please help. thanks a lot, Flavius
Nice tool,but it can not transform TextArea Any idea?
I need some information to get the width and height of the tool. and i am using this tool for dragged images and i want to set the tool bounds.so that tool can't move on the total stage. i want multiple selection of the tool targets... Thanx in Advance, Mahesh.
You will see them in the transformed matrix
How to get the transfomed image width/height ? If you inspect .width or .height, It shows the original width and height and not the transfomed one.
Can you pls provide the facility of multiple object selection and tranformation :)
I have tried using this component in Flex 3 but can't get the constrainScale property to work. I'm assuming that by setting this to true, the component should maintain the aspect ration of the original image as its resized? PS: GREAT component. Thanks for sharing with the community.
how i can add tooltip for each control???
Its a very helpful tool. I would like to add new delete control and put the rotate control in the center.I tried both of these functionalities but not working.Any code sample! Again, thanks so much... Kind Regards, Kanu
hi Thanks for the great tool Where can i find the AS2 version of this tool?
I would like to know how to add new control points to the tool. And how to remove some. I am trying to customize it to handle lines (only 2 control points). Any examples would be great. Thank you! This is a great tool.
There are two major things already mentioned here missing - setting a min/max height and width (not scale) and the more tricky point is to set some bounds in which the target has to stay - I'm trying to figure it out and post it as soon as I mastered it (if I will someday). Allesandro any help would be appreciated, it hasn't to be free of charge - drop me an email PLEASE
How did you implement the skinned cursors? I see methods for skinning the controls but not the cursors.
the tool is awesome.. can u show how to restrict the boundaries of the tool. thanks.
how can I restrict the drag area for the image.
Thanks man Great stuff
Hello and thanks for this nice twick of the TransformTool. Could anyone give me hints on how to best save the changes that are done with the tool. I want to have a way to save any changes made to the "target" (rotation, skew, scale...) so as to be able to reload those changes and update the target accordingly. I'm new to Flex but guess I need to save the matrix right? Any code sample! Thanks a million.
I have a situation where I'd like to pass in a registration point. Do you have a suggestion for a good way to go about that?
How'd you go about doing so? a code sample would be very helpful, thanks :).
yes, it is
Is it possible to have the transform tool select the current target within a canvas when it is clicked on in a flex 2.0 application..similar to what senocular did with the following line of code: tool.target = (event.target is Sprite) ? event.target as Sprite : null;
Hi, Thanks for this awesome tool. You guys are awesome! Can you please tell me one thing? After resizing, I see the tool is updating the transform matrix. Is there anyway I can actually scale the width and height instead? Also flex does not call the updateDisplayList method after the resize is done (nor any resize event occurs). Where can I add that trigger in this code? I'm happy hacking this for now, but if you guys can help me out it will be greatly appreciated. Again, thanks so much... Kind Regards, San
ahh... doh - didn't think of the "View Source" option! Thanks for that Alessandro - great addition to the community.
To see the code just right click on the swf and select "view source". BTW, the new tool extends the uicomponent, so it's supported by flex too
And yet another question - do you have the modification of the TransformTool code that allows it to work within Flex (as UIObject?). that'd be sweet...
Great job! Now the big question is - can we take a look at that modification you made to Senocular's code?
Really cool. Thanks Alessandro. There is another cool transform class you can find from http://blog.greensock.com/transformmanageras2/ -Nish
Need to fix link to senocular Transform Tool It contains apostrophe at the end


Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Type the characters you see in the picture above.





 

TrackBacks

TrackBack URL for this entry: http://www.sephiroth.it/cgi-bin/mt/mt-tb.cgi/215

Listed below are links to weblogs that reference senocular.com TransformTool modification:

» Multiple objects using Senocular TransformTool from sephiroth.it - flash world
Senocular TransformTool is one of the best and most used components around the net. It is really useful for those (include me) who don't want to fight against Matrix, concatenation of Matrix and all those painful stuff... The only 'lack'... [Read More]