actionscript 3 - Scale, Position & Rotate Parent object to make child object take up entire stage

Question

Using the first photo below, let's say:

• The red outline is the stage bounds
• The gray box is a Sprite on the stage.
• The green box is a child of the gray box and has a rotation set.
• both display object are anchored at the top-left corner (0,0).

I'd like to rotate, scale, and position the gray box, so the green box fills the stage bounds (the green box and stage have the same aspect ratio).

I can negate the rotation easily enough

parent.rotation = -child.rotation

But the scale and position are proving tricky (because of the rotation). I could use some assistance with the Math involved to calculate the scale and position.

This is what I had tried but didn't produce the results I expected:

gray.scaleX = stage.stageWidth / green.width;
gray.scaleY = gray.scaleX;
gray.x = -green.x;
gray.y = -green.y;
gray.rotation = -green.rotation;

I'm not terribly experienced with Transformation matrices but assume I will need to go that route.

Here is an .fla sample what I'm working with: SampleFile

Answer 1

You can use this answer: https://stackoverflow.com/a/15789937/1627055 to get some basics. First, you are in need to rotate around the top left corner of the green rectangle, so you use green.x and green.y as center point coordinates. But in between you also need to scale the gray rectangle so that the green rectangle's dimensions get equal to stage. With uniform scaling you don't have to worry about distortion, because if a gray rectangle is scaled uniformly, then a green rectangle will remain a rectangle. If the green rectangle's aspect ratio will be different than what you want it to be, you'd better scale the green rectangle prior to performing this trick. So, you need to first transpose the matrix to offset the center point, then you need to add rotation and scale, then you need to transpose it away. Try this set of code:

var green:Sprite; // your green rect. The code is executed within gray rect
var gr:Number=green.rotation*Math.PI/180; // radians
var gs:Number=stage.stageWidth/green.width; // get scale ratio
var alreadyTurned:Boolean; // if we have already applied the rotation+scale
function turn():void {
    if (alreadyTurned) return;
    var mat:flash.geom.Matrix=this.transform.matrix;
    mat.scale(gs,gs);
    mat.translate(-gs*green.x,-gs*green.y);
    mat.rotate(-1*gr);
    this.transform.matrix=mat;
    alreadyTurned=true;
}

Sorry, didn't have time to test, so errors might exist. If yes, try swapping scale, translate and rotate, you pretty much need this set of operations to make it work.