Scale point in Actionscript 3

[CraigL]

OK, I'm actually writing this code for Flash CS3, to be embedded in a Flex file but there is no Actionscript 3 forum created yet.

I'm sure the answer to this is simple but it has escaped me for the last hour in LiveDocs.

Ive just created an image rotator that fades an image into view and then slowly scales it down to give a sort of floating effect. The problem is that the object is registered at the top left and scales to the top left. I would really like it to scale from the center of the object. If this is something that the 9-Slice-Grid will fix that would be great, but I don't think that's the answer.

Here is some of the code.


function imgLoaded(event:Event):void{

// Add the image to the stage as "pictLdr"
addChild(pictLdr);
// Mask the image (imageMask object created dynamicly prior)
pictLdr.mask = imageMask;
pictLdr.alpha = 0.0;
pictLdr.scaleX = 1;
pictLdr.scaleY = 1;
pictLdr.x = Math.floor(Math.random()*500)+50;
pictLdr.y = Math.floor(Math.random()*50)-50;
pictLdr.addEventListener(Event.ENTER_FRAME, fadeImgIn);
}

function fadeImgIn(event:Event):void{
if (pictLdr.alpha < finalAlpha){
// Fade first image in
pictLdr.alpha += 0.007;
}
if (pictLdr.alpha >= finalAlpha){
// Fade prior image out
pictLdr2.alpha -= 0.004;
}
pictLdr.scaleX -= scaleAmount;
pictLdr.scaleY -= scaleAmount;
pictLdr2.scaleX -= scaleAmount;
pictLdr2.scaleY -= scaleAmount;

}

[MoochLover]

What I always do in to achieve this is to put it in a wrapper and then scale that instead. In your case, the Loader object is already a wrapper and you loaded image is actually another object inside. So we can do this:

function imgLoaded(event:Event):void{
//get the Loader's "content" property, ie your image
var innerObject:DisplayObject = pictLdr.content;
//reposition it so it's centered
innerObject.x -= innerObject.width/2;
innerObject.y -= innerObject.height/2;
//that's it... now the scaling is from the image's center

// Add the image to the stage as "pictLdr"
addChild(pictLdr);
// Mask the image (imageMask object created dynamicly prior)
pictLdr.mask = imageMask;
pictLdr.alpha = 0.0;
pictLdr.scaleX = 1;
pictLdr.scaleY = 1;
pictLdr.x = Math.floor(Math.random()*500)+50;
pictLdr.y = Math.floor(Math.random()*50)-50;
pictLdr.addEventListener(Event.ENTER_FRAME, fadeImgIn);
}

function fadeImgIn(event:Event):void{
if (pictLdr.alpha < finalAlpha){
// Fade first image in
pictLdr.alpha += 0.007;
}
if (pictLdr.alpha >= finalAlpha){
// Fade prior image out
pictLdr2.alpha -= 0.004;
}
pictLdr.scaleX -= scaleAmount;
pictLdr.scaleY -= scaleAmount;
pictLdr2.scaleX -= scaleAmount;
pictLdr2.scaleY -= scaleAmount;

}


Hope this works out for you. Let me know if I'm mistaken, I'm a bit sleepy at the moment...