1 post tagged “flex 2.0”

Alex Uhlmann has created a great set of 3D animation classes for use in Flex. However, when using the Flip effect sometimes the front frame does not flip the whole way and a thin line is left along the axis of rotation until the entire animation is complete. The fix for this is quite easy: the Flip animation is actually two separate animations -- one to flip the front from facing the user to perpendicular to the screen and another to flip the back from perpendicular to the screen to facing the user. Alex does this with two separate tweens. As the tween progresses in FlipInstance he distorts the image the appropriate percentage to simulate rotation. However, when the first tween ends he does not make sure the front is distorted to 100% before beginning the back animation. So if your app doesn't get the tween progress callback very close to 100% then you get the gohst line. To fix this add the following line to the endFront function in FlipInstance.as (line 51):

That causes the front to rotate 100% -- which is perpendicular -- before the back animation begins. Add this line and you should never see that pesky artifact again.

Also, if you're using a ViewStack with Uhlmann's animation classes you may notice that the image 'blinks' before animation begins the first time. This is because the default behavior of a ViewStack is not to render a child until that child becomes visible. So when the animation begins the ViewStack has to render the back image, causing the entire thing to disappear for a second. To avoid this set add 'creationPolicy="all"' to your ViewStack. This tells the ViewStack to render all of its children when it is created. This will slow down initial display of the ViewStack, but the animations will be smooth.