rotate a movieclip from its center

[black_pearl]

I want to rotate a movieclip depending upon the mouse movement. Rotation is working also but I want to rotate it from the center of the movieclip. The registration point of the movieclip is top - left

Code

var radiance:Number = 180/Math.PI;
_root.onEnterFrame = function() 
{

        //calculate rotation
        walkdirection = -(Math.atan2(_xmouse-box_mc._x, _ymouse-box_mc._y))*radiance;
        //set rotation
        box_mc._rotation = walkdirection;

}

I cannot figure out how to do this

[pantas]

hi there... it will always rotate based on the registration point, so it has to be align in the center so your code can take effect...

[black_pearl]

Basically I want to load a picture in a movieclip using loadClip or loadMovie. Is there any solution to make the registration point in the center?

[FizixMan]

Wrap the loaded clip in another movieclip. Then shift the loaded clip half its width and height up and to the left. Then run the rotations on the wrapper movieclip, not the loaded clip.

[black_pearl]

Thank you so much for your help. However I would like to place a handle in the movieclip so that when a user clicks and drags the handle he/she can rotate the movieclip. I will proceed with the code now.

[FizixMan]

You can still do that. Depending on where they click, just alter the wrapper clip's x/y coordinate and accordingly the loaded clip's x/y.

[black_pearl]

This code is driving me nuts.

I have created a handle (a movieclip). When we click on this mc the image starts rotating. I want to move this handle with the image. But my code is not working.

//Create Movieclip for Handles//
_root.createEmptyMovieClip("handles_main_mc",10);
_root.handles_main_mc.attachMovie("handle_mc","handle1_mc",1);


var outerMC:MovieClip = this.createEmptyMovieClip("outerMC", -1);
var innerMC:MovieClip = outerMC.createEmptyMovieClip("innerMC", 1);
//Function to Move Handles
function moveHandles() {
    _root.handles_main_mc.handle1_mc._x = (outerMC._x-(_root.handles_main_mc.handle1_mc._width/2))+outerMC._rotation+outerMC._width;
}

//
var MCL:MovieClipLoader = new MovieClipLoader();
var mListener:Object = new Object();
mListener.onLoadInit = function(target_mc:MovieClip) {
    outerMC._x = (Stage.width)/2;
    outerMC._y = (Stage.height)/2;
    innerMC._x = -innerMC._width/2;
    innerMC._y = -innerMC._height/2;
    outerMC._width = 100;
    outerMC._height = 80;

    //////////////////////////Initialize Handle Position//
    _root.handles_main_mc.handle1_mc._x = (outerMC._x-(_root.handles_main_mc.handle1_mc._width/2))-outerMC._width/2;
    _root.handles_main_mc.handle1_mc._y = (outerMC._y-(_root.handles_main_mc.handle1_mc._height/2))-outerMC._height/2;
    ///////////////////////////////////////////////////////



};
MCL.addListener(mListener);
MCL.loadClip("pic1.jpg",innerMC);
_root.handles_main_mc.handle1_mc.onPress = function() {
    outerMC.onMouseMove = function() {
        var angle = Math.atan2(_ymouse-this._y, _xmouse-this._x);
        this._rotation = angle*180/Math.PI;
        moveHandles();
    };
};
outerMC.onMouseUp = function() {
    if (this.onMouseMove) {
        delete this.onMouseMove;
    }
};

Please help me with this

[black_pearl]

Please check the moveHandles function. This is where I am struck

[FizixMan]

I suspect that your scope is not being set properly. Add trace() statements to validate that your function and movieclip references are in the right scope and are not traced out as "undefined".

[black_pearl]

I have found some code and it is working now. But with a small problem. When I click on the handle to rotate the movieclip there appears a jerk and then it rotates smoothly. I cannot figure out on how to stop this jerk.

var outerMC:MovieClip = this.createEmptyMovieClip("outerMC", 1);
var innerMC:MovieClip = outerMC.createEmptyMovieClip("innerMC", 1);
var handleMC1:MovieClip = outerMC.attachMovie("handle_mc", "handle_mc", 2);
var handleMC2:MovieClip = outerMC.attachMovie("handle_mc", "handle_mc", 3);
//
var MCL:MovieClipLoader = new MovieClipLoader();
var mListener:Object = new Object();
mListener.onLoadInit = function(target_mc:MovieClip) {
      target_mc._width = 200;
    target_mc._height = 160;
    outerMC._x = (Stage.width)/2;
    outerMC._y = (Stage.height)/2;
    innerMC._x = -innerMC._width/2;
    innerMC._y = -innerMC._height/2;
    handleMC1._x = innerMC._width/2;
    handleMC1._y = innerMC._y-handleMC1._height;
    
    handleMC2._x = innerMC._x-handleMC2._height;
    handleMC2._y = innerMC._y-handleMC2._height;

};
MCL.addListener(mListener);
MCL.loadClip("pic1.jpg",innerMC);
//
handleMC1.onPress = function() {
    this.onMouseMove = function() {
        var angle = Math.atan2(_ymouse-outerMC._y, _xmouse-outerMC._x);
        outerMC._rotation = angle*180/Math.PI;
        
        trace("iM "+innerMC._y)
    };
    this.onMouseUp = this.onRelease=this.onReleaseOutside=function () {
        delete this.onMouseMove;
    };
};

handleMC2.onPress = function() {
    this.onMouseMove = function() {
        var angle = Math.atan2(_ymouse-outerMC._y, _xmouse-outerMC._x);
        outerMC._rotation = angle*180/Math.PI;
        
        trace("iM "+innerMC._width)
    };
    this.onMouseUp = this.onRelease=this.onReleaseOutside=function () {
        delete this.onMouseMove;
    };
};

I have also attached fla file

[FizixMan]

I think it's because either the initial rotation is being calculated absolutely based on the mouse's relation to the outerMC's location. That is, the outerMC is always pointing towards the mouse (or always at the same offset) regardless of its original rotation. Instead you'd have to program it to take its starting rotation and simply measure the rotational change of the mouse from its starting location.

That is, when you first press, you'd have to record the mouse's original XY coordinate, original angle to outerMC's centre, and the original rotation of outerMC. Then as the mouse moves, measure the new XY coordinate and angle. Calculate the difference from the starting rotation/angle of outerMC and apply that change in rotation.

This way if the outerMC is pointed to the right, but the original mouse position is above (i.e., pointing up), when you first start rotating, the outerMC is still pointing right. If you move the mouse 10 degrees to the left, outerMC only rotates 10 degrees instead of a full 100 degrees to point directly at the mouse.