Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
frickteam

Masking container and transform problem

Recommended Posts

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

Link to comment
Share on other sites

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;

 

};

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×