Fuzzy graphics after rotations

If you’ve ever set the martix3D & Z position for a flex object you’ll have noticed that as soon as you do it loses its sharpness.  This is especially noticeable if you’re container/object has text in it.

 

Well here are the few simple steps to make sure that when you need you’re object to get its ‘sharpness’ back you can.

  1. Before you set the Z property and while the matrix3D is null take a copy of the objects matrix.  You can do this by accessing object.transform.matrix, note as soon as you set the Z property the matrix3D will go from being null to being set and the matrix value will end up becoming null.
  2. If using a tween or similar to go between a certain value (rotation) and 0 then I found that unless you explicitly use the value 0 in the end tween function that it may set the end value as 0.0001 or something very close to 0.  This will not be enough, so in the end tween function I always explicitly set the value to whatever I want it to be at the end.  e.g. if my tween was something like Tween(this , 90, 0) then in the onTweenEnd() I make sure that the value is 0 (rather than just using the value passed into the end function – which may or may not be exaclty 0).
  3. As soon as the rotation value is 0, then I set the Z property to NaN, then set the object.transform.martrix3D to null and finally I make the object.transform.matrix = the previously copied matrix.
  4. As soon as you copy the matrix to the transform.matrix property you should see your object become sharp again.
  5. Thats it :) .

Hope this helps a bit.

This entry was posted in actionscript, Flex and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>