Programatically adjusting registration point

One of the pains of Flash is that there is no built in mechanism for changing a MovieClips registration point programatically.  For those who don’t know, the registration point refers to which part of the clip is at the clips 0,0 coordinate.  Among the effects of this, is that when a movie clips height, width, xscale or yscale properties are changed, it grows or shrinks from the registration point. 

I’ve been working with the Tween and Transition classes a lot lately (as mentioned in my ColorTransform blog entry), and have been creating empty movie clips, loading content in, and then Tweening or Transitioning them.  When using flash studio to make movie clips, the interface allows you to set the registration point initially, but gives no interface for changing it.  Of course, when you create an empty movie clip, its registration point is set to the top left corner.

The only way to change a registration point is to move the contents of the clip, relative to the clip itself.  I’ve been writing a Registration point class to ease this process.

The class file is still a work in progress, but it looks something like this:

class RP{
 /** Takes a movieClip and adjusts
 *  the registration point to any of the 9 available points.
 * Attributes:
 * child – MovieClip contained by container.  reg point refers to which part of child appears at 0,0 of container
 * container – clip containing movieClip.  Registration point of mc is relative to clip, often use <b>this</b>
 * rp – new Registration point number
 * in the form of
 * 1 2 3
 * 4 5 6
 * 7 8 9
 public static function setRegistrationPoint(child:MovieClip,container:MovieClip,rp:Number){
  var boundTest:Object = child.getBounds(container);
  var placement:Object = getPlacement(rp);
 private static function setX(mc:MovieClip,b:Object, region:String):Void{
  if(region.toLowerCase() == "left"){
   mc._x = b.xMin;
  } else if (region.toLowerCase() == "center"){
   mc._x = (b.xMax – b.xMin)/-2;
  } else if (region.toLowerCase() == "right"){
   mc._x = b.xMax*-1;
 private static function setY(mc:MovieClip,b:Object, region:String):Void{
  if(region.toLowerCase() == "top"){
   mc._y = b.yMin;
  } else if (region.toLowerCase() == "center"){
   mc._y = (b.yMax – b.yMin)/-2;
  } else if (region.toLowerCase() == "bottom"){
   mc._y = b.yMax*-1;
 private static function getPlacement(regPoint:Number):Object{
  var aPlacement = new Array();
  aPlacement[1] = {vertical:’top’,horizontal:’left’};
  aPlacement[2] = {vertical:’top’,horizontal:’center’};
  aPlacement[3] = {vertical:’top’,horizontal:’right’};
  aPlacement[4] = {vertical:’center’,horizontal:’left’};
  aPlacement[5] = {vertical:’center’,horizontal:’center’};
  aPlacement[6] = {vertical:’center’,horizontal:’right’};
  aPlacement[7] = {vertical:’bottom’,horizontal:’left’};
  aPlacement[8] = {vertical:’bottom’,horizontal:’center’};
  aPlacement[9] = {vertical:’bottom’,horizontal:’right’};
  return aPlacement[regPoint];

You can see this in action in a simple test case here.

There are no comments.

Leave a Reply