Pixel shift when using 3d rotation

[friendlygiraffe]

Hi - I've noticed a slight pixel shift when tweening anything using rotationX, rotationY or rotationZ

 

 

import com.greensock.*;
TweenMax.from(mc, 2, {rotationY:"630"});

 

 

You can see what I mean in the attached file. Thanks

Test2.zip

[Carl]

Yes, when an object has 3D transformations applied Flash converts the object to a bitmap. It is normal to lose the "crispness" of the original artwork. This is just how Flash does things.

 

A solution is discussed and available here:

http://www.snorkl.tv/2011/04/fun-and-quick-timelinemax-effect-cluster-bomb/

[friendlygiraffe]

Thanks Carl

[friendlygiraffe]

Is there a way of fading this effect in? Something like:

 

TweenMax.to(mc,1,{transform.matrix3D: null});

[jamiejefferson]

Essentially no, this isn't a tweenable effect. matrix3D is a property, just like x or alpha, so it's either on (is a matrix3D - bitmap mode) or off (is null - vector mode).

 

That said, to get a smoother transition from bitmap to vector you could write a function to fade between the bitmap and the vector:

* capture mc as a bitmapdata

* create a bitmap from the bitmapdata

* addChild(bitmap) somewhere and position it to exactly overlay mc (could be the stage, mc.parent, or mc itself - you can figure out how this works best for you - as a child of mc you could continue to tween simpler values like x and alpha with no side effects)

* set mc.transform.matrix3D to null

* tween the alpha of bitmap to 0

* removeChild(bitmap)

 

This could be facilitated with a plugin probably, however I don't work with flash much anymore so I don't have an environment to write this up and test it out for you. If plugin development is not for you, you could just make it a standalone function to call onComplete.

Edited September 7, 2012 by jamiejefferson

[friendlygiraffe]

Thanks Jamie - thought as much. That's exactly what I'm doing. I'll post the code when I finish it.

[friendlygiraffe]

Here's the solution (sort of). With help of Carls code:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.display.MovieClip;
var mcs:Array = [mc1,mc2,mc3];
TweenMax.staggerFrom(mcs, 1, {delay:1,rotationX: "130",y:"-200", onComplete: deBlur, onCompleteParams: ["{self}"]}, 0.05);
function deBlur(tween:TweenMax)
{
var mct:MovieClip = tween.target as MovieClip;
var currentX:Number = mct.x;
var currentY:Number = mct.y;
var myBitmapData:BitmapData = new BitmapData(mct.width,mct.height,true,0x000000);
myBitmapData.draw(mct);
var bmp:Bitmap = new Bitmap(myBitmapData);
bmp.x = currentX;
bmp.y = currentY;
this.addChild(bmp);
mct.transform.matrix3D = null;
var fadeTime:Number = 0.5;
TweenMax.to(bmp,fadeTime,{alpha:0});
TweenMax.from(mct,fadeTime,{alpha:0});
mct.x = currentX;
mct.y = currentY;
}

[jamiejefferson]

Wow you got that sorted quickly

 

Question though, is the TweenMax.from(mct,fadeTime,{alpha:0}); necessary? I'd imagine this sort of effect would involve a dip in total opacity for mct, as during the tween neither mct or bmp have alpha:1; although combined alpha will be high throughout, it is probably less than 1 (try increasing the fadeTime to see if it becomes more obvious). If bmp has a higher index than mct, just fading it out should be enough to transition from bmp to mct.

 

Try this and see if it improves at all:

TweenMax.to(bmp,fadeTime,{alpha:0});
TweenMax.from(mct,fadeTime,{alpha:0});

// replace with:

TweenMax.to(bmp,fadeTime,{alpha:0, onComplete:removeChild, onCompleteParams:[bmp]});

[friendlygiraffe]

I tried various ways of doing this, none of them seemed to work 100%. particularly when animating white lines on a dark background

 

This would be a good feature to have for a future update