AS3, Flash

Rotation of objects is always a bit of a pain, especially when you start having to do it purely from a programmatic perspective.

If you found this post you have probably been looking at options like fl.motion.MatrixTransformer which include methods such as rotateAroundInternalPoint and rotateAroundExternalPoint which do work but it gets quite complicated especially when you start adding in scale and constraining.

The problem I had was taking a bitmapData draw from a camera and placing it inside a constrained to screen size box. The camera does funny things and one of them is you nearly always get the shot or video to one side or upside down – which is a bit silly.

So I resorted to old school rotation and it’s the easiest way to do it by far.

The image or clip you want roatated needs to be added to a deep holder clip (empty) and then centred via it’s width and height properties. Lets call that contentMC inside of holderDeepMC movieclip.

The trick is that holderDeepMC already sits inside of another holder and this is where we can constrain and start rotating the holderDeepMC. Because its already centred we never have to worry about it slipping from the centre when we start playing with the width and height dimensions of the holderDeepMC. Meanwhile the holderParentMC can have masks applied or just be moved as required.

If you wanted to rotate around a point (internal or external you would just position the holderDeepMC to that position. For centre rotating just pop it in the middle of holderParentMC.

Aspect ratio is really just a comparison of height and width to determine shape concepts which we use to make decisions.

Use ratio’s: AR_height = holderDeepMC.height/holderParentMC.height and then the same for width = AR_width, to determine whether we need to constrain the clip.

So if AR_height = 1 the two heights are equal – yey, but unlikely. If > 1 it means the height of the object is poking outside the parent container which means we may need to constrain it.

Comparing the two aspect ratios we know that the bigger of the two means the more out of whack that dimension is and which one needs to be set first. So if AR_height is bigger then we know that the height is the most important and we should set that height to the parent constrain height which will affect the scaleY. So to keep the proportions we just need to set the scaleX to the scaleY.

The fla I have attached is a lot more detailed as an example and looks at 4 different sized content clips being placed inside a programmatically generated holder of the users selection. I have made the rotation dynamic using rotate buttons and a pause on the big angles like 0,90,180 (warning: depending on the direction of rotation this can be set to -180 as well) , -90 and then we come back to 0 again.

Clockiwise rotation looks like 0,1,2 .. 89,90,91 … 178,179,180,-179 … -91,-90,-89 … -2,-1,0

Anti-clockwise rotation looks like 0,-1,-2 .. -178,-179,-180,179 … 2,1,0

Another thing to double check are errors, I always round the rotation to remove these, especially important if you are waiting for a rotation to reach a certain value, like 45 say, and quite often the rotation will end up as 45.000001 or something similar.

There is a zipped version of the fla pictured above which shouldnt be too hard to de-construct and have a play with You can find the FLA

or if you want to play with the animation you can open it here