Masking container and transform problem

[frickteam 0 Likes (Newbie)]

I have a strange behaviour with masks.....

Am I missing some really important or why are the dimensions of the maskedContainer (and therefore also the transform box) 400x400

and not only 200x200 like the maskMC which is masking the imageContainer?

 

Here is a example:

//:::::::::::::::::::::::::::::::::::::::::::::::::::

//----

//imports

import gs.events.TransformEvent;

import gs.transform.TransformItem;

import gs.transform.TransformManager;

//----

// set up transform manager

var _tm: TransformManager = new TransformManager();

//----

// container which should be transformed

var maskedContainer:MovieClip = new MovieClip();

addChild(maskedContainer);

//----------------------------------------------

// image container with mask

//

var maskMC:MovieClip = new MovieClip();

maskMC.graphics.beginFill(0x000066);

maskMC.graphics.drawRect(0, 0, 200, 200);

maskMC.graphics.endFill();

maskedContainer.addChild(maskMC);

//

var imageContainer:MovieClip = new MovieClip();

imageContainer.graphics.beginFill(0x00FF66);

imageContainer.graphics.drawRect(0, 0, 400, 400);

imageContainer.graphics.endFill();

maskedContainer.addChild(imageContainer);

//

//----------------------------------------------

imageContainer.mask = maskMC;

_tm.addItem(maskedContainer);

//:::::::::::::::::::::::::::::::::::::::::::::::::::

 

THX 4 HELP

[frickteam 0 Likes (Newbie)]

Ok i didn't realize that my container stills shows the orginal size of the image and not the masked one. I've found a quite simple solution for this.

I added the transformManager to a invisible controlMC inside the maskedContainer who will manage sizing and all the other stuff which matters....

 

//----------------------------------------------

//imports

import gs.events.TransformEvent;

import gs.transform.TransformItem;

import gs.transform.TransformManager;

//----------------------------------------------

// set up transform manager

var _tm: TransformManager = new TransformManager();

//----------------------------------------------

// container which should be transformed

var maskedContainer:MovieClip = new MovieClip();

addChild(maskedContainer);

//----------------------------------------------

// image container with mask

var imageContainer:Pinguins = new Pinguins();

maskedContainer.addChild(imageContainer);

var offsetWidth:Number = -imageContainer.width/2;

var offsetHeight:Number = -imageContainer.height/2;

//

var maskMC:MovieClip = new MovieClip();

maskMC.graphics.beginFill(0xFF0000,.5);

maskMC.graphics.drawRect(offsetWidth, offsetHeight, imageContainer.width, imageContainer.height);

maskMC.graphics.endFill();

maskedContainer.addChild(maskMC);

//

var controlMC:MovieClip = new MovieClip();

controlMC.graphics.beginFill(0x006666,0);

controlMC.graphics.drawRect(offsetWidth, offsetHeight, imageContainer.width, imageContainer.height);

controlMC.graphics.endFill();

maskedContainer.addChild(controlMC);

//----------------------------------------------

var activeElement:TransformItem;

imageContainer.mask = maskMC;

maskedContainer.x = Math.abs(offsetWidth);

maskedContainer.y = Math.abs(offsetHeight);

_tm.addItem(controlMC);

//----------------------------------------------

var myItem:TransformItem = _tm.getItem(controlMC);

myItem.addEventListener(TransformEvent.MOUSE_DOWN, showPos);

myItem.addEventListener(TransformEvent.MOVE, posFunc);

myItem.addEventListener(TransformEvent.SCALE, posFunc);

myItem.addEventListener(TransformEvent.ROTATE, posFunc);

myItem.addEventListener(TransformEvent.FINISH_INTERACTIVE_MOVE, updateMaskedContainer);

myItem.addEventListener(TransformEvent.FINISH_INTERACTIVE_SCALE, updateMaskedContainer);

myItem.addEventListener(TransformEvent.FINISH_INTERACTIVE_ROTATE, updateMaskedContainer);

//----------------------------------------------

function updateMaskedContainer($event:Event):void {

trace("updateMaskedContainer");

//

var abstandX:Number = controlMC.x - maskedContainer.x;

var abstandY:Number = controlMC.y - maskedContainer.y;

//

maskedContainer.x += controlMC.x;

maskedContainer.y += controlMC.y;

//

controlMC.x = imageContainer.x = maskMC.x = 0;

controlMC.y = imageContainer.y = maskMC.y = 0;

//

activeElement.update();

}

 

function posFunc($event:Event):void {

activeElement = TransformItem($event.currentTarget);

//

var cw:Number = controlMC.width;

var ch:Number = controlMC.height;

var cx:Number = controlMC.x;

var cy:Number = controlMC.y;

var cr:Number = controlMC.rotation;

var ratioX:Number = controlMC.scaleX;

var ratioY:Number = controlMC.scaleY;

var ratioGesamt:Number = (ratioX>=ratioY) ? ratioX : ratioY;

var scaleFactor:Number = (ratioGesamt>1) ? ratioGesamt : 1;

//

maskMC.x = cx;

maskMC.y = cy;

maskMC.scaleX = ratioX;

maskMC.scaleY = ratioY;

maskMC.rotation = cr;

//--------------------------------------------

imageContainer.scaleX = scaleFactor;

imageContainer.scaleY = scaleFactor;

imageContainer.x = cx ;

imageContainer.y = cy ;

imageContainer.rotation = cr;

 

};