I found a very problematic and reproducible bug with ActionScript 3 and simple display object transformations (width, height, rotation), and thought I should document it to save other developers some debugging time.
Put a 200x200px square clip on stage named foo. Add the following code.
foo.height = 100;
foo.rotation = 90;
trace(foo.height); |
foo.height = 100;
foo.rotation = 90;
trace(foo.height);
As expected, this traces 200. It scales the clip vertically, then rotates it, so that it is now 100px wide and 200px high on stage. Now, change the code, and run it again.
foo.rotation = 90;
foo.height = 100;
trace(foo.height); |
foo.rotation = 90;
foo.height = 100;
trace(foo.height);
Unexpectedly, this also returns 200. It should rotate the clip and then apply the vertical scale resulting in a shape that is 100px high and 200px wide on stage. The visual result is identical to the above, when it shouldn’t be.
foo.rotation = 90;
foo.height = 100;
foo.height = 100;
trace(foo.height); |
foo.rotation = 90;
foo.height = 100;
foo.height = 100;
trace(foo.height);
Even stranger, this does trace 100. Unfortunately, the object has been scaled both vertically and horizontally, and is now 100x100px, when it should be 200px wide and 100px high. Seems like the first height assignment gets applied before the rotation, and the second gets applied after the rotation.
Click here to see a (very) simple demo of this behaviour. The left and right blocks should be the same dimensions.
Freaky. I would hazard a guess that this is related to AS3’s weird hybrid of display object properties and transform matrixes.
One workaround would be to work with scaleX and scaleY instead, which are always applied to the original dimensions, and do not account for rotation.
