Moments of Flash, ActionScript, Flex

Discuss, challenge, inspire, connect, discover...

Subscribe
Add to Technorati Favourites
Add to del.icio.us
Nov 10, 2009

Rasterize a Transformed Vector without Pixelation

Posted by Unknown

How does one rasterize a transformed vector capturing it's new dimensions without pixelation?


Note: This follows my previous post Matrix Not Synchronized


Challenge: To render a bitmap of a transformed vector display object without pixelation. Specifically, after a mx.controls.Text is transformed, a bitmap snapshot is needed to be taken of the new object including the dimensions.  I should note that the reason I am needing to get a bitmap snapshot is do to some shaping to the text.


Problem: However, doing so results in pixelation or resamples / renders the original dimensions of the transformed Text. It appears that flash.display.BitmapData::draw cannot get the new transformed display. In other words,  when a flash.display.InteractiveObject is scaled on the x axis (or any axis) using transform.matrix, flash.display.BitmapData::draw cannot capture the new dimensions of the display object.


Example: http://sources.novelastudios.com/flash/matrix_adustments/MatriciesAndDimensions.html#
When the application creation complete is fired a snapshot is made. Change the matrix width (transform.matrix.a) and then re-render a snapshot / bitmap. Notice it retains the original, non-transformed values. Therefore and considering it is a rastered snapshot, when the snapshot/bitmap is scaled it becomes pixelated. Example version was 1.1.0.0 that should this problem. Version 1.2.0.0 is a workaround for now showing the workaround.


Workaround: I give credit to Guy Stables (needs a link) and Alex Harui (http://blogs.adobe.com/aharui).  Essentially, the workaround is as follows:

  1. The InteractiveObject (we'll call our target) needs to be placed in a container. In this example mx.controls.Text is placed inside a mx.core.UIComponent. 
  2. The matrix transform is then applied to the target (eg mx.controls.Text)
  3. The dimensions of the container (eg the UIComponent that contains the Text/target) are then set to the  target's pixelBounds dimensions.
  4.  Finally, take the snapshot bitmap of the container (the UIComponent).

For a demonstration see the latest version 1.2.0.0 of the example.




More Information:
Also found at http://forums.adobe.com/thread/521432

0 comments: