11.17.2009

Actionscript 3.0 Tweening tips: Preventing borders from scaling when tweening

I was recently trying to animate a box with a border using the Tween class in Actionscript 3.0 and ran into some strange behaviour. As the width of the Shape grew, so did the width of the stroke around it, even though I wasn't tweening this property. Here's the code I was using:

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.*;
import flash.events.*;

var growBox:Shape = new Shape();
growBox.graphics.lineStyle(2, 0XFF0033, 1, true, LineScaleMode.NONE);
growBox.graphics.beginFill(0x124590, .9);
growBox.graphics.drawRect(0,0, 30, 30);
growBox.graphics.endFill();
var growContainer:MovieClip = new MovieClip();
growContainer.addChild(growBox);
addChild(growContainer);
growContainer.x = (this.stage.stageWidth / 2) + (growContainer.width / 2);
growContainer.y = (this.stage.stageHeight / 2) - growContainer.height;
var wTween:Tween = new Tween(growBox, "scaleX", None.easeInOut, 0 , (this.stage.stageWidth / growContainer.width), 30);
wTween.addEventListener(TweenEvent.MOTION_CHANGE, growing);
var prevX:Number = growContainer.x;
function growing(event:TweenEvent):void {
growContainer.x = (prevX - (growContainer.width / 2));
trace(growContainer.scaleX);
}

After some research I ended up changing my lineStyle settings to the following:

growBox.graphics.lineStyle(2, 0XFF0033, 1, true, LineScaleMode.NONE);

and everything worked perfectly. The specific class to import here is

Flash.display.LineScaleMode.<br />

I was happy to figure this out since I had no desire to have big fat borders on my graphics in my application. Hope this helps.

Additional links:


No comments:

Post a Comment

share

Bookmark and Share