TweenLite height/width AS3.0 rendering notPrecise

[matia]

hi, just wanna manipulate the stroke of a rectangle from width:400 to width:100 and back same for height. But what i get is this : 401, 99.95, 400 (traced ...). If i keep the tween busy (do the same action a few times) the numbers even change sometimes, just a bit ... so the rectangle changes position (minimal, 1pixel at most), i think it jumpe's from one pixel to another because of the decimal place.

I don't get it, maybe I'm too tired! I have to say what I'm new to TweenLite and AS3 ... (fl.transitions.Tween makes me wanna cry )

 

import com.greensock.TweenLite;

var _rect:Sprite=new Sprite();
_rect.graphics.lineStyle(1,0xffffff,1,true,LineScaleMode.NONE);
_rect.graphics.drawRect(0,0,400,400);
stage.addChild(_rect);

trace(_rect.width,_rect.height);

TweenLite.to(_rect,1,{width:100,height:100,onComplete:TRACE})
function TRACE():void {
trace(_rect.width,_rect.height)
TweenLite.to(_rect,1,{width:400,height:400,onComplete:TRACEagain})
}
function TRACEagain():void {
trace(_rect.width,_rect.height)
}

 

I would be appeased for any help ... ...

[Carl]

welcome to tweening with TweenLite/Max. It will be a refreshing change from the native AS3 tweens for sure.

 

The problem you have is more based on Flash than TweenMax.

 

Let's take TweenMax out of the equation entirely.

 

paste just this code into an fla:

 

var _rect:Sprite=new Sprite();
_rect.graphics.lineStyle(1,0xffffff,1,true)
_rect.graphics.drawRect(0,0,400,400);
stage.addChild(_rect);

trace(_rect.width, _rect.height);

_rect.width = _rect.height = 500;

trace(_rect.width, _rect.height);

 

it will trace:

 

401 401

499.95 499.9

 

notice those funny numbers?

 

so even if TweenMax tweens the width to 500, in the end Flash will read it or render it as 499.95

 

if you take your original code and just tween a square with a solid fill, you'll see it works just fine

 

import com.greensock.TweenLite;

var _rect:Sprite=new Sprite();
//_rect.graphics.lineStyle(1,0xffffff,1,true)
_rect.graphics.beginFill(0xff0000);
_rect.graphics.drawRect(0,0,400,400);
stage.addChild(_rect);

trace(_rect.width,_rect.height);

TweenLite.to(_rect,1,{width:100,height:100,onComplete:TRACE})
function TRACE():void {
  trace(_rect.width,_rect.height)

}

[matia]

THX Carl for your fast reply ... good to know that TweenLite isn't the cause of that crap!

 

the thing is that I need to TweenLite just the outline ... it is essential for my project, do you know if there is a possibility to subtract in AS3.0 (one rect from another bigger one to get a thin stroke) ... or maybe you know other methodes?

[Carl]

if you draw your rectangle at 399 x 399 and apply a 1 pixel stroke, the width and height of the rectangle will be 400.

 

.5 of the stroke will be overhanging each edge. its kind of weird that strokes are drawn from the center, a 1 pixel stroke gets split into half pixels which is kind of difficult to make any sense of.

 

you will find that it will tween down to 100 x 100 without any funkiness.

 

see if that works for you.

[matia]

hey Carl, it's just a little more complex ... I extracted my problem out of a bigger script ...

among other stuff I'm going in the public function with BEZEICHNER:String (buttonName) make a const out of this string, const bezeichner:String.

get the frameMeasure out of the string + some pixels for better fitting, now i draw the rectangle with those numbers (i had in mind to make them undefined integer but on adobe help is written 'width : Number The width of the rectangle, in pixels.' so better not) and move > scale it ... and voila i'm standing in the middle of something that i neither wanted nor understand

 

