Friday, August 17, 2007

Weird sizing problem

After a lot of pulling my hair out trying to work out why my custom scrollbars weren't resizing correctly, thinking there must be a problem with my code, i've discovered that it's actually a strange problem with flash resizing movieclips containing objects with strokes that aren't hairline.

to replicate the problem, do the following:

1. draw a rectangle 350 pixels high and say 10 pixels wide with a stroke width of 1.

2. draw a rectangle beside it 30 pixels high and 10 pixels wide with a stroke width of 1. convert this second rectangle to a movieClip and give it an instance name of test. turn on 9-slice scaling.

3. draw a rectangle beside test 30 pixels high and 10 pixels wide with a hairline stroke width. convert this third rectangle to a movieClip and give it an instance name of test2. turn on 9-slice scaling for this clip also.(although it doesn't need it as it is rectangular and uses hairline stroke - do this in the interests of consistency with the other clip for this test)

4. type the following in the frame's actions:

test.height=350;
test2.height=350;


5. compile the movie, and notice that the movie clip called test, with a stroke width of 1, doesn't quite make the correct height, whilst the hairline clip works fine.

what's going on?

flash appears to get a little confused between the height of the clip including stroke,
and the height of the fill.

to illustrate this, click on the movieClip and notice that the properties show it to be 30 pixels high.

trace(test.height);

and notice that flash thinks it is 31 pixels high...

so when flash calculates its new height, it is 1/31st off.

what we need to do is rectify these incorrect calculations. this is done by:
clip.height=preferredHeight*(clip.height/currentHeight);
or, in this case:

test.height=350*(test.height/30);

if you trace test.height again, you'll see that flash now thinks it is 361.7 pixels high, but it is
actually exactly the same height as the 350 pixel high rectangle we drew in step 1.

by the way, all of this can be avoided by drawing the rectangle originally with actionScript, but i believe these workings are still necessary for cases where simple shapes are not sufficient and we need to accurately resize a designer's work.