ActionScript performance tests
Auto Snapshot Extension
Central Apps
Buzzword Bingo
Blog
News
Contact


Unicode in FlashMX

Not caching SWFs

JavaScript/Flash w/Firefox and Opera
Books



 

 

There's a fairly good document on how HTML can change the dimensions of a Flash movie, and how it will stretch or distort the Flash movie available on the Macromedia web site here: http://www.macromedia.com/support/flash/ts/documents/scaling_parameters.htm

But it wasn't clear to a few of my friends so.. I've put together an example of how HTML can change the dimensions of the movie. The examples below should visually demonstrate how Flash reacts when aspect ratios are changed. Depending on how the SWF is embedded, borders may be added, or the movie may be cropped.


The SWF embedded at 225 x 225
This is the original size of the movie. The movie includes a GIF image.
(file size of SWF is 4k)

 


The SWF embedded at 700 x 425 with no size parameter (file size of SWF is 11k)
This is the same SWF as above.. just "stretched" by the HTML


A second version of the SWF - this time the image was "traced" in Flash to produce a vector graphic. This one was also "stretched" by the HTML to 700 x 425.
(file size of SWF is 20k)

 


A third version of the SWF - this time the text in the graphic has been replaced with Flash text. Again, this one was "stretched" by the HTML to 700 x 425.
file size of the SWF is 9k. While it is more than double the original SWF this is less than 1/2 the file size of the SWF where the image was simply "traced".

It's much easier to read. Note the difference between the embedded font (which is anti-aliased) and the Device font (which is aliased).

 

 

 

 

The examples below show the effects of the SCALE attribute in HTML on the Flash movie. You can view the source of this page if you want to see how it works.. or publish from Flash using the different settings and then view the HTML it spits out.


The original movie (300x 300)

100 x 300 SCALE = default


note the borders that have been added to the top and bottom so that the aspect ratio is not changed.

200 x 100 SCALE = default


note the borders that have been added to either side so that the aspect ratio is not changed.

500 x 300

changed to 450 x 100 - SCALE ="noborder"
100 x 400 with SCALE = "noborder"

changed to 200 x 100 - SCALE = "noborder"

 

Set to 100 x 200 SCALE = "exactfit"

300 x 100 SCALE = "exactfit"