public function button(stage:Object,BEZEICHNER:String='TEST',POS_X:uint=100,POS_Y:uint=100,SCHRIFTGRÖßE:uint=15,FENSTER_POS_X:uint=250,FENSTER_POS_Y:uint=454,FENSTER_BREITE:uint=700,FENSTER_HÖHE:uint=410):void {

var _text:TextField=new TextField;
		const bezeichner:String=BEZEICHNER;
		const returnHome:String='returnHome';
		_text.defaultTextFormat=formatA;
		_text.text=returnHome;
		const returnHomeBreite:Number=_text.textWidth+10;
		const returnHomeHöhe:Number=_text.textHeight+6;
		_text.replaceText(0,20,bezeichner);
		const bezeichnerBreite:Number=_text.textWidth+10;
		const bezeichnerHöhe:Number=_text.textHeight+6;
		_text.width=bezeichnerBreite;
		_text.height=bezeichnerHöhe;
		const fensterBreite:Number=FENSTER_BREITE;
		const fensterHöhe:Number=FENSTER_BREITE;
//position
		const X:uint=POS_X;
		const Y:uint=POS_Y;
		var fensterPosX:uint=0;
		const fensterPosY:uint=FENSTER_POS_Y;
		//rechteck
		var rect:Sprite=new Sprite();
		rect.graphics.lineStyle(1,0xffffff,1,true,LineScaleMode.NONE);
		rect.graphics.drawRect(0,0,bezeichnerBreite,bezeichnerHöhe);
		rect.alpha=0;

		var _rect:MovieClip=new MovieClip;
		_rect.x=X;
		_rect.y=Y;
		_rect.addChild(rect);
		stage.addChild(_rect);
		//button
		var _btn:MovieClip=new MovieClip;
		_btn.buttonMode=true;
		_btn.mouseChildren=false;
		_btn.x=X;
		_btn.y=Y;
		_btn.addChild(_text);
		stage.addChild(_btn);
//importer
		var bilderDESIGN:importer=new importer();
		//listener
		function _addListener(a:uint=1):void {
			if(a==1) {
				_btn.addEventListener(MouseEvent.MOUSE_OVER,_over);
				_btn.addEventListener(MouseEvent.MOUSE_OUT,_out);
				_btn.addEventListener(MouseEvent.CLICK,_click);
			}else if(a==2) {
				_btn.addEventListener(MouseEvent.CLICK,_clickAgain);
			}
		}
		function _removeListener(a:uint=1):void {
			if(a==1) {
				_btn.removeEventListener(MouseEvent.MOUSE_OVER,_over);
				_btn.removeEventListener(MouseEvent.MOUSE_OUT,_out);
				_btn.removeEventListener(MouseEvent.CLICK,_click);
			}else if(a==2) {
				_btn.removeEventListener(MouseEvent.CLICK,_clickAgain);
			}
		}

		_addListener();

		function _over(e:MouseEvent):void {
			rect.alpha=1;
		}
		function _out(e:MouseEvent):void {
			rect.alpha=0;
		}
		function _click(e:MouseEvent):void {

			trace(fensterPosX,fensterPosY,fensterBreite,fensterHöhe);
			_removeListener();
			_btn.buttonMode=false;

			TweenLite.to(_btn, .3, {x:fensterPosX, y:fensterPosY,onComplete:_SCALE});
			TweenLite.to(_rect, .3, {x:fensterPosX, y:fensterPosY});
		}
		function _SCALE():void {
			TweenLite.to(_rect, .3, {width:fensterBreite,height:fensterHöhe,onComplete:_fensterOffen});
		}
		function _fensterOffen():void {

			trace(_rect.x,_rect.y,_rect.width,_rect.height);

                               _btn.buttonMode=true;
			_addListener(2);
			_text.defaultTextFormat=formatB;
			_text.replaceText(0,20,returnHome);
			_text.width=returnHomeBreite;
			_text.height=returnHomeHöhe;

			if(bezeichner=='DESIGN') {
			bilderDESIGN.laden(stage,'webContent/Button/thumbnails/','.png',6,fensterPosX,fensterPosY);
			}
		}
}

 

i tried the pixel cutting 2 days ago it's too heavy-handed and how do you explain the fact to yourself that sometimes (if you push the button a few times) even those strange numbers change? I have absolutely no clue ... maybe I get my ButtonFrame out of something else (cut it out of paper and stick it on the screen, man I'm sure frustrated )

[matia]

a solution that i like a simple one

 

just make

_rect.graphics.lineStyle(1,0xffffff,1,true,LineScaleMode.NONE);

to

_rect.graphics.lineStyle(0,0xffffff,1,true,LineScaleMode.NONE);