Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
mspanish

Making Scale/Rotate arrows BIGGER?

Recommended Posts

Hello this works brilliant on Android - the only thing is that since things are scaled way down, I'd really like the arrows to be bigger - on a phone they are super small. I can make the handles huge but any way to increase these arrows' size?

 

If anybody else has implemented pinch and zoom I'd love to see that too - but the handles look like they'll work fine, and that way I don't have to add mobile specific gestures.

 

thanks!

Stacey

Link to post
Share on other sites

So I've found this code here in the source...

 

TransformManager.customizeScaleCursor(null, false, 16, 26, false);

 

I'll try that first! Since this is an app for kids I want to make the scale and rotating really obvious

Link to post
Share on other sites

Alright its not too elegant, but I hacked up the TransformManager.as and added to this function:

 

private static function _createScaleCursor

 

at the end, before the return s; - I did this:

 

s.scaleX = 3;

s.scaleY = 3;

return s;

 

That will scale the cursor bigger, then I can use that other code to adjust the position further away from the mc

Link to post
Share on other sites

Ok so that is working awesome.

 

But...

 

What is going to be confusing to kids is how to scale versus how to rotate. It seems it would be better if certain handles ONLY rotated, and the other ones ONLY scaled - is that possible?

 

If not - has anybody else done something to make it clearer to the user when they can rotate and when they can scale? When you are using fingers instead of a mouse, this gets pretty blurry right now.

 

Fantastic plugin!!

Link to post
Share on other sites

Ok what I came up with for mobile use of the TransformManager -

 

I adjusted all 3 functions in the TransformManager.as -

 

function _createScaleCursor

 

added to the bottom so it reads:

 

s.scaleX = 10;

s.scaleY = 10;

return s;

 

function _createRotationCursor

 

added to the bottom so it reads:

 

s.rotation = -45;

s.scaleX = 10;

s.scaleY = 10;

return s;

 

function _createMoveCursor

 

s.scaleX = 5;

s.scaleY = 5;

return s;

 

Then in the code of my project, I added this:

 

var manager:TransformManager = new TransformManager({targetObjects:[mc], constrainScale:true, lockRotation:false, allowDelete:false, autoDeselect:true, paddingForRotation:30, handleSize:35, hideCenterHandle:true});

TransformManager.customizeScaleCursor(null, false, 70, 70, false);

TransformManager.customizeRotationCursor(null, false, 70, 70, false);

 

My handles are set to 35, and the paddingForRotation to 30 - this tests really well even on a phone - giving a pretty decent distinction between scaling and rotating, with the elements nice and big so you don't feel like the user will be asking "why can't this thing just pinch and zoom?"

 

Hope this helps somebody :)

Link to post
Share on other sites

Thanks for posting all your steps along the way and the solution you landed on.

Link to post
Share on other sites

Sure Jack :)

 

Hey one question that I haven't yet searched for - how do I reset ALL objects under the control of the TransformManager?

Link to post
Share on other sites

What do you mean by "reset"? TransformManager doesn't record each and every transformation that occurs so that you can cycle back through the history and get back to the original, although you can certainly do that with your own code. If you want to remove ALL transformations from an object so that it is at x:0, y:0, scaleX:1, scaleY:1, and rotation:1, you can simply apply a vanilla Matrix to them all. Like loop through the transformObjects and say myObject.transform.matrix = new Matrix(); but I suspect that's not really what you want, right?

Link to post
Share on other sites

This is a dress up type app - work in progress, so screenshot is very bare!

 

Yes I do want the child to be able to put all objects back to their old position with 1 click - will that code do that?

 

turtle.png

Link to post
Share on other sites

Actually you know what, I just realized I'm going to be repopulating these item windows every time they load - so all I really need is the ability to mass DELETE.

Link to post
Share on other sites

You can loop through the items array and call the deleteObject() and then call removeAllItems() on the TransformManager. Kinda like:

 

var items:Array = manager.items;
var i:int = items.length;
while (--i > -1) {
   items[i].deleteObject();
}
manager.removeAllItems();

Link to post
Share on other sites

Hi Jack - still having a bit of trouble, - sorry about that!

 

Can you be more specific about how to transform an object back to its original settings?

 

Something like this?

 

 

thumbArray[e].transform(x:0, y:0, scaleX:1, scaleY:1, rotation:1)

 

How do I actually call the transform() function - as the above is not exactly right!

Link to post
Share on other sites

All DisplayObjects in Flash have a "transform" property, pointing to a Transform object which has a "matrix" property. The matrix describes all transformations (position, rotation, scale). If you want to reset everything you can simply do this:

 

myDisplayObject.transform.matrix = new Matrix();

 

That resets everything. It's exactly the same thing as doing this:

 

myDisplayObject.x = 0;
myDisplayObject.y = 0;
myDisplayObject.rotation = 0;
myDisplayObject.scaleX = 0;
myDisplayObject.scaleY = 0;

 

It's just faster and less code :)

 

Senocular wrote a great article on Matrices: http://www.senocular.com/flash/tutorial ... ormmatrix/

Link to post
Share on other sites

thanks very much - I had figured out how to apply the Matrix, but not that you could just leave the values blank - I had them filled in like this:

 

thumbArray[e].transform.matrix = new Matrix(0,0,1,1,1)

 

I'll send you a SWF when I'm done with all of this, it's quite a mix of your TransformManger, TweenMax, and some other stuff thrown in!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×