[3D Rendering Tutorial]
Bitmap Handling in Macromedia FlashSo you think that Flash is just a vector format? Tom Arah shows that’s only half the story.
Flash is a vector format – everyone knows that. Vector handling is what made the format a success. Compared to bitmaps, which wastefully describe the colour of every single pixel in an image, vectors mathematically describe the outlines and fills of the objects that make up the image. The end result is ruthless efficiency and minimal file sizes – exactly what you need for a web imaging format that was specifically designed to deliver rich graphics through the bandwidth bottleneck of a 14.4 modem.
This is all true, but vectors by themselves aren’t enough. Their big limitation is their fills which are limited to flat colours or gradients. This means that there are some things that vectors just can’t do, such as realistic motion blurs, glows, variable transparency and, crucially, photographic images. As such, while the original advice with Flash was to stick strictly to vectors, these days the format has become so widespread and all-pervasive that that’s no longer an option – you can’t produce a shopping site with no product shots. The good news is that, with ever-improving bandwidth, including bitmaps in your Flash projects needn’t be a problem. In fact, when you understand Flash’s unusual bitmap handling and how to make the most of it, you can turn it into another huge strength for Flash – and an excellent way to give your work a striking creative edge.
Integrating bitmaps can really make your Flash work stand out.
Naturally the first step is to bring in your bitmaps with the Import to Stage ( Ctrl+R) command. Assuming you have QuickTime installed, when you look at the list of supported formats you’ll find limited and quirky range of options including BMP, TIFF and Photoshop PSD (though only version 2.5 or 3 which rather limits the usefulness). Much more regularly useful are the three web favourites which Flash supports directly: JPEG for continuous tone full- colour photographs; GIF for images made up of 256 or less colours and usually originated on the computer and containing areas of flat colour; and PNG for both lossless palette-restricted and full- colour images.
So which is the best format to use? To find out I created a simple test image of a 640x480 photo in Macromedia Fireworks and then exported versions in BMP, TIFF, PSD and various flavours of JPEG, GIF and PNG. I then imported these into Flash, converted them to SWF with the default settings and looked at the file sizes (I deliberately used a large image to exaggerate the size differences, for delivery over the Web you’d obviously try and keep your bitmaps much smaller). In terms of the original file size the running order was pretty much as you’d expect ie PSD, full- colour PNG, LZW-compressed TIFF, BMP, GIF-256, PNG-256, GIF-128, PNG-128, standard JPEG, GIF-8, PNG-8 and finally the low quality JPEG and ranging from nearly 2MB down to just 25K. But the SWF results were very different with the largest being the 256-colour GIF (165K), then the 128-colour GIF (135K) then all the non-GIF/JPG formats bar one (hovering around 85K), the 8-colour GIF and PNG (both 45K) and finally the low-quality JPEG (25K).
So what’s going on? Essentially Flash attempts to ensure that all bitmaps are compressed as efficiently as possible on export and so for the non-GIF/JPEG images (with the one exception of the 8-colour PNG), Flash automatically converted them to JPEG. This makes sense as JPEG is much the most efficient format for full- colour images. Even better, using the JPEG Quality slider in the Publish Settings dialog (Ctrl+Shift+F12) you can change the quality setting, and so output file size, for all converted bitmaps globally across your project – lower the setting until the images are on the point of deteriorating visibly and you can slash the size of your movie at a stroke. For the GIFs and JPEGs though Flash sensibly assumes that you’ve already optimized the images and so honours the in-built settings.
In most cases the system works reasonably well but the global setting is a blunt instrument and particularly ineffective for indexed PNG files which, with the exception of those with very restricted colour palettes, get converted to JPEG anyway. Fortunately there’s a solution to both these problems though you have to hunt to find it. If you open the Library for your project ( Ctrl+L) you’ll see that all imported bitmaps are automatically added to the list and, if you select one and right-click, you’ll find a Properties… command. Here you can change the settings for your bitmap between lossy “Photo/JPEG” and “Lossless GIF/ PNG” compression and, for images that weren’t imported as JPEGs, you can deselect the Use Document Default Quality option and specify a quality setting optimized for the individual image. You can also override the settings for imported JPEGs by deselecting the Use Imported JPEG Data option, but you should be wary of this as it’s never desirable to resave a JPEG, it’s always better to go back to the original and save from there.
Flash offers basic image optimization control.
OK, now we understand how Flash handles the import and export of bitmaps, what’s the best route to take? Generally, for maximum quality and minimum bandwidth, you’re best off getting things right from the start. By optimizing your images as GIFs or JPEGs in dedicated web imaging applications such as Adobe ImageReady and Macromedia Fireworks you can see the effect of your changes in real time so that you can hone in on the ideal trade-off between quality and size. More importantly, dedicated apps offer advanced optimization features that Flash can’t match. For example, using Macromedia Fireworks, I created a typical web layout involving text and buttons overlaid over a photo and then optimized the results using the advanced selective JPEG compression capability in which the vector-based text and shapes are handled at high quality while the background is much more heavily compressed. Because the eye is more attuned to the sharp lines of the overlaid objects, the resulting JPEG appears high quality, but the overall file size can be squeezed to the absolute minimum.
Having said that, there are two situations in which PNG as a format offers unbeatable advantages as an import partner for Flash even though ultimately you have less optimization control. Firstly, PNG supports transparency either on an indexed palette basis like GIF or on an alpha channel basis. This means that you can combine full- colour , low-size JPEG output with advanced transparency effects so that you can easily and efficiently incorporate non-rectangular photographs into your designs. It might not sound that significant but the results are simultaneously more striking, because they are so unusual and don’t include irrelevant and distracting background, and also more natural, because the bitmap object appears much more of an integral part of the overall design.
The other reason why you would want to use PNG as your import format is if you are using Macromedia Fireworks to prepare your images as this uses an extended version of PNG as its native format, so storing all layer and vector-based information alongside the pixel values. When you then load a native Fireworks PNG file into Flash you are presented with a dialog in which you can choose to import the image as a single flattened bitmap or, if not, you can choose whether the layered structure of the file should be maintained and whether vector objects and/or text should be rasterized or kept editable.
Flash works hand in hand with Fireworks’ PNG files.
This is extremely powerful. Bring in the native PNG file that I used to create the selectively compressed JPEG sample file, for example, and Flash can import the text and shapes separately from the background photo - and keep them fully editable. You can then set the JPEG quality for the background while the text and shapes are output to SWF as pin-sharp vectors. In other words you get the best of all worlds in terms of ongoing editability, output quality and file size. For even more advanced Fireworks’ images the integration with Flash is even more impressive, for example rollover buttons are automatically converted into easily editable, multi-frame button symbols!
Now we understand the bitmap import/export process and the best strategy to take, but what can we do with our image once it appears on the Stage? Look in the main Property Inspector and it looks like the answer is: not much. You can precisely set the image’s height and width and the co-ordinates of its top left corner but otherwise there are just two commands: one to Swap in a replacement bitmap and another to Edit the file in an external editor (most obviously Fireworks). In fact you can gain a little bit more power than this by selecting the Free Transform tool (Q) which, as well as enabling interactive positioning and sizing, also lets you rotate and skew the image.
Of these options sizing is the most obviously and regularly useful - but be careful. Bring in an image and size it down to fit into the layout and you would probably expect Flash to automatically downsample the image on export to ensure that file sizes are kept to a minimum. It doesn’t. Whatever size you use the imported bitmap at, the file size of the exported SWF version remains the same. In other words don’t downsize an imported bitmap within Flash but rather open it into your external editor and downsize it there, or ideally get it right on import. The positive side to this is that if you increase the size of the imported bitmap, the SWF file size doesn’t also increase. And because Flash automatically anti-aliases bitmaps (you can switch this off via the Library panel’s Properties dialog’s Smoothing option) you can often get away with using the photo larger than God intended so squeezing just a bit more bang from your bytes.
Ultimately though there’s only so far that you can scale a bitmap before the quality deteriorates unacceptably. Of course that’s not true of mathematically defined vectors which stay pin-sharp whatever their size. So why not convert your bitmap to vectors? Amazingly, Flash lets you do just this with its Modify>Bitmap>Trace Bitmap command. Here you can set the colour threshold, minimum area, curve fit and corner threshold and Flash breaks down the bitmap accordingly into dozens, hundreds even thousands of interlocking coloured vector shapes.
Tracing your bitmaps can produce stylized and efficient vector results.
Of course what matters is the results, both in terms of quality and file size, and these vary dramatically depending on the original image and the trace settings. With the sample photographic image that I used earlier, for example, using the default settings produced a vector image that looked remarkably like the original photo and with an output file size of 70KB – around 20% smaller than the equivalent default JPEG output and fully scalable (and theoretically editable if you don’t mind dealing with hundreds of slivers of image). Increasing the threshold and minimum area I produced a more stylized version of the image that was still instantly recognizable and in many ways more attractive and eye-catching than the original and, at just 20K, around a quarter of the size of the default JPEG output!
There’s no doubt that Flash is better suited to dealing with vectors than with pixels and the Trace capability is a brilliant way of bridging the two worlds, especially when it comes to dealing with typical GIF-style images with their flat areas of colour. Ultimately though there’s no sensible replacement for bitmap handling when you want to include true photographic images (you can trace down to the individual pixel level but the resulting vector data ends up much bigger than the original bitmap ie 250K for my sample image).
If you do stick with bitmaps, Flash has another surprising trick up its sleeve in the form of the Modify menu’s Break Apart command ( Ctrl+B) which works rather like a bitmap-based version of the Trace command, “separating the pixels in the image into discrete areas that can be selected and modified separately”. When I first came across the Break Apart command I was baffled as to what use it could sensibly be put. At first I thought its main use must be for cropping as, once broken apart, you can use the SubSelection tool (A) to select and reposition the corners of the bitmap. However the Bandwidth Profiler in the Test Movie command (Ctrl + Enter) revealed that the file size didn’t decrease so cropping is another task for your external editor.
It’s in combination with Flash’s select tools that the Break Apart command begins to make sense. Using the Lasso tool (L) you can pick out elements of the broken apart original and then handle these separately. You can even use the Lasso’s Magic Wand option to select areas automatically based on colour similarity – handy, for example, for deleting an unwanted flat background. In short the Break Apart capability is part of Flash’s campaign to break away from boring rectangular photos and to fully integrate bitmap objects into your designs. Having said this, it’s again worth pointing out that the bitmap’s entire pixel data ends up in the output SWF even if you end up using only a small section of it, so it’s generally better to prepare your bitmap objects in advance unless you’re planning on using elements alongside the original.
The Break Apart command has one other unarguable benefit. Using the EyeDropper tool (I) you can load the broken-apart bitmap as a fill and apply it to any object with the Paint Bucket tool (K). This is particularly useful as, if the object is bigger than the original bitmap, the fill is automatically tiled. You can also use the Fill Transform tool (F) to quickly resize, rotate and skew the resulting tiles. What really makes this feature ideal for Flash work becomes apparent when you test the movie and discover that no matter how many times the bitmap tile is repeated the file size of the published SWF remains the same! This is fantastic for squeezing the maximum impact from your bitmap bytes and it looks like it’s time to dig out those seamless tiles we explored in issue 118.
So what exactly is going on? As we’ve explored Flash’s bitmap handling we’ve resized an imported bitmap up and down, picked out elements from the original and produce tiled fills of any size and in each case the output file size has remained exactly the same (give or take the odd byte). There’s only one possible answer: Flash is embedding a single copy of the original bitmap (or the exported optimized version of it) in the SWF and then simply referencing it as needed. The proof is simple. If we open the Library, we can drag multiple copies of the imported bitmap onto the Stage and then Test Movie to check file sizes. The file size is unaffected by the number of copies.
This is excellent news. Say we want to produce a seascape. We can simply drag on multiple copies of an imported seagull photo object and resize, flip, skew and rotate the instances to make each seagull slightly different. Thinking laterally we can import two small and simple textured PNG files with varying transparency alpha channels and then layer and transform them and combine them together to build up believable clouds and waves. Overlay the resulting groups over two large vector shapes filled with solid colour or gradients to represent the sky and sea and the varying transparency of the clouds and waves make them seem more believable than vectors ever could.
Understand Flash’s bitmap handling and you can produce high-impact low-bandwidth images.
Using other tricks that we’ve learned we can squeeze the output file size even harder. We can use the main seagull image slightly bigger than its resolution would suggest and lower its JPEG output quality setting. We can lower it even further for the wave and cloud images as these have no detail that will be missed. We can even drop one of these bitmaps entirely, breaking apart the other and using elements from it to build up both waves and clouds. Or we can turn this abstract image into a fill tile with which we can simply paint on the waves and clouds. Working in this way we can produce a near photo-realistic composition of any size and the resulting SWF size will be little bigger than the total size of the two heavily-compressed bitmap elements!
There’s just one thing holding us back. By rotating, resizing, flipping and skewing we can make each version of our imported bitmaps slightly different but each instance’s pixel data, its defining colour, remains the same. And with no in-built bitmap editing or filtering capabilities it looks like there’s not a lot we can do about it. However Flash has one final trick up its sleeve. If you use the Modify > Convert to Symbol command (F8) and select the new symbolized version of the bitmap, the power we are looking for suddenly appears as a new Color dropdown in the Property Inspector.
By converting your bitmap to a symbol, you gain control over each instance’s colour.
Click on this and you can choose between four options: Brightness for varying the colour of the bitmap symbol between solid white and black; Opacity for varying it between fully opaque and fully transparent; Tint for adding a percentage tint of a selected colour; and Advanced for independently and simultaneously controlling the Red, Green, Blue and Alpha channels. All changes happen in real time so it’s easy to get just the colour effect you are looking for and, if you now drag multiple instances of the new bitmap symbol onto the Stage, you can subtly or dramatically change the colour for each and every instance! The creative potential this opens up is huge, but publish the movie and you’ll see that the output file size remains minimal. Excellent – this combination of high impact and low bandwidth is what Flash is all about. And that’s even before we look at the biggest opportunity that turning our bitmaps into symbols opens up: animation (I’ll cover this in a future article).
No-one could say that Flash’s unusual bitmap handling is intuitive and, at times, Macromedia seems to have gone out of its way to make the program’s surprisingly powerful capabilities even more opaque and inaccessible. In a way though, that’s probably sensible. If you don’t know what you are doing, bringing in download-heavy bitmaps can instantly defeat the whole point of Flash’s streamlined efficiency. The bottom line is that for most Flash work, vectors are the right choice. However, once you fully understand Flash’s bitmap handling, you can leverage it to produce some stunning results that simply aren’t achievable with vectors alone, which remain supremely efficient in download terms, and which help take your work into new areas both functionally and creatively.
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]