positioning objects relative to MovieClip that has scaleX and scaleY changed

Question

Need some help with a small problem. I'm not too hot on the maths in AS3. I have one Sprite which acts as a container for two other Sprites. One has a picture the other has a series of hotspots.

If i change the scaleX and scaleY of the picture, the hotspots don't line up anymore. Do you know the correct equation so that any scale i set will always make the hotspots appear at the right place?

I'm trying stuff like this:

hotspot.x *= scaleFactor;
hotspot.y *= scaleFactor;

but i can't quite sort it.

Answer 1

You could scale the container instead of the picture... Assuming that the hot spots relate to the picture , it would make sense to have them in a single container. If your current container contains any other elements, you should create a new one solely for the pic and spots.

Edit:

pseudo code
hotspot1.x = pic.width * hx1;
hotspot1.y = pic.height * hy1;

You will need to have a function that is called after the picture have scaled

function onImageScaleComplete(event:Event):void
{
    updatePositions();
}

But before you will have to create your scale factors when the pic is not yet scaled.

  //an array to contain the new scale factors 
  var factors:Array = [];

  //an array containing the hotspots
  var hotspots:Array = [hotspot1 , hotspot2 /*etc... */];

  function setPoints():void
  {
    for( var i:int ; i < hotspots.length ; ++i )
         factors[i] = { xfactor: hotspots[i].x/pic.width , 
                        yfactor: hotspots[i].y/pic.height };    

  }

Then you can update like this , assuming the new width & height of the picture

  function updatePositions():void
  {
     for( var i:int ; i< hotspots.length ; ++i )
     {
       hotspots[i].x = factors[i].xfactor * pic.width;
       hotspots[i].y = factors[i].yfactor * pic.height;   
     }
  }