RotateX a square around its center

Question

I have 3 squares (50 px x 50 px) in a Sprite, one next to each other. Pivot of each is at 0, 0. 1st square X, Y: 0, 0 2nd square X, Y: 50, 0 3rd square X, Y: 100, 0 I would like to rotateX each square around its center-line. I cannot seem to figure out how to set the vanishing point so that all the squares rotate around their individual point and not all of them around the same point. Any help greatly appreciated!

Answer 1

You can make the rotation of child movieclips by rotating and translating them to newer position. Required the pivot of the child movieclip coincides with it's registration point

in the following code, the holder is your sprite and content are the squares. ( Required that squares are having the pivot, coinciding with the registration point)

PS: Holder must have a width and height bigger than the content's. It's assumed that holder here is some kind of big container ( say stage).

var holder_Mc:MovieClip = holder_Mc
var content_Mc:MovieClip  = holder_Mc.content_Mc ;
var rotation_val_num:Number = 50// in degrees

        var bnd = holder_Mc.getBounds(MovieClip(holder_Mc.parent)) ;
        var cw:Number = bnd.width ;
        var ch:Number = bnd.height;

        var cx:Number = bnd.x ; 
        var cy:Number = bnd.y ; 
            content_Mc.rotation = rotation_val_num ;


            var bnd2 = holder_Mc.getBounds(MovieClip(holder_Mc.parent)) ;
            var cw2 = bnd2.width ;
            var ch2 = bnd2.height;

            var cx2 = bnd2.x ; 
            var cy2 = bnd2.y ; 



            var dx = Math.abs( holder_Mc.x - cx2 ) ;
            var dy = Math.abs( holder_Mc.y - cy2) ;

            holder_Mc.x  = cx + cw/2 + dx - cw2/2
            holder_Mc.y  = cy + ch/2 + dy - ch2/2

Answer 2

Basically, you need to move the box while it is rotating to get that effect. Since you also know the width/height of the box and the pivot points positions the calculations aren't that hard.

However, why calculate it yourself? With TweenLite, You could use the TransformAroundCenterPlugin, which handles the transformation for you. I would recommend to use it. If you don't want to tween it, then set the tween-duration (second parameter) to 0.

// Activate plugin (should be called once)
TweenPlugin.activate([TransformAroundPointPlugin]);

// Transform your boxes around it's center, does not use the pivot point.
TweenLite.to(this.mcBox1, 1, new TweenLiteVars().transformAroundCenter({rotationX: 50}));
TweenLite.to(this.mcBox2, 1, new TweenLiteVars().transformAroundCenter({rotationX: 190}));
TweenLite.to(this.mcBox3, 0, new TweenLiteVars().transformAroundCenter({rotationX: 5}));