Hack 3 Simulate Old Film Grain
Create the effect of old film grain using Photoshop and Flash.
Flash's vector graphic engine has a lot going for it, but sometimes you want something a little less clean-edged. Adding an old film grain effect is one of the easiest ways to add instant atmosphere or a grungy hard edge to an otherwise crisp and clean clip. It can be combined with video colorization [Hack #8] or sepia tone colorization [Hack #13] for more dramatic and specialized effects.
The most obvious way to add a film grain effect is to add random vector lines and dots to an image. That reproduces the effect, but it doesn't really reproduce the atmosphere of old film; we still end up with a crisp rendering. In this hack we use a bitmap, which allows us to avoid the clean effect of vectors.
The hack has two parts: creating the film grain bitmap in Photoshop and then importing and using it in Flash. (We could of course use Fireworks in place of Photoshop; the principles are the same.)
Create the Film Grain Bitmap
Dirt, scratches, and dropouts add a real-world edge to a photograph. Dust, dirt, and hair or lint that has made its way onto the film or negative appear as dark patches and lines. Scratches appear as white lines.
To begin adjusting the image in Photoshop:
Figure 1-10. The newly created layer selected in Photoshop
We now need to draw our effects. Three types of noise are seen on old film:
Using the Photoshop tools (typically the Pencil and Brush tools), add the three types of effect on Layer 1. In Figure 1-11, I have created small dots to the left, large patches in the middle, and scratches to the right. I have also created hairlines at the top and bottom.
Figure 1-11. Simulated imperfections in Photoshop
Using Photoshop's Eraser tool with a medium opacity, fade some of your pixels. On real film, deep scratches and other effects appear white, but many imperfections affect the film surface only partially, and this is what we are simulating in Figure 1-12.
Figure 1-12. Simulating shallow scratches
Although we have used only white, many effects on old film are black, so we also need to simulate those:
You should end up with something like the image shown in Figure 1-13 (the checkerboard background is Photoshop's way of representing zero alpha, or no pixels).
Figure 1-13. Simulating drop outs
Save the image as a PNG file. Do not optimize it for the Web in any way.
Many designers optimize their graphics at this point, given that they are about to be loaded into a web design package (Flash). There is really no need to do so; leaving the optimization until the point you create the SWF in Flash always gives you more flexibility.
For example, if the client decides she wants a high-bandwidth version of the site, you simply change the bitmap export settings in Flash. If you had optimized your bitmaps before importing them into Flash, you would have to go to Photoshop and reexport the images at the new setting. Then, you would have to swap all instances of the old bitmap on the Flash timeline for the new one. Obviously, then, importing full-quality bitmaps into Flash, and letting Flash optimize them, can be a real time-saver compared to the alternatives. For those who prefer working in Fireworks, its integration with Flash (i.e., its launch and edit feature) can also speed your workflow.
Using a Bitmap in Flash
Once you've exported the bitmap as a PNG file from Photoshop, you still need to use it in Flash:
Figure 1-14. Bitmap properties in the Flash Library
Drag the bitmap onto the Stage, then press F8 (ModifyConvert to Symbol) and convert the bitmap into a movie clip symbol named grain.
All you have to do now is overlay a quick-moving version of our movie clip onto a video, bitmap, or vector animation. In Figure 1-15, I have overlain it over a static image, making the image appear as if it is a section of video.
Figure 1-15. Simulating old video, steps 1 through 3
I have also used a mask to hide areas of the grain clip that don't appear over the image. The final effect is shown in Figure 1-16 (or take a look at grain.fla, which is downloadable from this book's web site).
Figure 1-16. Using a mask to complete the effect
Not only can this technique add interest to a section of video that isn't doing much, it can also: