The color insert of this Flash 5 Bible is dedicated to comparing bitmap quality within Flash, subject to various settings. Using two example photographs, we’ve generated a series of bitmap examples to help you understand the consequences of some of the procedures that have been discussed here.
To facilitate your deeper exploration into the subject of bitmap settings and their impact upon image quality, we’ve included the .SWF’s that were built to collect and test our sample shots. They are located in the folder titled, BitMap_Comparison_ 8-SWF’s, which is located in the ch12 folder on the CD-ROM. Because this is all about how images look on screen (and print is merely an approximation of this), we encourage you to use the Flash Player’s zoom facility to take a good look at these examples. We’ve chosen to supply these as eight separate .SWF’s because this will enable you to open several pages simultaneously for side-by-side comparison.
Generation of comparison images
Before you can make intelligent use of bitmaps in Flash, it’s imperative to know about the options for creating bitmaps for use within Flash. That’s because all bitmaps are not created equal. A bitmap from one program, created with similar settings, can be twice the file size with no appreciable increase in quality of a bitmap created in another program. It makes no sense to study optimization constraints within Flash if you ignore your exposure to fatty imports. To create a set of controlled images that could be used for comparison, we chose a portrait (with a background that shifts contrast) and a landscape (with a broad expanse of graduated color).
Both images were derived from high-quality film shots, scanned at a very high resolution, down-sampled to equivalent dimensions and resolution, 227 × 287 pixels at 96 ppi, and saved as uncompressed .TIFs. These files were used as the source files from which all other variations were derived (with the sole exception of the double-JPEG example, in which an image that had been previously .JPEG’d was used as the source image for the double-JPEG example).
Our principal comparisons were done with Adobe Photoshop and Macromedia Fireworks, simply to establish a comparison of the quality and degree of compression available from each program. However, when preparing .JPEGs for comparison, we added a choice alternative, BoxTop Software’s ProJPEG, which is a Photoshopcompatible plug-in. Because each program offers different options and different combinations of options, it is absolutely impossible to perform a direct one-for-one comparison. As such, our results are necessarily subjective and may not equate with your findings.
The BoxTop interface
As shown below, the interface for the BoxTop ProJPEG Photoshop-compatible plug-in is roomy and clear. For the purpose of our comparison we retained all settings as shown except for the Quality setting, which was set at 94, 60, and 30 for the High, Medium, and Low samples.
Here’s the BoxTop ProJPEG interface. Note the check box options at the right for both Better Image Sampling and Huffman code optimization.
The Fireworks interface
As shown below, Fireworks’ Export Preview interface is also roomy and clear. It also provides the option which we did not use of comparing the before image with three other previews. Again, for this comparison we retained all settings as shown except for the Quality setting, which was set at 94, 60, and 30 for the High, Medium, and Low samples. The Fireworks’ Export Preview has several options that may have tipped the compression contest in its favor. Note that we used the default, No Smoothing, and that we left the Remove Unused Colors check box activated.
The Fireworks Export Preview
The Photoshop interface
The Photoshop Interface that was used for these comparisons is shown in Figure below. In all fairness, it should be noted that Photoshop also sports a roomy interface complete with preview, which is accessed from Photoshop with the File➪Save for Web command. (But it should also be noted that, in preliminary testing, the Save for Web interface, in multiple configurations, failed to deliver competitive compressions.)
For this comparison we retained all settings as shown except for the Quality setting, which was set at 11, 9, and 7 for the High, Medium, and Low samples. The deviation in these settings is due to the Quality range of 1 to 12, rather than 1 to 10.
The familiar Photoshop .JPEG dialog. Note that the Quality range is from 1 to 12, rather than the expected 1 to 10 shows below. However, this difference was not the deciding factor in Photoshop’s failure to produce competitive compression— we experimented with multiple settings and with the Save for Web dialog. In all cases, Photoshop delivered much heavier .JPEGs than either Fireworks or the BoxTop plug-in ProJPEG.
The Photoshop .JPEG dialog
To make reasonable sense of the results of our compression tests on the portrait and road images, we assembled the results into Table below.
Observations and notes about the results of the settings
When we set out to create this test, we had some preconceptions based on prior experience that dissolved in the face of this metrical analysis. In some instances, the results were even counterintuitive, or clearly subject to the specific nature of the bitmap’s final use.
As shown below, in all cases, unless specified otherwise (for smoothing comparisons and to demonstrate double-JPEG corruption), the settings in the Flash Bitmap Properties dialog were maintained to preserve the compression and quality of the imported image. Unless otherwise noted, the .JPEGs and .PNGs were generated with Fireworks from the same Photoshop source .TIF.
Regardless of the kind of image imported, these settings in the Flash Bitmap Properties dialog usually deliver the highest quality image while preserving the imported compression.
Basic image-type comparisons in the color insert
The following is a description of each image in the color section, plate by plate. To see the images discussed, flip to the insert.
Color Plate 1: At the top left, the uncompressed Photoshop .TIF source file is displayed, as rendered by Flash with no compression. In the adjacent panel, this original .TIF is compared to 24-bit .PNGs from both Fireworks and Photoshop; note the slight color shift in the Photoshop .PNG. In subsequent panels, high quality (94 percent) and low quality (30 percent) .JPEGs are compared. Although the quality is nearly the same, on close inspection, at 200 percent zoom (right-click/Ctrl+click), the BoxTop images are slightly less chunky, with less artifacts.
High-quality .JPEG smoothing comparisons
Color Plate 2: Here, high-quality .JPEGs are compared when deployed in the Flash Bitmap Properties dialog either with or without smoothing enabled. At 100 percent, the unsmoothed image is superior. However, if you intend to scale the image smoothing may, as shown, improve the quality. The difference is more noticeable with the portrait.
High-quality Fireworks .JPEG scaling comparisons (no smoothing)
Color Plate 3: Here the high-quality .JPEGs of both images are compared to the same image, when scaled to 200 percent. Note how the horizon detail of the landscape is adversely affected by the zoom, while the portrait is chunky but almost acceptable.
Medium-quality Fireworks .JPEG scaling comparisons (no smoothing)
Color Plate 4: Here the medium-quality .JPEGs of both images are compared to the same image, when scaled to 200 percent. At 100 percent, both images are acceptable. But at 200 percent, it’s a different story: Here, you’ll note that the portrait is too chunky and unacceptable—many areas have a marked checkerboard pattern. Conversely, the zoomed horizon detail of the landscape isn’t much worse than the same view of the high-quality version.
Low-quality Fireworks .JPEG scaling comparisons (no smoothing)
Color Plate 5: Here the low-quality .JPEGs of both images are compared to the same image, when scaled to 200 percent. At 100 percent you’ll note that the portrait is barely usable too many areas of soft transition have been chopped and flattened. At 200 percent, the portrait is so corrupted and badly discolored that it’s unusable. It’s easier to tolerate distortion in landscapes, thus the 100 percent view of the landscape is still usable, although not advisable for anything more than a background or an incidental shot. However, the zoomed horizon detail of the landscape is far worse than the zooms of both the high- and medium-quality versions note, especially, the shimmer of artifacts both immediately above the horizon and around the clouds.
Medium-quality double-.JPEG corruption comparisons (no smoothing)
Color Plate 6: This image was created by first saving a low-quality .JPEG from Photoshop, then opening it in Fireworks, and then saving it as a low-quality .JPEG from Fireworks. Although the portrait faired worse than the landscape, the results weren’t nearly as monstrous as we had expected. The double-.JPEGs are chunkier and have more artifacts in transition areas, but they aren’t as bad as the print world’s admonition that precedes them.
Bit depth and color comparisons
Color Plate 7: These images demonstrate the effect of reduced bit depth or range of color through a series of three reductions. The 24-bit .PNG is a full-color image, with a range of millions of possible colors. Subsequent images have been reduced to 256, 128, and 64 colors. Note the increased posterization (or clumping of flattened color) in the transition of the cheek from light-to-dark, as well as the blue sky. Also note the successive banding of the accompanying spectrum.
High-quality .JPEG rotation comparisons
Color Plate 8: This is perhaps the trickiest comparison to analyze. We had this problem when building our Web site for the Flash 4 Bible. When the animation resolved and the book was displayed at a slight, 14-degree angle, it was distorted and it was distorted regardless of whether it was rotated in Photoshop and imported with the angle, or if it was imported into Flash on the square and subsequently rotated the manner of the distortion changed, but not the perception of distortion!
Flash Related Interview Questions
|Adv Java Interview Questions||J2EE Interview Questions|
|Adobe Flex 3 Interview Questions||Dreamweaver Interview Questions|
|3D Animation Interview Questions||Adobe Flash CS6 Interview Questions|
|Dreamweaver CS3 Interview Questions||Adobe Flex Interview Questions|
|Adobe Flex Actionscript Interview Questions||Gif Animation Interview Questions|
|Adobe Fireworks Interview Questions|
Understanding The Flash Framework
Exploring The Interface: Panels, Settings, And More
Using Tools For Navigation And Viewing
Working With Selections And The Pen Tool
Working With The Drawing And Painting Tools
Working With Text
Exploring The Timeline
Checking Out The Library: Symbols And Instances
Drawing In Flash
Animating In Flash
Using Bitmaps And Other Media With Flash
Designing Interfaces And Interface Elements
Understanding Sound For Flash
Importing And Editing Sounds In Flash
Optimizing Flash Sound For Export
Understanding Actions And Event Handlers
Navigating Flash Timelines
Controlling Movie Clips
Sharing And Loading Assets
Planning Code Structures
Creating Subroutines And Manipulating Data
Understanding Movie Clips As Complex Objects
Sending Data In And Out Of Flash
Understanding Html And Text Field Functions In Flash
What Is Generator?
Revving Up Generator
Working With Third-party, Server-side Applications
Working With Raster Graphics
Working With Vector Graphics
Working With Audio Applications
Working With 3d Graphics
Working With Quicktime
Working With Realplayer
Creating Full-motion Video With Flash
Creating Cartoon Animation With Flash
Planning Flash Production With Flowcharting Software
Working With Authoring Applications
Publishing Flash Movies
Integrating Flash Content With Html
Using Players, Projectors, And Screensaver Utilities
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.