Having a table layout page (not very great, I know), I wanted to make a Flash clip scale on the entire surface of one table cell; I also wanted to preserve the scale ratio and to align the clip content nicely with the rest of the page, making a smooth integration with the HTML elements.
My first attempt was to fiddle with some Javascript, in order to obtain the size of the table cell and then resize the Flash object in order to fit the container. Unfortunately this wasn't the best approach, since there's no reliable cross-browser way (at least I haven't found one to date) to obtain the rendered dimensions of HTML table cells.
The correct solution (the notion of correctness is a bit subjective here) is considerably simpler. Flash allows the developer to specify the way a clip is scaled in the browser (Stage.scaleMode),
providing four modes: showAll, noBorder, exactFit, noScale. I mistakenly choose noBorder initially, even though I didn't want any cropping. showAll introduced borders and I was a bit reluctant at this. Later when I rechecked the code, I discovered the solution (place the code at the beginning of the clip, preferably in the first frame, at the root
level):
Stage.scaleMode = "showAll"; Stage.align = "top";
Borders will appear around the content, but Stage.align allows you to specify how the content of the movie clip will be aligned (just like CSS's vertical-align). As for the HTML page,
<table> <tr> <td>Lorem ipsum</td> <td style="height: 400px"> <object type="application/x-shockwave-flash" data="loader.swf?path=myfile.swf" width="100%" height="100%"> <param name="wmode" value="opaque" /> <param name="movie" value="loader.swf?path=myfile.swf" /> </object> </td> </tr> </table>
Internet Explorer 6 still needs a concrete value for the height of the table cell (100% doesn't work out of the box, there might be some hacks though), but in my case, this was a perfect solution.