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:

Open Photoshop.
Press D to reset to the default background and foreground colors.
Press X to switch background and foreground colors. This will give you a background color of black and a foreground color of white.
Create a new Photoshop file called grain.psd using FileNew. Select a bitmap size that is longer than it is wide. I created a file 800 400 pixels for demonstration purposes, but you can go much smaller (typically 400 200).
Check the Background Color option in the Contents section of the New Document dialog box, as shown in Figure 1-9. This creates a rectangular black canvas.

Figure 1-9. Setting the Background Color option in Photoshop
Add a new layer using the Create a New Layer icon at the bottom of the Layers tab. We will be drawing only on the new layer, so ensure Layer 1 is always selected in the Layers tab, as shown in Figure 1-10.

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:

Hairlines: Hairlines are caused by dark strands in the film.
Dots and patches: Dark dots are caused by specks of dirt or other material on the film, and light dots are caused by scratches or dropouts in the film.
Scratches: These are caused by scratches in the film that erase part of the film image.

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:

Select some areas of your white pixels using Photoshop's Selection tool.
Invert the selection using ImageAdjustmentsInvert. Although your selected pixels will seem to disappear, this is because you are creating black pixels on a black background; they are still there, you just can't see them.
Delete the background layer (click-drag it in the Layers tab, and release it over the trashcan icon at the bottom of the tab).

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:

Import the PNG file into Flash using FileImportImport to Library.
Select the bitmap in the Library.
Right-click (Windows) or -click (Mac) in the Library panel, and select Properties from the context menu that appears (also known as the pop-up Options menu).
Change the Bitmap Properties, as shown in Figure 1-14: select a low JPEG compression ratio and remove smoothing (Flash handles bitmaps faster if you disable smoothing).

Figure 1-14. Bitmap properties in the Flash Library

Note that we have created an image that has both JPEG compression and an alpha channel! You cannot have a JPEG image with an associated alpha channel as a standalone file, but Flash doesn't seem to mind, which is very useful to know when you want to overlay Flash vectors with a bitmap.

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

Final Thoughts

Not only can this technique add interest to a section of video that isn't doing much, it can also:

Hide imperfections in the video (such as pixelation caused by high compression rates).
Give movement to static images, making them appear as if they are a video clip.
Hide discontinuities. If you are mixing video and still images (such as a main video section and vector-based opening or closing titles), you can hide this by adding a grain effect over the whole production.