Forum Question: Rotate and Scale from Center…

Ctaylor writes…

I’m combining a few of CartoonSmart’s tutorials for my application uploading images, creating animation, saving, then sending them as e-cards etc. I was hoping someone new of how to get the center of a dynamic display object! I am presently using a slider to rotate and scale before I set the mask but its all from (0,0) top Left corner. I scoured the Web with no avail so I figured I would come to the place that spawned the idea. fl.motion and the Transform Matrix have been suggested but I cant get them to work with a slider.

Anyone know the answer to this? The topic is over yonder on the forum.

If responding here is easier than posting on the forum, go for it.

Advertisements

2 thoughts on “Forum Question: Rotate and Scale from Center…

  1. Here is the code to rotate images on center axis:

    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;

    /*
    ///////////
    SETUP FUNCTIONS AND EVENTS FOR LOADING THE IMAGE
    ///////////
    */

    function imageLoad(imageURL:String, mc:MovieClip):void
    {
    //create loader to load the image into
    var ldr:Loader= new Loader();

    //setup loader events
    var ldrInfo:LoaderInfo = ldr.contentLoaderInfo;
    ldrInfo.addEventListener(Event.INIT, imageInit,false,0,true);

    //make call to load the image
    var imgPath:String = “http://blog.projectx4.com/tutorial_files/flash/as3/bitmap/centerAlign/” + imageURL;
    ldr.load(new URLRequest(imgPath));

    //add image to its movieclip
    mc.image = new MovieClip(); //creates a holder for the image in your container clip called mc
    var image:MovieClip = mc.image; //simple reference to the image clip
    image.addChild(ldr); //add the loader to the image clip
    mc.addChild(image); //add image to its container clip

    }

    function imageInit(e:Event)
    {
    e.target.content.smoothing = true; //keeps image from distorting on rotation

    //target the mc that holds your image
    var hldr:MovieClip = e.target.content.parent.parent.parent;
    //set the image to be in the center of the movieclip so its rotation point is correct
    hldr.image.x = hldr.image.width/2*-1;
    hldr.image.y = hldr.image.height/2*-1;

    //give the image a random place on the stage with rotation
    var ranX:Number = Math.round(Math.random() * imgSpace.width );
    var ranY:Number = Math.round(Math.random() * imgSpace.height );
    var ranRotation:Number = Math.round(Math.random() * 360 );
    hldr.x = ranX + imgSpace.x;
    hldr.y = ranY + imgSpace.y;
    hldr.rotation = ranRotation;

    //show center of the image where the image was placed
    var newCircle:Shape = new Shape();
    newCircle.graphics.beginFill(0xa2070d);
    newCircle.graphics.drawCircle(0,0,5); //draws a circle at 0,0 with a radius of 5
    newCircle.graphics.endFill();
    hldr.addChild(newCircle);

    }

    var mc:MovieClip = new MovieClip();
    addChild(mc);
    imageLoad(“images/icon.png”, mc);

    /*
    ///////////
    CREATE EVENTS FOR BUTTON TO CREATE NEW INSTANCES OF THE IMAGE
    ///////////
    */

    function btnClick(e:MouseEvent):void{

    mc = new MovieClip();
    addChild(mc);

    addChild(myBtn);
    imageLoad(“images/icon.png”, mc);
    }

    myBtn.buttonMode = true;
    myBtn.mouseEnabled = true;
    myBtn.mouseChildren = false;
    myBtn.addEventListener(MouseEvent.CLICK, btnClick);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s