Alphasnail
03-09-2006, 04:23 PM
I did some testing a while ago that I thought I would share here. Unfortunately I can’t make the actual test files available, as there is proprietary information on the screens. I will, however, describe the conditions and results of the test:
In the last couple of years I’ve done quite a bit of software simulation with Flash, and often have ten or twenty screenshots in a single SWF. Obviously file size is an issue, so I decided to do a semi-formal comparision between bitmap screenshots and vectorized screenshots (i.e., screenshots converted to vectors using “Trace Bitmap”). This test was conducted using Flash MX 2004, and doesn’t take into account any of the new features of Flash 8.
The Screenshots:
I started with two completely new and empty FLAs. I took 15 screenshots from a web-based telecommunications company billing application that consisted of a series of forms. The form elements are standard HTML fields, buttons and comboboxes. There are also a couple of screens that review the terms of service and such, so a couple of them have a substantial amount of text.
The screen captures were pasted into Photoshop, and the browser interface cropped out (e.g., tool bar, menu bar, status bar). The cropped screenshots are all 870 pixels wide, but vary in height ranging from 400 to 1240 pixels.
Bitmap FLA:
Each of the 15 screenshots were then pasted as bitmaps into a completely new and empty FLA. A single instance of each screenshot was placed on its own separate keyframe. They weren’t resized or otherwise altered, nor did I adjust the JPG quality in the publish settings. The file was saved using File --> Save and Compact, and then published.
Vector FLA:
The screenshots were then each converted to vectors in Flash using Modify --> Bitmap --> Trace Bitmap. The settings used were:
Color threshold: 50
Minimum area: 1
Curve fit: Pixels
Corner threshold: Many corners
After being converted to vectors they were pasted into a completely new and empty FLA. (This ensured the original bitmap screenshots were never in the vector version’s library.) A single group of each screenshot’s vectors was placed on its own separate keyframe, identical in layout to the Bitmap version. They weren’t optimized, resized or otherwise altered. The file was saved using File --> Save and Compact, and then published.
Results:
Here are the file size results:
Bitmap FLA: 1000 KB
Bitmap SWF: 1300 KB
Vector FLA: 2800 KB
Vector SWF: 700 KB
It seems strange that the published SWF of the bitmap screenshots is larger than the raw FLA itself, but that’s the result. If anyone replicates the test, I’d be excited to hear the results.
The key interesting result for me was that the vectorized screenshot SWF is nearly half the size of the same bitmap screenshots. It doesn’t surprise me that the FLA is so much bigger; I’m sure that maintaining the editable vectors is substantial.
In practical terms, I could make the vector version of the screenshots even smaller by chopping out repeated portions of the screens (e.g., sidebar menus, header graphics) and replacing them with instances of a symbol.
In terms of other benefits/disadvantages, vector screenshots look much nicer when scaled to other sizes, but they do seem to be more processor-intensive. Tweening a vectorized screenshot, or any complex vector image, is certainly slower than the equivalent bitmap, but I haven’t actually tested that in any formal way yet.
Perhaps the primary reason I’m a fan of vectorized screenshots is that they can be edited directly in Flash. Removing text, chopping the screens into pieces, and other editing doesn’t require copying and pasting into Photoshop. Also note that vectorized screenshots are a prime candidate for Flash 8’s runtime bitmap caching, making performance issues much less of an issue.
I hope that’s useful to someone, I’d love to hear about any similar experiences!
In the last couple of years I’ve done quite a bit of software simulation with Flash, and often have ten or twenty screenshots in a single SWF. Obviously file size is an issue, so I decided to do a semi-formal comparision between bitmap screenshots and vectorized screenshots (i.e., screenshots converted to vectors using “Trace Bitmap”). This test was conducted using Flash MX 2004, and doesn’t take into account any of the new features of Flash 8.
The Screenshots:
I started with two completely new and empty FLAs. I took 15 screenshots from a web-based telecommunications company billing application that consisted of a series of forms. The form elements are standard HTML fields, buttons and comboboxes. There are also a couple of screens that review the terms of service and such, so a couple of them have a substantial amount of text.
The screen captures were pasted into Photoshop, and the browser interface cropped out (e.g., tool bar, menu bar, status bar). The cropped screenshots are all 870 pixels wide, but vary in height ranging from 400 to 1240 pixels.
Bitmap FLA:
Each of the 15 screenshots were then pasted as bitmaps into a completely new and empty FLA. A single instance of each screenshot was placed on its own separate keyframe. They weren’t resized or otherwise altered, nor did I adjust the JPG quality in the publish settings. The file was saved using File --> Save and Compact, and then published.
Vector FLA:
The screenshots were then each converted to vectors in Flash using Modify --> Bitmap --> Trace Bitmap. The settings used were:
Color threshold: 50
Minimum area: 1
Curve fit: Pixels
Corner threshold: Many corners
After being converted to vectors they were pasted into a completely new and empty FLA. (This ensured the original bitmap screenshots were never in the vector version’s library.) A single group of each screenshot’s vectors was placed on its own separate keyframe, identical in layout to the Bitmap version. They weren’t optimized, resized or otherwise altered. The file was saved using File --> Save and Compact, and then published.
Results:
Here are the file size results:
Bitmap FLA: 1000 KB
Bitmap SWF: 1300 KB
Vector FLA: 2800 KB
Vector SWF: 700 KB
It seems strange that the published SWF of the bitmap screenshots is larger than the raw FLA itself, but that’s the result. If anyone replicates the test, I’d be excited to hear the results.
The key interesting result for me was that the vectorized screenshot SWF is nearly half the size of the same bitmap screenshots. It doesn’t surprise me that the FLA is so much bigger; I’m sure that maintaining the editable vectors is substantial.
In practical terms, I could make the vector version of the screenshots even smaller by chopping out repeated portions of the screens (e.g., sidebar menus, header graphics) and replacing them with instances of a symbol.
In terms of other benefits/disadvantages, vector screenshots look much nicer when scaled to other sizes, but they do seem to be more processor-intensive. Tweening a vectorized screenshot, or any complex vector image, is certainly slower than the equivalent bitmap, but I haven’t actually tested that in any formal way yet.
Perhaps the primary reason I’m a fan of vectorized screenshots is that they can be edited directly in Flash. Removing text, chopping the screens into pieces, and other editing doesn’t require copying and pasting into Photoshop. Also note that vectorized screenshots are a prime candidate for Flash 8’s runtime bitmap caching, making performance issues much less of an issue.
I hope that’s useful to someone, I’d love to hear about any similar experiences!