Vibrating movement in tweens

programming flash
1

I realise that in many of my tweenings, the images or text inside the tweened movieclip often “vibrate” or look shaky when its movement slows down from an easing tween.

I have uploaded a sample of what I am referring. Please click here for the sample.

What I have is a frame that loads the crown image externally. In my code, I set the smoothing = true like setting ‘Allow Smoothing’ to the image in the IDE and set the cacheAsBitmap = true.

If you look at the sample carefully, at the start and end of the animation, the jerking or “vibration” of the crown image(loaded externally into a bitmap) is most noticeble when the movement is slow. Even the static text below the image has this problem! While this jerking may be minimal, it doesn’t make the tween as graceful as it should be and clients often notice this and don’t like it. I am using the Tweener class with easeInOutExpo for this one. The tweening duration is in seconds and therefore the fps shouldn’t be the cause.

When I set the allow smoothing for the bitmap image, it does work if I am dragging the image from the library to the stage but my scenario now is that the pictures are loading externally. I have tried something in the code like for every loaded image, I will have bitmapImage.smoothing = true; but it still doesn’t work.

I have also uploaded the sample FLA file here. And here’s the code in the FLA:


import caurina.transitions.*;

Tweener.addTween(picture_mc, {time:12, x:475.9, transition:"easeInOutExpo"});

again_btn.addEventListener(MouseEvent.CLICK, moveAgain);

function moveAgain(e:MouseEvent):void {
	picture_mc.x = 5;
	Tweener.addTween(picture_mc, {time:12, x:475.9, transition:"easeInOutExpo"});
}

var loader:Loader = new Loader();
loader.load(new URLRequest("crown.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onComplete(event:Event):void {
	var image:Bitmap = Bitmap(loader.content);
	var bitmap:BitmapData = image.bitmapData;
	picture_mc.addChild(image);
	image.smoothing = true;
	image.cacheAsBitmap = true;
	image.x = 27.5;
	image.y = 30.2;
}

Thanks!