transformeaseljsflash-ccgsap

Flash CC Canvas and GSAP: How to set registration point of movieclip on stage

How would I go about changing the registration point of a movieclip labeled "tablet" placed on the stage (root) dynamically?

For example: I have the following:

var tablet = this.tablet;    //movieclip labeled "tablet" on stage
function resetTablet(){
tablet.regX = tablet.width/2; //move registration point to center
tablet.regY = tablet.height/2;

}

However when I call it using GSAP:

var tl = new TimelineLite();
tl.to(tablet, 1, {alpha:1, onComplete:resetTablet})
  .to(tablet, 3, {alpha:0, scaleX:1.5, scaleY:1.5})

the registration point is still set to the upper left corner rather than the center.

What am I doing wrong here? Thanks!

Solution

  • Registration points affect change both the transformation point, but also the position. If you set a displayobject that is 100x100 pixels to regX=50;regY=50, then it will draw from that point, moving the content 50px to the top and left. If you make that change you should also translate the clip to x=50;y=50.

    An issue with you example is that there is no width or height on EaselJS content (explained here). You can get the bounds of anything generated by Flash CC using the nominalBounds property, which Flash exports as a property on every object. If you have multiple frames, you can turn on "multi-frame bounds" in the publish settings, and a frameBounds property is added to the objects as well.

    Note that nominalBounds and frameBounds are not used by the getBounds method.

    Here is how you might be able to approach it.

    var bounds = tablet.nominalBounds;
tablet.regX = bounds.width/2;
tablet.regY = bounds.height/2;

// Optional if your actual registration point was [0,0] before:
tablet.x += tablet.regX;
tablet.y += tablet.regX;

    Hope that helps.