[Masking container and transform problem]

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;

 

};

[Masking container and transform problem]

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

[Move All The Way To Back]

i always use something like this:

 

//method to move up depth

private function swapDepthsGO($e:MouseEvent) : void {

var atm:TransformManager = fooClip._tm; // my active TransformManager

var objectsLen:int = atm.targetObjects.length; // length of all items which are registered with the TransformManager

depthCounter = 0; // inits my depth counter

depthID = setInterval(moveSelectionDepth,5,atm,objectsLen,1); // starts changing the depth 1 = up || -1 = down

}

 

//method to move down depth

private function swapDepthsGU($e:MouseEvent) : void {

var atm:TransformManager = fooClip._tm; // my active TransformManager

var objectsLen:int = atm.targetObjects.length; // length of all items which are registered with the TransformManager

depthCounter = 0; // inits my depth counter

depthID = setInterval(moveSelectionDepth,5,atm,objectsLen,1); // starts changing the depth 1 = up || -1 = down

}

//

private function moveSelectionDepth($atm,$len:int,$direction:int=1):void{

if(++depthCounter>$len){

clearInterval(depthID);

}else {

if($direction==-1){

$atm.moveSelectionDepthDown();

}else{

$atm.moveSelectionDepthUp();

}

}

}

[Sorting does not work correct]

I just have found a bug in the TransformManager-Class:

 

Everytime you use the method "moveSelectionDepth" it makes the sorting wrong if you have more than 9 elements

 

the line where you sort the depths for the items is >>> curDepths.sortOn("depth");

but should be >>> curDepths.sortOn("depth",Array.NUMERIC);

 

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Look here:

http://livedocs.adobe.com/flash/9.0/mai ... 05045.html

 

By default, Array.sortOn() works as described in the following list:

* Sorting is case-sensitive (Z precedes a).

* Sorting is ascending (a precedes .

* The array is modified to reflect the sort order; multiple elements that have identical sort fields are placed consecutively in the sorted array in no particular order.

* Numeric fields are sorted as if they were strings, so 100 precedes 99, because "1" is a lower string value than "9".

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

[addItem adds always a second textField]

ok for example:

i have two textfields on my canvas

now i want to put the selected textfield one layer behind

 

so i catch the index of these two textfields and swap them with swapChildrenAt(selectedChildIndex,otherChildIndex)

than the selected textfield is in the back of the other textfield -> so everything works

 

but if i move the selected textfield after that action -> the other textfield disapears from the canvas

 

what could be the mistake?

[addItem adds always a second textField]

o.k.

 

so if i want to change the textfield index to build my layer management

should i change also the index from the second textfield or doesn´t it matter?

or how can i handle that? is there anybody who wrote a script/function for layer management?

[addItem adds always a second textField]

Hi,

 

i try to create a layer manager wher i can push buttons to push selected items forward or backward on the canvas.

 

Now i use numChildrens() to see how many Childs are on the canvas. Then i have seen that allways i add a textField

to the Transformmanager theres another textField placed. But it is not visible.

 

Is it normal that Transformmanager placed always a second textField?

If i do that with movieclips this doesn´t happend.

 

Here is my code snippet from the function which placed a textField on the canvas:

 

public function textfeldPlatzieren() {

		tf = new TextField();

		leinwand.addChild(tf);

		trace("children1 "+leinwand.numChildren);
		for (var i:Number=0; i < leinwand.numChildren; i++)
		{
			if(leinwand.getChildAt(i) is TextField){

				var obj = leinwand.getChildAt(i);
				trace(i+" : " + obj + " - " + obj.text);
			}
		}

	        trace("children2 "+leinwand.numChildren);
		transformManager.addItem(tf);
		trace("children3 "+leinwand.numChildren);
	}

 

on trace "children2" is only one textField - on trace "children3" after addItem there is a second textField