msg1 {
senocular[+],
posted: 12.14.02 9p•04.02.03 4a,
top [^]
}
(usage continued)
- layout: an array specifying the type of handle to have in any of the 8 available positions along the bounding box of the free transform tool, Given the array [a,b,c,d,e,f,g,h] here are the cooresponding positions
“r” represents a rotation handle, “s” a scale handle and null is no handle
default is ["r","s","r","s","r","s","r","s"]
- autoRaise: a boolean (true or false) specifying whether or not swapDepths should be used to
bring the free transformed clip to the top depth of that scope when selected. default is true
- autoRemove: a number (0-2) specifying the type of auto removal to be used for the free
transform. 0 is no auto removal, 1 is removal when a mouse down was initiated and the mouse
was not in contact with this movieclip, and 2 is auto removal only when another moveclip has
added to it a free transform of this same style.
default is 1.
additionally, custom cursors can be specified for a transfrom style using
FreeTransformStyleInstance.customCursor(); This can be used two ways, 1 with arguments
FreeTransformStyleInstance.customCursor(“handleRef”,”cursorLinker”,cursorVisibility); and the other with similar arguments in arrays allowing to add more than one cursor at a time
FreeTransformStyleInstance.customCursor([“handleRef”,”cursorLinker”,cursorVisibility, rotation], [“handleRef”,”cursorLinker”,cursorVisibility]); for however many cursors you want to add, though as style only supports 3 cursors, one for
movement, one for scaling and one for rotation. ex:
customStyle.customCursor(["r","spin",2],["s","size",2,true],["m","move",1]);
Arguments (customCursor):
- handleRef: a letter similar to that in the style layout specifying which handle or action the
curor will be for. “r” is rotation, “s” is scale and “m” is movement.
- cursorLinker: a string specifying the linkage ID of the item in the library you plan to use
as a custom cursor.
- cursorVisibility: a number (0-2) representing the type of cursor visibility you will allow
for the systems cursor when you apply the custom cursor. 0 is the default hand cursor, 1 is
the arrow cursor, and 2 is no cursor at all (aside from the custom cursor)
- rotation: a boolean (true or false) for whether or not a cursor will rotate (always
pointing inward) with the tranform handle when used. Default is false.
a style also contains a removeAll method which will remove all free transforms on the screen
using that style. ex:
customStyle.removeAll();
and that’s about it. I tried to make it both easy and flexible and this is what came of it :)
msg2 {
senocular[+],
posted: 12.15.02 2p•12.16.02 11a,
top [^]
}
updated (again)
- cursor rotation now reacts to negative scales
updated
- transforms can now be in scaled and altered clips and work just fine
(silly error on my part for not doing that earlier ;)
- cursors can now rotate with the transform handles, such as a scale double arrow cursor
rotating to point with the direction of its scale (the example swf shows this)
msg3 {
gertst[+],
posted: 02.11.03 1p•-,
top [^]
}
This really rocks!! Thanks for sharing this, Senocular!
msg4 {
senocular[+],
posted: 02.11.03 1p•-,
top [^]
}
Thanks, and you're welcome :)
msg5 {
senocular[+],
posted: 04.04.03 6a•04.05.03 7a,
top [^]
}
update: now with rotation arm handle - example swf updated with an example of this in the custom style.
What this is, is a extended line from the center of the transform with a handle on the end which is commonly a rotation handle (though a scale handle can be specified).
Creating an arm handle: Making a handle is similar to adding custom cursors in that they are added through calling a method on a freeTransformStyle instance. There are two new methods for these handles, addHandle and removeHandle. They are set up as follows
FreeTransformStyleInstance.addHandle("type", angle, size);
FreeTransformStyleInstance.removeHandle(angle); with the option of adding many at one time with addHandle using
FreeTransformStyleInstance.addHandle(["type", angle, size],["type", angle, size]); example:
customStyle.addHandle("s", 4, 1.5);
Arguments:
- type: either "r" or "s" for a rotation handle or scale handle respectively
- angle: a NUMBER specifying layout position. These are not actual angle values in degrees, rather, like the layout array, numbers specifying the handle's position - err, direction. See diagram below. The removeHandle method uses this value to determine which handle to remove.
- size: multiplier for length of the handles extension beyond the size of the clip. A size of 1 is right on the border, a size of .5 is half-way from the center of the clip to the edges and 1.5 (as the example uses) is 50% out past the border of the clip.
NOTE:
- You can only have 1 handle of this type for each of the 8 'angles' within the layout
- Angles 1,3,5 and 7 are 'straight' angles in that they dont follow the corner of the bounding box of the clip, but rather pertrude out the side of the clip from the clip's center. Since the center of the bounding box is used as a direction for this pertrusion, if the clip's own center is NOT at its actual center, these side-based angles will appear slanted as they come from an irregular center through the center area of the bounding box.
-----------------
Other changes include: - some minor changes in variable handling (nothing noticable or functionally different)
- now correctly using prototype values to specify the style of a raw freetransform style (one in which no arguments were passed).
- the default style of a freetransform is also, now, a raw style object which uses those style prototype objects as a style reference (as opposed to having an explicitly specified style added at its creation).
- protection against 0 scales preventing further scaling manipulation
- added MovieClipInstance.updateFreeTransform() to let you redraw the transform on that movieclip if its altered in any way outside of the FreeTransform's transformations.
- fixed small bug which reveresed the offsets of a SHIFT controlled movement.
msg6 {
mindfriction[+],
posted: 05.01.03 11p•05.02.03 12a,
top [^]
}
real nice Se, just a few probs.
-I dont seem to be able to get the custom cursors working.
-Centre corss-hair is offset on my line mc's, so scaling and rotation is all wacky
This is what I have for the creation of my Ft styles
And this is the AS for the creation of the line clips I use ft on
msg7 {
manuelrazzari[+],
posted: 08.22.03 3p•-,
top [^]
}
Hello. A feature request for the prototype:
It would be great if one could limit the max (and min) size for the scale.
For example, relative to a parent mc, or with maxScale/minScale values.
-manuel
msg8 {
senocular[+],
posted: 08.24.03 3p•-,
top [^]
}
added scale restriction
sizeRestrict property of a FreeTransformStyle object
new FreeTransformStyle(linestyle, fillstyle, layout, autoRaise, autoRemove, sizeRestrict);
in the form of a getBounds object
xmin: minimum _xscale for the transform. default -Infinity
xmax: maximum _xscale for the transform. default Infinity
ymin: minimum _yscale for the transform. default -Infinity
ymax: maximum _yscale for the transform. default Infinity
Example: var restrict = {xmin:50, xmax:200, ymin:50, ymax:100};
var style = new FreeTransformStyle(myLinestyle, myFillstyle, undefined, true, true, restrict);
// (note undefined in new FreeTransformStyle results in default value)
myClip.addFreeTransform(style);
// ^ transform will be restricted to 50% min in _xscale, 100% max _xscale, 50% min _yscale and 100% max in _yscale.
msg9 {
kohaistyle[+],
posted: 10.08.03 5a•10.08.03 5a,
top [^]
}
Wow ... been looking for a component to do the job.
And here is the perfect prototype !
Thx for sharing.
msg10 {
jvdh[+],
posted: 12.17.03 11p•-,
top [^]
}
Wow! Great prototype senocular! I'm really impressed!
A feature that would make this even better: the ability to transform multiple MC's at once. Like shift clicking in flash or maybe even dragging a box around them?
Regards,
Nostrofu
msg11 {
Rossman[+],
posted: 02.14.04 9p•-,
top [^]
}
Hi, great tool, exactly what I am looking for. But I'm a bit of a newb and don't quite know how to implement it in my flash movie.
I made a new layer like in the sample and pasted the prototype in, but i can't assign it to a movie clip.
Anyone have any advice on this for a learning man?
msg12 {
FlashDude[+],
posted: 03.14.04 1p•-,
top [^]
}
I don't know what's missing but its not working for me.
I have 3 layers:
1. Canvas layer
- has 2 movieClips inside
2. second layer has the actionscript to draw transform:
with(canvas)
{
rect.onPress = function(){this.addFreeTransform();}
circle.onPress = function(){ this.addFreeTransform();}
}
3. third layer has the prototype code
When I run the movie and clip on the mc it just shows one sqaue at the registration point.
Please help.
msg13 {
senocular[+],
posted: 03.14.04 2p•-,
top [^]
}
This was written for MX not MX 2004. You'll need to publish for Flash Player 6... or wait until I update this which may be a while.
msg14 {
FlashDude[+],
posted: 03.14.04 3p•-,
top [^]
}
Thanks for the reply.
Your prototype is so coool and I'm excited to use in my project but unfotunately I'm missing somethisng.
I have Flash MX 2004 and your sample is working fine.
Even I tried to save the downloaded file with a different name and removed all extra buttons and tested it with just one movieclip on stage and in the second layer I have the function to call transform. Its working without any problem. But when I try the same with new flash document, it doesn't work.
Really frustrated.
Please advise.
msg15 {
Rossman[+],
posted: 03.14.04 9p•-,
top [^]
}
I had some problems when using this in MX 2004 as well. Turned out there was a couple small typos in the code relating to xMin, xMax, yMin, and yMax from the "getBoundries" function call.
Maybe this will help, as your problem sounds very similar to what I was getting.
Cheers,
mark
msg16 {
senocular[+],
posted: 03.15.04 6a•-,
top [^]
}
Ok, it should work now. As Rossman pointed out, it was a case sensitivity thing. Actually I'm surprised thats all it was. ;)
msg17 {
somersault[+],
posted: 07.04.04 9a•07.04.04 9a,
top [^]
}
hmmm...
just wanted to test this, but for some reason touching the left or upper handle messes up the
scaling.
thought you'd like to know, i don't have time to look into the code.
change .html to .fla to download flash file.
msg18 {
manuelrazzari[+],
posted: 07.04.04 8p•-,
top [^]
}
somersault, might have something to do with the flash version? this is a quite noticeable 'issue', wouldn't have go unnoticed if the bug was to be found in the prototype... we've succesfully implemented it in complex contexts and works damn great (hey, it's a senocular job!)
msg19 {
gertst[+],
posted: 07.05.04 1a•-,
top [^]
}
hi somersault,
your example is going wrong because the registration point of your MC is topLeft (0,0). Just move it to the center and it will work just right.
Gert
msg20 {
The Kraken[+],
posted: 07.11.04 2p•07.11.04 3p,
top [^]
}
Ok, here's my problem:
I have a button on the main timeline that attaches movies from the library to another clip. Now, that works just fine by itself. But as soon as I have the attached movie addFreeTransform to itself with an onRelease = function () { this.addFreeTransform(myStyle)}, it seems to remove a movieclip that I've added.
Is it something to do with the depths of the movieclips? Each one should have its own depth and unique name...argh! What am I doing wrong?
***UPDATE!***
Never mind. I picked through your code and found your nice little getTopDepth prototype. I used that to find the correct depth to which I could attach the movie. Works like a treat! There's some good junk in there. Thanks, senocular!
msg21 {
liquidice[+],
posted: 09.27.04 10a•-,
top [^]
}
Thank you so much for posting this. I have been trying to create my own version of this for months. I got it working, but it's nothing like the version you have posted. The styles and all of the configuration options you put in this make it PERFECT. Once again, thanks for sharing!
Just saved me quite a few hours, thanks for the clean code =)
msg23 {
CrustyFrog[+],
posted: 06.20.05 7p•-,
top [^]
}
this is great!!! one thing seems odd though. when you click a movieclip, and the handles appear, you should be able to immediately drag the clip. but the way this works you actually have to release the mouse button and click again to drag.
how hard would it be to fix this behavior?
msg24 {
senocular[+],
posted: 06.21.05 4a•-,
top [^]
}
It's built that way by design. I dont think it would be too terribly hard (on my end) to change that, but I think it would be more difficult from a user's perspective.
I've been meaning to update this; I'll consider that feature when I do.
msg25 {
CrustyFrog[+],
posted: 06.21.05 12p•-,
top [^]
}
"but I think it would be more difficult from a user's perspective"
why is that? maybe I was not clear on my description of the problem. I was hoping for behavior like Flash, Freehand, CorelDraw or other similar programs that allow you to click once to both select and begin dragging an object. for example, in Flash,
1) open any FLA in Flash that has movieclips on the stage
2) put your mouse over a movieclip and press the left button and hold it down
3) start dragging the movieclip while still holding down the mouse button
to do the same thing with your prototype,
1) run the SWF containing a movieclip set up with your prototype on the stage
2) put your mouse over a movieclip and press the left button to select the clip
3) release the mouse button
4) click the (now selected) movieclip again to start dragging it
the way you currently have it set up requires a release and extra click to drag an object. IMHO users familiar with programs like CorelDraw, Freehand, etc. will find this behavior odd and would quickly tire of the extra clicks in a non-trivial application.
bottom line, I don't mean to sound disrespectful or anything cause this is incredible code you have developed; it is well beyond my current skillset in AS! and your generosity in releasing it is tremendous.
if you do get around to changing this I'd be a happy camper but either way thanks for your contributions to the community!
msg26 {
jvdh[+],
posted: 06.24.05 6a•06.24.05 6a,
top [^]
}
I think what senocular means is that the code is easy to understand for him but not so easy to understand for a regular user. It's a pretty complex and elaborate piece of code whitch is not commented. It can be pretty though to change it's behavior. I know, I've been messing with it myself. I learned a lot from this code (thanks senocular!) and ended up coding something myself to suit my needs exactly.
So....try and figure out how to do it....or just wait for senocular to update this script.
msg27 {
CrustyFrog[+],
posted: 06.24.05 2p•-,
top [^]
}
"So....try and figure out how to do it....or just wait for senocular to update this script."
those are certainly the options! :D
I'm hoping senocular gets around to updating this so the select/drag behavior is a bit more standard in this regard.
msg28 {
CrustyFrog[+],
posted: 07.28.05 8p•-,
top [^]
}
hi senocular,
any chance you could point me in the right direction as to how I can change this to handle the "click - immediately start dragging" issue I raised before? :D Thanks!
msg29 {
CrustyFrog[+],
posted: 10.13.05 10a•-,
top [^]
}
nevermind my request for assistance. we wrote our own code to implement this functionality.
msg30 {
Rich1985[+],
posted: 05.03.06 7a•-,
top [^]
}
hello what a great bit of code this is!! well done! i have one problem i have found that the default cursor deselect fine when you click of the hand but using the custom cursors it doesn't deselect the hand....is there any code to make it deselect that i could use? cheers
Rich
msg31 {
guest[+],
posted: 06.02.06 7p•-,
top [^]
}
don't hold your breath! seems much of this stuff is pretty much abandoned.
msg32 {
TwistOff[+],
posted: 06.03.06 1p•-,
top [^]
}
Awesome prototype! You are a huge help. Do you think you could add one more type of handle? A "delete this movie clip" handle, with perhaps a small red "X" icon instead of the circle or square to recognize this feature?
msg33 {
thomas jt[+],
posted: 06.14.06 7a•-,
top [^]
}
The reason some folks have had problem with the registration point being in upper left corner is that the class assumes a few thingys about _parent._parent. Folks: place the code on the MovieClip timeline of the movie clip. Do not as I did place the code on the root timeline. U then will have the scale handles in the upper left corner regardless of where ur registration point is. And in that case - ull be eating salty fish and drinking water all day and dreaming of better days. This is a fine script. Paz
msg34 {
silentfever[+],
posted: 10.23.06 10a•-,
top [^]
}
Hey Jaime,
I made some changes to your FreeTransform code and thought you might want to take a look.
The code fixes some centering issues i ran into. Here are the function changes...
So in a sense. I've just made the code a little more robust and fixed some scaling and centering issues. Hope this helps out some people.. maybe get in on the next rewrite for the code. In the first 3 function changes there are only slight differences.. Its the last function that makes all the di
msg35 {
Navarone[+],
posted: 11.02.06 12p•-,
top [^]
}
I am having trouble with this code and would like some help. I would be happy to post on a forum or email.
The problem, if I have a movieClip on the stage called room which I can change its width and height and I add a movieClip with this.addFreeTransform(), how do I set up the boundries to keep the movieClip inside the room.
Thanks
msg36 {
eric[+],
posted: 12.08.06 8a•12.08.06 8a,
top [^]
}
Great stuff!
Many thanx!
Has any one tried to put any flash-component on the stage?
The autoremove will not work anymore and every image keeps it's transformation status on clicking outside the active movieclip.
Even if you take it of the stage, you also have to remove from the library otherwise the error continues.
I think I have found an answer:
I have changed:
'this._FTobject.FT.removeMovieClip();'
into
'this._FTobject.FT.unloadMovie();'
Kind regards,
Eric
msg37 {
eric[+],
posted: 12.22.06 4a•12.22.06 4a,
top [^]
}
Does anyone get this?
When i load an image from my server the addFreeTransform() will not work!
However when I put everything online everything works fine. (but not very handy when testing..)
msg38 {
greensock[+],
posted: 02.02.07 9a•-,
top [^]
}
This is great code. Unfortunately, I stumbled across it AFTER I spent hours and hours creating something similar. In case it's helpful for anyone, feel free to check out my TransformManager class at http://www.greensock.com/ActionScript/TransformManager. It has a few extra features and should be very simple to implement (at least that was my goal). Cheers.
msg39 {
siuj[+],
posted: 02.03.07 12a•02.03.07 12a,
top [^]
}
Reply to msg #36
Yessss, I have tried to put any flash-component on the stage ... and the Autoremove will not work ...
And I also follow your correction to amend my actionscript ... However, the situation is worse than before... the autoremove function will not work no matter the library contain any flash-component...
Anyone can solve this problem?
The latest version of this script is great ... (http://www.senocular.com/flash/actionscript.php?file=ActionScript_3.0/com/senocular/display/TransformTool.as)
However, I can't use AS 3.0 now... >.<"
********************************************
Reply to msg #39
Thanks for your information ... I gonna to test it now... :)
Can't the script flip the movieclip?
msg40 {
DrGonzo1208[+],
posted: 02.06.07 6a•-,
top [^]
}
Reply to msg #40:
I had the same problem - and tracked senocular down at another site....
The solution - put the MC that you want to apply the transofrm to inside another MC - bingo..
Simple as that!
/////////////////////////////////
My question:
Has anyone played around with the sizeRestrict function? I'm loading in images to the transformed cip through the new fileReference class (i.e I won't know the original size of the image) and then set a size restriction, so that the user can only scale the image to a maxium width and height.
I can resize the image on load and I can set a restriction, but the restriction seems to be reletive to the original image size - i.e: the restriction is se to 115px X 160px, you upload a large image (675px X 725px), it is automatically resized to 80px X 115px, but the user can still resize the image up to 776.25px X 1161.6px? If you try it with a smaller image, the restricted size is smaller....
Anyone know how I can set a restricted size - regardless of the original image size?
Thanks,
DrGonzo.
msg41 {
Muralidhar[+],
posted: 03.27.07 8a•-,
top [^]
}
Its an excellent code, nodoubt
this is what excatlly i was looking for
While things work fine using this script, i need to replace the square & circle with images (Arrows) giving an clear indication to the direction of strech
can someone help me to figure out replaing the 8 sides with 8 images
Thanks in advance
msg42 {
vonnhugo[+],
posted: 03.29.07 2p•-,
top [^]
}
well, i think you have to replace the symbol by which the handlers and pointers used. u look them up at the library panel and from there you'll do the tweaking.
msg43 {
Muralidhar[+],
posted: 03.31.07 4a•-,
top [^]
}
Thanks for the prompt reply, i think i have not put in the right question
What i meant to say was the the square and cicle on
a--b--c
| |
h d
| |
g--f--e
needs to be replaced with the arrow images so as the user can know he can strech the image in which direction
the square and circle are basically drawn, any help on how i can replace these with the images
thanks - murali
msg44 {
jacksmack[+],
posted: 04.17.07 8p•-,
top [^]
}
For some reason I'm struggling to get this to work with my engine. I am trying to get the transform to work with a for loop.
I have used several different variables but it doesnt seem to want to work.
I am attaching movieclips dynamicly and trying to use this to transform and drag the clips... but I've tried for 2 nights so far and no luck. I can kinda get it to work but not fully. usually it's either really buggy or it just plain doesn't work.
the clips I want to drag are
_root.["Part"+j]
I can load them to another movie clip but it seems they work fine on the root when you put the function directly on them...
I'm stumped could someone get an attach movie clip button to work with this? I'd love to see a solution to my problem.
msg45 {
jurezila[+],
posted: 08.16.07 6a•-,
top [^]
}
Hey...
First, i have to thank you for this... really great stuff...
Now, my question is... how would it be possible to restrict the movement?
Like in startDrag() function...
I tried modifying your code but it never worked the way i wanted it to. I tried with _xmous and _ymouse positions or the FT box positions but no luck...
Well, if anybody has an idea... please let me know.
Thanks.
msg46 {
greensock[+],
posted: 08.16.07 6a•-,
top [^]
}
msg47 {
jurezila[+],
posted: 08.16.07 7a•-,
top [^]
}
Hey...
Yeah... that is great to man... what i needed...
Thanks
msg48 {
gmathur[+],
posted: 03.02.09 8p•-,
top [^]
}
Can Crustyfrog or anybody else share any updates and modifications of this superb AS2 script for immediately start dragging the MC and restricting the zone.